Pictures and page layout

Using high quality illustrations and diagrams can enhance learning and assist with communication. But the illustrations and diagrams must work in harmony with text and other elements on a page. A cohesive page layout should guide readers through the content in a logical way, using the principles of alignment and symmetry.

Rows and columns effectively organize content so it is clear and cohesive. In the western world at least, we tend to read and observe content on a page from left to right and from top to bottom. If we use this theory as a starting point, we may organize our images logically, often without the need for numbers, additional labels or arrows.

Left to right and top to bottom

Below is part of a step-by-step tutorial for someone learning to use Adobe Illustrator. Three columns and two rows are vertically and horizontally aligned. The text box underneath the screen shots is unbroken, which helps guide the user from left to right rather than top to bottom. No numbers, labels or arrows are required.

© Gary Cross 2015

 The principles of alignment and symmetry are often applied in the design of clear, cohesive webpages. The “three boxes” or “five boxes” grid layout includes a central focal point, often a large image. There is a mirror line or vertical symmetry down the centre of the web page and strong vertical and horizontal alignment. I also like the simplicity and the generous use of white space, which keeps the design clean and uncluttered.

Here are two web sites that use the three boxes or five boxes grid layout.   http://www.apple.com http://www.paulsmith.co.uk

Diagrams and maps to aid navigation

We all use maps and visitor guides to orientate and navigate around museums, parks, towns, transport systems, etc. A quality map or visitor guide will assist with this orientation and navigation process. However, a poorly designed one will confuse, conflict and result in the wrong decisions in getting to a destination and how to get around. So what are the important factors when designing a map or a floor plan? A good point of reference is a design principle known as “Wayfinding” – a process of using spatial and environmental information to navigate to a destination. Wayfinding has four distinct components, namely orientation, route destination, route monitoring and destination recognition. Maps together with signage, or other visual landmarks, should be used in tandem to determine one’s location, decide the best way to go (e.g. the quickest or most interesting), monitor progress along the given route and provide an indication of the destination. Good maps or visitor guides should include necessary landmarks, clear and constant labeling and easy to follow colour schemes.

The floor plan below is part of a visitor guide to the British Museum in London. The illustration of the façade at the front of the museum gives the visitor a sense of orientation. The colour coding and numbering is used to aid navigation and route monitoring. The visitor may quickly determine where they wish to go, how they might get there and are likely to recognize the destination once they arrive there.

Floor plan illustration for the British Museum, London. Created for the Eyewitness Travel Guide to Great Britain in 2000. Illustration: Gary Cross. © Dorling Kindersley Limited, London.

Schematic maps are often designed to represent travel networks in large cities. Careful colour coding of individual lines, use of icons and clear and consistent labeling is hugely important to enable travellers to navigate through these highly complex and potentially stressful transport networks. Here are the highly effective schematic maps for two of the most complex subway systems in the world – the London Underground and the Tokyo metro.

A plan is currently being considered that would harmonize transit links within the Greater Toronto and Hamilton Area (GTHA). Transit wayfinding would be used to ensure the consistent use of signage, graphics, visual and audio cues as well as numbering and naming of stations and stops across all transit areas within the GTHA. The UK based design consultancy applied has been commissioned to undertake the project. More information on transit wayfinding can be found on the Metrolinx website.

Icons and iconic representation

Icons or pictograms help us carry out everyday tasks with greater efficiency and aid our learning. They allow us to recognize objects or concepts and enable us to better understand actions we need to perform. Well designed icons and pictograms can clearly communicate information or messages without the need for written or verbal language. They can be used universally, transcending linguistic and cultural differences. It is interesting how some iconic representations have become embedded in our psyche.

For example, the classic mercury thermometer, very rarely used these days, is still a distinctive symbol associated with measuring temperature. Similarly the padlock icon is used to depict secure webpages for online banking and the locking button on vehicle key fobs, even though the lock bares little resemblance to the actual functions.

© Gary Cross 2015

