Fear No Project Blog – Focusing on the Management Side of Projects

I am going to write on one of my big “pet peeves” this week.  The harshest criticism of most delivered software comes from people frustrated by their interaction with the user interface. In my experience, most change requests are related to users and the user interface (UI). Now I know that most project managers are neither the designer nor developer of the UI. However, during initial design and prototype reviews, there are best practices to follow based on human factors and cognitive science research that create a friendlier product. (I work on many projects with cognitive scientists and have been told this often!)

In September 2010, I talked about the user design from the perspective of flow and functionality in “Keep Users in Mind in Your Design.”  In this post, I am going to talk more about the presentation of information or action requests to the user rather than the navigation of the software. For the following 10 guidelines, I am relying on the insightful work of Jeff Johnson in his book, Designing with the Mind in Mind and the excellent book on documenting user requirements by Karen McGraw and Karan Harbison, User-Centered Requirements: The scenario-based engineering process.

1. Consistency. People act first on their expectations and experience. To translate that knowledge to the UI means presenting options in the same way each time the user is required to take an action. For example, if the software requires the user to consent or affirm an action before moving forward, the consent window should always be in the same place, with the same options, using the same words, in the same order. It also means that if different pages have the same capability, for example “search”, then that option should always be shown in the same place on the screen.  At Cognitive Technologies (where I previously worked) we used the Performance DNA™ methodology to ensure a match with the user’s mental model and work processes.

Grouping. Take advantage of people’s natural tendency to group objects that relate to one another. Use spacing, font type and size and nearby controls to create a natural visual group that is clearly separate from other groups. For example, this page from Adobe Photoshop Help uses white space, color, font size and symbols to guide the user to selectable options.

And here is a SharePoint page that also uses white space, pictures, and grouping to guide the user.

1. People read pages from left to right and top to bottom. Using this knowledge, presenting data in two columns, with the left hand column being the field name and the right hand column being the field value, is more intuitive to users than placing field names on top and values beneath them. I copied this example from Jeff’s book to summarize an individual’s mortgage:

1. Breaking long lists into groups of three or four items makes them easier to read, remember and copy than a long list of numbers. For example a phone number shown as 2153345645 is more difficult for readers than 215.334.5645. Not to mention 16 digits credit card or 30 digit user license numbers.
2. Use clean easy-to-read fonts. A contrasting background box can make text stand out; however do not use contrasting colors that cannot be seen by colorblind individuals, such as red on green.
3. Avoid techno-jargon. Use LOGIN or SIGN IN as opposed to AUTHETICATE, for example.
4. Do not place error messages too far from the point of data entry. People focus on a small 2 to 3 cm screen area when reading. An error message that appears at the bottom or top of the page may go unnoticed. If you must place the error message there, consider making it bright in color and blinking as our peripheral vision is effective at detecting movement.
5. When presenting options, combining color differences with other cues makes it easier for users to automatically recognize groups and actions. For example, the Mac OS uses different symbols next to files in the process of being updated versus completed updates in addition to color differences. Your design goal is to take advantage of people’s normal brain organizing and visual detection capabilities to minimize the amount of cognitive processing required.

1. Give users multiple ways to accomplish the same task. For example in a copy, cut or paste operation, people unfamiliar with the task may prefer a guided method using pull down menus or icons.  Others may prefer to right-click on highlighted text to bring up the editing menu. Another option is to highlight text and then drag and drop. And finally some people will choose the simple keyboard shortcut of: Highlight, CTRL+C (or X), move cursor to desired location, and CTRL+ V to paste. The important point for the user interface designers to remember is to give people options to accomplish a task that accommodates their tool knowledge.  Use good scenario based requirements gathering to create multiple ways to present information and tasks.
2. Do not expect users to remember how they got to a step in a multistep action sequence. Show them a map or key and where they are in a process. As a matter of fact, it is good practice to give users feedback every time they take an action, because if the page looks the same after an action as before, the user may think they have failed and repeat the action.

So why do I write about making the user interface “people friendly”?  As a project manager, knowing a bit about the human factors behind effective user interface design will help when you review the UI for your project or to better understand user requirements and change requests. We are lucky at our firm because our project teams always include performance specialists who specialize in how people think, learn and work!  And that makes all the difference in the tools and solutions we configure and implement.

If you have additional gotchas or guidelines for user interfaces, please share.