Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Web Usability on a Budget (jQueryTO 2014)

timgthomas
March 16, 2014

Web Usability on a Budget (jQueryTO 2014)

Not all projects have the budget for UX designers; as a result, experience in disciplines such as user research, interaction design, and information architecture are often expected of all developers on a team. Fortunately, these arcane-sounding topics are far from impossible to grasp for mere programmer mortals. In this session, you'll learn some easy tricks to make your sites more approachable, discover ways to help develop an emotional connection between your apps and your users, and see some tools that can assist you with planning and designing your next masterpiece of usability.

timgthomas

March 16, 2014
Tweet

More Decks by timgthomas

Other Decks in Design

Transcript

  1. Web Usability on a Budget
    Photo Source: flickr user mcfcrandall

    View Slide

  2. Tim G. Thomas
    Photo Source: flickr user mcfcrandall

    View Slide

  3. @timgthomas timgthomas.com
    Photo Source: flickr user mcfcrandall

    View Slide

  4. frogdesign.com

    View Slide

  5. Austin, Texas
    Photo Source: flickr user stuseeger

    View Slide

  6. #jqtoux
    Photo Source: flickr user mcfcrandall

    View Slide

  7. What is “usability”?
    Photo Source: flickr user antekno

    View Slide

  8. What isn’t “usable”?
    Photo Source: flickr.com/photos/32687125@N05/

    View Slide

  9. Frustrating
    Photo Source: flickr.com/photos/32687125@N05/

    View Slide

  10. Intimidating
    Photo Source: flickr.com/photos/32687125@N05/

    View Slide

  11. Confusing
    Photo Source: flickr.com/photos/32687125@N05/

    View Slide

  12. Unusable
    Photo Source: flickr.com/photos/32687125@N05/

    View Slide

  13. Usability is the Opposite
    Photo Source: flickr user geralds_1311

    View Slide

  14. Pleasing
    Photo Source: flickr user geralds_1311

    View Slide

  15. Inviting
    Photo Source: flickr user geralds_1311

    View Slide

  16. Clear
    Photo Source: flickr user geralds_1311

    View Slide

  17. Seems Difficult
    Photo Source: flickr user eworm

    View Slide

  18. Large Projects
    Photo Source: flickr user wwarby

    View Slide

  19. Information Architect
    Photo Source: flickr user wwarby

    View Slide

  20. Content Strategist
    Photo Source: flickr user wwarby

    View Slide

  21. Visual Designer
    Photo Source: flickr user wwarby

    View Slide

  22. UI Designer
    Photo Source: flickr user wwarby

    View Slide

  23. UX Designer
    Photo Source: flickr user wwarby

    View Slide

  24. ...

    View Slide

  25. Large Projects > Design Disciplines
    Photo Source: flickr user wwarby

    View Slide

  26. Small Projects
    Photo Source: flickr user folkbird

    View Slide

  27. Developer
    Photo Source: flickr user folkbird

    View Slide

  28. Software Developer
    Photo Source: flickr user folkbird

    View Slide

  29. Web Developer
    Photo Source: flickr user folkbird

    View Slide

  30. Large Projects > Design Disciplines
    Photo Source: flickr user wwarby

    View Slide

  31. Small Projects > Design Principles
    Photo Source: flickr user folkbird

    View Slide

  32. Procedures
    Photo Source: flickr user eworm

    View Slide

  33. Usability Principles
    Photo Source: http://www.flickr.com/photos/39877441@N05/

    View Slide

  34. Focus on User Goals
    socrates.io

    View Slide

  35. socrates.io

    View Slide

  36. Talk Like Your Users, eh?
    neonmob.com

    View Slide

  37. Ubiquitous Language
    neonmob.com

    View Slide

  38. neonmob.com

    View Slide

  39. neonmob.com

    View Slide

  40. neonmob.com

    View Slide

  41. neonmob.com

    View Slide

  42. neonmob.com

    View Slide

  43. Follow Conventions
    stripe.com

    View Slide

  44. stripe.com

    View Slide

  45. stripe.com

    View Slide

  46. Minimize the Cost of Failure
    gmail.com

    View Slide

  47. gmail.com

    View Slide

  48. github.com

    View Slide

  49. github.com

    View Slide

  50. github.com

    View Slide

  51. Photo Source: flickr user joshpuetz

    View Slide

  52. Give Emphasis
    jqueryto.com

    View Slide

  53. Provide Affordance
    jqueryto.com

    View Slide

  54. jqueryto.com

    View Slide

  55. jqueryto.com

    View Slide

  56. Add Some Color
    mozilla.org/firefox

    View Slide

  57. mozilla.org/firefox

    View Slide

  58. mozilla.org/firefox

    View Slide

  59. Use Symbology
    manage.windowsazure.com

    View Slide

  60. manage.windowsazure.com

    View Slide

  61. manage.windowsazure.com

    View Slide

  62. Tools
    Photo Source: http://www.flickr.com/photos/75905404@N00/

    View Slide

  63. View Slide

  64. icomoon.io

    View Slide

  65. View Slide

  66. wireframe.cc

    View Slide

  67. View Slide

  68. facebook.github.io/origami/

    View Slide

  69. View Slide

  70. foundation.zurb.com

    View Slide

  71. A Cup of Coffee
    Photo Source: flickr user djwtwo

    View Slide

  72. Additional Resources
    Photo Source: http://www.flickr.com/photos/75905404@N00/

    View Slide

  73. dribbble.com/tags/ux

    View Slide

  74. uxdesign.smashingmagazine.com

    View Slide

  75. Usability?
    Photo Source: flickr user comedynose

    View Slide

  76. Disciplines > Principles
    Photo Source: flickr user comedynose

    View Slide

  77. Tools & Resources
    Photo Source: flickr user comedynose

    View Slide

  78. Usability!
    Photo Source: flickr user daijihirata

    View Slide

  79. aaronweyenberg.com/uxgenerator/

    View Slide

  80. Thanks for coming!
    Photo Source: flickr user mcfcrandall

    View Slide

  81. @timgthomas timgthomas.com
    Photo Source: flickr user mcfcrandall

    View Slide