Lecture 010 Polishing the UI
•
1 like•855 views
Lecture from CS247 at Stanford on effect graphic design for UI. http://cs247.stanford.edu/2018-winter/
Report
Share
Lecture 010 Polishing the UI
- 1. Week 10 HCI Design Studio • CHRISTINA WODTKE • MICHAEL BERNSTEIN • JULIE STANFORD • CS247.STANFORD.EDU
- 2. Finishing Interfaces Bring the polish
- 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. Create Interaction Framework and Page Templates A framework is how the user moves through screens, the page templates show how content is displayed.
- 6. Choose the Interaction Framework • Wizard? • Toolbar and Canvas? • Navigation type?
- 7. Wizards
- 9. First Yahoo 1994 1995: first graphic logo Remind you of something?
- 10. Wizards: Many boxes, many pages
- 11. When to Use Wizards • Multi step process • Must be completed in order • The audience is not technically savvy • Bandwidth is low
- 13. What if we put the tasks with the thing they were modifying?
- 14. It’s a toolbar Tools here Item affected here
- 15. Photoshop: toolbars on steroids Tools here Item affected here And here And here
- 16. The web uses toolbars sparingly
- 17. Toolbars Tools here Item affected here A simpler design is better for infrequent use.
- 21. Carasol
- 23. What other ways can we organize elements? Control Panels? Carousels? Thumbnail<-> Full Size?
- 24. Page Templates Even Powerpoint offers layouts for the most likely content configurations
- 25. 1. Identify key pages • Homepage • Product Page • Article • Search results • Shopping cart • Settings • Account • Gallery
- 26. 2. Design a template layout for each Consider variations such as mobile & desktop
- 27. 3. Create Themed Zones for each page Navigation Content Editing tools Similar items
- 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. • 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. If you are putting boxes around things to make it clear, you probably should start over
- 31. Skin it
- 33. Useronboarding.com Complete breakdowns of how sites take users through sign up and getting started.
- 34. No content? How can you get users started?
- 35. Mistakes, I’ve made a few Make sure your users can recover.
- 39. 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)
- 40. WHICH PAIR OF PANTS ARE NOW 39.99?
- 42. Why is the response so far from the invitation?
- 48. Form Principles Set Expectations 1 Use Appropriate Inputs 2 Give Clear Feedback 3
- 55. Subtlety will send you to the poor house. Tell your users what to do. Clarity is relaxing, not annoying.
- 56. Make different things very different Make similar things exactly alike Looks like a mistake Looks purposeful
- 57. Make it different to make it appear important Don’t just make it bigger
- 58. Use accents sparingly If everything is important, nothing is.
- 59. LAYOUTTell the eye where to look
- 60. painting
- 61. painting
- 64. 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/
- 65. Everything is equally important
- 66. Clear Hiearchy
- 67. 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.
- 68. TYPE!Keep it simple, keep it high contrast
- 69. I’m a Serif I’m a sans-serif
- 70. I am Times New Roman Hey, I’m Arial
- 71. I am Comic Sans I am the devil
- 72. Papyrus is the new comic sans Helvetica is worshiped until it’s trite
- 73. I am Impact LOL
- 75. Georgia is always welcome Display fonts are hard to read As are scripts
- 76. 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.
- 77. To be great is to be misunderstood.
- 78. 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.
- 79. To be great is to be misunderstood.
- 80. 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.
- 81. To be great is to be misunderstood.
- 82. My Design Hacks
- 83. FONTS: few fonts + contrast 2 fonts Headline and Body 3 font sizes HUGE Normal Legal
- 84. Color: keep it simple Neutrals, one color with variations and one accent
- 86. NATURE
- 90. Got a lot of pictures? Use less color.
- 94. 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.
- 95. CHEATS • Design Patterns • Libraries • Hire Someone • Dribble, etc • Pinterest Collections
- 96. Q&A
- 97. Pop Quiz
- 98. 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
- 99. Appendix