Top Ten Design Errors Creating 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 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 succeeded

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

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

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 #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 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 #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 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 #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 Navigation 6. 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 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 #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 Language 8. 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 Geek 9. 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_r ange. 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 Icons 10. 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 TestDifferent 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)