This video attempts to show and explain aspects of Information Design and Data Visualisation as explored by the Postgraduate Certificate and Diploma Design for Visual Communication courses at the London College of Communication. The purpose of designing the visual representations of information is to make the communication more accessible, understandable and useable. This often means dealing with complexity and attempting to clarify meaning. It could be said that information is dead until it is read. A balance between clear communication and a visually engaging design needs to be struck.
Tagged: Edward Tufte Toggle Comment Threads | Keyboard Shortcuts
Transcript from the ‘Visual Language and Grammar: Squares’ movie
Welcome to the second episode of Visual Language and Grammar. In part two we are going to be looking at squares and how through use of colour, scale, structure and cropping we can alter our visual perception.
To structure these exercises we’ll be using a square measuring 150mm subdivided into 15 units of 10mm
In this exercise you’ll need a grey square of 150mm. Two black squares measuring 50mm and two white squares measuring 50mm. The effect of laying the white square over the black is that the white square appears to be floating above a black hole. Our visual perception is of three dimensional space on what Edward Tufte calls ‘the flatlands of the glowing rectangle’ which is your screen. If we start with a white square and overlay a black square our perception is that there is a light glowing behind the black square. Here’s that exercise again in full.
For this exercise you will need a 150mm grey square, a 50mm black square, a 50mm white square and two 30mm yellow squares. The yellow on the black is more visible than on the white. This is because of the minimal contrast between the yellow and the white background. We will repeat the first part of the exercise again, grey square, black square, white square, but now with two 30mm blue squares. The effect is the opposite to that of the yellow squares. There is very little contrast between the blue and the black background but increased contrast when on the white background.
Colour and readability
This is an important point when considering visibility of graphics and readability of typography. Yellow on white not so readable, Blue on white more readable. Blue on black not very readable, yellow on black very readable. Hey guys chill out, there is a happy medium where blue and yellow can co-exist in harmony on green. Even the crickets like it.
Gestalt Theory: The Principle of Continuity
We interrupt the broadcast to bring you an official warning. If you take two square and overlay them, although the eye can’t see the continuing edges, it will make sense of the situation and see the resulting image as two squares one on top of the other. The brain helps simplify visual messages. We don’t suddenly perceive the overlaying squares as a new 8 sided object. This is know as Gestalt theory and is the principle of continuity.
Exercise Three: Random Squares
For the purpose of health and safety can you now stand back from the screen. I’ll be throwing some sharp edged squares on screen and those corners could have your eye out. You going to need a 60mm square, a 90mm square and a 30 mm square. Now arrange the squares on the 15 unit grid we’ve been using. Do this randomly disregarding scale.
Exercise Four: Squares and Scale
Let’s consider scale. Small to large. This is almost like digital smoke. Again small to large. This is like the square is advancing towards us. Large to small. And the square is walking away from us. Again large to small. This is like a tornado spiraling down.
Exercise Five: Freeform Compositions
Try some dynamic freeform compositions using black and white squares proportioned to the grid. Consider various techniques such as overlapping or altering the proportions between black and white areas.
Exercise Six: Cropping Squares
Taking our 15 unit grid divide it into three vertically and horizontally. Threes into 15 makes 3 divisions of 5 units each. Crop black rectangles to different sizes and place them within the individual squares of the 3×3 structure. Consider whether the square diminishes progressively and what the developing relationship between each square is. The visual communication course I ran had students from all round the world. Hi guys! One student questioned my assumption of reading left to right and top to bottom in this exercise. In recognition of this I dedicate this next version to the students I’ve had the good fortune to teach. For this next one, I’m pressing the randomiser button.
When making your compositions look above and below and from side to side to see whether there are significant alignments occurring. I think it’s important there are but hey that’s just my theory. Oh no! See you next time!
An interface is the point at which two things meet and interact. It provides a bridge between the user and an experience. The term derives from phrases such as ‘Human Computer Interface’ and ‘Graphical User Interface’. Bob Cotton describes the act of interfacing as ‘being able to control machines by communicating with them, and receiving feedback from them’. We encounter screen-based interfaces when we use information kiosks, DVDs or purchase tickets from a machine. We interface with cookers, washing machines, videos, HI-FI systems and our cars. David Fisher of product design company Seymour Powell admitted at the D&AD Xchange 2009 that he had to get an expert in to explain how to operate his latest Hi-Fi system. Most of us would expect to be able to use products without sitting an exam or reading a manual. Non-technological experiences can also involve interactions with an interface. A book is an interface between the user and the ideas it contains. Interfaces allow the user to interpret information they are confronted with. We are familiar with operating machines through buttons, sliders and switches; we follow directional signs and stop when we see a red light. These ‘hard’ devices provide the conceptual models or metaphors for ‘soft’ computer interfaces. Virtual onscreen handsets visually replicate physical handsets.
Mapping and interfaces
Switches, knobs and buttons on interfaces provide designers with a particular conundrum. Minimalism and uniformity seem to drive design aesthetics. To make operating devices unobtrusive the design approach is normally to minimise their size; make them of uniform appearance; and organise them in rows. This results in switches that look the same in close proximity to each other but having separate functions. The latitude for error is therefore increased. The hotplates on a cooker’s hob are operated by separate controls. If the hotplates are top left, top right, bottom left and bottom right, it makes sense to repeat this visual pattern with the controls. Often they don’t and a poor interaction experience results. It is common to observe people switching on and off banks of switches hoping that eventually, like cracking a safe, they will get the right combination. The illustration below is of my cooker’s hob. I always turn the top knob on expecting the top left hotplate to come on, as you can see it actually operates the top right. From this can you work out the relationship of the controls to the plates they control? Which one turns on which plate?
Most people tend to structure their lives with everything carefully positioned to facilitate memory. Whilst working at Xerox in 1983, Thomas Malone wrote an influential report entitled ‘How do people organise their desks: implications for designing office automation systems’. His studies of the importance of physical organisation are often cited as influential to the development of the desktop metaphor of computing interface systems. Malone wrote: ‘Many people organise their lives in the world, creating a pile here, a pile there, each indicating some activity to be done, some event in progress. Probably everyone uses such a strategy to some extent. Look around you at the variety of ways people structure their rooms and desks. Many styles of organisation are possible, but the physical arrangement and visibility of the items frequently convey information about relative importance. Want to do your friends a nasty turn? Do them a favour – clean up their desks or rooms. Do this to some people and you can completely destroy their ability to function’.
The Apple Macintosh computer uses a desktop metaphor as its interface. It provides the familiar concept of a desk on which documents and files can be organised into folders or printed out. Recognisable icons connect functions to actions; placing a file in the trash and emptying the bin will dispose of your file.
Anatomy of an interface
The design of a computer interface will determine its appearance and functionality. An interface comprises of: windows, icons, menus, tools, navigation devices, buttons, sliders, check boxes, dialogue boxes, alerting messages, help documentation, scrolling mechanisms, click-able items, rulers, palettes, key commands, and feedback devices. The pointer or cursor will often change shape to indicate specific functions. Care needs to be taken with the amount of onscreen graphics. Information design expert, Edward Tufte advises us to reduce the amount of screen admin debris and clutter as they provide barricades to communication.
The tools required for interaction with a computer are: a screen, keyboard, mouse or track pad. There are rules of engagement such as touch screen interaction, voice commands, typing and clicking. Windows 7 is likely to come with touch screen capabilities, however developers may be assuming that everyone has the capability to use human finger touch screens. Many groups are calling for greater voice activation tools.
Usability and comprehension of an interface will be determined by: the terminology used; how functions are accessed and actioned; and the relationship between the various levels of operation. The surface appearance of the interface for many users is key to being able to operate within the system. Interfaces are expected to be user-friendly and understandable not only within and throughout a particular software programme but also as a standard across different programmes.
An interface introduces and provides an overview of the contents of the information that will be encountered. It also provides the means by which information can be navigated. An interface should facilitate an engagement with the content so that the user can interact with the information and gain knowledge. Information design provides the service by which the user is given access and connected to their desired information. People such as Ben Shneiderman working at the University of Maryland have been creating data visualisations dealing with the presentation of complex data through accessible interfaces. Smart Money’s Map of the Market and Film Finder are two examples.
The function of onscreen typography is to provide a connection with deeper levels of information and experience. It is not primarily concerned with mimicking a print-related aesthetic where the nuances of typographic style may not be of the highest priority to the reader. Hamish Muir has suggested that much of what is designed for the digital experience is not much more than print behind glass. This questions the notion of real-world metaphors and whether we should be designing a new visual language for screen interactions. Oliver Reichenstein suggests that we ‘treat text as the user interface’.
The design of interfaces requires an understanding of information management and human perception. The information designer organises information and provides the navigational tools by which to view information in the desired sequence a user requires.
Access to information
Access to clear, accurate and comprehensible information is central to most users requirements. Interfaces that allow rapid navigation to information pertinent to a user’s request place those sites at an advantage. Interfaces such as those designed for Google, Amazon, Adobe or E-bay have proven popular with users. Conversely, as John Heskett states in ‘Toothpicks and logos’, ‘…virtuoso visual effects are useless if the ability of users to take action is not taken into account’.
Designing Interactions, Bill Moggridge
Interface, Gui Bonsiepe
Experience Design, Nathan Shedroff
The Design of Everyday Things, Don Norman
What is Interaction? Hugh Dubberly, Paul Pangaro and Usman Haque
Tony Pritchard, Mark Horgan, and Claudio are discussing. Toggle Comments
In my previous posts on information design I have given my personal definition and outlined a possible historical timeline. In this post I discuss the methods of organising information.
In the book Information Architects, Richard Saul Wurman proposes that there are five main ways of organising information. To facilitate easy memory of this system he devised the acronym LATCH. L is for Location: maps organise information so that locations may be perceived by their geographical relationship to each other. A represents Alphabet: dictionaries, encyclopaedias and telephone directories use this system to organise words, concepts and names. T is for Time: museums often organise their exhibitions chronologically using timelines. C represents Category: this is a method often employed by department stores and supermarkets. H is for Hierarchy: hierarchy is a value system that places things in relative importance to one another. The image below is Wim Crouwel’s radical redesign of the Dutch telephone directory. The number comes first followed by the surname making for easy referencing. This image is from: http://www.2×4.org/_txt/reading_5.html
In his essay ‘Information Interaction Design: A Unified Field Theory of Design’, Nathan Shedroff suggests that there are seven ways to organise anything: alphabet, location, time, continuum, number, category and randomness. Continuum and number extends Wurman’s notion of hierarchy with randomness a proposed addition. Numbering systems such as the Dewey decimal approach is primarily a method of strengthening the hierarchical structure of headings. Top ten numerical lists are another method of indicating the hierarchical value of things within a continuum. Shedroff suggests that randomness be included as a viable method of organising information. A preconceived pattern of information might not always be a desirable outcome. Allowing the individual user to identify their own sense of order within information may on occasion be more beneficial to them. If a challenge is involved, for example an interactive device presenting options within an exhibition environment or a game, then a clear organisation of information might defeat the purpose.
The transformation of data into a meaningful form begins with the selection and analysis of the relevant data required to perform a communication task. How things are organised effect the way they are perceived. Testing the alternative methods of organising data is a necessary prerequisite to the design of information. What to highlight, and how something is to be retrieved, will often be key in determining the most suitable and effective method of organisation. If you wished to travel between one location and another, a map rather than an alphabetic index would be the most appropriate form of organising the information.
A location is a particular place or position, often expressed in terms of co-ordinates on a map. A map is a diagrammatic representation of a physical area showing the relationship of one thing to another. A map guides a reader in travelling from A to B, aiding navigation between points on the map. Maps usually, although not always, transcribe the real world at a reduced scale. A pictorial language has evolved to notate physical reality onto what Edward Tufte describes as the ‘flatlands’ of print. Maps can be used to represent social, physical, political and economic divisions. The writer William Owen has said that ‘maps give their makers the power to define the territory in their terms and write a singular vision onto the landscape’. Maps purport to be a reliable, accurate and true representation of the world and influence our perception of reality. The north orientation of maps is a convention that has been followed by cartographers since its inception by Ptolemy. Underground maps tend to organise stations in a modular, diagrammatic form rather than how they actually appear geographically. Paul Mijksenaar in his book Visual Function observes that ‘when reality is highly schematised, the link with that reality is quickly lost’. A research group at Delft University embarked on a study of the London Underground map. They proposed a compromise alternative that involved combining the strengths of different concepts. The Delft model rendered the central London area topographically and included key landmarks that enabled visitors to relate to the reality of what lay above them. Outer London remained represented diagrammatically as most visitors would travel through these outlying areas underground to get to the central London attractions. The map below was produced at Delft University in 1983 by Paul Mijksenaar. The image is from: http://rodcorp.typepad.com/photos/variousthings/mijksenaar_delft_tube2_smal.html
The alphabet is an arbitrary sequence of symbols that is a learnt convention, which has been taught and reinforced through our lives. Most books have an alphabetic index. Often we know what we are looking for but don’t know where to find it. An alphabetic index provides us with a reference for locating the information we are seeking. Websites with dense information might equally employ an alphabetic indexing system to enable access to information without having to scroll around pages or following endless links between pages. Alphabetic indexing isn’t always the most appropriate method of organising information as there are many situations where the initial letter of a word has no particular significance. Occasionally ergonomics or mechanical requirements are factors that override the proposed LATCH system. Most people are familiar with the traditional layout of a qwerty keyboard. Charles Latham Sholes established this standard in 1867. Why aren’t the letters organised alphabetically? To understand the seemingly random arrangement of letters one must examine the evolution of the keyboard. The mechanical operation of the original keyboard required a key to be pressed down which operated a lever containing the letter to move up and make contact with a carbon impregnated ribbon which printed the letter on a piece of paper. With the original configuration of letters the levers would collide and become jammed together when an operator was typing at a fast speed. The solution was to move letters that were commonly typed in succession further apart, for example the letters ’i’ and ‘e’ are common pairs. Although modern keyboards do not face the same mechanical problems as the earlier models, the qwerty convention still remains in operation today. There have been many attempts to reorganise the keyboard but none of the improvements have warranted such a revolution. The layout of a type case used in traditional letterpress printing was not by alphabet. The position and size of each compartment related to the frequency of use in setting and the ease at which a hand had access to the type. Ergonomic human factors in this case decreed the resulting organisation of type in cases.
Time as a method of organising information is used when information is presented in chronological order for example in travel timetables, historic timelines, family trees, cooking instructions, television guides, calendars and diaries.
Categorisation allows things that share similar properties and attributes to be grouped together. Taxonomy is a branch of science that is concerned with classification. Typologies are classifications based on types of things, for example types of dogs. Department stores commonly use categorisation as a method, for example one store may have a shoe department, food department, toys department and sports department. Within each of these departments one can find sub-categorisation, for example within a food department you have a fruit and vegetable section, a soup section, a meat section, a drinks section, and so on.
These systems organise or order things by rank or importance, for example highest to lowest, tallest to shortest, fastest to slowest and biggest to smallest. Rating systems place things in a hierarchy. We consult reviews of movies or musical CDs to ascertain how critics rate them. Hotel experiences are rated by stars and depending on our budget we can choose a four star or a two star experience. Our educational progress is ranked in terms of percentages and grades.
Selecting an appropriate method
The Vietnam War Memorial in Washington DC contains nearly 60,000 names of the US military personnel who died in the conflict inscribed on two long, highly polished, black granite walls. The walls increase in height from one foot to ten feet from the start to the centre of the memorial where they meet as a corner. The names of the men and women who lost their lives are arranged chronologically. The changing height of the wall represents the death toll as it rose, peaked and then declined as the war came to an end. The original proposal was to have the names organised alphabetically. This would have helped in finding a particular person, however it might have depersonalised the individual’s life and their family’s sense of loss – as Tufte comments: ‘in a list of John Smith’s, which one is yours?’ An alphabetic organisation would have diminished the emotional power of the monument. Categorisation by rank or function would equally reduce the importance of individual life. The physical form of this memorial is directly linked to the message it is conveying. The structure of the wall and the information it contains locates those who died with those they died with. Any other organisation would have altered the meaning and form of the memorial. The image below is from http://www.visitingdc.com/memorial/vietnam-memorial-picture.htm
Often more than one method of organising information is employed for the same information. Large department stores organise their products by categories, but they may also provide store directories that list items both alphabetically and by location. If you know what you are looking for and want to locate it with ease an alphabetic directory is most useful. If you wish to compare a range of items within a specific category (for example vacuum cleaners) then geographical location is of more benefit. Music stores organise music by category first for example Soul, Jazz, Classical or Pop and then alphabetically by artist or group. Book indexes will often have multiple categories such as by subject or by people listed alphabetically. Websites offer the opportunity to view information by different categories for example items might be listed by price and then by category or even by a combination of both within a category. Very quickly you can view all categories and then subcategories, the information reconfigures depending on your choices. The ability to cross-reference information allows the viewer flexibility and richer contexts.
The Periodic Table
Dmitri Ivanovich Mendeleyev is credited with devising the arrangement of all known elements into the Periodic Table. Elements had been grouped in two ways previously – either by their atomic weight (hierarchy) or by common properties such as metals or gases (category). Mendeleyev’s discovery was that these two methods could be combined in one table. It has been suggested that Mendeleyev was inspired by the game of patience, in which cards are arranged horizontally in suits and vertically by descending number. Using this concept he arranged the elements into horizontal rows called periods and vertical rows called groups. This visual display of information demonstrated two sets of relationships depending on whether one was reading the table up and down or from side to side. Elements are organised vertically to express chemicals with similar properties for example metals sit one on top of each other. The horizontal rows are organised by the number of protons in their nuclei, known as the atomic number. Hydrogen has one proton and therefore has an atomic number of one and is placed first in the top left corner. Mendeleyev’s invention allows the relationship between elements to be understood through visual means. In the book ‘A Short History of Nearly Everything’, Bill Bryson describes the Periodic Table as ‘a thing of beauty in the abstract, but for chemists it established an immediate orderliness and clarity that can hardly be overstated’. In the view of Robert E Krebs who wrote ‘The History and Use of Our Earth’s Chemical Elements’ the Periodic Table is ‘the most elegant organisational chart ever devised’. Medeleyev’s scheme was designed to accommodate new elements when they were found. The image below is from: http://knol.google.com/k/richard-pattison/periodic-table-of-the-elements/1hlwuru0osiar/2#
In the book ‘Species of Spaces and Other Pieces’ Georges Perec discusses the many ways in which humans inhabit and organise space. Perec has written about ‘…the Art and Manner of Arranging One’s Books’. He surmises that a dual problem arises above and beyond the acquisition of a certain quantity of books. There is the dilemma of space to house the collection followed by a means of ordering them. When the quantity of books is so vast how is one to lay one’s hands on a desired volume at will? The solution to the problem begins by making the books visible through the organisation, side-by-side, on bookshelves that eventually become a library. Books might be categorised by room and the function of the room eg cookery books could go in the kitchen. Most books, however, do not necessarily belong to a specific room. Perec suggests that unless one is adopting an anarchic approach there are a number of methods of arranging books. He suggests the following are possible schemes: alphabetically; country of origin; colour; date of acquisition; date of publication; format or size; genre; historical periods; language; priority for future reading; styles of binding; or by series. Perec concludes that none of these systems are in themselves ideal and that most of us resort to a combination of methods which lead to highly personal and unique classifications. In our quest for the ultimate and complete organisational method, Perec remarks that ‘we oscillate between the illusion of perfection and the vertigo of the unattainable’. The world is too complex for simplistic categorisation but this won’t suppress our need to understand through classification. There is very little that can’t be listed, the books of various world records pay testament to this. And if all fails we can always classify under ‘miscellaneous’. The image below is from: http://www.amazon.co.uk/gp/product/0140189866/ref=sib_rdr_dp