GUI Bloopers:

Common UI Design
Mistakes and How to
Avoid Them

Jeff Johnson
UI Wizards, Inc.
1

What is a GUI Blooper?

! Not a badly designed app or website
" Design flaws in apps & websites
! Not all UI design flaws are bloopers
" Many UI design flaws are unique
" No value in cataloging those
! Blooper = Common UI design flaw
" Value in learning to recognize & avoid
! All apps & websites have bloopers
" Issue: Cost to keep vs. fix?

2
Why Study Bloopers?
! Developers often lack UI expertise
! GUI & Web tools are too unguided
! Many mistakes are quite common
! Supplements design guidelines
! Develops a design “conscience”

Categories of GUI Bloopers

! GUI Control
! Navigation
! Textual
! Graphic Design & Layout
! Interaction
! Responsiveness*
! Management* * Not covered here

4
GUI Control Bloopers
! Using the Wrong Control
" Misusing checkboxes and radiobuttons
" Using checkboxes for non-ON/OFF settings
" Using command buttons as toggles
" Using tabs as radio buttons
" Too many tabs
" Using input widgets for display-only data
" Overusing text fields for structured data input
! Using Controls Wrongly
" Dynamic menus
" Intolerant data fields
" Input fields and controls with no defaults
" Poor defaults
" Negative checkboxes
5

Input Widgets for Display-Only Data

! uBid.com Corrected

6
Input Widgets for Display-Only Data
! National Geographic Trip Planner

Don’t Use Input Widgets for

Display-Only Data
! Non-editable data should never look operable
! Don’t use radiobuttons, sliders, menus, etc. for read-only
data
" Not even greyed out
! Avoid non-editable text fields
" Looks just temporarily inactive
" Use labels instead

8
Dynamic Menus

Dynamic Menus: PowerBuilder

10
What’s Wrong with Dynamic Menus?
! New users scan menus
" How many commands; what do they do?
" Dynamic menus thwart learning strategy
! Users unaware of dependencies
" Don’t know what changes menus
" Or even that menus change
" “Where is that Merge command?
I know I saw it!”

11

Avoiding Dynamic Menus

! Activate &
deactivate
menu items
" Users see
item; but
also see
it’s not
applicable
now

12
Avoiding Dynamic Menus
For MDI Apps, App Shells:
! Add & remove menus from menubar
" Users see menus change

File Edit View Format Window

Table Window
Help Help

! Generic component commands

" “Replace” same-named commands

13

Negative Checkboxes
! SmartDraw

14
Navigation Bloopers
! Not Showing Users Where They Are
" Window/page not identified
" Same title on different windows
" Window title doesn't match invoking command
! Not Showing the Way & Leading Users Astray
" Distracting off-path links & buttons
" Self links
" Too many levels of dialog boxes
! Poor Search Navigation
" Competing search boxes
" Poor search-results browsing
" Noisy search results

15

Window Not Identified

! Fetch

16
Page Not Identified
! Koehler-Bright Star (Flashlight.com)

17

Identifying Window
! Apple Preview

18
Identifying Page
! IBM.com

19

Identifying Page
! Saba.com

20
Distracting Off-path Links & Buttons
! SWA.com

21

Avoiding
Distracting Off-path Links & Buttons
! Once users tell you their goal:
" Don’t distract them from it
" Create a “process funnel”
" Guide them to their goal

22
Textual Bloopers
! Uncommunicative Text
" Inconsistent terminology
" Unclear terminology
" Bad writing
" Too much text
! Developer-Centric text
" Speaking Geek
" Calling users “user” to their face
" Vague error messages
! Misleading Text
" Erroneous messages
" Text makes sense in isolation but misleading in GUI
" Misusing “...” on command labels
23

Inconsistent Terminology:
Different Words for Same Concept
! CityCarShare.org

! Evite.com

24
Inconsistent Terminology:
Same Word for Different Concepts
! Word: Insert Picture vs. Object: Picture

25

Erroneous Messages
! Earthlink.net Webmail

26
Erroneous Messages
! uBid.com

27

Graphic Design & Layout Bloopers

! Bad Layout and Window Placement
" Easily-missed information
" Mixing dialog box control buttons w/ app buttons
" Misusing group boxes
" Radio buttons spaced too far apart
" Labels too far from data fields
" Inconsistent label alignment
" Bad initial window location
! Troublesome Typography & Color
" Tiny fonts
" Text hard to read on background*
" Color-differences too subtle* * in Web Appendix

28
Easily-Missed Information
! Apple .Mac

29

Easily-Missed Information
! DMV.CA.gov

30
Bad Initial Window Location
! National Geographic Trip Planner

31

Text Hard to Read on Background:

Patterned Background
! Federal Reserve Bank of Chicago

32
Text Hard to Read on Background:
Poor Contrast
! HuntMuseum.com

33

Text Hard to Read on Background:

Clashing Colors
! KellerWilliams.com

34
Avoiding
Text Hard to Read on Background
! Place text on solid backgrounds
! High contrast between text and background
" Best: dark text on (solid) light background
" Dark background can “bleed” into light text if text
! Avoid colors that clash, e.g.

Red on Blue Blue on Red

Yellow on Blue Blue on Yellow

35

Interaction Bloopers
! Deviating from Task Focus
" Exposing implementation to users
" Needless restrictions
" Confusable concepts
! Requiring Unnecessary Steps
" Asking for unneeded data
" Asking users for "random" numbers
" Pointless choice
! Burdening Users' Memory
" Hard to remember ID
" Instructions disappear too soon
" Unnecessary or poorly marked modes
! Taking Control Away from Users
" Auto rearrangement of display
" Dialog boxes that trap users
" Cancel doesn't cancel
36
Asking for Unneeded Data:
Forgetting What User Told You
! Travelocity.com

37

Asking for Unneeded Data:

Software Could Calculate
! EDD.CA.gov: unemployment insurance form

38
Asking for Unneeded Data:
Pointless Choice
! Travelocity.com

39

Avoiding
Asking for Unneeded Data
! Ask for the minimum possible
! Stick to the current transaction
! If you can proceed without it, it isn’t required
! Don’t require data some users won’t have
! Deduce all you can from the data you have

40
Dialog Boxes That Trap Users
! Adobe Photoshop

41

Dialog Boxes That Trap Users

! Cancel cancel

42
Website: GUI-Bloopers.com
! GUI Bloopers Checklist: check your software!
! Sample Chapter: Textual Bloopers
! Web Appendix: Color Bloopers
! More Bloopers
! Discussion Forum (eventually)
! How to buy book

Questions?

43