UX Sunday: Advanced Wireframing and Detailed Design


Published on

This class was taught as part of UX Sunday, hosted by HourSchool.com: http://hourschool.com/courses/advanced-ux-wireframing-and-detailed-design-sf-in-san-francisco-ca

The class covered how wireframing fits into the larger design process, and what tools can be used to create wireframes. We also explored the use of wireframing as a sketching mechanism and thinking tool for user interface and UX design.

Published in: Design, Technology

UX Sunday: Advanced Wireframing and Detailed Design

  1. 1. ADVANCED UX:Wireframing andDetailed DesignHourSchool.com | UX “Sundae” SF | April 1, 2012
  2. 2. Who am I? Christina Transodelightful.comVisual design > fd2s & service design >teaching > ac4d & interaction design > ??? 
  3. 3. What we’ll cover •  What is a wireframe?•  How does it fit into the design process?•  What does my wireframe need to be able to do?•  What should I use to make one?•  Now what?
  4. 4. But first…Who are you? •  “Vote with your feet”•  “Graphic Jam”
  5. 5. So what is a wireframe? “Wireframes are a set of documents that showstructure, information hierarchy,functionality, and content…Wireframes are ameans of documenting the features of aproduct, as well as the technical and businesslogic, with only a veneer of visual design. Theyare the blueprints of a product.” Designing for Interaction, Dan Saffer
  6. 6. Wireframes 
  7. 7. Wireframes 
  8. 8. Wireframes 
  9. 9. Wireframes 
  10. 10. So what is a wireframe? We often think of wires as deliverables.But wireframing is a process.They are a communication tool between theinteraction/UX designer and: –  Clients, funders, business people –  Other designers (visual, industrial, UX) –  Developers –  Copywriters –  His/herself
  11. 11. The messy design process Central Story’s Process
  12. 12. The messy design process frog / Jon Kolko Process
  13. 13. 0$1%0) The messy design process )$"%)070$%8<)$=(%).2)$"%).2)$"%)=0%()&(#8(7),4))#,$%(-$#.,0) (%0%,$$#.,)8=5$#&5%)(.>%-$H)I.()<)4%0#1,) #$%&()%(*+,-,./01) 9,)%:8&5%)2(.8)$"%);%54).2)(-"#$%-$<(%)#55<0$($%0)$"%)#8&.($,-%) #,-5<4#,1)#$0)?#0<5),4)$-$#5%)-"(-$%(#0$#-0@)9$)%-")&"0%A) .2)#$%($#,1)4%0#1,)=.(>)-(.00)0%?%(5)&"0%0@)!"%,)-.,-%#?#,1)) $"%)(-"#$%-$)#0)#4%$#,1A)8.4%5#,1),4)$%0$#,1).<$)#4%0)=#$") ".<0%A)$"%)(-"#$%-$)B%1#,0)=#$")<,4%(0$,4#,1)#$0)(%0#4%,$0),4) #,-(%0#,1)5%?%50).2);4%5#$7A)2(.8)&&%()0>%$-"%0)$.)0-5%)8.4%50),4).>%-$)&"0%H) 5.-$#,1)$"%)".<0%C0)2.<,4$#.,).,)$"%)&(.&%($7@)D"%,)$"%)(-"#$%-$) &%(0&%-$#?%)4(=#,10@)K",1#,1)$"%)0"&%).2)$"%)2.<,4$#.,)5$%)#,):):%%F0<)"%4=5%H) 4%;,%0)$"%)(%5$#.,0"#&0)B%$=%%,)(..80)0)=%55)0)$"%#()&(#,-#&5) $"%)&(.L%-$)=.<54)B%))-.0$57)4#00$%(@)D"(.<1".<$)$"%)&(.L%-$A)$"%))2%:) H)L%-=0%) 2%$<(%0A),4)%,0<(%0)$"$)5.4EB%(#,1)=550)(%)&5-%4)-.((%-$57@) (-"#$%-$)50.)-.55B.($%0)=#$")$"%)-5#%,$)0)=%55)0)&%.&5%)=".)=#55)B2(.,$)<)#$)4.%0),.$) F#,557A)$"%)(-"#$%-$)44(%00%0)$"%);,%()2%$<(%0).2)$"%)".<0%A) B%)-"(1%4)$.)B<#54),4).<$;$)$"%)".<0%@)4=-%)(#0F) 6=--%00#;%)#$%($#.,0).2)$"%)4%0#1,)&(.-%00)0$1%0):#$"#,)%-").2)$"%) &(.>%-$)&"0%0)4%5#;%()0.5=$#.,0).2)#,-(%0#,1)@4%5#$7),4)-.((%-$,%00) 5%4#,1)$.:(40)#8&5%8%,$$#.,)M:$%(255)8.4%5)0".:,NH) !"#$%&(&#)&*!+#) $*,+-)(."/0*1#"2 !"#$%&&%()*)+,$%(-$#.,)/%0#1,)2.()3%4#-5)670$%80) !" $*/+3*$($*,+-) 20)1(/*1,3)*+,-*14)$)5,*%605)7 20)1(/*1,3)*+,-*14)$)5,*%605)7 *) F.()=".8)%:-$57)#0)$"#0)".<0%)B%#,1) 20)1(/*1,3)*+,-*14)$)5,*%605)7 B<#5$G *) H.=)8,7)B$"(..80)(%),%%4%4G) *) !"%(%)0".<54)$"%)".<0%)B%)0#$<$%4).,) *) !"$C0)$"%)%:-$)(%5$#.,0"#&)B%$=%%,) *) !"$)0$75%)2<-%$0)0".<54)B%)#,0$55%4G) $"%)&(.&%($7G) $"%)>#$-"%,),4)$"%)4#,#,1)(..8G *) !"$)>#,4).2)8$%(#5)0".<54)-.?%()$"%) Devise’s Process *) H.=)B#1)=#55)$"%)4=%55#,1)B%G)) *) /.%0)$"%)0-5%)8.4%5)(%?%5),7) >#$-"%,)J..(G *) !"$)I<5#$#%0).2)$"%)".<0%)(%)8.0$) 2%0#B#5#$7).()<0B#5#$7)#00<%0G)) *) !"$)#0)$"%)-.0$).2))1#?%,)8$%(#5) #8&.($,$)$.)$"%)-5#%,$G) *) 9(%)$"%)"55=70)=#4%)%,.<1")$.)-.8&57) -".#-%G)))
  14. 14. The messy design process teehan + lax Process
  15. 15. Where wireframing fits in Storyboards, Use cases, Digital wires, Visual/brand Annotated Hand-drawn Scenarios, Task analysis, Task flows, IA, language, wires, User wires Personas (Hero) flows Prototypes Comps stories Card sorts, Usability Co-design TestingConcepting Refining
  16. 16. HOW NUDGE WORKS Nudge is an easy way for care providers to check in with their patients between appointments. Automated text messages help patients better patientnudge.com understand and stick to their treatment plans. Kyle has just had ACL knee surgery. He receives 1 instructions and medicine from his primary physician. During his discharge process, nurse Tina schedules 2 Kyle to receive their standard set of follow-up Nudge messages for ACL patients. How are you feeling today?Storyboards, Reply on a scale of 0 (terrible) to 5 (great), and Scenarios, if you’d like add a note. Personas At home over the next week, Kyle automatically 3 receives text messages each day asking him how he is feeling and what his pain levels are.Who’s using it, why, how? S C H E D U L E . C ON N E C T. R E F L E C T. NurseWelcome, Jennie | My Account | FAQsreplies on Nudge Tina monitors all her patient | Log Out 4 and notices that Kyle’s pain levels are getting worseDASHBOARD MY PATIENTS CHECK-IN MESSAGE when they should be getting better.< Back to all patientsKatie Nabovky 5 weeks Send Katie a 1-Time Message512-555-5555 Edit Hi Kyle. How is your knee feeling? If your pain isNotes: Edit getting worse, give us aEnter patient notes here call so we can schedule a follow-up appointment. Credit: Christina Tran for PatientNudge, Adobe IllustratorSelect All | Select None Archive Selected | Delete Selected | Flag Selected When? MESSAGE WHEN IN REPLY TO Today Now
  17. 17. Use cases, Task analysis, (Hero) flowsWhat are the main things people’ll bedoing (hero flow)? In what order? Credit: Jon Kolko
  18. 18. Hand-drawn wiresHow will the content be shown and howwill the actions work? (Start small. Thendraw it over & over again—each timebigger and with more details.) Credit: Christina Tran
  19. 19. Digital wires, Task flows, PrototypesWhere does everything go?What’s the hierarchy? Which UIpatterns will be used? Credit: Christina Tran for TeamOne, Omnigraffle
  20. 20. No No Yes Yes Yes YesAlert User Output Directions Go to Store Start Shopping Alert User: Item on Optimize No LSC List = Yes Yes Is there a Yes Take Photo Yes Item LSC Yes Item Crossed Arrive at Store LSC List = 0 Your list is Proceed? Find Item Pre-LSC or List? Non-LSC List = 0 Pre-LSC List complete. UPC? of UPC Pre-Non-LSC Eligible? Off Pre-LSC List Now Balance = $0 List? Yes No No No No No Alert User: Alert User: Weigh produce Non-LSC List Shortest Yes LSC Balance Yes Item currently not Sort List Your list total = +1 Time? Exceeded? on any list. exceeds your LSC funds. No No Retrieve printed Yes Item Crossed UPC sticker Confirm Off Pre-Non-LSC Now and place on item. Alert User: Add? List Shortest Yes Balance Yes Sort List Your list total Distance? > LSC exceeds your Balance? LSC funds. No No No Shortest Yes Finished No Sort List Distance? Shopping? Yes No Digital wires, Alert User: Proceed to Task flows, IA, Checkout. Prototypes Is Now Enter Cashier Total List = Yes Purchase Total Purchase Yes Pay Using Yes Yes PIN Yes Balance <= Enter PIN Checkout Line Scans Item LSC List + Appears on iPhone Total = Now LSC Funds? correct? to Purchase? PIN = +1 Total List = 0 Total List = +1 Non-LSC Screen Balance? List? No No No No No What are ALL the possible No Alert User: Confirm Purchase Pay Using Yes User Pays Using Alert User: Total with Cashier. Other Another Form PIN = +4? PIN Incorrect. Payment? of Payment No Yes routes someone can take? Abandon Purchase Alert User: Too many incorrect PIN attempts. Use another form of payment. Credit: Scott Magee for AC4D, Omnigraffle
  21. 21. Visual/brand language, CompsWhat’s the hierarchy?What’s the visual language?What do the pixels look like? Credit: Christina Tran for Fugaboo, Illustrator/Photoshop
  22. 22. Annotated wires, User storiesWhat does the developer need to know?E.g. what a button does and WHY.(Controls, conditional items, constraints) Credit: Kristine Mudd for AC4D, Illustrator/InDesign
  23. 23. Annotated wires, User storiesWhat should people be able to do?What does the developer need tostart planning their sprints?
  24. 24. Where wireframing fits in Storyboards, Use cases, Digital wires, Visual/brand Annotated Hand-drawn Scenarios, Task analysis, Task flows, IA, language, wires, User wires Personas (Hero) flows Prototypes Comps stories Card sorts, Usability Co-design TestingConcepting Refining
  25. 25. How do you make ’em? Depends…•  The project & your role in it•  What stage you’re at (what you need the wires to do, and what fidelity you need, what the wires need to communicate)•  Who else will need to work on the same wire files? What do they use?•  How much money & time you have?•  Do you need to also annotate in the same program? Prototype in same program?
  26. 26. Wireframing tools Tool (in order of fidelity) WhyAnalog (handdrawn, pen When you’re thinking,& paper, whiteboard, Quick iterations,stencils) Playing with options, Collaborative, CheapRepurposing other apps If you already love the(Powerpoint, Keynote, program, If it can helpFireworks) your team collaborate
  27. 27. Wireframing tools Tool (in order of fidelity) WhyWireframe-specific apps When you’re focused on(Visio, Omnigraffle, Axure, content & structure insteadBalsamiq, MockFlow, so of visual, easy consistency,many more…) Stencil libraries, some prototyping abilitiesDigital (Illustrator, When you’ll need to givePhotoshop) someone hi-fi pixels, 960 gridPrototype it (HTML, Ruby on Some interactions just needRails, Flash, Adobe Catalyst, to be seen, Easier to testetc.) user interactions
  28. 28. A note about usability testing Do it early and often! You are not the user!“Testing is really more like having friendsvisiting from out of town. Inevitably, as youmake the tourist rounds with them, you seethings about your home town that you usuallydon’t notice because you’re so used to them.And at the same time, you realize that a lot ofthings you take for granted aren’t obviousto everyone.” Don’t Make Me Think by Steve Krug
  29. 29. A note about usability testing “Testing one user is 100 percent better thantesting none.” Don’t Make Me Think by Steve KrugCan be done:•  Easily•  Cheap-ily•  Fun-ilyJust look up Jakob Nielsen’s “DiscountUsability Testing”. Explore think-aloudmethod, paper prototyping, & co-design.
  30. 30. Practice makes…process  “Enlightened trial and error triumphs over thewisdom of the lone genius.” IDEO person on 60 MinutesWanna try it out?Wanna ask questions?Want feedback on your wires?
  31. 31. Resources •  Patterns: http://ui-patterns.com•  Patterns: http://patterntap.com•  Kits & Stencils: http://www.smashingmagazine.com/2010/02/05/50- free-ui-and-web-design-wireframing-kits-resources- and-source-files/•  Books: http://www.kickerstudio.com/blog/2009/12/the-top- ten-essential-interaction-design-books/•  Books: http://rosenfeldmedia.com/•  Schools & bootcamps: http://www.ac4d.com/•  Blog: http://www.wireframewednesday.com/•  Blog: http://boxesandarrows.com/
  32. 32. Thanks!Christina Tranchristina@sodelightful.comHourSchool.com | UX “Sundae” SF | April 1, 2012