The web's hidden messages
Embedded Scribd iPaper - Requires Javascript and Flash Player
1st Floor, 17-21 Old Street, London EC1V 9HF
t +44 (0)20 3058 1100 f +44 (0)20 7253 6846
e jay.nicholl@makeitclear.co.uk www.makeitclear.co.uk
The web’s hidden messages – how to find the way on the web
If you were to close your eyes and point to the screen after reading this sentence, would you be able to find the Home button? Would you instinctively point to the top left or try to remember where the Home button was? What if this were another language? Could you find your way around this site in Korean? Is it possible to provide the cues that people need to make something intuitive without spelling it out literally? The answer’s yes. This white paper will demonstrate that though you may not notice the hints that help you find your way around a website, they exist; and they can be refined to create a fantastic user experience. We’ll discuss the concept of ambient findability, literacy in web navigation and the OODA loop.
Web literacy
Have you ever tried to navigate in another country without understanding the language? Before the days of handheld GPS navigation and handy translation aids it was hard. The level of security provided by the knowledge of the words “hello, goodbye, please, thank you, bread, water, toilet, male and female” could be invaluable when paired with simple questions such as “where can I find?” and “how much is?” But we could probably do without these words in most situations because of small visual hints we take for granted. There are a large number of culturally agnostic signs we pick up without realising it. If we pass a bar or restaurant, we understand what they are because we can perceive their function. If we see a lady symbol on a door we understand it is a toilet for women. What are the web equivalents?
Ambient findability
Put yourself in front of any door; where does your hand go to find the handle? To the middle of the door on the left or right hand side. It’s common sense. Likewise for the Home button on a website, you’ll find your mouse drifting towards the top left of the page or aiming for the big logo. It makes sense because of a number of things that will be discussed in greater depth later in this document. For now it is less important to understand how it works than to understand that it just does. There are tiny clues on any website – from Google to BBC and Facebook, and they’re governed by a set of unwritten rules that allow anyone with only a tiny amount of computer literacy to successfully navigate them. It’s an intuitive path – computing came of age with Windows 95, since then not much has changed...
drop down menus that enable features
There are visual cues that we can use to identify function. A magnifying glass symbol in an empty text box denotes search functions despite the fact that it could equally be considered a magnifier in other circumstances. Context helps us to identify the utility and function of certain elements of a web interface. Some elements will prompt exploration before revealing their specific use, but we must be able to identify utility before we explore function. Web literacy goes further than linguistic prompts, it is an international language of symbols and shared functionality and it is something all good web designers are versed in. Great web design uses symbols that are universal and function that is perceivable prior to interaction, based on previous experience and cultural reference points. Creative web design can utilise cues that we perceive in the real world to allow navigation of a website. Truly brilliant web design makes function the key communicator and allows all hints and contextualising information be absorbed into the periphery – which brings us to ambient findability.
fundamental navigation options
media playback & other misc. controls
That’s why when you navigate a website you expect the same rules to apply. If you’ve ever moved between operating systems you’ll appreciate that although it’s not impossible to rewire everyday actions, it can be a chore to find your way around something new just because of habits you never realised you had. Try jumping from folder management on a Mac to Windows OS or vice versa, even though there are masses of similarities – the tiniest changes can make adjusting difficult.
white paper | the web’s hidden messages
page 1
OODA
Observe, Orient, Decide, Act is the process that allows people to go from perception to action. It was originally developed to help understand performance gaps between fighter pilots in combat but has since been used to demonstrate business strategy and wayfinding principles. Note that this is a loop and not a one-way system. It allows a person or organisation to take a series of prompts (some external and some internal), process them, make a choice, and take action. It’s one of the key ingredients in mapping a website as it allows a designer to produce something that is easy to navigate, intuitive and enjoyable. It’s about getting inside the head of visitors.
OBSERVE
Implicit guidance & control Unfolding circumstances Outside information Unfolding interaction with environment
ORIENT
DECIDE
Implicit guidance & control
ACT
Cultural traditions Genetic heritage Analysis & Synthesis Feed New information Pervious experience Forward
Observations
Feed Forward
Decision
(Hypothesis)
Feed Forward
Action
(Test)
Unfolding interaction with environment Feedback Feedback
Observe
Beginning with the collection of information garnered from the environment, the Observe stage enables the internalisation of data. This stage is important because it highlights the communicative nature of a website. Visitors must be able to take in enough information from the UI to be able to carry this forward into the Orient stage of the loop. Elements such as buttons need to be clear and their direction explicit. Messaging should likewise be clear and simple to aid easy absorption. Think of it like this: if a door has no handle, how do you know it’s a door?
Decide
This stage allows a user to apply Observation in combination with Orientation to make a decision. By this stage the key interaction on the part of the website will already be complete. The decision of a user could be “I want to read the About page” or to “I want to read the blog”. This stage needs to therefore be preempted with the highlighting of utility so as to stir desire. The point to keep in mind is that this decision could equally be to leave your website, so make sure your information is designed to draw users deeper into the experience.
Orient
This is the processing stage of the loop, it requires deep involvement with a number of predictable factors, and some that will require a little imagination. Orientation is the most important part of the loop. Designers will be aware that these cues exist, but many will choose to ignore them based on a focus on client demands rather than the user. Balancing usability with brand focus will result in a well designed website – one that’s easy to navigate and relevant to users and clients. As this is the most important stage of the process, here is a breakdown of the factors to consider as part of the process: Cultural tradition – Is there a left or right bias based on literary standards? Analysis and synthesis – Have you made it clear that areas can be selected? Is there a lot of information to absorb? How are different sorts of information differentiated? New information – Are new visitors at a disadvantage? How are returning visitors made aware of new information? Previous experience – Is the site familiar to users? Are there any ideas you can “borrow” from other sites? If you want to be different, what stays recognisable? If you’re reworking an old site, is the new architecture familiar to return visitors? Genetic heritage – Are there any ability differences that need to be accounted for? Do you need to make allowances for visually impaired users such as text size adjustment?
Act
The action is to click a button, keep reading, type a search, buy a product or bounce. It’s the mechanical engagement part of the experience and therefore not particularly the most exciting part of the loop. However, consider that this stage also includes the point of the site. The purchase of a product, the consumption of media or the signing of a petition could take place here, it is therefore extremely important to make sure that action is not blocked by bad UI design, unnecessary multi-step processes, the appearance of low security levels or repetition of action. It could get in the way of your purpose and make the entire website redundant.
Getting it right
When you consider the depth of communication on a website it’s key to make sure you get the little things right because they’re the bits that take people from point A to B. All the content in the world won’t take a user through your site on its own without a series of wayfinding elements that guide them there. When we consider all of the external advertising that has taken a user to a site, why stop that guidance when they arrive? Great websites allow navigation to sink away into the margins. Make your website one that takes users on a journey with as few conscious navigational interruptions as possible and you’ll be surprised what it does for your user experience as a whole. Simpler navigation prompts deeper engagement, greater appreciation and greater utility adoption; can you ask for anything more?
white paper | the web’s hidden messages
page 2
1st Floor, 17-21 Old Street, London EC1V 9HF
t +44 (0)20 3058 1100 f +44 (0)20 7253 6846
e jay.nicholl@makeitclear.co.uk www.makeitclear.co.uk
The web’s hidden messages – how to find the way on the web
If you were to close your eyes and point to the screen after reading this sentence, would you be able to find the Home button? Would you instinctively point to the top left or try to remember where the Home button was? What if this were another language? Could you find your way around this site in Korean? Is it possible to provide the cues that people need to make something intuitive without spelling it out literally? The answer’s yes. This white paper will demonstrate that though you may not notice the hints that help you find your way around a website, they exist; and they can be refined to create a fantastic user experience. We’ll discuss the concept of ambient findability, literacy in web navigation and the OODA loop.
Web literacy
Have you ever tried to navigate in another country without understanding the language? Before the days of handheld GPS navigation and handy translation aids it was hard. The level of security provided by the knowledge of the words “hello, goodbye, please, thank you, bread, water, toilet, male and female” could be invaluable when paired with simple questions such as “where can I find?” and “how much is?” But we could probably do without these words in most situations because of small visual hints we take for granted. There are a large number of culturally agnostic signs we pick up without realising it. If we pass a bar or restaurant, we understand what they are because we can perceive their function. If we see a lady symbol on a door we understand it is a toilet for women. What are the web equivalents?
Ambient findability
Put yourself in front of any door; where does your hand go to find the handle? To the middle of the door on the left or right hand side. It’s common sense. Likewise for the Home button on a website, you’ll find your mouse drifting towards the top left of the page or aiming for the big logo. It makes sense because of a number of things that will be discussed in greater depth later in this document. For now it is less important to understand how it works than to understand that it just does. There are tiny clues on any website – from Google to BBC and Facebook, and they’re governed by a set of unwritten rules that allow anyone with only a tiny amount of computer literacy to successfully navigate them. It’s an intuitive path – computing came of age with Windows 95, since then not much has changed...
drop down menus that enable features
There are visual cues that we can use to identify function. A magnifying glass symbol in an empty text box denotes search functions despite the fact that it could equally be considered a magnifier in other circumstances. Context helps us to identify the utility and function of certain elements of a web interface. Some elements will prompt exploration before revealing their specific use, but we must be able to identify utility before we explore function. Web literacy goes further than linguistic prompts, it is an international language of symbols and shared functionality and it is something all good web designers are versed in. Great web design uses symbols that are universal and function that is perceivable prior to interaction, based on previous experience and cultural reference points. Creative web design can utilise cues that we perceive in the real world to allow navigation of a website. Truly brilliant web design makes function the key communicator and allows all hints and contextualising information be absorbed into the periphery – which brings us to ambient findability.
fundamental navigation options
media playback & other misc. controls
That’s why when you navigate a website you expect the same rules to apply. If you’ve ever moved between operating systems you’ll appreciate that although it’s not impossible to rewire everyday actions, it can be a chore to find your way around something new just because of habits you never realised you had. Try jumping from folder management on a Mac to Windows OS or vice versa, even though there are masses of similarities – the tiniest changes can make adjusting difficult.
white paper | the web’s hidden messages
page 1
OODA
Observe, Orient, Decide, Act is the process that allows people to go from perception to action. It was originally developed to help understand performance gaps between fighter pilots in combat but has since been used to demonstrate business strategy and wayfinding principles. Note that this is a loop and not a one-way system. It allows a person or organisation to take a series of prompts (some external and some internal), process them, make a choice, and take action. It’s one of the key ingredients in mapping a website as it allows a designer to produce something that is easy to navigate, intuitive and enjoyable. It’s about getting inside the head of visitors.
OBSERVE
Implicit guidance & control Unfolding circumstances Outside information Unfolding interaction with environment
ORIENT
DECIDE
Implicit guidance & control
ACT
Cultural traditions Genetic heritage Analysis & Synthesis Feed New information Pervious experience Forward
Observations
Feed Forward
Decision
(Hypothesis)
Feed Forward
Action
(Test)
Unfolding interaction with environment Feedback Feedback
Observe
Beginning with the collection of information garnered from the environment, the Observe stage enables the internalisation of data. This stage is important because it highlights the communicative nature of a website. Visitors must be able to take in enough information from the UI to be able to carry this forward into the Orient stage of the loop. Elements such as buttons need to be clear and their direction explicit. Messaging should likewise be clear and simple to aid easy absorption. Think of it like this: if a door has no handle, how do you know it’s a door?
Decide
This stage allows a user to apply Observation in combination with Orientation to make a decision. By this stage the key interaction on the part of the website will already be complete. The decision of a user could be “I want to read the About page” or to “I want to read the blog”. This stage needs to therefore be preempted with the highlighting of utility so as to stir desire. The point to keep in mind is that this decision could equally be to leave your website, so make sure your information is designed to draw users deeper into the experience.
Orient
This is the processing stage of the loop, it requires deep involvement with a number of predictable factors, and some that will require a little imagination. Orientation is the most important part of the loop. Designers will be aware that these cues exist, but many will choose to ignore them based on a focus on client demands rather than the user. Balancing usability with brand focus will result in a well designed website – one that’s easy to navigate and relevant to users and clients. As this is the most important stage of the process, here is a breakdown of the factors to consider as part of the process: Cultural tradition – Is there a left or right bias based on literary standards? Analysis and synthesis – Have you made it clear that areas can be selected? Is there a lot of information to absorb? How are different sorts of information differentiated? New information – Are new visitors at a disadvantage? How are returning visitors made aware of new information? Previous experience – Is the site familiar to users? Are there any ideas you can “borrow” from other sites? If you want to be different, what stays recognisable? If you’re reworking an old site, is the new architecture familiar to return visitors? Genetic heritage – Are there any ability differences that need to be accounted for? Do you need to make allowances for visually impaired users such as text size adjustment?
Act
The action is to click a button, keep reading, type a search, buy a product or bounce. It’s the mechanical engagement part of the experience and therefore not particularly the most exciting part of the loop. However, consider that this stage also includes the point of the site. The purchase of a product, the consumption of media or the signing of a petition could take place here, it is therefore extremely important to make sure that action is not blocked by bad UI design, unnecessary multi-step processes, the appearance of low security levels or repetition of action. It could get in the way of your purpose and make the entire website redundant.
Getting it right
When you consider the depth of communication on a website it’s key to make sure you get the little things right because they’re the bits that take people from point A to B. All the content in the world won’t take a user through your site on its own without a series of wayfinding elements that guide them there. When we consider all of the external advertising that has taken a user to a site, why stop that guidance when they arrive? Great websites allow navigation to sink away into the margins. Make your website one that takes users on a journey with as few conscious navigational interruptions as possible and you’ll be surprised what it does for your user experience as a whole. Simpler navigation prompts deeper engagement, greater appreciation and greater utility adoption; can you ask for anything more?
white paper | the web’s hidden messages
page 2
