The Blink of an Eye:

Beginners Guide to Visual Communication.

 Part 2 of 4: Learnability

We are living in an age of visual information where visual content plays a role in every part of life. As 65 percent of the population are visual learners, graphics are key to engaging our audience and promoting learning.  Whether we are providing general information on a product or service, or supplying instructional information on how to use this product or service, our ultimate goal must be to achieve optimal learnability.   

Learnability has a strong correlation with both usability and efficiency. Learnability considers how easy it is for users to accomplish what they came to do the first time they use your interface, and how many repetitions it takes for them to become efficient at that task. The fewer repetitions needed to complete a task, the more efficient your design. The more efficient your design, the easier it is for your user to take meaning and context from it. By bolstering the learnability of your content, you are making your content more memorable, more engaging, and more enjoyable to interact with. 

In this part of our 5-part guide to visual communication, we will look at the following visual communication tenets as they apply to learnability:  

• Accessibility
• Chunking
• Power Law
• Readability
• Stickiness

We are accustomed to thinking about accessibility as something that pertains to users with disabilities. However, as our understanding of learnability and engagement through good design grows, we realize that accessibility and its associated ‘accommodations’ benefit all users. Our designs and interfaces must be usable without modification by as many people of diverse abilities as possible to achieve optimal learnability.To this end, there are four key elements of accessible design:

• Perceptibility: Regardless of ambient conditions and user abilities, the design must communicate the necessary information. Use different modes and media (pictorial, verbal, etc) to present your information, providing adequate contrast between the essential information and the surrounding real estate. Maximize the legibility of your information with clear, evenly-spaced typeface (preferably san-serif font, or at least, nothing too elaborate or ornate). Differentiate your informational elements in a manner that can be easily described (making it easy to give instructions or directions using text-to-speech, voiceover, and talkback technologies). Ensure your accessibility features are compatible with as many  tools and devices used by people with sensory limitations as possible.
• Operability: You achieve operability when everyone can use your design. To avoid segregating users, provide everyone with the same means of use. This means making core website functionality available via a keyboard,  mouse, or pointer, so that users who rely on alternate controls can access them. Or providing an audio description of important visual elements. When this is not possible, ensure that you provide the nearest equivalent use, perhaps the facility to use voice command. Give the same means of ensuring privacy, security, and safety to all your users, and make your design equally appealing and engaging to everyone, irrespective of experience, literacy and ability levels. 
• Simplicity: By eliminating unnecessary complexity, we make our designs easier to understand thereby making it easier to learn and engage with the information contained within them. Always aim for consistency with user expectations and intuition, arranging information according to its importance, for example. Use progressive disclosure to present only the necessary information at any given time so that your users are not overwhelmed by information. Clearly code and label all controls and modes of usage, and provide timely feedback and prompts where necessary. Accommodate a wide range of literacy and language skills, and adapt your design to the user’s pace.
• Forgiveness: Make your design more accessible to all users by minimizing the occurrence and consequence of errors. Use only the best and most appropriate affordances and constraints. For example, provide controls that can only be used one particular way. Provide confirmations and warnings to reduce errors and include safety net features such as reversible actions and previews of element choice consequences. A nice additional forgiveness affordance is the ability to use task lists or checklists to eliminate the need to keep things in our short-term memories – your users will thank you for that one!

With its origins firmly in the field of cognitive psychology, chunking has a well established pedigree in visual communications. 

Chunking means that we break our text and multimedia content into small, bite-sized organizational units, which allows users to process, understand, and retain meaning at a higher level. Instead of presenting our users with an undifferentiated array of atomic information items, we group our information into meaningful, manageable collections. A large phone number, +18125553859, for example, can be difficult to remember unless we apply the chunking principle. Subsequently, the number +1-812-555-3859 is a lot nicer to look at and a lot easier to recall. The ultimate aim here is to create scannable, visually distinct content that fits the overall theme of your design. 

To avoid walls of intimidating text, employ the following tricks:

• Write short paragraphs, with white space to separate them to allow the reader’s eye to rest.
• User clear headings with highlighted keywords where necessary to differentiate content units.
• Use bullets and numbers to create connections with associated content.
• As always with technical writing, write short, succinct lines of text, roughly 50–75 characters long. 
• Create clear visual hierarchies, grouping related items together in a meaningful manner.
• As we have already seen with the phone number above, creating distinct groupings of letters and numbers for content such as passwords, license keys, credit-card or account numbers, phone numbers, and dates make the information more manageable.
• Formatting aids scannability and is another content chunking prop.Where users have to enter formatted data themselves, ensure that your UI auto-formats that data for them. 

Chunking multimedia content works along similar principles, as follows: 

• As we discussed in the first part of this series, the principle of Proximity dictates that we perceive content displayed close together as having a relationship to one another. This is particularly applicable to multimedia content. Use background colors, horizontal rules, and white space to distinguish between related and unrelated content. 
• Large videos can be timeline stamped and labelled to enable users to skip to the content they are interested in. 
• Tools and functional elements can often be grouped together into related chunks in application bars. 

You have probably heard about George Miller’s Magical Number 7. For the uninitiated,  George Miller was a cognitive psychologist who determined that humans can retain roughly seven chunked pieces of information in their short-term memory. This is often mistakenly believed to mean that any UX should strive to limit data chunks to just seven items.

In fact, the key takeaway here is that, yes, seven meaningful chunks is the magic number for information retention, but we should not always insist that our users retain information throughout their interaction with our UI. Recognition is crucially important, don’t force users to remember every element (chunked or otherwise), instead provide the key navigational and informational elements throughout the UI and don’t get hung up on the number 7.   

