How To Fix Bad UI                         Why UI Makes A Difference                               Steve Zehngut           ...
UI, UX & UsabilitySaturday, March 24, 12
From Wikipedia:           User Interface - The aggregate of means           by which users interact with the system       ...
From Wikipedia:           User Experience - The architecture and           interaction models that impact a users         ...
“So it seems like UI would deal with the             ‘how’ of creating an interface             (implementing shiny contro...
From Wikipedia:           Web usability is an approach to make           web sites easy to use for an end-user,           ...
Saturday, March 24, 12
Jakob Nielsen                         http://useit.comSaturday, March 24, 12
Saturday, March 24, 12
Saturday, March 24, 12
Saturday, March 24, 12
How To Develop a Sh*tty WebsiteSaturday, March 24, 12
Don’t plan.                         “Let’s start coding immediately!”Saturday, March 24, 12
Defend to the death every                     development and design decision.                         “Don’t tell me how ...
Stick with a broken design.                  “The client signed off on this and we                         have a deadline...
Shove everything above the fold.                           “No one scrolls these days.”Saturday, March 24, 12
Put 50 links in your navigation.                   “I want every user to be able to find                       everything ...
Allow endless changes                             from the client.                         “Wouldn’t it be great if...”Sat...
Common MistakesSaturday, March 24, 12
Inconsistent LayoutSaturday, March 24, 12
Inconsistent FontsSaturday, March 24, 12
Inconsistent NavigationSaturday, March 24, 12
Poor Color ContrastSaturday, March 24, 12
Too Many ColorsSaturday, March 24, 12
No Clear CTAs                         (Calls To Action)Saturday, March 24, 12
Deviating From the                         Familiar Browser InterfaceSaturday, March 24, 12
Long Load TimesSaturday, March 24, 12
404 ErrorsSaturday, March 24, 12
Poor Mobile ExperienceSaturday, March 24, 12
My ProcessSaturday, March 24, 12
Questions To AskSaturday, March 24, 12
Who is the audience?Saturday, March 24, 12
What are the goals of the site?                     Traffic? Uniques? Length of Stay?Saturday, March 24, 12
What is the budget?Saturday, March 24, 12
What is the timeline?Saturday, March 24, 12
Tools of the TradeSaturday, March 24, 12
FireFox Plugins                           Firebug                         Web DeveloperSaturday, March 24, 12
XScopeSaturday, March 24, 12
Color Schemer StudioSaturday, March 24, 12
CSS Generators                         http://css3generator.com                            http://www.css3.meSaturday, Mar...
Site SamplesSaturday, March 24, 12
Huff Po                         http://huffingtonpost.comSaturday, March 24, 12
Toastmasters                         http://toastmasters.orgSaturday, March 24, 12
Mike Ferry                         http://mikeferry.comSaturday, March 24, 12
Coming Out Support                         http://comingoutsupport.comSaturday, March 24, 12
Essence Expressions                         http://essenceexpressions.comSaturday, March 24, 12
Catholic Radio Dramas                         http://catholicradiodramas.comSaturday, March 24, 12
Web King                         http://webking.comSaturday, March 24, 12
BooksSaturday, March 24, 12
Saturday, March 24, 12
Saturday, March 24, 12
Saturday, March 24, 12
Saturday, March 24, 12
Saturday, March 24, 12
What Can You Do Differently?Saturday, March 24, 12
Ask questions.Saturday, March 24, 12
Listen.Saturday, March 24, 12
Be open to criticism.Saturday, March 24, 12
Solicit other opinions.Saturday, March 24, 12
Beta Test.Saturday, March 24, 12
Revise and refine.                         Do it early and often.Saturday, March 24, 12
Steve Zehngut                             steve@zeek.com                         http://facebook.com/zengy                ...
Upcoming SlideShare
Loading in...5
×

WCSD-UI

3,454

Published on

How To Fix Bad UI - 3/24 WordCamp San Diego

Published in: Technology, Design

WCSD-UI

  1. 1. How To Fix Bad UI Why UI Makes A Difference Steve Zehngut Zeek Interactive @zengySaturday, March 24, 12
  2. 2. UI, UX & UsabilitySaturday, March 24, 12
  3. 3. From Wikipedia: User Interface - The aggregate of means by which users interact with the system (e.g., all the means of input and output)Saturday, March 24, 12
  4. 4. From Wikipedia: User Experience - The architecture and interaction models that impact a users perception of a device or system (“all aspects of the user’s interaction with the product”).Saturday, March 24, 12
  5. 5. “So it seems like UI would deal with the ‘how’ of creating an interface (implementing shiny controls, that sort of thing) and UX would deal with the ‘why’ (creating a good experience for the user).” Source: http://ux.stackexchange.com/questions/7174/difference-between-ui-and-uxSaturday, March 24, 12
  6. 6. From Wikipedia: Web usability is an approach to make web sites easy to use for an end-user, without the requirement that any specialized training be undertaken.Saturday, March 24, 12
  7. 7. Saturday, March 24, 12
  8. 8. Jakob Nielsen http://useit.comSaturday, March 24, 12
  9. 9. Saturday, March 24, 12
  10. 10. Saturday, March 24, 12
  11. 11. Saturday, March 24, 12
  12. 12. How To Develop a Sh*tty WebsiteSaturday, March 24, 12
  13. 13. Don’t plan. “Let’s start coding immediately!”Saturday, March 24, 12
  14. 14. Defend to the death every development and design decision. “Don’t tell me how to do my job!”Saturday, March 24, 12
  15. 15. Stick with a broken design. “The client signed off on this and we have a deadline to hit.”Saturday, March 24, 12
  16. 16. Shove everything above the fold. “No one scrolls these days.”Saturday, March 24, 12
  17. 17. Put 50 links in your navigation. “I want every user to be able to find everything right at the top.”Saturday, March 24, 12
  18. 18. Allow endless changes from the client. “Wouldn’t it be great if...”Saturday, March 24, 12
  19. 19. Common MistakesSaturday, March 24, 12
  20. 20. Inconsistent LayoutSaturday, March 24, 12
  21. 21. Inconsistent FontsSaturday, March 24, 12
  22. 22. Inconsistent NavigationSaturday, March 24, 12
  23. 23. Poor Color ContrastSaturday, March 24, 12
  24. 24. Too Many ColorsSaturday, March 24, 12
  25. 25. No Clear CTAs (Calls To Action)Saturday, March 24, 12
  26. 26. Deviating From the Familiar Browser InterfaceSaturday, March 24, 12
  27. 27. Long Load TimesSaturday, March 24, 12
  28. 28. 404 ErrorsSaturday, March 24, 12
  29. 29. Poor Mobile ExperienceSaturday, March 24, 12
  30. 30. My ProcessSaturday, March 24, 12
  31. 31. Questions To AskSaturday, March 24, 12
  32. 32. Who is the audience?Saturday, March 24, 12
  33. 33. What are the goals of the site? Traffic? Uniques? Length of Stay?Saturday, March 24, 12
  34. 34. What is the budget?Saturday, March 24, 12
  35. 35. What is the timeline?Saturday, March 24, 12
  36. 36. Tools of the TradeSaturday, March 24, 12
  37. 37. FireFox Plugins Firebug Web DeveloperSaturday, March 24, 12
  38. 38. XScopeSaturday, March 24, 12
  39. 39. Color Schemer StudioSaturday, March 24, 12
  40. 40. CSS Generators http://css3generator.com http://www.css3.meSaturday, March 24, 12
  41. 41. Site SamplesSaturday, March 24, 12
  42. 42. Huff Po http://huffingtonpost.comSaturday, March 24, 12
  43. 43. Toastmasters http://toastmasters.orgSaturday, March 24, 12
  44. 44. Mike Ferry http://mikeferry.comSaturday, March 24, 12
  45. 45. Coming Out Support http://comingoutsupport.comSaturday, March 24, 12
  46. 46. Essence Expressions http://essenceexpressions.comSaturday, March 24, 12
  47. 47. Catholic Radio Dramas http://catholicradiodramas.comSaturday, March 24, 12
  48. 48. Web King http://webking.comSaturday, March 24, 12
  49. 49. BooksSaturday, March 24, 12
  50. 50. Saturday, March 24, 12
  51. 51. Saturday, March 24, 12
  52. 52. Saturday, March 24, 12
  53. 53. Saturday, March 24, 12
  54. 54. Saturday, March 24, 12
  55. 55. What Can You Do Differently?Saturday, March 24, 12
  56. 56. Ask questions.Saturday, March 24, 12
  57. 57. Listen.Saturday, March 24, 12
  58. 58. Be open to criticism.Saturday, March 24, 12
  59. 59. Solicit other opinions.Saturday, March 24, 12
  60. 60. Beta Test.Saturday, March 24, 12
  61. 61. Revise and refine. Do it early and often.Saturday, March 24, 12
  62. 62. Steve Zehngut steve@zeek.com http://facebook.com/zengy Twitter: @zengySaturday, March 24, 12
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×