Join my next free OPEN-CLINIC!
| Print this article |
Website Navigation Design: How To Provide Clear Instructions And Directions To Your Readers
How can you help your readers find what they are looking for on your website? How can you facilitate their need to know what to click next or where to look when in search for something? Navigation instructions, or as someone calls them, interface design instructions for the user, are text-based and visual elements that can help your web visitors understand more easily what they need to click or where they can look to find what they are looking for. As such, these navigation signposts and visual directions can make a hell of a difference in converting temporary visitors into long term clients and fans. In this report you will learn what are the key basic elements you need to pay attention to, to design effective user-facing navigation instructions.
Photo credit: António Nunes
People have things they want to accomplish, whether it’s making a purchase, finding a recipe, or learning how to do something new.Inherent in many web page designs, therefore, is information to help a user perform an action.
...In addition to these types of visual cues, we often write instructions to assist users in knowing what to do next.
These instructions guide the eyes and minds of the individual to look at the appropriate place and to take the appropriate action.
In this report, Connie Malamed identifies and explains which are the most critical aspects to pay attention to when working to add or refine user navigation messages and instructions to help your online readers find what they are looking for or take a specific action.
Specifically, some of the key aspects highlighted in this report, showcase the importance of several unique factors in designing effective user navigation instructions:
- Maximizing audience targeting
- Countering information abundance
- Writing style
- Improving accessibility
- Testing relevance
Leaving nothing to chance or luck, but planning carefully how to provide sensible navigation help to readers and customers looking to complete a specific task on your website, is a valuable investment that any professional web publisher providing content, products or services beyond the typical blog, should seriously consider paying close attention to.
Here, the full report in detail:
The Small Print: Writing User Interface Instructions
by Connie Malamed
User Interface Instructions: What and What For
A person’s behavior on the web is highly goal-driven.
People have things they want to accomplish, whether it’s making a purchase, finding a recipe, or learning how to do something new.
Inherent in many web page designs, therefore, is information to help a user perform an action.
For example, if you design a button that must be clicked to reach a desired goal (e.g., placing an item in a shopping cart), then shadowing the button so it appears to be raised will help your audience understand that the shape is a clickable object.
In addition to these types of visual cues, we often write instructions to assist users in knowing what to do next.
These instructions guide the eyes and minds of the individual to look at the appropriate place and to take the appropriate action.
The Importance of Mental Models
Designing and writing the instructions that are part of the user interface is both an art and science, involving copywriting and design skills as well as an understanding of how people use mental models.
A mental model is an internal representation of how things work. It’s a broad conception of causal actions and their effects.
People apply their mental models to new situations so they don’t need to relearn everything from scratch. This helps to make us cognitively efficient.
Through experience, users develop mental models of how different types of websites work.
They learn the types of actions to take on an ecommerce site versus the types of actions that will work with a stock photo site.
People apply their mental models to new situations so they don’t need to relearn everything from scratch. This means people will apply their stereotype or mental model of similar websites to how your website works.
Why Clear User Interface Instructions Are So Important
This is one of the main reasons user interface instructions are so important.
People have an unpleasant experience when their mental models are inaccurate or incorrect. It causes:
- frustration,
- user errors and
- a failure to accomplish a goal.
A frustrated user might look for another website that’s easier to use.
Writing easy-to-understand instructions and presenting them aesthetically can ward off these types of problems.
Good instructions will guide website visitors, even if their mental models are imprecise or erroneous.
So here are some guidelines for writing user interface instructions that I’ve gleaned from years of designing online learning as well as gems from usability research.
Know Your Audience First
When you know the characteristics of your audience, you can imagine them and direct your words to them.
Unless your visitors are a savvy, homogeneous group, it’s best to assume they’ll need some guidance to achieve their goals.
Think beyond the obvious audience characteristics to consider the subtleties of how readers might perceive and react to your words.
- Will they understand idioms?
- What about humor?
Notice the example above.
The humorous instructions on the CAPTCHA form could only work with a sophisticated and experienced audience.
Inexperienced computer users and those who are not fluent in English would have no idea that "Verify you’re human" means to type the alphanumeric characters in the box.
Counter Information Abundance
Finding balance is always an issue.
When writing user interface instructions, include enough detail so users know exactly what to do, but not so much detail that it becomes difficult to process the information.
People can only process small amounts of information at one time.
You can help the situation by writing instructions in plain and simple language, which should help visitors accomplish their tasks efficiently and quickly.
Try to use short sentences when possible.
For example, this sentence could easily be broken into two: "Click the Add to Cart button, then click Check Out at the top of the screen."
This guideline goes along with the brevity advice above, but is often best to do at the end of the writing process.
At the end, you look at your writing from a different perspective. It’s easier to see which information is irrelevant, because it adds to the confusion quotient.
Deleting extraneous and superfluous details will tighten up the final copy.
In the example below, the communication could be more effective with fewer words.
There’s no need to sacrifice clarity for personality. With balance, you can have both.
Phrase Your Instructions Effectively
The task of writing accurately involves a subtle discrimination between words with similar meanings.
Usability research shows that people scan a web page rather than read it. Thus, your wording should communicate effectively while someone is on the fly and barely paying attention.
- Use words that promote clarity. "Select a date" is okay, but "Click on a date" is more accurate.
- Avoid double negatives, such as "I do not want to unsubscribe." Also,
- Stay away from jargon that some people won’t understand, like industry acronyms and technical terms.
Speaking of precision in word choice, when you look at this menu below, do you understand the difference between explore and browse?
[Note: There is some disagreement over whether "select" or "click" is more appropriate for people using assistive technologies.]
Active Vs. Passive Voice
The active voice is crisp and clean and will move people to take action.
The passive voice makes readers yawn.
Compare this sentence in both voices:
- Active - "Click the Journal link to search for an article."
- Passive - "The Journal link should be clicked when you are ready to search for an article."
How To Provide Clear Website Navigation Instructions
Designing user interface instructions can be a challenge.
You must determine where they belong in the visual and information hierarchy. Although they need to be noticed by users, they shouldn’t overpower the page. And as a design element, they must fit in well with the surrounding environment.
Bottom line: plan for instruction text during the initial phases of design.
1) Vertical Spacing
If the instructions are longer than one line, it’s important that readers know which instructions belong together.
The leading (or vertical spacing) between related sentences should be large enough to enable legibility yet small enough to show the sentences are associated.
When there are several steps, keep each step separate by increasing the line spacing. Number the instructions if they are complex or will be perceived as such.
2) Typeface
Think hard about the type as a design element.
Use a typeface and style coherent with the rest of the site design.
Consider the size of the font. The user instructions must be legible by people of all ages.
Avoid bitmapped text whenever possible so users can enlarge the text if necessary.
3) Graphics
Yep. Sometimes it’s nearly impossible to say something in words.
A graphic provides support and makes text comprehensible, as in this explanation of where to find your account number on a magazine label.
4) Text Style
It’s okay to add a little personality to your user interface instructions and system messages. It might help your visitors have a pleasant or humorous experience.
Just ensure that your between-the-lines message can never be interpreted as a put-down.
For example, the instructions below help visitors feel better. After reading the message, you don’t feel like such a loser for failing to keep passwords in a place where they can be found.
5) Accessibility
It’s important that your small print instructions can be read by people who have difficulty with small print and/or use devices to read computer screens.
Some basic accessibility guidelines for writing user interface instructions are to:
- Avoid using graphical text so it can be enlarged (discussed in #2 above);
- provide text alternatives to graphical content so it can be translated into other forms such as Braille; and
- clearly separate the instructions from the background so they can be easily seen.
In addition, use hyperlinks contextually so that they make sense if the person can’t see the screen.
For example, a link that states, "Instructions for using this form" is better than a "Click here" link.
6) Testing
Test instructions with sample audience members, people outside of your office and with no prior knowledge of what it is you are doing.
- Observe one or more people performing the task for which you’ve written instructions.
- Note any difficulties they have and revise the instructions.
- Repeat the process until people accomplish the task without problems.
Conclusion
You may be surprised at the time and effort it takes to write effective user interface instructions. Yet it might be one of the most valuable endeavors you pursue in designing a successful user interface.
Through the simplicity of comprehensible instructions, you can achieve so much - user assistance, appropriate tone and personality, and showing that you care.
Originally written by Connie Malamed for Understanding Graphics, and first published on February 1st, 2010 as The Small Print: Writing User Interface Instructions.
About Connie Malamed
Connie Malamed is the author of Visual Language For Designers: Creating Graphics That People Understand. She writes regularly at Understanding Graphics and is the principal of Connie Malamed Consulting. Connie consults, presents and writes at the intersection of cognitive psychology, visual communication and learning.
Photo credits:
The Importance of Mental Models In User Interface Design Instructions - Ktsdesign
User Interface Design Instructions: Know Your Audience First - SiliconValleyWatcher
User Interface Design Instructions: Active Vs. Passive Voice - Ronen
How To Design User Interface Instructions - Jesper Noer
Typeface - Wichita State University
Examples - Connie Malamed
Other Images - Clipart
Reference: Understanding Graphics [ Read more ]
| Print this article |
