Web Usability on a Budget (jQueryTO 2014)

Af7acd01448753af3dfd648c3f5ea287?s=47 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.

Af7acd01448753af3dfd648c3f5ea287?s=128

timgthomas

March 16, 2014
Tweet

Transcript

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

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

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

  4. frogdesign.com

  5. Austin, Texas Photo Source: flickr user stuseeger

  6. #jqtoux Photo Source: flickr user mcfcrandall

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

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

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

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

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

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

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

  14. Pleasing Photo Source: flickr user geralds_1311

  15. Inviting Photo Source: flickr user geralds_1311

  16. Clear Photo Source: flickr user geralds_1311

  17. Seems Difficult Photo Source: flickr user eworm

  18. Large Projects Photo Source: flickr user wwarby

  19. Information Architect Photo Source: flickr user wwarby

  20. Content Strategist Photo Source: flickr user wwarby

  21. Visual Designer Photo Source: flickr user wwarby

  22. UI Designer Photo Source: flickr user wwarby

  23. UX Designer Photo Source: flickr user wwarby

  24. ...

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

  26. Small Projects Photo Source: flickr user folkbird

  27. Developer Photo Source: flickr user folkbird

  28. Software Developer Photo Source: flickr user folkbird

  29. Web Developer Photo Source: flickr user folkbird

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

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

  32. Procedures Photo Source: flickr user eworm

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

  34. Focus on User Goals socrates.io

  35. socrates.io

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

  37. Ubiquitous Language neonmob.com

  38. neonmob.com

  39. neonmob.com

  40. neonmob.com

  41. neonmob.com

  42. neonmob.com

  43. Follow Conventions stripe.com

  44. stripe.com

  45. stripe.com

  46. Minimize the Cost of Failure gmail.com

  47. gmail.com

  48. github.com

  49. github.com

  50. github.com

  51. Photo Source: flickr user joshpuetz

  52. Give Emphasis jqueryto.com

  53. Provide Affordance jqueryto.com

  54. jqueryto.com

  55. jqueryto.com

  56. Add Some Color mozilla.org/firefox

  57. mozilla.org/firefox

  58. mozilla.org/firefox

  59. Use Symbology manage.windowsazure.com

  60. manage.windowsazure.com

  61. manage.windowsazure.com

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

  63. None
  64. icomoon.io

  65. None
  66. wireframe.cc

  67. None
  68. facebook.github.io/origami/

  69. None
  70. foundation.zurb.com

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

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

  73. dribbble.com/tags/ux

  74. uxdesign.smashingmagazine.com

  75. Usability? Photo Source: flickr user comedynose

  76. Disciplines > Principles Photo Source: flickr user comedynose

  77. Tools & Resources Photo Source: flickr user comedynose

  78. Usability! Photo Source: flickr user daijihirata

  79. aaronweyenberg.com/uxgenerator/

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

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