Learning curves tell us that learning operates according to an initial peak followed by a fairly sudden plateau. The power law of learning unpacks this theory further by explaining that the time it takes to perform a task decreases with every repetition of that task, and that, therefore, frequent repetition improves performance. 

The Romans said that “repetition is the mother of learning” — the more familiar we are with a piece of information, the more likely we are to remember it. Not just that, but we’ll also be faster at retrieving it from memory. Think of it like this: we can operate various programmes and pieces of technology with near muscle-memory, but we cannot (at least, I can’t) remember high school geometry because we haven’t needed to access that information in a long time. Practice makes perfect, after all!

Though we all strive for innovation and creativity in our designs, the power law of learning makes it clear that we must pay homage to consistency and user expectation. This doesn’t mean that we abandon innovation, merely that we ensure that our designs are nuanced and cognizant of user experience. Remember,  innovation is work, both for users and designers. Users must tread a new and possibly intimidating path, while designers must scaffold their UI with tooltips and progressive disclosure props. On the other hand, a website that looks familiar, with a recognizable interface will lead to a lower bounce rate. After all, the goal of every website is to convert the occasional user into a repeated user.

Ask yourself the following questions before you introduce new features or innovative elements into your design:

• Will your users really want to take the time needed to learn to navigate your new UI? If in doubt as to the answer, shelve your new UI plan, for now. 
• Is your new design much better than the old one, or more accessible than your competitors? If the answer is no, don’t bother. 
• How often will your users interact with your design? Is there sufficient time available for them to complete the repetition necessary to easily ride that learning curve? 
• Can you help your users to learn your new UI quickly, either through increased exposure or simplification of your design? If yes, go right ahead, the trade-off between a short learning curve and the long term enjoyment and therefore learnability of your design is worth the work. 

The ultimate goal of any new UI is to deliver a message in an appealing, distinctive, and non-jarring manner. We advise that you aim for what cognitive psychologists call a ‘Eustressful’ learning experience. Not all stress is bad; small amounts are actually motivating when combined with exhilaration (think of your favorite roller coaster ride). Shoot for just the right mix of consistency, innovation, and new learning to ensure your audience is at once engaged and awed by your design. 

Complex content and sentence structure makes comprehension and learnability difficult and time consuming. We have already discussed some methods of optimizing your UI learning environment (chunking, repetition, legibility) but one stand-out learning pillar we can’t ignore is readability. And while the object of achieving peak readability is the reduction of complexity, the good news is that this process is not itself a complex one. There are a number of basic tenets for readability, namely:

• Use plain language; no jargon or complex terminology or expressions. If the concept you are explaining is a complex one, take the time to break it down into manageable bites and, where possible, include supporting or pleasing graphics.
• Keep your sentences short and concise. Avoid compound sentences that include subordinate clauses and conjunctions. Break your sentences up to ensure clarity and simplicity. 
• Write for an 8th grade reading level throughout your content. This ensures accessibility and readability for a broad range of readers. 
• If your audience is more experienced or specialized, we recommend that you still tailor your content for a reading audience a few levels below your readers education level. This helps to level the readability playing field somewhat for a broad range of audiences while making your content more enjoyable and quicker to consume even for a more proficient reader. 
• Where possible, use the active voice. Active sentences are less ambiguous than passive sentences and feel fresher and more engaging. 
• Test the readability of your content. Use the Flesch-Kincaid readability scale available on Microsoft Word, or the Fry Readability Graph, or the Gunning Fog Index. Choose from a variety of readability measures but do measure. 
• Provide take-aways, short summaries of your content that enable your readers to scan for immediate meaning and provide a clever encapsulation of your message. 

Every good UI has that ‘A-Ha’ element; that feature or features that enables the content to go down easier, and makes understanding and recall more achievable. We call that element ‘stickiness’. In their book, Universal Principles of Design, authors Lidwell, Holden, and Butler outline strategies to achieve stickiness in your design:

• Simplicity: We have mentioned the importance of keeping your textual content simple but it is also of the utmost importance to maintain a simple, memorable design across your UI. Complicated logos, mottos, and slogans are off-putting and immediately forgettable (that is, unless they are so bad, your user remembers them for the wrong reason!).  
• Surprise: Arresting design is memorable design. You don’t have to be controversial or contrarian, but providing an unexpected graphic or piece of information will grab your users attention and provide another point of retention that bolsters learning. 
• Credibility: People value content that they perceive to be from a credible source. Whether you are brand new or well established, your UI must provide clear information on what and who you are, and what your motivations are with the content you are providing. Take care to ensure your content is well written, grammatically correct, visually appealing, and well researched: this all adds to your credibility in the eyes of your user. 
• Concreteness: Concrete, specific messages can convey great meaning. Keep yours concise, simple, and on-point throughout your design. 
• Emotion: Content that elicits an emotional response sticks! Using graphics and/or text, you can make your users feel excited, happy, angry, scared, envious… A visceral response to your content will make it stand out from your competitors and guarantee a prominent place in your users’ memories. 
• Story: Instead of raw, isolated data, use your information to tell a story. We all love a story, whether it’s told visually or textually,and a story dramatically increases stickiness.  

As visual designers, we have to understand that design is only beautiful if it conveys the message we wish to impart. Complexity, convolution, busyness, and gratuitous novelty serve only to isolate and infuriate users. In all our endeavors, we must strive to ensure that our message can be understood and remembered through an easy and enjoyable UI experience. By testing our UI learnability and tweaking our content accordingly, we can help to ensure our design achieves optimal learnability so that  our content gets the attention it deserves. 

In the next part of this series, we will discuss Appeal and learn, among other things, how attractiveness bias works and how to harness it to create beautiful designs that really hit home.