1 / 0

Crafting Compelling Narratives in Interaction Design: The Initial Design Phase

In the Interaction Plan phase, we focus on bridging the gap between client needs and customer expectations. With an understanding of the domain, the client, and their audience, we delve into creating a cohesive core theme that resonates. Is it pleasurable, seductive, inspiring, or educational? Once we've defined our concept, the next step is to weave engaging stories that captivate users and enhance their experience. These narratives will guide the design process, ensuring an intuitive and meaningful interaction.

davis
Télécharger la présentation

Crafting Compelling Narratives in Interaction Design: The Initial Design Phase

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. INTERACTION PLAN PHASE

    Initial Design and Information Architecture
  2. You know the domain. You know the client and their customers. You've got a core theme/concept* that connects them. * Pleasurable? Seductive? Inspiring? Educational? Now what ... ? Write some frickin' stories!
  3. Stories for Theater: Scripts Twilight ZoneNightmare at 20,000 Feet FADE IN on an AIRPLANE CABIN, one dark and stormy night in the early 1960s. Airplane and crowd NOISE drowns out much of the conversation between the passengers getting on the plane and the blonde, clipboard-carrying STEWARDESS who checks their boarding passes. A uniformed policeman, possibly a sheriff, enters and the stewardess sees that he's wearing a gun on his hip, so he shows her his badge as well as his boarding pass. STEWARDESS: All right. Fine. Enjoy your flight. The policeman heads for his seat. One passenger later, an attractive couple enter. This is BOB and JULIA WILSON. Bob gives the plane an apprehensive look while showing their passes to the stewardess. She clears them to go through. There's no assigned seating so Julia, leading the way, points out a couple of likely seats to Bob. JULIA: Those all right? BOB: Yeah. Be fine. (off Julia's coat) Here, give me that. Bob stows their coats in the overhead bin. They start to sit -- Julia on the aisle, Bob by the window. JULIA (suddenly concerned): Do you want me to sit next to the window? BOB (reassuring): No.
  4. Stories for Theater: Scripts Twilight ZoneNightmare at 20,000 Feet FADE IN on an AIRPLANE CABIN, one dark and stormy night in the early 1960s. Airplane and crowd NOISE drowns out much of the conversation between the passengers getting on the plane and the blonde, clipboard-carrying STEWARDESS who checks their boarding passes. A uniformed policeman, possibly a sheriff, enters and the stewardess sees that he's wearing a gun on his hip, so he shows her his badge as well as his boarding pass. STEWARDESS: All right. Fine. Enjoy your flight. The policeman heads for his seat. One passenger later, an attractive couple enter. This is BOB and JULIA WILSON. Bob gives the plane an apprehensive look while showing their passes to the stewardess. She clears them to go through. There's no assigned seating so Julia, leading the way, points out a couple of likely seats to Bob. JULIA: Those all right? BOB: Yeah. Be fine. (off Julia's coat) Here, give me that. Bob stows their coats in the overhead bin. They start to sit -- Julia on the aisle, Bob by the window. JULIA (suddenly concerned): Do you want me to sit next to the window? BOB (reassuring): No.
  5. Stories for HCI: Scenarios A user scenariois a detailed narrative describing how a user performs a specific task. When writing scenarios, go with journalism's 5 Ws + 1 H: Who is the user (persona)? Debbie, an amateur actor and Internet-savvy 40-year-old woman. What is the task the user is performing? Buying theater tickets online. Why is the user performing this task? She wants to see a Broadway show. Where is the user performing this task? On a laptop on her dining room table. When is the user performing this task? 9:20 pm on a Thursday night. How does the user perform the task? She goes to the website, goes to the Tickets page, fills out a form, etc.
  6. Stories for HCI: (User) Scenarios A user scenariois a detailed narrative describing how a user performs a specific task. When writing scenarios, go with journalism's 5 Ws + 1 H: Who is the user (persona)? Debbie, an amateur actor and Internet-savvy 40-year-old woman. What is the task the user is performing? Buying theater tickets online. Why is the user performing this task? She wants to see a Broadway show. Where is the user performing this task? On a laptop on her dining room table. When is the user performing this task? 9:20 pm on a Thursday night. How does the user perform the task? She goes to the website, goes to the Tickets page, fills out a form, etc. These are just the facts. Your mission is to weave them into a compelling scenario (story).
  7. Mini-ICE As I read through this scenario (next slide), call out the Who, What, Where, Why, When, and How of it.
  8. Scenarios Francis and Michael have agreed that she'll take charge of learning more about the home-buying process. She goes online, does a Google search for “Atlanta real estate,” and follows a link to the site's home page. She sees that she can search for houses from the home page, so just for fun, she does a quick Atlanta search to see what kinds of houses show up. There are lots of houses in many different neighborhoods, and she easily narrows her results down to the area where she and Michael live, using a map. There are still many results, and she's not quite sure which search options to use to narrow the search further. Then she notices a link for first-time home buyers and follows, it hoping for basic how-to information. The link takes Francis to a step-by-step tutorial that explains the whole process, and she immediately feels like she's found the right site from which to begin her house search. She carefully reads some articles for first-time home buyers, taking notes as she reads. She bookmarks other articles she wants to go back and read later. She also comes across the site's calculator and starts trying different combinations of numbers to find out what she and Michael can afford. She particularly likes the glossary of terms so that she can finally figure out what “points” are and learn more about different types of mortgages. After an hour and a half of reading, her brain is full, and she shuts her computer down for the day, feeling like she got an excellent start. The next day, she comes back to the site to look up information specific to Atlanta neighborhoods and finds lots of information on each. She's able to focus on five neighborhoods that look particularly good. The fun begins that night, when she takes Michael through all that she has learned, and they set up a regular schedule for looking at online house listings.
  9. Scenario: View Shop StatusPersona (primary): Tom, ManagerContext: 10:30 am Tuesday at Eddie's quick-lube shop #3 Tom logs in to his Dashboard app, where he has access to manager-level information. He reviews today's ticket average in relation to the month's target. He looks at the monthly running total for car count. Today's car count is low because cars haven't really started rolling in yet. Maybe the rain will clear up and bring people in? Tom wonders if other stores are also seeing lower volume today, perhaps due to the weather. Tom wonders how impacted his manager's bonus will be this month if the pace remains slow. How'd things fare last year? What does this scenario imply about Dashboard features and functions?
  10. Scenario Breakdown  Critical Path To Do List
  11. Site Map with Critical Path Highlighted
  12. Area-Coded Mind-Mappish Site Map
  13. Website Wireframes Mini-FAQ What is a website wireframe? Also known as a page schematic or screen blueprint, a website wireframe is a visual guide that represents the skeletal framework of a website. What are website wireframes used for? To depict the page layout and arrangement of the website’s content, including interface elements and navigational systems, and how they work together. What are website wireframes *not* used for? Typographic style, color, or graphics. How are website wireframes typically made? Pencil drawings, sketches on a whiteboard, etc. Similar to paper prototypes.
  14. Website Wireframes Mini-FAQ Website wireframes focus on: The kinds of information displayed The locations where this information is displayed The range of functions available The relative priorities of the information and functions The rules for displaying certain kinds of information The effect of different scenarios on the display The website wireframe connects the underlying conceptual structure, or information architecture, to the surface, or visual design of the website. Visual Design InformationArchitecture Website Wireframe
  15. Wireframe Recipe Determine all of the content that needs to be put on the page. Organize this content in terms of logic, flow, usability: All objects, actions, categories, tools, labels, groupings, relationships, priorities, etc. Put everything SOMEwhere Worry about finding places for all the content now. Worry about visual design later.
  16. Wireframe Sketches
  17. Wireframe Sketches
  18. Wireframe Sketches
  19. Wireframe Sketches Storyboard Style
  20. Wireframe Sketches Storyboard Style
  21. Wireframe Sketches Storyboard Style
  22. Wireframe Evolution Start now by creating wireframe sketches (possibly grouped storyboard style) to generate, try out, refine, and filter ideas. Eventually (end of project) you'll be creating detailed, polished, pixel-perfect wireframes as "proof of concepts" of your agreed-upon website info architecture and specs.
  23. Ideas are cheap and easy to come by. Make many. The hard part is deciding which idea is the best to use. Choose well.
More Related