Flat design

Over the last couple of years there has been a move away from the Skeuomorphic Design style, which contains detail, realistic textures and drop shadows, to a simple 2D aesthetic. This design trend, often referred to as Flat Design, embraces simplicity, clean edges, flat colour schemes, and 2D illustrations. The style is being applied across all areas of visual design, including illustrations and infographics. Below is an infographic created recently, applying some of the elements of Flat Design.

Here are three beautiful websites and blogs that embrace Flat Design. http://www.wrist.im http://www.tectonica.co http://www.mixd.co.uk These sites successfully demonstrate that a minimalist aesthetic doesn’t need to be boring. It is a style with great visual appeal, which offers good functionality and ease of use.

How to improve instruction with the Picture Superiority Effect

Applying the principle of the Picture Superiority Effect to instruction can improve the retention and recall of information, especially for visual learners. However, it is important to integrate visuals with careful consideration and attention to detail. Visuals that conflict with the information or a message being conveyed will most likely have a negative impact, cause interference and actually inhibit recall. I have often sat through Powerpoint presentations that contain glossy stock photos that bare very little resemblance to the caption or written content on the slide. You are left thinking – what is the connection here? It is important that we are not padding out our content with pretty pictures. The purpose and function of the picture should be clearly defined at the outset. A picture should enhance the message or information being conveyed by reducing the amount of text that would otherwise have been needed. Using images and text in harmony can be applied in the creation of step-by-step instructions and tutorials.

The instruction guide below relates to one of my favourite pastimes – drinking tea. The instructions are communicated visually with use of minimal text. It could be argued that no text is required at all – an important factor if the instructions were to be used universally and transcend language barriers. The style has simplicity and embraces the principle of Ockham’s razor. Unnecessary elements have been left out to increase the overall effectiveness of the visuals. The mercury-filled thermometer, an object rarely used these days, is instantly recognizable. Each of the five steps are included in a box and aligned to provide greater clarity.

The step-by-step tutorial below was developed for a course module in model making (part of an Architecture and Spatial Design program). The task is one of several activities aimed at developing model making skills. The visuals indicate the logical order for each task and the tools that should be used. The learner is led through the tutorial using horizontal and vertical alignment (our eyes naturally move left to right and then top to bottom) without the need for numbers or arrows.

The Picture Superiority Effect and the visual learner

I am a visual learner, like 65% of the population. Yet during our learning experiences and in our everyday understanding of new concepts and information, we are often required to use auditory and written processes as the sole method of communication.    

The old saying “a picture is worth a thousand words” is generally true. However, a picture will have the greatest impact if used in harmony with words. This is known as the “Picture Superiority Effect,” a design principle that can be applied to teaching and learning, instructional design, technical writing and the creation of reference books.

© Gary Cross 2015

A reconstruction of a temple in Dendara with several cut-away sections. Created for the Eyewitness Travel Guide to Egypt in 2000. Illustration: Gary Cross. © Dorling Kindersley Limited, London.

One of my clients was publisher Dorling Kindersley, whose highly visual books were recognizable from their use of cut-away illustrations, step-by-step diagrams and photographs laid-out against a white background. Children’s illustrated reference books bring learning to life. Mathematical concepts and scientific theories can be explained with great clarity using illustrations, diagrams, pop outs and photographs. Many of us have DK books in our homes and this visual style and aesthetic was an important factor behind the publisher’s success and informed illustrated book design across the publishing industry. The principle of the Picture Superiority Effect can be applied to instruction, learning resources, technical and training manuals, and reference books. Using visual elements with smaller amounts of written content increases retention and recall of information, leads to effective communication and in turn provides a more engaging experience for the majority of learners.

The Picture Superiority Effect

We retain information much more effectively if text and images are used together (65%), as opposed to text being used alone (10%). These stats relate to memory retention after three days.

Source: http://www.huffingtonpost.com/randy-krum/the-key-to-infographic

© Gary Cross 2015

---