HICapacity UI talk by Tiffany Higa
•
1 j'aime•2,947 vues
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/
Recommandé
Contenu connexe
En vedette
En vedette (14)
Similaire à HICapacity UI talk by Tiffany Higa
Similaire à HICapacity UI talk by Tiffany Higa (20)
Dernier
Dernier (20)
HICapacity UI talk by Tiffany Higa
- 1. UX (user Experience) DEFINITION: “User experience” encompasses all aspects of the end-user’s interaction with the company, its services, and its products. FACTORS TO CONSIDER: • Usability • Meets needs + values • Memorable why is it imporant?: • Happy customers = loyal + returning customers • Unhappy customers = loss of business + negative buzz
- 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. DEFINED AS: Hypothetical/fictional characters based on user profiles and other data. They represent 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
- 6. DEFINED AS: The description of how a persona might interact with a website in order to achieve 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 problems USER SCENARIOS
- 8. A friend has recommended amazon.com to him. His friend was very enthusiastic about all the features Amazon offers and above all how convenient it works, which makes Johnny very happy because he doesn’t want to spend too much time looking for a book. Johnny has an idea of what kind of cupcake book he wants, and expects to be able to quickly find options to choose from. He also expects to read reviews from other users to find out which book is the right one. Why does he come to my site? How does he achieve his goal? Johnny is looking for a book about cupcakes, and doesn’t want to spend more than $20. What does he want from my site?
- 11. • Appropriate color palette. COLOR
- 12. examples ???
- 16. • Appropriate color palette. • High contrast between text and background. COLOR
- 17. examples EASY TO READ HARD TO READ ALSO HARD TO READ
- 19. typography • Choose appropriate typefaces.
- 22. typography • Choose appropriate typefaces. • Hierarchy!
- 25. typography • Choose appropriate typefaces. • Hierachy! • Optimal line length is 50-60 characters.
- 27. typography • Choose appropriate typefaces. • Hierachy! • Optimal line length is 50-60 characters. • Size does matter.
- 33. navigation • Tradional location. • Clear, concise, and distinct labels.
- 36. navigation • Tradional location. • Clear, concise, and distinct labels. • Make it clear where users have landed.
- 39. navigation • Tradional location. • Clear, concise, and distinct labels. • Make it clear where users have landed. • Consistent on every page.
- 43. LINKS • Looks clickable. • Obvious hover state.
- 45. LINKS • Looks clickable. • Obvious over state. • Clear call to action button.
- 49. FORMS • Keep layout within one column.
- 51. FORMS • Keep layout within one column. • Labels are relevant and close in proximity.
- 53. FORMS • Keep layout within one column. • Labels are relevant and close in proximity. • Immediate validation.
- 58. resources • uxdesign.smashingmagazine.com • uxmag.com • uxbooth.com • nngroup.com • uxmovement.com • uxmatters.com • usabilitypost.com
- 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 clickable or what to do. • Forms in one column is best. • DON’T MAKE ME THINK!
- 61. questions? kat sakata @katroppi tiff higa @thinktifferent