Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

Lecture 010 Polishing the UI

299 visualizaciones

Publicado el

Lecture from CS247 at Stanford on effect graphic design for UI.
http://cs247.stanford.edu/2018-winter/

Publicado en: Diseño
  • ➤➤ How Long Does She Want You to Last? Here's the link to the FREE report ★★★ https://tinyurl.com/rockhardxx
       Responder 
    ¿Estás seguro?    No
    Tu mensaje aparecerá aquí
  • ♣♣ 10 Easy Ways to Improve Your Performance in Bed... ◆◆◆ https://tinyurl.com/rockhardxx
       Responder 
    ¿Estás seguro?    No
    Tu mensaje aparecerá aquí

Lecture 010 Polishing the UI

  1. 1. Week 10 HCI Design Studio • CHRISTINA WODTKE • MICHAEL BERNSTEIN • JULIE STANFORD • CS247.STANFORD.EDU
  2. 2. Finishing Interfaces Bring the polish
  3. 3. Why Style Tiles?
  4. 4. Don’t design pages Design systems Learn more: https://www.justinmind.com/blog/wireframing-tool-and-atomic-design-user-experience-from-the-bottom-up/
  5. 5. Create Interaction Framework and Page Templates A framework is how the user moves through screens, the page templates show how content is displayed.
  6. 6. Choose the Interaction Framework • Wizard? • Toolbar and Canvas? • Navigation type?
  7. 7. Wizards
  8. 8. Each task could have a page
  9. 9. First Yahoo 1994 1995: first graphic logo Remind you of something?
  10. 10. Wizards: Many boxes, many pages
  11. 11. When to Use Wizards • Multi step process • Must be completed in order • The audience is not technically savvy • Bandwidth is low
  12. 12. Toolbar and Canvas
  13. 13. What if we put the tasks with the thing they were modifying?
  14. 14. It’s a toolbar Tools here Item affected here
  15. 15. Photoshop: toolbars on steroids Tools here Item affected here And here And here
  16. 16. The web uses toolbars sparingly
  17. 17. Toolbars Tools here Item affected here A simpler design is better for infrequent use.
  18. 18. Navigation Toolbars for content
  19. 19. So much navigation
  20. 20. Mobile version’s navigation
  21. 21. Carasol
  22. 22. Navigation as content
  23. 23. What other ways can we organize elements? Control Panels? Carousels? Thumbnail<-> Full Size?
  24. 24. Page Templates Even Powerpoint offers layouts for the most likely content configurations
  25. 25. 1. Identify key pages • Homepage • Product Page • Article • Search results • Shopping cart • Settings • Account • Gallery
  26. 26. 2. Design a template layout for each Consider variations such as mobile & desktop
  27. 27. 3. Create Themed Zones for each page Navigation Content Editing tools Similar items
  28. 28. When designing the page, group items by similarity and similarity of task (navigation items together, editing items together) Give them visual importance based on user number, usage frequency and importance to business.
  29. 29. • Create “zones” for functionality groups. • You can group them by putting white space around them, or use lines • Remember to keep tools close to the thing your working on
  30. 30. If you are putting boxes around things to make it clear, you probably should start over
  31. 31. Skin it
  32. 32. Final Touches Onboarding (NUX/FTUE) Null States Error States
  33. 33. Useronboarding.com Complete breakdowns of how sites take users through sign up and getting started.
  34. 34. No content? How can you get users started?
  35. 35. Mistakes, I’ve made a few Make sure your users can recover.
  36. 36. Design RulesFor Heuristic Evaluations
  37. 37. Proximity Matters
  38. 38. Two videos sites. The “meal” is the video, and the tools to consume (or play with) it are arrayed around the main meal. (P.S. There are toolbars too)
  39. 39. WHICH PAIR OF PANTS ARE NOW 39.99?
  40. 40. WHICH CAR IS 49.99?
  41. 41. Why is the response so far from the invitation?
  42. 42. All design elements have meaning
  43. 43. BUTTONS HAVE MEANING
  44. 44. LINKS HAVE MEANING
  45. 45. LINKS HAVE MEANING
  46. 46. INPUTS HAVE MEANING
  47. 47. Form Principles Set Expectations 1 Use Appropriate Inputs 2 Give Clear Feedback 3
  48. 48. Hierarchy Creates Clarity
  49. 49. Subtlety will send you to the poor house. Tell your users what to do. Clarity is relaxing, not annoying.
  50. 50. Make different things very different Make similar things exactly alike Looks like a mistake Looks purposeful
  51. 51. Make it different to make it appear important Don’t just make it bigger
  52. 52. Use accents sparingly If everything is important, nothing is.
  53. 53. LAYOUTTell the eye where to look
  54. 54. painting
  55. 55. painting
  56. 56. Comics are read in the west left to right, like a page. However, good artists add visual elements to help you read the flow. http://samkieth.blogspot.com/
  57. 57. Everything is equally important
  58. 58. Clear Hiearchy
  59. 59. There is composition here Despite the density of information, the eye lands on the product, and moves to the buy buttons. Amazon reassures the user this is a good place to buy with a plethora of data. It’s part of their brand.
  60. 60. TYPE!Keep it simple, keep it high contrast
  61. 61. I’m a Serif I’m a sans-serif
  62. 62. I am Times New Roman Hey, I’m Arial
  63. 63. I am Comic Sans I am the devil
  64. 64. Papyrus is the new comic sans Helvetica is worshiped until it’s trite
  65. 65. I am Impact LOL
  66. 66. Georgia is always welcome Display fonts are hard to read As are scripts
  67. 67. A foolish consistency is the hobgoblin of little minds, adored by little statesmen and philosophers and divines. With consistency a great soul has simply nothing to do. He may as well concern himself with his shadow on the wall. Speak what you think now in hard words, and to-morrow speak what to-morrow thinks in hard words again, though it contradict every thing you said to-day. — 'Ah, so you shall be sure to be misunderstood.' — Is it so bad, then, to be misunderstood? Pythagoras was misunderstood, and Socrates, and Jesus, and Luther, and Copernicus, and Galileo, and Newton, and every pure and wise spirit that ever took flesh. To be great is to be misunderstood.
  68. 68. To be great is to be misunderstood.
  69. 69. A foolish consistency is the hobgoblin of little minds, adored by little statesmen and philosophers and divines. With consistency a great soul has simply nothing to do. He may as well concern himself with his shadow on the wall. Speak what you think now in hard words, and to-morrow speak what to-morrow thinks in hard words again, though it contradict every thing you said to-day. — 'Ah, so you shall be sure to be misunderstood.' — Is it so bad, then, to be misunderstood? Pythagoras was misunderstood, and Socrates, and Jesus, and Luther, and Copernicus, and Galileo, and Newton, and every pure and wise spirit that ever took flesh. To be great is to be misunderstood.
  70. 70. To be great is to be misunderstood.
  71. 71. A foolish consistency is the hobgoblin of little minds, adored by little statesmen and philosophers and divines. With consistency a great soul has simply nothing to do. He may as well concern himself with his shadow on the wall. Speak what you think now in hard words, and to-morrow speak what to- morrow thinks in hard words again, though it contradict every thing you said to-day. — 'Ah, so you shall be sure to be misunderstood.' — Is it so bad, then, to be misunderstood? Pythagoras was misunderstood, and Socrates, and Jesus, and Luther, and Copernicus, and Galileo, and Newton, and every pure and wise spirit that ever took flesh. To be great is to be misunderstood.
  72. 72. To be great is to be misunderstood.
  73. 73. My Design Hacks
  74. 74. FONTS: few fonts + contrast 2 fonts Headline and Body 3 font sizes HUGE Normal Legal
  75. 75. Color: keep it simple Neutrals, one color with variations and one accent
  76. 76. NATURE
  77. 77. Got a lot of pictures? Use less color.
  78. 78. DO LESS • Only use 1-2 fonts. • Only use 3 font sizes, all very different. Perhaps a fourth for footer text. • Only use one color, with variations, and one “accent” color. • Turn on the grid (if you are using Photoshop, etc) • Never align center. • Don’t use stock photography, unless you have awesome taste. It has no soul. • Know what purpose everything has. No purpose, take it out.
  79. 79. CHEATS • Design Patterns • Libraries • Hire Someone • Dribble, etc • Pinterest Collections
  80. 80. Q&A
  81. 81. Pop Quiz
  82. 82. Create a tool to help students collaborate across departments on multi- disciplinary projects 1. Decide how you’ll use your time 2. Decide what questions need answering 3. Decide what methods you’ll you’ll answer those questions and brainstorm solutions 4. Select methods and order your process 5. Discuss: is this right? 6. Send us your plan
  83. 83. Appendix

×