top ten design errors creating user friendly applications user experience group remedy, a bmc...
TRANSCRIPT
Top Ten Design ErrorsCreating User Friendly Applications
User Experience Group
Remedy, a BMC Software Company
Common Scenarios
I can’t believe these guys can’t use my application. My development team is smart. The users must be idiots!
Common Scenarios
I spent a long time making sure that everything the users could possibly want is on the screen – why are they all calling support?
Common Scenarios
We made the automated system but people aren’t using it. I think they’re lazy and just want to do things the old way.
The Common Culprit…
The development team is not aware of the Top Ten Design Errors– Users are unable to do their tasks
quickly and easily
The Top 10 Design Errors
1. Not Designing the Application Around the Critical
Tasks 2. Too Many Features, Too Many Fields, Too Many Forms
3. Fields Not Grouped Into Categories
4. Poor Button Location
5. Scattered Navigation
6. Vague Language
7. Speaking Geek
8. Inconsistent Language
9. Not Enough “White” Space
10. Low Contrast Text / Busy Backgrounds
Fixing Top Ten Design Errors…
Fixing the Top 10 Design Errors Can Have a Large Impact on Your Application
Success Rates: Old and Revised Application
17
61
27
54
30
42
Registration Listing Buying
Old Application Revised Application
Top 10 Design Errors Are Expensive
Developers who ignore the Top 10 Design Errors cost their companies hundreds of thousands of dollars each year in – Errors– Training– Support calls– Lost sales– Poor reputation
The Top 10 Design Errors
1. Not Designing the Application Around the Critical Tasks
2. Too Many Features, Too Many Fields, Too Many Forms
3. Fields Not Grouped Into Categories
4. Poor Button Location
5. Scattered Navigation
6. Important Information Not Prominently Displayed
7. Vague Language
8. Speaking Geek
9. Too Many Icons
10. Low Contrast Text / Busy Backgrounds
Error #1: Not designing the application around the Critical Tasks
Critical Tasks are the 3-4 tasks that 80% of users spend 80% of their time doing
Good applications are designed around the Critical Tasks – these are the tasks that should have the shortest pathways (e.g., the fewest clicks) to complete
Non-critical tasks can have longer pathways – because they are used infrequently
Example 1: Finding the Critical Tasks
Tasks: Approvals – Approve office moves,
purchase requisitions, etc.
– Request more information about John’s request
– Let someone else approve for you
– Approve for your boss while she’s out of the office
– Search for an old requisition
– Etc…
Example 1: Critical Tasks (cont.)
Critical Task: – Approve or reject a
request for office moves, purchase requisitions, etc.
Example 2 – Finding the Critical Tasks
Tasks: Sales Continuum– Create a new account– Make a proposal– Generate a quote– Create a contact– Generate a report– Link and relate items– Give access privileges to
others – Etc…
Example 2: Critical Tasks (cont.)
Critical Tasks:– Create a new account– Create a contact– Generate a quote– Look up a
contact/account
Effects of Error #1: Not designing the application around the Critical Tasks
Too many steps Too few successful
users– Create a New Account
7 steps; 0 of 9 succeeded
– Create a Quote 13 steps ; 0 of 9
succeeded0
2
4
6
8
10
12
14
New Account Create Quote
Steps
Success Rate
Rule #1: Design the application around the Critical Tasks
Old Create a New Account– 7 steps– 0 of 9 succeeded
Improved Create a New Account– 4 steps– 9 of 9 succeeded
0123456789
10
Old Improved
Account Steps
AccountSuccess
Rule #1: Design the application around the Critical Tasks (cont.)
Old Create a Quote– 13 steps– 0 of 9 succeeded
Improved Create a Quote– 7 steps– 8 of 9 succeeded
0
2
4
6
8
10
12
14
Old Improved
Quote Steps
Quote Success
The Top 10 Design Errors
1. Not Designing the Application Around the Critical Tasks
2. Too Many Features, Too Many Fields, Too Many Forms
3. Fields Not Grouped Into Categories4. Poor Button Location5. Scattered Navigation6. Important Information Not Prominently Displayed7. Vague Language8. Speaking Geek9. Too Many Icons10. Low Contrast Text / Busy Backgrounds
Error #2: Too Much! Too Many Features!
Error #2: Too Much! Too Many Fields!
Bad Search Page : 60+ fields Rule of thumb:
eliminate 80% of optional fields
Error #2: Too Much! Too Many Forms!
Bad Application: 5 screens open
at once Rule of thumb:
no more than 2 screens open at once
Rule #2: Simplify! Reduce Fields!
Good Search Page : Search and browse are
combined on 1 page Search includes 1 field and a
pull-down menu
Rule #2: Simplify! Reduce Forms!
Good Application: Ideally, 1 screen open
at once. No more than 3 steps per
common task
Rule #2: Simplify! Reduce Forms!
Good Application: No more than 2 screens
open at once
No more than 3 steps per common task
The Top 10 Design Errors
1. Not Designing the Application Around the Critical Tasks
2. Too Many Features, Too Many Fields, Too Many Forms
3. Fields Not Grouped Into Categories4. Poor Button Location
5. Scattered Navigation
6. Important Information Not Prominently Displayed
7. Vague Language
8. Speaking Geek
9. Too Many Icons
10. Low Contrast Text / Busy Backgrounds
Error #3: Fields Not Grouped into Categories and Clearly Labeled
Reading computer screens is 25% slower than reading paper
79% of web users scan rather than read Not surprisingly, grouping items decreases
search time by over 20%
Error #3: Fields Not Grouped into Categories
Bad Screen Information at the top grouped by form of origin – not from the user’s perspective
Top groupings not labeled
Too many fields
Error #3: Fields Not Grouped into Categories
Bad Screen
Groupings not labeled
Many extra fields
Rule #3: Group & Label Your Fields
Good Screen– Clear Groupings
Problem Solution Engineers
Rule #3: Group & Label Your Fields
Good Screen– Clear Groupings
Primary Contact Company Information Additional Contacts Notes Proposals & Reports
The Top 10 Design Errors
1. Not Designing the Application Around the Critical Tasks
2. Too Many Features, Too Many Fields, Too Many Forms
3. Fields Not Grouped Into Categories
4. Poor Button Location5. Scattered Navigation
6. Important Information Not Prominently Displayed
7. Vague Language
8. Speaking Geek
9. Too Many Icons
10. Low Contrast Text / Busy Backgrounds
Error #4: Poor Button Location
Bad Screen– Button not linked
visually to the action
Error #4: Poor Button Location
Bad Screen– Button not linked visually to the action
Poor Button Location
Best Button Location OK Button Location
The Top 10 Design Errors
1. Not Designing the Application Around the Critical Tasks
2. Too Many Features, Too Many Fields, Too Many Forms
3. Fields Not Grouped Into Categories
4. Poor Button Location
5. Scattered Navigation6. Important Information Not Prominently Displayed
7. Vague Language
8. Speaking Geek
9. Too Many Icons
10. Low Contrast Text / Busy Backgrounds
Error #5: Scattered Navigation
Bad Navigation: Navigation is scattered
Across Page Navigation to the left,
top and bottom of page Ordering of Navigation
Inconsistent No Sense of Hierarchy
Error #5: Scattered Navigation
Bad Navigation: Navigation is scattered
over the page Some of the most
commonly used icons are hidden
– Accounts– Contacts– Sales Opportunities– Quotes
The Top 10 Design Errors
1. Not Designing the Application Around the Critical Tasks
2. Too Many Features, Too Many Fields, Too Many Forms3. Fields Not Grouped Into Categories4. Poor Button Location5. Scattered Navigation
6. Important Information Not Prominently Displayed
7. Vague Language8. Speaking Geek9. Too Many Icons10. Low Contrast Text / Busy Backgrounds
Error #6: Important Information Not Prominently Displayed
Bad: Information needed to
make a decision about a purchase is not visible (who, what, how much, when)
Less important information (Acting as GO) takes up valuable real estate
Error #6: Important Information Not Prominently Displayed
Bad:– Most important
information at the bottom of the page
– Required fields are scattered
The Top 10 Design Errors
1. Not Designing the Application Around the Critical Tasks
2. Too Many Features, Too Many Fields, Too Many Forms
3. Fields Not Grouped Into Categories
4. Poor Button Location
5. Scattered Navigation
6. Important Information Not Prominently Displayed
7. Vague Language8. Speaking Geek
9. Too Many Icons
10. Low Contrast Text / Busy Backgrounds
Error #7: Vague Language
Bad Language:– Save– Acting as GO– View– Create
Rules #4-7
Good: Button located
appropriately Important information
prominently displayed (who, what, when)
Navigation in one location Descriptive language
(change approver, submit)
The Top 10 Design Errors
1. Not Designing the Application Around the Critical Tasks
2. Too Many Features, Too Many Fields, Too Many Forms
3. Fields Not Grouped Into Categories
4. Poor Button Location
5. Scattered Navigation
6. Important Information Not Prominently Displayed
7. Vague Language
8. Speaking Geek9. Too Many Icons
10. Low Contrast Text / Busy Backgrounds
Error #8: Speaking Geek
Unclear error messages – Your session has
expired. Please reauthenticate.
– Uncaught exception: array_index_out_of_range. Execution terminating.
– Error: Type mismatch.
Rule #8: Use Layman’s Terms(no Geek Speak)
Error messages should state the problem and
what to do next– Your session has timed-out. Please re-login.– The system could not log you on. Make sure
your username is correct then type your password again. Make sure that the Caps Lock is not accidentally on.
The Top 10 Design Errors
1. Not Designing the Application Around the Critical Tasks
2. Too Many Features, Too Many Fields, Too Many Forms
3. Fields Not Grouped Into Categories
4. Poor Button Location
5. Scattered Navigation
6. Important Information Not Prominently Displayed
7. Vague Language
8. Speaking Geek
9. Too Many Icons10. Low Contrast Text / Busy Backgrounds
Error #9: Too Many Icons
Bad :– Icons rarely translate
as easily as text– Icons add to the visual
clutter– Certain icons may be
offensive to other cultures
– Making sense out of which icon means what takes a long time
– Many users will never figure it out
Rule #9: Use Words
Better– No icons– Only words
The Top 10 Design Errors
1. Not Designing the Application Around the Critical Tasks
2. Too Many Features, Too Many Fields, Too Many Forms
3. Fields Not Grouped Into Categories
4. Poor Button Location
5. Scattered Navigation
6. Important Information Not Prominently Displayed
7. Vague Language
8. Speaking Geek
9. Too Many Icons
10. Low Contrast Text / Busy Backgrounds
Color and Contrast
Bad Background:– Best contrast is
white/black– Worst option is print
backgrounds– Grey is too dark, even
non-visually impaired users must strain to read text.
– Parts of the text cannot be read at all
Potential problems with colors…
Red/Green and Blue/Yellow colors of similar value
Test legibility by converting to grayscale
Hard to read for person who is colorblind
Red/Green and Blue/Yellow colors of different values
Test legibility by converting to grayscale
Easier to read for person who is colorblind
Similar Color Values Grayscale Test Different Color Values Grayscale Test
Rule #10: Use Simple Backgrounds & High Contrast Text
Good Background:– White title on dark blue
background– Navigation is dark blue
on a light-medium yellow
– Most important part of the page (screen content) primarily black or dark blue on white
– Table colors include subdued yellow
The Top 10 Design Errors
1. Not Designing the Application Around the Critical Tasks
2. Too Many Features, Too Many Fields, Too Many Forms
3. Fields Not Grouped Into Categories
4. Poor Button Location
5. Scattered Navigation
6. Important Information Not Prominently Displayed
7. Vague Language
8. Speaking Geek
9. Too Many Icons
10. Low Contrast Text / Busy Backgrounds
Improving Applications….
Following the basic UI Design and Usability principles has an enormous impact on– Task completion rates (25-50% improvement)– Support time (20-30% reduction)– Training time (30-40% reduction)– User frustration levels (40-50% reduction)