Wayfinding

Like a story, all navigation has a beginning, middle and end.

Engaging in any new environment – a report, a website, a transport terminal - people need to feel confident that they know where they are and where they are going. Using signposting to connect people to a real or virtual place gives them a sense of control over their immediate environment.

Good wayfinding makes a difference
Successful wayfinding projects identify key decision points along a route and provide signage or pointers so that the traveller can predict what lies ahead and make informed decisions.

By signposting clear routes through a space using designs that are in sympathy with the environment, you create easy to follow paths for the traveller to follow. Places that have some sort of visual context, one that provides additional structured meaning and functionality to directional signage, delivers a more enjoyable (and informative) user experience.

Consistency of language is important, especially if the traveller may engage with signage at any point in the system. And the sequence in which the traveller encounters information, and how specific that information is, is key.

Decisions, decisions...
First of all you need to know where you are starting from – a contents page or homepage; perhaps a car park or a plaza. Secondly, you want to know the general direction of travel to your primary destination. As you get closer, the signed information becomes more location specific and there are perhaps options for secondary destinations within the immediate vicinity – for example boxouts or features in a publication; cafes or toilets in a mall.

Thinking about these decision points – the points in the journey where a traveller will have questions, what sort of questions they will be and how the questions might be answered effectively – provides a structured sequence in which travellers encounter a seamless experience from the start of their journey to the finish.

Some decision point solutions adopt a zonal system, for example station signage with generic signs in the outer zone and more specific platform information in the inner zone. Other solutions use a point-to-point system, for example trails or cycle routes where each sign hands off to the next.

But too many signs can create confusion. Minimise the decisions your traveller has to make by sticking to the 7 +/-2 magic number (and always ask the question of whether a sign is in fact necessary at all).

Legible London street sign
© TfL

Legible London
For example, the Legible London street signs and maps pilot is aimed at helping people find their way across London on foot. The sign system replaces existing maps at transport interchanges, such as bus stops and tube stations, and also appears on cycle hire docking stations.

By fixing the location in geographic space and providing local detail, alongside clear directions to destinations further afield, the wayfinding system encourages people to walk and to explore their local environment.

An additional benefit is that on average one Legible London sign replaces two pieces of redundant signage.

So whilst the setting often provides the framework for signage, the principles of wayfinding are about defining activity, ensuring a consistency of language and expressing information with character in order to create lasting connections between visitor and place.

The sound of 100,000 people chatting

Listening Post

And so to South Kensington where multimedia artist Mark Hansen and sound designer Ben Rubin have created a ‘dynamic portrait of online communication’ at the Science Museum.

Entering a darkened space, you find the work flashing and flickering as texts appear and disappear over grid of over 200 small electronic screens. There are seven ‘scenes’ and at intervals there is darkness and silence before Listening Post enters the next cycle of movement.

The sampled words and phrases are accompanied by ambient mechanical sounds. Combined, the work produces a form of mechanical poetry or music. The result presents a ‘sculpture’ of the ‘content and magnitude’ of online chatter.

"By sampling text from thousands of online forums, Listening Post produces an extraordinary snapshot of the ‘noise’ of the internet, and the viewer/listener gains a great sense of the humanity that sits behind the data. The artwork is world renowned as a masterpiece of electronic and contemporary art and a monument to the ways we find to connect with each other and express our identities online." Curatorial statement

We Feel Fine

Its a similar sort of idea to Jonathan Harris and Sep Kamvar's online project We Feel Fine, featured in the recent V&A Decode exhibition. The work comprises a database of recently posted blog entries that contain the phrase "I feel..." or "I am feeling...". In We Feel Fine, coloured blobs are assigned to emotions and the user is able to aggregate them into six structural concepts. The end result provides a snapshot of the World's feelings that can be interrogated across a range of socio-geographic data.

But whilst Listening Post has an air of industrial dystopian menace it is essentially passive. The ability to interact with the data in We Feel Fine presents a friendlier, more inclusive view of online chat.

Flatplans

Credit: Diane Parkin

