10 Guidelines for Making a User Interface People-Friendly

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:

Poor

Good

$1,840.50            Monthly payment $662,611.22Total of 360 payments     Monthly payment     $1,840.50
$318,861.22Total interest paid September, 2037Pay-off date     Total of payments  $662,611.22
      Total interest paid  $318,861.22
      Pay-off date  September, 2037
  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.

Keep Users in Mind in Your Design

General Electric Company used to say in their advertising, “Progress is our most important product.” In terms of project management, satisfied users are often our most important product. Users may not be our direct clients, but they are the ones that eventually decide if our efforts to develop a software system helped or hindered getting their job done.

In previous posts — Business Analysts and Helping the Business Analyst Helps Your Project – I talked about the role of the Business Analyst in collecting user requirements and evaluating performance from a user’s perspective. Integral to our support of the user’s experience at Cognitive Technologies is Performance-Centered Design and Development addressed in detail in this white paper by Dr. Karen McGraw. In today’s post, I want to summarize the key points in Karen’s paper and tell you about an interesting site I found that adds another perspective to designing for users.

Performance-Centered Design
Cognitive Technologies works with users from the beginning of a project through final testing and support. We seek to capture and document work processes and information needs as well as user characteristics. We recommend rapid prototyping to develop a proof of concept or visual prototype to test early understandings and determine/refine requirements. Our user-centric activities include:

  • Identifying the information needs, including required input and output, sources and destinations for data, and information manipulation
  • Defining responsibilities or assignments, including understanding the job functions and goals, work processes, and critical success factors for the user community
  • Documenting standards and criteria for the user’s job performance that may be impacted by the new system
  • Capturing decision making factors and heuristics (i.e., rules of thumb) users apply in performing job functions affected by the system
  • Capturing problem solving patterns and preferences within the user community
  • Documenting difficulties and problem areas (in the way the job is performed today) that technology will or can improve

Design with Intent
Dan Lockton’s background in Industrial Design Engineering followed by a Master’s in Technology Policy from the University of Cambridge and his doctorate work at Brunel University in England focused on the impact of design on user behavior. Lockton and colleagues from Brunel developed a group of design concepts they call: Design with Intent, which are available for review and download.

Lockton uses the term Design with Intent to mean “design that’s intended to influence or result in certain user behaviour — it’s an attempt to describe lots of types of systems (products, services, interfaces, environments) that have been strategically designed with the intent to influence how people use them.” Although Lockton does not limit his thinking to software, many of his ideas are provocative in terms of their implications for software design. I picked 10 of over one hundred such suggestions to list here:

  1. Can you recognize the ‘desire paths’ of some of your users, and then codify them into your system, so others follow too?
  2. Can you edit the choices presented to users so only the ones you want them to have are available?
  3. Can you make the default setting the behavior you prefer users to perform?
  4. Can you detect and suggest a better option to users when it looks like they’re making an error (i.e. Google search correcting typo errors)?
  5. Can you let users know their progress towards achieving a goal or let users know how what they’re doing is affecting the system?
  6. Can you give users a preview or simulation of the results of different actions or choices?
  7. Could your system adapt what it offers to match individual users’ needs and abilities?
  8. Can you give people a ‘map’ of the routes or choices they can use to achieve different goals?
  9. Can you give users different choices or access to functions depending on the capabilities they can demonstrate?
  10. Can you make elements look similar so users perceive them to share characteristics, or that they should be used together?

What does this mean to project managers?
First, consider if the ideas about structuring user interaction suggested in Design with Intent make sense for your product and customer. If so, prepare a brown bag training topic about Design with Intent – or ask someone on your staff to do it. After your business analyst develops an overview of the users, their requirements and operating environment, brainstorm with the design team how some of the Design with Intent suggestions could be implemented. For those individual guidelines that you support, make sure that product testing includes an evaluation of those items.

The Lazy Project Manager's Blog

The Home of Productive Laziness Thoughts

ProjectManagement.com

Thoughts, experience, tips and tricks on issues affecting managers and project management

A Girl's Guide to Project Management

Project Management musings for one and all

LeadingAnswers: Leadership and Agile Project Management Blog

Thoughts, experience, tips and tricks on issues affecting managers and project management

Project Management Hut

Thoughts, experience, tips and tricks on issues affecting managers and project management

Herding Cats

Thoughts, experience, tips and tricks on issues affecting managers and project management

beyondcenter

Pushing the Edges Out ...

projectxpert

Just another WordPress.com site