Over the last few years I have spent a lot of time doing web development work. I am definitely no expert on UI design so while at SD West I decided to attend a UI talk put on by Jeff Johnson who is the author of the book GUI Bloopers. I recommend Jeff’s GUI Bloopers series of books, they are an excellent reference to help you avoid making common UI mistakes. The following is a summary of the main GUI Bloopers Jeff stressed in his talk and his book.
Grayed out input fields
Don’t use input fields that are grayed out as a way of displaying text. Always use a control that is never editable such as a label. If you use an editable control that is grayed out, you will just make the user think “How do I enable that functionality?”.
Never use a checkbox being checked as a way to say “Do not do the following”. You need to be consistent. Checking means do something, unchecking means do not.
Do not have menus where the content of the drop menu changes based on the current task the user is doing. If you want to make certain items inaccessible at certain times, gray them out so the user knows they are still there, just not accessible at this time or in this context. The reason this is a problem is because users tend to remember where something is, but not always what it is called. Users often scan menus and want to go back to where they remember seeing that feature before. So do not automatically add and remove options. Dynamic menus undermines a basic learning strategy.
Popup Not Identifying Itself
The function of the popup is not explained. The user may loose what functionality the popup relates to.
Pages Not Identifying Themselves
A common example is a menu that does not highlight the menu tab to show the user which page they are currently viewing. Also pages without clear, easy to spot titles, can cause this problem.
Distracting Off-Path Links and Buttons
Don’t distract the user from their current task by sending them off in another direction mid stream. Use the pattern “Process Funnel”. This means that when a user tells you what they want to do, what their goal is, put them in a funnel with minimal distraction until they have accomplished their goal.
Too Many Levels of Dialogs and Menus
Look for areas in your interface with too much depth and see how it can be flattened. One approach is to optimize for the most commonly used paths.
Same functionality but called different things in different areas. This makes it very difficult for a user to learn an application.
Same Word, Same Thing
Different Word, Different Thing
Misleading Text (e.g., Erroneous Messages)
A common example is a misleading error message, such as an error message on the page telling the user the “Username entered is invalid” when it is actually the login server that is down and not responding. The problem here is the user will keep retrying because they have not been given a clear message.
Easily Missed Information
For example an error message which is placed on the page far away from where the user has entered the data that has caused the error and is currently focusing. Often users will not associate the two.
Burying Relevant Information
This makes it difficult for the user to understand what information is needed to complete their task amongst all of the information being shown. Also avoid too much repetition in naming options such as options that all start with the same name:
How to …
How to ….
How to ….
In the Windows start menu under Microsoft Office, shorten the title of each app to be just the name of the application:
Microsoft Office Word 2007
Microsoft Office Excel 2007
Microsoft Office Outlook 2007
Microsoft Office PowerPoint 2007
Notice how much easier it is to scan the menu now. In an application where the user is seeing it for the first time, you want to make it as easy as possible for the user to quickly scan to find the option they want.
Colour Differences that are Too Subtle
Graphic designers often create this issue by opting for colour patterns that are more stylish but end up being too subtle for the user. However, if a colour difference is the only way to tell something apart, then the design of the UI element needs to be reconsidered. You must also take into consideration people who have colour blindness or even bad monitors. One good test is to print UIs in black and white. Use of colour should only be used as a redundant emphasis along with another visual hint.
Instructions Disappear Too Soon
Giving instructions in a dialog that then must be followed after the dialog has been closed should always be avoided.
Dialog Boxes that Trap Users
For example, an “OK” button that informs you of a problem yet does not allow you to take a step back. It warns you that something you probably don’t want to happen is about to happen, but does not give you an option to not do it. The popup just tells you it is about to happen and waits for you to say “Sure, alright, I guess I have no choice”. The second way to trap a user in a dialog is by having a message on the dialog that does not at all make it clear which options on the dialog mean what. No clear relationship between the text and the options. There are “Yes” and “No” options, but the text does not clearly explain which option will do what you want.
So what to do?
Avoid anarchic development.
- No Design
- No UI Standards
- No oversite
User centered design and Agile are definitely compatible.