In large-scale content design, such as an annual report, magazine or website, a flatplan is used to show where the intended content will fall at a document level. This ensures that there is an even spread of content throughout the publication.

Using a flatplan allows the editor to quickly see where there are clashes between similar types of article and where additional content is required (or where content may need removing).


Different levels of readership can also be established in the flatplan. Content intended for a general audience, perhaps at the section starts, and those parts for a specialist audience, perhaps placed deeper in the publication.

An appropriate structure for the different content types should be provided (using the LATCH model) to offer the viewer multiple levels of understanding in the most accessible way.

Consideration by the designer of what organisational precedents have already been set, and how the viewer might be expecting to access the information based on their previous experiences, indicates the likely choice for an appropriate editorial structure.

Using a flatplan to provide a pattern (or flow) to the communication at document level, allows information at the story level to build up to a series of ‘destinations’ within the document where decisions can be made (using the AIDA model). In laying out content, a designer should work closely with an editor to establish the flow of the material. This helps to retain the readers attention, creates interest in the subject matter and directs the reader through the information to the call to action.

This principle also works in film. To maintain interest, most films have an invisible narrative structure composed of three, five or seven acts leading to the finale. Each builds up to a ‘destination’, generally a point in the film where a main character makes a decision that alters the course of the narrative. This can be expressed as a flatplan of storyboard frames on a timeline.

[Spoiler alert] For example in Danny Boyle’s Sunshine, the key destination points are Capa’s decision to alter course to rendezvous with Icarus I; his realisation that there is an unknown person aboard Icarus II; and his escape from the airlock to detonate the Stellar bomb.

And you can apply the same narrative structural principles to books, TV, Radio, games...

Scanpaths

Our eyes don’t read in a continuous steady line, but scan for information and look for patterns in a series of rapid left to right skips and pauses, known as saccadic movement.

In order to read efficiently, you recognise word shapes. As you read, you don’t look at individual characters. Instead your eyes scan the x-heights across the word and your brain compares the shape of the word outline with words in your memory, skipping over unfamiliar wordshapes, but creating comprehension based on the context of the surrounding words.

We do this because reading each individual letter in a word would be too time-consuming. Instead the eye moves and pauses as it looks for familiar patterns along a line of text.

The point where the eye pauses is called a fixation, whilst the regressive movement between points is called a saccade. A sequence of fixations and saccades across a design is called a scanpath. (Generally speaking, the number of fixations and saccades and length of time a reader spends on them indicates the relative readability of a typeface.)

In western society, by habit we start reading top left and finish bottom right, so these two areas of the page assume special significance for placing important information. Dominant fixation points like this are known as ‘hotspots’. Placing important information at these points, for example headlines top left, or calls to action at bottom right, help in the exchange of key information.

Research indicates that the human eye has the tendency to follow the same scanpaths when encountering familiar media, so in this situation a designer can place unexpected details or incongruous imagery in the design to create new hotspots to attract the readers attention.

The practical application of this insight is that careful placement of different content types can help lead the readers eye around a page or screen, create interest and/or understanding and improve the structural hierarchy of the communication.

Type readability

The ability to read quickly and to understand what is being read depends on good typographic design reducing the effort required to comprehend the text. (It also requires good writing and copyediting, but that’s for another post.)

For readability, the choice of typeface, upper and lower case (U&lc), typesize, leading, line length, margins and paper colour and all need to be combined to produce readable copy.

For instance, most books are set using a serif font rather than sans-serif, because the serifs help the reader’s eye to rapidly scan along the lines of type on a page. This gives U&lc serif faces a high readability factor for longer passages of text.

Whilst sans-serif faces generally have a relatively low readability factor when set to longer line lengths, they have high readability factor on signage and when set in shorter line lengths. Sans-serif offers a sense of urgency, enabling the reader to scan quickly down the copy and assimilate information – a more appropriate reading experience for signs and magazines.

