Diese Präsentation wurde erfolgreich gemeldet.
Die SlideShare-Präsentation wird heruntergeladen. ×

Designing The Interface For Use

Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Wird geladen in …3
×

Hier ansehen

1 von 93 Anzeige
Anzeige

Weitere Verwandte Inhalte

Diashows für Sie (20)

Anzeige

Ähnlich wie Designing The Interface For Use (20)

Weitere von Christina Wodtke (20)

Anzeige

Aktuellste (20)

Designing The Interface For Use

  1. 1. DESIGNING INTERFACE
  2. 2. 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
  4. 4. A task analysis From Information Architecture: Blueprints for the Web, this is a task analysis for a website for Sundance film festival, featuring a schedule planner
  5. 5. Each task could have a page
  6. 6. Remind you of something? 1995: first graphic logo First Yahoo 1994
  7. 7. Including the schedule creator tool…
  8. 8. Wizards: Many boxes, many pages
  9. 9. Use Wizards: ‣ When users want to accomplish a goal that has ‣ The audience is not technically savvy and is likely to many steps. Wizards are good at making sure you don‟t miss a step. ‣ be confused by a page with a lot of choices on it. A Web site can have novice users, and a wizard When the steps must be completed in order. makes complex tasks seem easy. Wizards are linear, so it‟s impossible to complete ‣ Bandwidth is low and downloading a single big page them any other way. ‣ could take forever, or the tasks require several When the task is seldom performed. Wizards can server calls, which would also slow the page‟s load. seem slow and plodding, so they are best used in tasks you do only once in a while, like setting up a printer. ‣ The task has several steps in it, performed only once a visit, such as checkout.
  10. 10. Discuss: WHAT SHOULD BE A WIZARD Task: DESIGN A WIZARD
  11. 11. You can group tasks together
  12. 12. Control Panel
  13. 13. You see them on software in preferences, set occasionally, by experts
  14. 14. On the web, they are often account settings
  15. 15. Discuss WHAT SHOULD BE A CONTROL PANEL Task DESIGN A CONTROL PANEL
  16. 16. Bring the settings and the thing modified together TOOLBARS
  17. 17. What if we put the tasks with the thing they were modifying?
  18. 18. It‟s a toolbar Tools here Item affected here
  19. 19. And here Toolbars Tools here Item affected here Photoshop: toolbars on steroids And here
  20. 20. The web uses toolbars more sparingly
  21. 21. Toolbars Tools here Item affected here A simpler design is better for infrequent use.
  22. 22. Location, palette GROUP LIKE ITEMS
  23. 23. 23 Fork, spoon, knife DRAW A PLACE SETTING – 30 SECONDS
  24. 24. An Interface is like a table setting, the tools you need are next to the food you eat. Content is the meal.
  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)
  26. 26. Why is the response so far from the invitation?
  27. 27. 27 Task ARTICLE OF CLOTHING: WHAT TOOLS WHERE?
  28. 28. ZONE YOUR PAGE
  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.
  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 ‣
  31. 31. Zone this page
  32. 32. ZONE YOUR HOMEPAGE
  33. 33. HOW TO MAKE A WIREFRAME IN 30 SECONDS
  34. 34. Draw a rectangle
  35. 35. Add global elements
  36. 36. 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 ‣
  37. 37. FINALLY, ANNOTATE
  38. 38. 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?
  39. 39. What goes in your wireframes? INTERFACE INGREDIENTS
  40. 40. HEADER 40
  41. 41. TODAY’S CLASS CORE PRINCIPLES & CONSIDERATIONS 41
  42. 42. THE LANGUAGE OF INTERFACE 42 GRAPHICAL (UNDERSTANDING) INTERACTIVE (DOING) Layout Objects Type Color Line Hierarchy Relationships Affordances HUD Feedback Modes Input Navigation
  43. 43. INTERACTIVE INTERFACE DESIGN DOING 43
  44. 44. THE LANGUAGE OF INTERFACE AFFORDANCES 44
  45. 45. THE LANGUAGE OF INTERFACE BUTTONS LOOK PUSHABLE 45
  46. 46. THE LANGUAGE OF INTERFACE BUTTONS WITH MEANING 46
  47. 47. THE LANGUAGE OF INTERFACE 47 LINKS LOOK CLICKABLE
  48. 48. THE LANGUAGE OF INTERFACE 48 LINKS HAVE HIERARCHY
  49. 49. 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. 49
  50. 50. 50 A QUICK BUTTON COMPETITIVE ANALYSIS / CRITIQUE GO TO 3-4 WEBSITES AND FIND 2 BUTTON / LINK INTERACTIONS YOU REALLY LIKE. 2 THAT YOU DISLIKE.
  51. 51. HEADS UP DISPLAY 51 Heads Up Display: Information user needs nearby to be effective
  52. 52. HEADS UP DISPLAY AN EMAIL HUD All HUD, no content 52
  53. 53. HEADS UP DISPLAY 53 A SOCIAL HUD
  54. 54. 54 FEEDBACK
  55. 55. USER FEEDBACK 55
  56. 56. INPUT 56
  57. 57. FORM PRINCIPLES FORM PRINCIPLES Consider Context Set expectations Use appropriate inputs Give sift and clear feedback Ask for less AB test 57
  58. 58. FORM PRINCIPLES 58
  59. 59. ACTIVITY: DESIGN YOUR SIGNUP FORM STRUCTURE 59 OBJECTIVES 1. Individually design a sign-up form for your project. INDIVIDUALLY 15 MIN. 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?
  60. 60. NAVIGATION
  61. 61. 61 Navigation: IA made visible “Like putting an Armani suit on Attila the Hun, interface design only tells how to dress up an existing behavior.” – Alan Cooper
  62. 62. 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 62
  63. 63. The magic number? 13 tabs– no one saw them. Six tabs, everyone saw them 63
  64. 64. But not everything is simple Global links Web search Related Services inbox masthead Log out Mail tools Folders And there isn‟t even content! tip inbox ads Other properties 64 upsell Write mail upsell ad Mail tools Related Services ad
  65. 65. Navigation orders complex pages 65
  66. 66. 66 Understanding Navigation Message and Access Where Am I? Content Lives Here, With Contextual Navigation Inline Or Separate. What's Nearby? Local Navigation Global Navigation What's Related To What's Here?
  67. 67. 67 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???)
  68. 68. Global Navigation „03 vs „12 68
  69. 69. Global navigation, Blogs 69
  70. 70. Global navigation „03 vs „12 70
  71. 71. 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? 71
  72. 72. Local Navigation 2003 72
  73. 73. Secondary navigation is now temporal
  74. 74. Local Navigation 74
  75. 75. Contextual navigation Inline links Related items Document management 75
  76. 76. Inline links 76
  77. 77. Related items 77
  78. 78. Pagination 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 78
  79. 79. Ad negotiation 79
  80. 80. 80 Print/email/shar e
  81. 81. 81 Facets as filters
  82. 82. Sort 82
  83. 83. Secondary Navigation Site Maps Indexes Table of Contents 83
  84. 84. Have you ever seen this page? 84
  85. 85. How about this one? 85
  86. 86. How about this one? 86
  87. 87. You can make it helpful “After testing several different sitemap designs on users, I decided to try putting one on every page of my small Columbian web site. I then decided to track how often it was used for navigation. It turns out the sitemap is used for over 65% of all navigation done on the site.” -- Usability Report by Peter Van Dijck of poorbuthappy.com (Guide to Columbia) http://www.webword.com/reports/sitemap.ht ml 87
  88. 88. 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 88
  89. 89. 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 89
  90. 90. Conventions Some things are becoming de rigor Deviate when you‟ve got something better Not because you are bored 90 "Identifying De-Facto Standards for E-Commerce Web Sites“ © 2003 Heidi P. Adkisson
  91. 91. Now combine Follow expectations based on conventions Design a hierarchy based on task importance Err on the side of simplicity 91
  92. 92. EXERCISE: COMPETITIVE ANALYSIS OF NAVIGATION
  93. 93. HEADER Q&A 93

Hinweis der Redaktion

  • Use this slide for a probing question at the beginning of a discussion or a point you’re trying to make.
  • The old yahoo mail
  • There is a movement toward simpler headers
  • Standard blog navigation – bloggers rarely put the work into categories, relying on chron to provide navigation.
  • The rise and fall of TABS
  • The site map may mostly be for search engines, but it can help humans too

×