HICapacity UI talk by Tiffany Higa


Published on

HICap talk is to inform others of the necessary steps in creating a website and understanding the importance of UI (User Interface) + UX (User Experience) design.

These steps may seem tedious, but as you dive into the design or even the development stage, you’ll quickly find out that this process will help to diminish problems that could occur down the road.

These are the UI slides by

Event info: http://www.hicapacity.org/2013/05/23/ui-ux/

Published in: Technology, Design
1 Like
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

HICapacity UI talk by Tiffany Higa

  1. 1. UX (user Experience)DEFINITION:“User experience” encompasses all aspects of the end-user’s interaction withthe company, its services, and its products.FACTORS TO CONSIDER:• Usability• Meets needs + values• Memorablewhy is it imporant?:• Happy customers = loyal + returning customers• Unhappy customers = loss of business + negative buzz
  2. 2. researchknow your user
  3. 3. DEFINED AS:A description of the overall characteristics of a target audience.• Sex, age, education, occupation, beliefs, etc.WHY IS IT IMPORTANT?:Helps to determine and rationalize design decisions.USER PROFILES
  4. 4. DEFINED AS:Hypothetical/fictional characters based on user profiles and other data. Theyrepresent different types of users.WHY IS IT IMPORTANT?:• Gives designers an idea of who they are designing for.• Ensures that a design will meet the needs of various users.PERSONAS
  5. 5. PERSONA EXAMPLE:http://blog.kissmetrics.com/user-personas-for-seo/
  6. 6. DEFINED AS:The description of how a persona might interact with a website in order toachieve a specific goal.User scenarios answer the following questions:• Who is the user?• What does the user want from my site?• Why does the user come to my site?• How is the user going to achieve their goal?WHY IS IT IMPORTANT?:• Identify what a user would need to accomplish a goal• Explore different design solutions• Identify potential problemsUSER SCENARIOS
  8. 8. A friend has recommended amazon.com tohim. His friend was very enthusiastic about allthe features Amazon offers and above all howconvenient it works, which makes Johnny veryhappy because he doesn’t want to spend toomuch time looking for a book.Johnny has an idea of what kind of cupcake bookhe wants, and expects to be able to quickly findoptions to choose from. He also expects to readreviews from other users to find out which book isthe right one.Why does he come tomy site?How does he achievehis goal?Johnny is looking for a book about cupcakes, anddoesn’t want to spend more than $20.What does he wantfrom my site?
  9. 9. BEST PRACTICES(generally)
  10. 10. colortypographynavigationLINKSforms
  11. 11. • Appropriate color palette.COLOR
  12. 12. examples???
  13. 13. examplescreativekidscenter.net
  14. 14. examplesholykaw.alltop.com/the-psychology-of-color-for-web-designers-inf
  15. 15. examplesrxbalance.com
  16. 16. • Appropriate color palette.• High contrast between text and background.COLOR
  18. 18. colortypographynavigationLINKSforms
  19. 19. typography• Choose appropriate typefaces.
  20. 20. exampleswakwaw.com
  21. 21. examplesblacktomato.com
  22. 22. typography• Choose appropriate typefaces.• Hierarchy!
  23. 23. examplesvalleyisleaquatics.com
  24. 24. examplespaypal.com
  25. 25. typography• Choose appropriate typefaces.• Hierachy!• Optimal line length is 50-60 characters.
  26. 26. examplesvalleyisleaquatics.com
  27. 27. typography• Choose appropriate typefaces.• Hierachy!• Optimal line length is 50-60 characters.• Size does matter.
  28. 28. examplesbusiness.hibu.com
  29. 29. colortypographynavigationLINKSforms
  30. 30. navigation• Tradional location.
  31. 31. examplesvalencia-dmc.com
  32. 32. examplesmoremobilerelations.com
  33. 33. navigation• Tradional location.• Clear, concise, and distinct labels.
  34. 34. examplesjankoatwarpspeed.com
  35. 35. examplestarget.com
  36. 36. navigation• Tradional location.• Clear, concise, and distinct labels.• Make it clear where users have landed.
  37. 37. examplescraigslist.com
  38. 38. examplesbarnesandnoble.com
  39. 39. navigation• Tradional location.• Clear, concise, and distinct labels.• Make it clear where users have landed.• Consistent on every page.
  40. 40. colortypographynavigationLINKSforms
  41. 41. LINKS• Looks clickable.
  42. 42. examplesoutreach.hawaii.edu/pnm
  43. 43. LINKS• Looks clickable.• Obvious hover state.
  44. 44. examplesgriplimited.com
  45. 45. LINKS• Looks clickable.• Obvious over state.• Clear call to action button.
  46. 46. examplescrowdspottr.com
  47. 47. examplesmailchimp.com
  48. 48. colortypographynavigationLINKSforms
  49. 49. FORMS• Keep layout within one column.
  50. 50. examplesbaymard.com
  51. 51. FORMS• Keep layout within one column.• Labels are relevant and close in proximity.
  52. 52. examplesuxmovement.com
  53. 53. FORMS• Keep layout within one column.• Labels are relevant and close in proximity.• Immediate validation.
  54. 54. examplestwitter.com
  55. 55. examplestwitter.com
  56. 56. examplesbadforms.com
  57. 57. resourceswhere to look
  58. 58. resources• uxdesign.smashingmagazine.com• uxmag.com• uxbooth.com• nngroup.com• uxmovement.com• uxmatters.com• usabilitypost.com
  59. 59. tiff’s notesget it?
  60. 60. tiff’s notes• Know your user!• Colors have meaning.• Consider the right typeface and size.• HIERARCHY!• Pay attention to your line lengths.• Navigation is the user’s anchor.• Don’t make users guess what is clickableor what to do.• Forms in one column is best.• DON’T MAKE ME THINK!
  61. 61. questions?kat sakata @katroppitiff higa @thinktifferent