Common text type sizes tend to be between 9 and 12 point (depending on font) with leading set automatically by design software at around 120% of the typesize. This should always be adjusted by the designer with an appropriate amount of leading determined by the design. As a rule of thumb, for normal text, leading should be increased proportionally until around 14 point, when it should be decreased proportionally until around 18 point, after which it should be set solid (ie. 18/18pt). With larger type sizes and headlines, the leading should be further reduced to avoid creating too much space between lines.

In typesetting for legibility, the leading should never be less than the spacing between words, otherwise the readers eye is drawn down rather than across the page. However headline setting can often be set solid, or even to a minus value, without affecting readability. For longer measures, the leading might also be increased so it provides stronger definition to the line of text. As a rule of thumb, the longer the line, the greater the leading required.

In English, the line length normally contains between 50 and 80 characters for readability, resulting in an average of nine to 12 words per line. Scientific and technical papers, which are likely to contain longer words, tend to need a longer measure.

Finally, the margins around the type should allow enough white space to allow the reader’s eye to rest momentarily until it scans back to the start of the next line.

Note that glossy white paper, whilst great for images, makes text difficult to read.

So, so as long as you print on a matt paper stock, readability is governed by the designers ability to structure typeface, case, size, leading, line length and margins into a compelling design.

Type legibility

Legibility is the degree to which individual letters in a typeface can be distinguished from each other. Generally, the most legible fonts have a well-balanced proportion of form (the actual letter) and counterform or counter (the ‘holes’ in the letter). The best designed typefaces tend to have larger counter spaces, and due to their frequency of appearance in text, the most helpful aid to legibility is a generous ‘eye’ for an ‘e’ and an enclosed counter for an ‘a’.

However, for any given font size, too large a counter and corresponding x-height means too short an ascender and descender for clarity between other letters. The characters most commonly mistaken for each other are I, j, l and f and t, so the most legible typefaces need to strike the right balance between the size of the counter and x-height and size of ascender and descender.

Whilst problems of legibility can exist in the design of letterforms in individual fonts (for example lowercase Garamond h and b are easily confused, as are the capital I and lowercase l in Arial), research into typographic design for children by the University of Reading suggests that there is no intrinsic difference between the legibility of serif or sans-serif typefaces. Instead, the context in which they are used assumes greater significance.

Two well-documented experiments on the legibility of type are Emile Jamal’s 1878 demonstration that showed that the top half of a line of upper and lower case (U&lc) type is more legible than the bottom half when only half of the line is exposed, and the 1960’s London Transport tests on all caps or U&lc for bus signage. These series of experiments suggested that whilst there is no definitive proof that lower case is visually superior to all upper case, a mix of upper and lower case was more popular with the public.

This fed into the development of the UK motorway network signage when the Ministry of Transport’s Design Research Unit developed one of the most ambitious information design projects ever undertaken in Britain. In tests on signage designs, sans-serif U&lc type with a wide margin was preferred for legibility.

The result of this work suggests that it is not only the visual recognition of the letterform that is important, but also the shape of the word itself and the space that it sits in that the typographer needs to take into account when designing for legibility.

Legibility and readability

Legible type and readable type seem like synonyms, but typographically they are not the same thing.

Legibility refers to the recognition of individual letters and words, whilst readability is the clarity and speed at which content can be read and understood.

The legibility of a typeface is dependent on its design (and perversely some typefaces are deliberately designed to be illegible), whilst readability depends on the skill of the typographer in choosing a typeface and arranging the type well on the page.

One of the more common mistakes designers make is to choose a typeface designed for one purpose and use it for something else for which it is unsuitable. A classic example is the use of the display face Avant Garde as a text font. Equally, you would not use a difficult to read brush script for a fire exit sign where the meaning needs to be read and decoded quickly.

Since the introduction of the Disability Discrimination Act in the UK in 1995 and the Disability and Equality Act in 2010, typographic design needs to be inclusive of people with a wide range of visual impairments. Making sure that your type is structured to be legible and readable was always a hallmark of good design, but now it is a prerequisite.

In the next two posts I'm going to look at little deeper into some of the issues around the legibility and readability of type.