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.

Part 5: If projects are like gasoline – PM Tools with Hybrid Octane

In the past four posts, I have talked about project management tools and requirements for various size projects, from small projects, supported part-time by three or four people, to large complex efforts involving 10’s to 100’s of people. The metaphor I choose to talk about the different project management and tool options was “gasoline for cars with the octane contained in different types of gasoline”. Higher octane equals more power and greater cost.  I can say that the choices and number of products on the market is huge in 2012 – it is like going to a gas pump and seeing 5 or 6 choices of octane not just 3!

In this final post of the series, I would like to talk about a hybrid approach to tools for organizations.  Organizations usually have multiple types and sizes of projects, each having unique needs for capturing requirements, monitoring status and reporting — noting that all projects need support for communication and artifact storage. For organizations with multiple types of projects, I would recommend a collaborative tool suite that can handle all sizes of projects without a lot of training.  I prefer Microsoft® SharePoint® because it works equally well with all types of projects.  It also works well with small project management tools, like Excel, and with complex tools for large projects, such as Microsoft® Project Server.

Although I appreciate SharePoint’s flexibility and scalability, I find the major value addition from this server-based software to be its support for collaboration among team members and across projects or portfolios of projects. Besides working transparently with dedicated project management tools, SharePoint provides a content management system that supports a web-based collaboration environment and a way to capture and process data in lists and forms.

For example, SharePoint® facilitates team-level information sharing using a web-based browser for communicating between or among team members as well as keeping all project documents immediately available. With the addition of content management systems, project documents can be searched and controlled intelligently for the right piece of data or problem resolution guidance contained in the project or organization-wide document library.

Another feature of this type of “hybrid tool” is that you can create project team sites to allow easy access to critical information using no more than a web browser.

Because the project information is housed on a shared server, access can be controlled to provide individuals with only the information they want or need to see. Therefore, the project management office or portfolio manager can view summary of information on projects, while the project manager can drill down to the detailed information needed for day-to-day management.

Of course the addition of a project tool like MS Project or Microsoft Project Server can add additional functionality to a project, but those tools can still allow for the basic collaboration being done inside of SharePoint and office tools.  Therefore smaller projects can use the basic collaboration without the rigor and overhead required by most complex project management tools.

So let’s summarize this hybrid tool:
Pros for Microsoft SharePoint:

  1. Uses Web browser (Everyone can access)
  2. User training minimal – ease of use
  3. Central repository for all information – can allow sharing of information across all projects
  4. Works well with other tools (MS Office, Project, Project Server)
  5. Permission based access – can manage who sees what information

Cons for Microsoft SharePoint:

  1. More cost  than just purchasing desktop tools (Initial setup and on-going administration required)
  2. No central resource pool – unless you add a tool like Microsoft Project Server you don’t get a picture or forecast of staff/resource requirements in a central database
  3. Requires more infrastructure – network, server, SQL database

As I finish this series of Fear No Project posts on tailoring project management tools to the size and complexity of the project, I want to express my appreciation to all of those professionals who commented on their experience and recommended the tools they use successfully. We all get up the project management hill a bit faster with the support of knowledgeable peers.

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