1. Top Ten Design Errors Creating User Friendly Applications User Experience Group Remedy, a BMC Software Company

2. Common Scenarios  I can’t believe these guys can’t use my application. My development team is smart. The users must be idiots!

3. 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?

4. 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.

5. 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

6. 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

7. Fixing Top Ten Design Errors… Fixing the Top 10 Design Errors Can Have a Large Impact on Your Application

8. Success Rates: Old and Revised Application Old Application Revised Application

9. 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

10. 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

11. 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

12. 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…

13. Example 1: Critical Tasks (cont.)  Critical Task: – Approve or reject a request for office moves, purchase requisitions, etc.

14. 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…

15. Example 2: Critical Tasks (cont.)  Critical Tasks: – Create a new account – Create a contact – Generate a quote – Look up a contact/account

16. 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

17. 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

18. 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

19. 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

20. Error #2: Too Much! Too Many Features!

21. Error #2: Too Much! Too Many Fields! Bad Search Page :  60+ fields  Rule of thumb: eliminate 80% of optional fields

22. 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

23. 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

24. Rule #2: Simplify! Reduce Forms! Good Application:  Ideally, 1 screen open at once.  No more than 3 steps per common task

25. Rule #2: Simplify! Reduce Forms! Good Application:  No more than 2 screens open at once  No more than 3 steps per common task

26. 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

27. 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%

28. 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

29. Error #3: Fields Not Grouped into Categories  Bad Screen  Groupings not labeled  Many extra fields

30. Rule #3: Group & Label Your Fields  Good Screen – Clear Groupings  Problem  Solution  Engineers

31. Rule #3: Group & Label Your Fields  Good Screen – Clear Groupings  Primary Contact  Company Information  Additional Contacts  Notes  Proposals & Reports

32. 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

33. Error #4: Poor Button Location  Bad Screen – Button not linked visually to the action

34. Error #4: Poor Button Location  Bad Screen – Button not linked visually to the action Poor Button Location Best Button Location OK Button Location

35. 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

36. 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

37. 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

38. 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

39. 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

40. Error #6: Important Information Not Prominently Displayed  Bad: – Most important information at the bottom of the page – Required fields are scattered

41. 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

42. Error #7: Vague Language  Bad Language: – Save – Acting as GO – View – Create

43. Rules #4-7 Good:  Button located appropriately  Important information prominently displayed (who, what, when)  Navigation in one location  Descriptive language (change approver, submit)

44. 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

45. 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.

46. 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.

47. 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

48. 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

49. Rule #9: Use Words  Better – No icons – Only words

50. 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

51. 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

52. 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

53. 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

54. 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

55. 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)