HCDE 418 Monday, February 4 Wireframes Scenarios Storyboards

Today Announcements – 5 min Debrief guest speakers – 10 min Sketching critique – 15 min Wireframing – 15 min Break – 5 min Scenarios and Storyboards – 15 min Sketching critique – 15 min P3 A1 5 min

Announcements P3 due Friday at 5:00 PM! P2 by Tuesday night A1 grades coming Portfolio guest speaker, Puja Parakh Bill Buxton – don’t embarrass me Jim Parnell on Wednesday for evals Kindly request mega feedback

Questions, Comments ?

Debrief Guest Speakers Ian Cooley – Personas Michael Hinnant – Sketching Jeroen van den Eijkhof – Sketching & Wireframing

Ian Cooley – Personas “Personas make sense because what we end up creating is a story we can engage with. If we revisit this story and become friends with this person, we can use that during design.” Process of creation valuable

Michael Hinnant – Sketching User Experience Design + Visual Design + Copywriting = Experience Design Sketching Leads to “the spark of the right idea” Shows & communicates ideas Explores options Are disposable – don’t get into a tool too soon Curated Systematic Social Personal

Michael Hinnant – Sketching Stakeholders Political User Money Q. How to balance stakeholder interests? (“Ads in designs”) A. Who’s writing the check? Interview Questions Are you a top-down or bottom- up thinker? Design X. What’s your process? Why did you make the decisions you did? Don’t be dogmatic

Jeroen van den Eijkhof – Sketching & Wireframing Use different colored pens for emphasis B Click A

Jeroen van den Eijkhof – Sketching & Wireframing “Sketching is easy. Thinking is the hard part.” Know Your Process WHYWHATHOW What is the vision? What is the mission? What is the strategy? What are we trying to accomplish? What do we want to design to accomplish the vision? How will we make it? Define your design problem!

Sketching Critique 15 minutes

Wireframing 3 Components Wireframe itself Annotations Wireframe metadata

Wireframe Itself Should show Content Text, movies, images, icons, animations Functionality Controls, buttons, knobs, sliders, dials, input Navigation Indications of how navigation will work How functional controls access the content

Annotations Explain components of the wireframe For devs or clients – anyone who will use wireframe besides person who made it Not just what (i.e.) button does, but why it is there

Wireframe Metadata Information about the wireframe itself Designer’s NamePen Lister Date the Wireframe was made or changed 01/01/10 Version number2 What has changed since the last version Added 2 new items to menu as requested Related documentationPrototype Session Report 12/12/09 Unresolved IssuesFinal list of menu items still to be agreed upon with users General NotesClient wishes to change colors?

How to build? Pen and paper PowerPoint Adobe Illustrator eframe_in_illustrator HTML, Photoshop, Visio, MS Paint, Axure, Balsamiq, OmniGraffle, etc. – links on site

Break About 5 minutes

Personas Scenarios Storyboards Making it Social

Scenarios and Storyboards Scenarios Written accounts and narratives of the experience Analogy: Books Storyboards Visual storytelling Analogy: Comics, picture books

Scenarios For devs, users, others involved in design Also for thinking! (for you) Allows reader understand a use case Allows reader to imagine him or herself in a given situation (empathy) Use personas as characters

When Things go Wrong Many people envision their product working perfectly the first time someone uses it However, even well-designed products don’t work perfectly all the time Work to create scenarios where the user doesn’t do something perfect, but still recovers and accomplishes their goal

Example Scenario 1 David goes to his bookmarks and points his browser to his 'OnlineGroceries' account. He pulls up his order from last week and wants to use it again but wants to pull three items off the list. The total cost is adjusted. He now has all his items for this weeks order and wants it delivered this Saturday in the afternoon. He picks an appropriate delivery slot and hits the 'Deliver' button. He chooses the saved payment card from a list and then confirms the payment. A confirmation page outlines the order and expected delivery time. He then closes the browser window.

Example Scenario 2 1.Parxat’s small computer club is doing well; however, he knows he could do better if he had Internet access for his customers. 2.Parxat has never set up a network, and he does not even know where to start. He asks around to his friends, customers, and family if anyone knows someone who can help. No one in his social network has any ideas. 3.Parxat decides to text the MoSoSo directory to find a recommended network technician. 4.While not knowing any of the people who are recommended in the directory, Parxat is skeptical, but he gives a technician, named Dima, a call. 5.Since Dima’s business is very new, he wants to do everything he can to get a good recommendation from Parxat. 6.One month later, Parxat has an Internet connection in his club, Dima has a recommendation from Parxat in the public directory, and Parxat and Dima start their own private shared directory for computer and Internet club owners.

Example Scenario 3 (imperfect world) Susan is using Amazon.com to shop online for clothes. She chooses a number of articles and is ready to checkout. During the checkout process, Susan enters her shipping and billing information. Upon hitting submit, the system recognizes that Susan’s credit card has expired. Using a noticeable graphic with a warning symbol, the system prompts Susan to enter a different credit card. Susan finds her new card, enters the information, and then finally completes her purchase.

Storyboarding – How To Determine the story A very iterative process through a lot of initial drafts Includes a lot of brainstorming Break large stories into individual storyboards (i.e., 3 separate scenarios vs. 1 long one) Sketch on pen + paper Generate more polished art for presentation Develop

Storyboards Level of detail Inclusion of text Inclusion of people and emotion Number of frames Portrayal of time

P3 – Personas and Scenarios – Fri 3 Personas 6 Scenarios  Current problems or potential uses of your application  About 2 paragraphs

A2 – Storyboards – Next Mon Use techniques described in Truong, et al., storyboards – Pick 3, + your project A new communication system for air traffic controllers An educational math software program for kids in Grades 1-5 A system for long-distance bicyclists to find restaurants and amenities A retirement account system that is friendly to seniors