Saturday, June 18, 2011

Designing With The Mind In Mind


Designing with the Mind in Mind: Simple Guide to Understanding User Interface Design Rules 

(Amazon IN, Kindle IN, Amazon US, Kindle US)

This is another excellent book to add to your shelf, after giving it a careful read, alongside other excellent books on information visualization.
I claim an interest in the field of data visualizations. And not just the Lego blocks in colorful arrangements type of visualizations, though that is not to gainsay their utility or ability to entertain. This interest in meaningful information and data visualizations goes back at least 8 years, to 2003, when I first started working as the product manager for visualizations in the Discoverer product from Oracle (sort of tautological - working for Oracle would presuppose that the products I worked on would be Oracle products too...). Starting in 2004 my interest in visualizations took a more detailed turn when I starting haranguing people about the utility of having interactive visualizations. Some of what I have written in my capacity as a product manager for data visualizations in Oracle BI since 2006 has made its way into the product, much more is making its way into the product, and there is much that will eventually, I hope, make its way into the product.

Therefore, it is but natural that I also have an interest in literature on data visualizations. To that end I have read some books and papers and blogs on the topic over the years, including Information Dashboard Design: The Effective Visual Communication of Data, The Visual Display of Quantitative Information, Envisioning Information, A Tour through the Visualization Zoo - ACM Queue, and more... There is always the humorous yet educational blog Junk Charts. Then there is the often acerbic yet valuable blog by Stephen Few (whose post first led me to this book), Visual Business Intelligence. And so on...

This year, the first book I have read on the topic, Designing with the Mind in Mind: Simple Guide to Understanding User Interface Design Rules by Jeff Johnson, is not really a book on data visualizations per-se. This book will not tell you the utility of a bar graph versus a line graph. It will not tell you what decorations to apply or not apply to graphs, whether 3D effects look good on a graph (they don't), what chart junk is (see Edward Tufte's books for that), etc... The author, Jeff Johnson, is an authority in this field, has been active in the field of HCI (Human Computer Interactions) for more than 30 years, and has worked at Xerox, Sun Microsystems, HP Labs, etc...

His latest work is more a book about the theory of how the mind perceives information, of how humans understand what they read, and how our eyes are attuned to paying attention to not just what's happening in front of us but also at the periphery of our vision. This is a "design" book - "Design rules often describe goals rather than actions. They are purposefully very general to make them broadly applicable, but that means that their exact meaning and their applicability to specific design situations is open to interpretation.". It is a book that informs us how some of the perceptual hard-wiring in our brains has evolved because of very sound reasons, and why information systems that tend to ignore or force their way against these perceptual conduits often fail. That you have more a vast proliferation of interfaces that are designed so as to violate these fundamental precepts of cognition is an indication of how far we still have to go in this field.

In every book on user interface design, whether specific or general, you will find the usual suspects - the Gestalt principles: Proximity, Similarity, Continuity, Closure, Symmetry, Figure/Ground, and Common. The author says these provide a useful basis for guidelines for graphic and user interface design.
... Several Gestalt principles describe our visual system’s tendency to resolve ambiguity or fill in missing data in such a way as to perceive whole objects. The first such principle, the principle of Continuity, states that our visual perception is biased to perceive continuous forms rather than disconnected segments.
Slider controls are a user-interface example of the Continuity principle. We see a slider as depicting a single range controlled by a handle that appears somewhere on the slider, not as two separate ranges separated by the handle.

A recommended practice, after designing a display, is to view it with each of the Gestalt principles in mind—Proximity, Similarity, Continuity, Closure, Symmetry, Figure/Ground, and Common Fate—to see if the design suggests any relationships between elements that you do not intend.


If we are to read and understand what's written, like instructions on a screen, or tooltips, or the like, then it stands to reason that the typeface be easy-to-read. But the author goes beyond that, deeper, into the roots of how we read and understand, and how, therefore, poorly designed interfaces can interrupt the process by which we understand what we understand.
In other words, the most efficient way to read is via context-free, bottom-up, feature-driven processes that are well learned to the point of being automatic. Context-driven reading is today considered mainly a backup method that, although it operates in parallel with feature-based reading, is only relevant when feature-driven reading is difficult or is insufficiently automatic.
... reading can be disrupted by hard-to-read scripts and typefaces. Bottom-up, context-free, automatic reading is based on recognition of letters and words from their visual features. Therefore, a typeface with difficult-to-recognize feature and shapes will be hard to read.


Visual noise in and around text can disrupt recognition of features, characters, and words and therefore drop reading out of automatic feature-based mode into a more conscious and context-based mode.
The same goes for colors too. Color patch size and separation for example are used by our visual system to make out one color from another.
Color patch size: The smaller or thinner objects are, the harder it is to distinguish their colors
Separation: The more separated color patches are, the more difficult it is to distinguish their colors...

Color patches in chart legends should be large to help people distinguish the colors


“change blindness” (Wikipedia link) is what sometimes causes people to not pay attention to not pay attention to a message of possible importance flashed by an application. Therefore, "Don’t require people to remember system status or what they have done, because their attention is focused on their primary goal and progress toward it."

There have been at least three books I have read this year that have ended up talking about the concept, history, and neurology of memory (Moonwalking with Einstein: The Art and Science of Remembering Everything, Talent Is Overrated: What Really Separates World-Class Performers from Everybody Else, and The Shallows: What the Internet Is Doing to Our Brains), and this book is a fourth one, if you add to the list books that cover only peripherally the topic of memory. In this book, the author describes the workings of memory, how they are formed, and what implications it has when it comes to aiding users in remember previously performed actions in a graphical user-interface.

