Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

05a Fundamentals of UX Workshop: Interface Design

1,335 views

Published on

Covering usable interfaces including forms and navigation design.

Published in: Design
  • Be the first to comment

05a Fundamentals of UX Workshop: Interface Design

  1. 1. Designing the User Experience: THE FUNDAMENTALS DESIGNING INTERFACE Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License. To have this workshop at your business or conference , contact cwodtke@eleganthack.com
  2. 2. Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License. To have this workshop at your business or conference , contact cwodtke@eleganthack.com 2 “Like putting an Armani suit on Attila the Hun, interface design only tells how to dress up an existing behavior.” – Alan Cooper
  3. 3. Making pages out of boxes and arrows TRANSFORM YOUR FLOWS Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License. To have this workshop at your business or conference , contact cwodtke@eleganthack.com
  4. 4. A task analysis Information Architecture: Blueprints for the Web, this is a task analysis for a website for Sundance film festival, featuring a schedule planner Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License. To have this workshop at your business or conference , contact cwodtke@eleganthack.com
  5. 5. Each task could have a page Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License. To have this workshop at your business or conference , contact cwodtke@eleganthack.com
  6. 6. Remind you of something? 1995: first graphic logo Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License. To have this workshop at your business or conference , contact cwodtke@eleganthack.com First Yahoo 1994
  7. 7. Including the schedule creator tool… Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License. To have this workshop at your business or conference , contact cwodtke@eleganthack.com
  8. 8. Wizards: Many boxes, many pages Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License. To have this workshop at your business or conference , contact cwodtke@eleganthack.com
  9. 9. Use Wizards: ‣ When users want to accomplish a goal that has many steps. Wizards are good at making sure you don’t miss a step. ‣ When the steps must be completed in order. Wizards are linear, so it’s impossible to complete them any other way. ‣ When the task is seldom performed. Wizards can seem slow and plodding, so they are best used in tasks you do only once in a while, like setting up a printer. ‣ The audience is not technically savvy and is likely to be confused by a page with a lot of choices on it. A Web site can have novice users, and a wizard makes complex tasks seem easy. ‣ Bandwidth is low and downloading a single big page could take forever, or the tasks require several server calls, which would also slow the page’s load. ‣ The task has several steps in it, performed only once a visit, such as checkout. Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License. To have this workshop at your business or conference , contact cwodtke@eleganthack.com
  10. 10. WHAT SHOULD BE A WIZARD Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License. To have this workshop at your business or conference , contact cwodtke@eleganthack.com Discuss:
  11. 11. You can group tasks together Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License. To have this workshop at your business or conference , contact cwodtke@eleganthack.com
  12. 12. Control Panel Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License. To have this workshop at your business or conference , contact cwodtke@eleganthack.com
  13. 13. on software Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License. To have this workshop at your business or conference , contact cwodtke@eleganthack.com in preferences, set occasionally, by experts
  14. 14. On the web, they are often account settings Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License. To have this workshop at your business or conference , contact cwodtke@eleganthack.com
  15. 15. WHAT SHOULD BE A CONTROL PANEL Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License. To have this workshop at your business or conference , contact cwodtke@eleganthack.com Discuss
  16. 16. Bring the settings and the thing modified together TOOLBARS Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License. To have this workshop at your business or conference , contact cwodtke@eleganthack.com
  17. 17. What if we put the tasks with the thing they were modifying? Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License. To have this workshop at your business or conference , contact cwodtke@eleganthack.com
  18. 18. It’s a toolbar Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License. To have this workshop at your business or conference , contact cwodtke@eleganthack.com Tools here Item affected here
  19. 19. And here Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License. To have this workshop at your business or conference , contact cwodtke@eleganthack.com ToToloso hlebraers Item affected here And here Photoshop: toolbars on steroids
  20. 20. The web uses toolbars more sparingly Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License. To have this workshop at your business or conference , contact cwodtke@eleganthack.com
  21. 21. ToToools herle bars Item affected here A simpler design is better for infrequent Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License. To have this workshop at your business or conference , contact cwodtke@eleganthack.com use.
  22. 22. Location, palette GROUP LIKE ITEMS Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License. To have this workshop at your business or conference , contact cwodtke@eleganthack.com
  23. 23. Where does the fork go? Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License. To have this workshop at your business or conference , contact cwodtke@eleganthack.com QUIZ 2 3
  24. 24. An Interface is like a table setting, the tools you need are next to the food you eat. Content is the meal. Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License. To have this workshop at your business or conference , contact cwodtke@eleganthack.com
  25. 25. 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) Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License. To have this workshop at your business or conference , contact cwodtke@eleganthack.com
  26. 26. Why is the response so far from the invitation? Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License. To have this workshop at your business or conference , contact cwodtke@eleganthack.com
  27. 27. A BAG OF APPLES WHAT TOOLS DO YOU HAVE? WHERE DO THEY GO? Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License. To have this workshop at your business or conference , contact cwodtke@eleganthack.com Exercise 2 7
  28. 28. ZONE YOUR PAGE Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License. To have this workshop at your business or conference , contact cwodtke@eleganthack.com
  29. 29. 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. Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License. To have this workshop at your business or conference , contact cwodtke@eleganthack.com
  30. 30. ‣ 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 Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License. To have this workshop at your business or conference , contact cwodtke@eleganthack.com
  31. 31. Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License. To have this workshop at your business or conference , contact cwodtke@eleganthack.com Zone this page
  32. 32. HOW TO MAKE A WIREFRAME IN 30 SECONDS Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License. To have this workshop at your business or conference , contact cwodtke@eleganthack.com
  33. 33. Draw a rectangle Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License. To have this workshop at your business or conference , contact cwodtke@eleganthack.com
  34. 34. Add global elements Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License. To have this workshop at your business or conference , contact cwodtke@eleganthack.com
  35. 35. ‣ Next, add the key zones ‣ Start with a list of elements, perhaps written on post its. Group them, then find them homes on your page. ‣ The fill in the actual elements Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License. To have this workshop at your business or conference , contact cwodtke@eleganthack.com
  36. 36. Finally, Annotate Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License. To have this workshop at your business or conference , contact cwodtke@eleganthack.com
  37. 37. Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License. To have this workshop at your business or conference , contact cwodtke@eleganthack.com Consider ‣ Where does the content come from? If you have a list of related articles, specify how they’re related. Are they the most viewed? Most viewed from that section? ‣ What is the nature of the content? Does it vary greatly in length, size, language, and type? ‣ Is the element required or optional? What happens if the element doesn’t appear on that page? Does the layout change? ‣ Is the element conditional? Does it vary based on other factors? For example, do administrators see additional links? What happens if an article doesn’t have an associated image? What if it does? ‣ What’s the default or expected state? Ideally, what’s supposed to happen on the page. ‣ What are the alternate or error states? How does the design change when things don’t go right?
  38. 38. Each person from team takes one page WIREFRAME A PAGE: 10 MINUTES Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License. To have this workshop at your business or conference , contact cwodtke@eleganthack.com Search Homepage Item page Checkout 3 8
  39. 39. What goes in your wireframes? INTERFACE INGREDIENTS Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License. To have this workshop at your business or conference , contact cwodtke@eleganthack.com
  40. 40. Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License. To have this workshop at your business or conference , contact cwodtke@eleganthack.com 4 0 HEADER
  41. 41. Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License. To have this workshop at your business or conference , contact cwodtke@eleganthack.com 4 CORE PRINCIPLES 1 & CONSIDERATIONS
  42. 42. Layout Objects Type Color Line Hierarchy Relationships Affordances HUD Feedback Modes Input Navigation Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License. To have this workshop at your business or conference , contact cwodtke@eleganthack.com 4 2 THE LANGUAGE OF INTERFACE INTERACTIVE (DOING) GRAPHICAL (UNDERSTANDING)
  43. 43. Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License. To have this workshop at your business or conference , contact cwodtke@eleganthack.com 4 3 INTERACTIVE INTERFACE DESIGN 1. DOING
  44. 44. Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License. To have this workshop at your business or conference , contact cwodtke@eleganthack.com 4 4 THE LANGUAGE OF INTERFACE AFFORDANCES
  45. 45. Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License. To have this workshop at your business or conference , contact cwodtke@eleganthack.com 4 5 THE LANGUAGE OF INTERFACE BUTTONS LOOK PUSHABLE
  46. 46. Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License. To have this workshop at your business or conference , contact cwodtke@eleganthack.com 4 6 THE LANGUAGE OF INTERFACE BUTTONS HAVE MEANING
  47. 47. Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License. To have this workshop at your business or conference , contact cwodtke@eleganthack.com 4 7 THE LANGUAGE OF INTERFACE LINKS LOOK CLICKABLE
  48. 48. Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License. To have this workshop at your business or conference , contact cwodtke@eleganthack.com 4 8 THE LANGUAGE OF INTERFACE LINKS HAVE HIERARCHY
  49. 49. Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License. To have this workshop at your business or conference , contact cwodtke@eleganthack.com 4 9 ON SUBTLETY When you don’t want to interrupt an action, be subtle (think of footnotes). If they are reading, don’t bother them. When you need to prompt an action, subtlety will send you to the poor house. Tell your users what to do. Clarity is relaxing, not annoying.
  50. 50. Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License. To have this workshop at your business or conference , contact cwodtke@eleganthack.com 5 1 HEADS UP DISPLAY Heads Up Display: Information user needs nearby to be effective
  51. 51. AN EMAIL HUD Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License. To have this workshop at your business or conference , contact cwodtke@eleganthack.com 5 2 HEADS UP DISPLAY All HUD, no content
  52. 52. A SOCIAL HUD Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License. To have this workshop at your business or conference , contact cwodtke@eleganthack.com 5 3 HEADS UP DISPLAY
  53. 53. Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License. To have this workshop at your business or conference , contact cwodtke@eleganthack.com 5 4 INPUT
  54. 54. Consider Context Set expectations Use appropriate inputs Give swift and clear feedback Ask for less AB test Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License. To have this workshop at your business or conference , contact cwodtke@eleganthack.com 5 5 FORM PRINCIPLES
  55. 55. Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License. To have this workshop at your business or conference , contact cwodtke@eleganthack.com 5 6 FORM PRINCIPLES
  56. 56. Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License. To have this workshop at your business or conference , contact cwodtke@eleganthack.com 5 7
  57. 57. Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License. To have this workshop at your business or conference , contact cwodtke@eleganthack.com 5 8
  58. 58. Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License. To have this workshop at your business or conference , contact cwodtke@eleganthack.com 5 9
  59. 59. STRUCTURE OBJECTIVES Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License. To have this workshop at your business or conference , contact cwodtke@eleganthack.com 6 0 ACTIVITY: DESIGN YOUR SIGNUP FORM 5 MIN. 1. Individually design a sign-up form for your project. 2. Think about the following element: 1. Name (first/last?) 2. Username/nickname? 3. Password (enter twice?) 4. Terms of Service (link/display?) 5. Sign up with Facebook/Twitter? 6. Optional demographics? 7. Over 13? INDIVIDUALLY
  60. 60. NAVIGATION Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License. To have this workshop at your business or conference , contact cwodtke@eleganthack.com
  61. 61. Most IA is invisible A lot of work no one sees – Synonym rings – Controlled vocabulary If it was seen, it would be too much to understand We show only a part via navigation Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License. To have this workshop at your business or conference , contact cwodtke@eleganthack.com 62
  62. 62. Understanding Navigation 6 Messaging and Access 4 Where Am I? What's Nearby? What's Related To What's Here? Global Navigation Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License. To have this workshop at your business or conference , contact cwodtke@eleganthack.com Local Navigation Content Lives Here, With Contextual Navigation Inline Or Separate.
  63. 63. Global navigation Where you are – Brand/masthead Where you can go (site offering) – Top level categories Safety nets – Where’s my (shopping cart/account/help???) Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License. To have this workshop at your business or conference , contact cwodtke@eleganthack.com 6 5
  64. 64. Global Navigation ‘03 vs ‘12 6 Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License. To have this workshop at your business or conference , contact cwodtke@eleganthack.com 6
  65. 65. Global navigation ‘03 vs ‘12 6 Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License. To have this workshop at your business or conference , contact cwodtke@eleganthack.com 7
  66. 66. Local Navigation I’ve started down the path… Now what? –What are the categories of items? –What are the siblings of what I see? –What are the subcategories? – Can I narrow my search? Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License. To have this workshop at your business or conference , contact cwodtke@eleganthack.com 6 8
  67. 67. Local Navigation 2003 6 Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License. To have this workshop at your business or conference , contact cwodtke@eleganthack.com 9
  68. 68. Secondary navigation is now temporal Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License. To have this workshop at your business or conference , contact cwodtke@eleganthack.com
  69. 69. Pagination 7 Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License. To have this workshop at your business or conference , contact cwodtke@eleganthack.com 1 Useful to reduce page download speed and cognitive overload. Annoying for printing. Impossible to predict what you’ll get Users would rather scroll than click
  70. 70. Facets as filters 7 Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License. To have this workshop at your business or conference , contact cwodtke@eleganthack.com 2
  71. 71. Print/e mail/sh are Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License. To have this workshop at your business or conference , contact cwodtke@eleganthack.com 7 3
  72. 72. Conventions It is certainly probable, then, that placing these objects in expected locations would give an e-commerce site a competitive edge over those that do not… -- Examining User Expectations for the Location of Common E-Commerce Web Objects Usability News 4.1 2002 Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License. To have this workshop at your business or conference , contact cwodtke@eleganthack.com
  73. 73. Conventions If 90% or more of the big sites do things in a single way, then this is the de-facto standard and you have to comply. Only deviate from a design standard if your alternative design has at least 100% higher measured usability. If 60-90% of the big sites do things in a single way, then this is a strong convention and you should comply unless your alternative design has at least 50% higher measured usability. If less than 60% of the big sites do things in a single way, then there are no dominant conventions yet and you are free to design in an alternative way. -- Jakob Nielsen, November 14, 1999 Alertbox column "Identifying De-Facto Standards for E-Commerce Web Sites“ © 2003 Heidi P. Adkisson Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License. To have this workshop at your business or conference , contact cwodtke@eleganthack.com
  74. 74. Conventions ‣ Some things are becoming de rigor ‣ Deviate when you’ve got something better ‣ Not because you are bored "Identifying De-Facto Standards for E-Commerce Web Sites“ © 2003 Heidi P. Adkisson Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License. To have this workshop at your business or conference , contact cwodtke@eleganthack.com
  75. 75. Now combine Follow expectations based on conventions Design a hierarchy based on task importance Err on the side of simplicity Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License. To have this workshop at your business or conference , contact cwodtke@eleganthack.com 7 7
  76. 76. EXERCISE: COMPETITIVE ANALYSIS OF NAVIGATION Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License. To have this workshop at your business or conference , contact cwodtke@eleganthack.com Find: Global Local Inline Related items Facets as filters Social buttons
  77. 77. Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License. To have this workshop at your business or conference , contact cwodtke@eleganthack.com 7 Q&A 9

×