1 / 73

Deliverables that Clarify, Focus, and Improve Design

Deliverables that Clarify, Focus, and Improve Design. Rich Fulcher, Bryce Glass, Matt Leacock, AOL Design Skills and Methods Beginner/Intermediate We will discuss the benefits of using concept maps, wireframes, storyboards, and flow maps, and tips on how to produce each.

angie
Download Presentation

Deliverables that Clarify, Focus, and Improve Design

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  1. Deliverables that Clarify,Focus, and Improve Design Rich Fulcher, Bryce Glass, Matt Leacock, AOL Design Skills and Methods Beginner/Intermediate We will discuss the benefits of using concept maps, wireframes, storyboards, and flow maps, and tips on how to produce each. Fulcher, Glass, Leacock

  2. Deliverables that Clarify,Focus, and Improve Design Overview: • Introduction • Concept Maps • Wireframes and Storyboards • Flow Maps • Conclusion Please don’t hold questions for the end—ask anytime during the presentation. Fulcher, Glass, Leacock

  3. What Do We Mean by“Deliverables?” • (Good) design is a participatory process, relying on cooperation and communication between: • Designers (UI, visual, information architects) • Engineers (managers, front-end, back-end) • Product managers • Business owners • Project managers • Deliverables are the documents that communicate the state of the design to fellow team members Fulcher, Glass, Leacock

  4. And do we really believe“Clarify, Focus, and Improve Design?” • Yes! • Deliverables aid in communicating a product vision • Are valuable for soliciting stakeholder feedback • Makes whole team more accountable for design direction • Deliverables help give design a greater voice in product development • Being accountable for producing and sticking to deliverables make UI a full peer in development process • Presents an opportunity to introduce user-centered design methodologies, and more opportunities to make sure findings of user research are not “lost in the shuffle” Fulcher, Glass, Leacock

  5. The Deliverables We’ll Talk About Today • Concept Maps • Early, high-level explorations of the ‘space’ the product will live in • Wireframes • Rough functional descriptions of specific user views • Storyboards • Compelling narratives that walk idealized “users” through sample tasks • Flow Maps • Complete blueprints of the views, logic, and pathways through an application Fulcher, Glass, Leacock

  6. Things We Won’t (directly)Be Talking About Today • A specific user-centered design process • Some other well-known deliverables: • User Personae • Use Cases • Prototypes (etc) • Software tools for producing these deliverables Fulcher, Glass, Leacock

  7. Humanized Design forHuman Teammates • The conference theme: • “If technology is to improve the human experience, it needs to respect human expectations, tendencies, and dignity” • How we approach the design of deliverables: • Documents are only truly successful if they provide value to at least some subset of team • We need to understand the needs and expectations of our teammates, and design accordingly • Much of this talk will focus on the benefits of deliverables for our audience Fulcher, Glass, Leacock

  8. Concept Maps Matt Leacock Fulcher, Glass, Leacock

  9. Concept Maps • High-level maps • Represent a set of meaningful relationships between a collection of concepts • Covered in detail in Novak and Gowin’s Learning How to Learn (1985) Fulcher, Glass, Leacock

  10. Anatomy of a Concept Map Fulcher, Glass, Leacock

  11. Anatomy of a Concept Map Fulcher, Glass, Leacock

  12. Anatomy of a Concept Map Fulcher, Glass, Leacock

  13. Benefits for the Designer • The process of drawing the map: • Helps designer understand the domain • Is a creative process – new discoveries are made as the map is drawn • Helps establish credibility with the team • The map itself: • Offers the first chance to interject the user as a guiding concept for the product Fulcher, Glass, Leacock

  14. How to Make a Concept Map • Identify the Main Concept • List Related Concepts • Draw a Rough Map • Interview Team Members and Domain Experts • Identify Synonyms and Instances • Redraw, Redraw, Redraw • Get Feedback from Team • (Repeat 4-7) Fulcher, Glass, Leacock

  15. Identify the Main ConceptHow To Make a Concept Map, Step 1 of 7 • Identify the main concept • Keeps the map focused • Define the main concept • Leads to many related concepts Fulcher, Glass, Leacock

  16. List Related ConceptsHow To Make a Concept Map, Step 2 of 7 • Jot down the concepts that come to mind first • Don’t worry about: • Organizing the words • How important the concepts are • How complete the list is Example for “Solar System”: Solar System Star Planets Sun Space Earth Moon Comets Fulcher, Glass, Leacock

  17. Draw a Rough MapHow To Make a Concept Map, Step 3 of 7 • Don’t worry about drawing it perfectly • Start with a large sheet of paper • Add in linking words after you draw the links Fulcher, Glass, Leacock

  18. Interview OthersHow To Make a Concept Map, Step 4 of 7 • Show your sketch to team members and domain experts and ask them for additional concepts • Generate a long list of concepts Example for “Solar System”: Solar System Galaxy Star Moon Satellites Sun Void Space Planets Earth Jupiter Saturn Uranus Neptune Mercury Venus Mars Pluto Comets Milky Way Meteoroids Interplanetary Medium Energy Interplanetary Dust Interplanetary Gas Plasma Solar Wind Comets Fulcher, Glass, Leacock

  19. Identify Synonyms and InstancesHow To Make a Concept Map, Step 5 of 7 • Combine synonyms into one concept • List instances next to their parent concept Examples: Synonym Elimination Void, Vacuum, Space (Use “Space” for all three concepts) Instance Clustering Mars, Earth, Mercury, Jupiter (List next to Planets) Andromeda, Milky Way (List next to Galaxy) Fulcher, Glass, Leacock

  20. Redraw, Redraw, RedrawHow To Make a Concept Map, Step 6 of 7 • Each time you redraw the map, you’ll discover new connections • The map is never done Fulcher, Glass, Leacock

  21. The Same Map, RedrawnHow To Make a Concept Map, Step 6 of 7 (cont.) The maps are malleable and can be redrawn to highlight specific concepts or relationships. Fulcher, Glass, Leacock

  22. Get Feedback from TeamHow To Make a Concept Map, Step 7 of 7 • Check for understanding • Validate relationships between concepts • Check for completeness • In the process, you’re building an agreement over what the concepts are and how they relate to each other. Fulcher, Glass, Leacock

  23. Discover More with MatricesHow To Make a Concept Map • Create a matrix of the concepts • Look for intersections of interest • Add these as new links on your map Fulcher, Glass, Leacock

  24. Look for an Organizing PrincipleHow To Make a Concept Map • Examples: • Choose a dominant proposition • Use a hierarchy • Use overlapping propositions • Use scale to aid reading order • Larger concepts more important • Use progressive builds or separate maps to gradually show additional complexity Fulcher, Glass, Leacock

  25. Benefits for the AudienceConcept Maps • Defines a common vocabulary • Quickly aggregates strands of team knowledge • Becomes the lingua franca for cross-discipline meetings and communication • Takes group knowledge out of minds and puts it on paper • Brings new members up to speed quickly • Reduces impact of departing team members • Can encapsulate business or technology models as well as user-centered models Fulcher, Glass, Leacock

  26. Sample Map: Internet Search • Done for Netscape in 1999 • Search was a new business for Netscape • Had little domain knowledge and new to team Fulcher, Glass, Leacock

  27. SketchesSample Map: Internet Search Fulcher, Glass, Leacock

  28. Complete MapSample Map: Internet Search Fulcher, Glass, Leacock

  29. Complete MapSample Map: Internet Search Source: http://www.oilzine.com Fulcher, Glass, Leacock

  30. Basic MapSample Map: Internet Search Fulcher, Glass, Leacock

  31. Complete MapSample Map: Internet Search Fulcher, Glass, Leacock

  32. Wireframesand Storyboards Rich Fulcher Fulcher, Glass, Leacock

  33. Wireframes • Appeared in the early 1960s as part of early Computer-Aided Design systems • Represent complex objects through simple primitives (lines and points) in order to make it quick to render and easy to manipulate Source: www.tnt.uni-hannover.de/org Fulcher, Glass, Leacock

  34. Wireframes in UI Design • A wireframe is a rough layout of a specific user view • Skeletal view • Shows contents as outlines or simple primitives • Not concerned with branding or visual design • Shows organization of information and controls • Positioning • Clustering • Ordering • Hierarchy Fulcher, Glass, Leacock

  35. Sample Wireframe Fulcher, Glass, Leacock

  36. Sample Wireframe Fulcher, Glass, Leacock

  37. Benefits for the Audience -Wireframes • Business owners and product managers: • Show “vision” for product • Facilitate organizational buy-in process • Visual Designers: • Skeleton for visual exploration • Engineers and technical writers: • Guide work estimates Fulcher, Glass, Leacock

  38. Benefits for the Designer -Wireframes • As first output of design which “feels like” a UI, wireframes generate stakeholder conversation • Correct invalid assumptions • Check if key tasks and business objectives are supported • Compared to mockups, wireframes are faster to produce and can be iterated more rapidly • Wireframes can be used to compare multiple design solutions cheaply and quickly • Wireframes can be used in lo-fi usability testing early in development cycle • Test as paper or lightweight prototype (clickable image maps) Fulcher, Glass, Leacock

  39. Working with Wireframes • Pen and paper are fine initially Fulcher, Glass, Leacock

  40. Working with Wireframes • Vector-based drawing packages can create flexible wireframes quickly Fulcher, Glass, Leacock

  41. Working with Wireframes • Iterate frequently • Make use of flexibility of fidelity • Start simple • Increase fidelity as you iterate Fulcher, Glass, Leacock

  42. Storyboards • In film and TV, storyboards are used to plan key shots in a sequence - a visual script • They demonstrate how the shots relate to each other to form a whole experience Source: Josh Sheppard, www.thestoryboardartist.com Fulcher, Glass, Leacock

  43. Storyboards in UI Design • A storyboard uses a sequence of wireframes following a particular scenario to illustrate a sample series of interactions. • Highlights the key interactions that correspond to a user’s experience of a particular task. • Focused on a target user, not an “everyuser” Fulcher, Glass, Leacock

  44. Sample Storyboard Frame Fulcher, Glass, Leacock

  45. Benefits for the Audience -Storyboards • Business owners and product managers: • Storyboards speak to the “feel” of the product • Convey a larger sense of user experience • Executives: • Storyboards tell story of a legitimate user task • External stakeholders, new team members: • Storyboards can be an introduction to the product Fulcher, Glass, Leacock

  46. Benefits for the Designer -Storyboards • Do a better job than wireframes of focusing stakeholder feedback on tasks and behaviors • Facilitate “walking through” design when stakeholders are remote (ie conference calls) Fulcher, Glass, Leacock

  47. Working with Storyboards • Choose representative and compelling scenarios • Do focus on new views / interactions • Don’t focus on familiar behaviors (logging in, etc) • Don’t create a single comprehensive storyboard • Create multiple story segments • Each segment depicts a distinct user task • Show clear entry and completion steps Fulcher, Glass, Leacock

  48. Working with Storyboards • Don’t rely on a storyboard to speak for itself • Annotate storyboards with context • Film storyboards are often shown in context with script, which includes dialog and stage directions • Develop a lightweight user persona (the actor) • Include user motivations • Use an appropriate level of detail • You don’t have to show every mouse click or string of text entered Fulcher, Glass, Leacock

  49. Flow Maps Bryce Glass Fulcher, Glass, Leacock

  50. Flow Maps • A flow map is the comprehensive, canonical representation of a product’s scope, features and functionality. • Shows all screens • In multiple states • With edge cases • Shows relationships between screens • Gives insight into application logic • But it’s not specifically an engineering diagram Fulcher, Glass, Leacock

More Related