memories, like perceptions, consist of patterns of activation of large sets of neurons. Related memories correspond to overlapping patterns of activated neurons.
...

However, it has many weaknesses: it is error-prone, impressionist, free-associative, idiosyncratic, retroactively alterable, and easily biased by a variety of factors at the time of recording or of retrieval.
...
One implication of this pattern is that interactive systems should indicate what users have done versus what they have not yet done.
...
A new face stimulates a pattern of neural activity that has not been activated before, so no sense of recognition results. Of course, a new face may be so similar to a face we have seen that it triggers a misrecognition, or it may be just similar enough that the neural pattern it activates triggers a familiar pattern, causing a feeling that the new face reminds us of someone we know.
...
In contrast, recall is long-term memory reactivating old neural patterns without immediate similar perceptual input.
...
Whatever the evolutionary reasons, our brain did not evolve to recall facts.
...
Because people are bad at recall, they develop methods and technologies to help them remember facts and procedures
...
The relative ease with which we can recognize things rather than recall them is the basis of the graphical user interface (GUI)
...
The relative ease with which we can recognize things rather than recall them is the basis of the graphical user interface (GUI) (Johnson et al., 1989). The GUI is based on two well-known user interface design rules:
  • See and choose is easier than recall and type.
  • Use pictures where possible to convey function.

And what does the author mean here?
Even insects, mollusks, and worms, without even an old brain—just a few neuron clusters—can learn from experience. However, only creatures with a cortex or brain structures serving similar functions[2] can learn from the experiences of others.
...
caveat is that some birds can learn from watching other birds.


The mind just races with the possibilities. A student peering over the shoulder of another at an exam is sure learning from the experience of others, on a lighter note.


As with other tasks, consistency within an application's interface is critical. This is also one of the primary tasks of a user interface design engineer - to ensure that different screens, different parts of an application all have the same vocabulary of interface and action. Different parts of an application are worked upon by different engineers, and this can often enough cause those parts of an application to look inconsistent in how they look and feel (the classic problem that LAF standards seek to minimize). Even with the benefit of guidelines and look-and-feel standards that are in place at most large software development companies, it is inevitable that inconsistencies can creep into the UI of an application. This is where the importance of a user-interface and user-experience design team cannot be stressed enough.
To reduce the time it takes for people to master your application, Web site, or appliance, so that using it becomes automatic or nearly so, don’t force them to learn a whole new vocabulary
....
Same name, same thing; different name, different thing. (FormsThatWork.com) This means that terms and concepts should map strictly 1:1. Never use different terms for the same concept, or the same term for different concepts. Even terms that are ambiguous in the real world should mean only one thing in the system. Otherwise, the system will be harder to learn and remember.

Performance and the perception of responsiveness are different beasts altogether, related only by the often contentious thread of individual experiences. Personal experiences can differ widely. What one considers slow is considered acceptable by someone else. In my life and times as a product manager, there have been several occasions where discussions about performance, the expectation of performance, and what can be considered as responsiveness on the part of an application and what should be considered as 'slow' have ranged from the pleasant, the cordial, to the contentious even.
Responsiveness is related to performance, but it is different. Performance is measured in terms of computations per unit of time. Responsiveness is measured in terms of compliance with human time requirements and, as described above, user satisfaction.
...
Time lag between a visual event and our full perception of it: 100 milliseconds (0.1 seconds)
...
Our brain compensates by extrapolating the position of moving objects by 0.1 second. Therefore, as a rabbit runs across your visual field, you see it where your brain estimates it is now, not where it was 0.1 second ago
To be perceived by users as responsive, interactive software must follow these guidelines:
Acknowledge user actions instantly, even if returning the answer will take time; preserve users’ perception of cause and effect
Let users know when the software is busy and when it isn’t
...
Animate movement smoothly and clearly • Allow users to abort (cancel) lengthy operations they don’t want
...
Interactive systems should avoid lengthy gaps in on their side of the conversation. Otherwise, the human user will wonder what is happening. Systems have about 1 second to either do what the user asked or indicate how long it will take.
...
It is true that meeting those deadlines on the Web is difficult—often impossible. However, it is also true that those deadlines are psychological time constants, wired into us by millions of years of evolution, governing our perception of responsiveness.


Every book on memory and cognition will also talk about the two kinds of memory that exist. One is the long-term memory, which consists of the things we remember for a long time, often as long as our lives. The other is short-term or working memory, to which is the attributed the magic number of seven, plus or minus two, which is the average number of objects a person can hold in their working memory. It turns out that while this number may not appear to be impressively high, in reality it is even lower!
This breaking down of tasks into subtasks ends with small subtasks that can be completed without a break in concentration, with the subgoal and all necessary information either held in working memory or directly perceivable in the environment. These bottom-level subtasks are called “unit tasks” (Card et al., 1983).
...
Unit tasks have been observed in activities as diverse as editing documents, entering checkbook transactions, designing electronic circuits, and maneuvering fighter jet planes in dogfights, and they always last somewhere in the range of 6 – 30 seconds.
 In conclusion, this is not the book to pick up in the middle of a time-sensitive project to get guidance on user-interface doubts. No. The time to pick this book and go through is before. Or in-between deadline-driven assignments.




Kindle Excerpt:


© 2011, Abhinav Agarwal. All rights reserved.
Labels: , , ,