UX Sunday: Advanced Wireframing and Detailed Design
-
Upload
sodelightful -
Category
Design
-
view
1.531 -
download
0
description
Transcript of UX Sunday: Advanced Wireframing and Detailed Design
ADVANCED UX: Wireframing and Detailed Design
HourSchool.com | UX “Sundae” SF | April 1, 2012
Who am I?
Christina Tran sodelightful.com
Visual design > fd2s & service design >
teaching > ac4d & interaction design > ???
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?
But first…Who are you?
• “Vote with your feet”
• “Graphic Jam”
So what is a wireframe?
“Wireframes are a set of documents that show
structure, information hierarchy, functionality, and content…Wireframes are a
means of documenting the features of a
product, as well as the technical and business
logic, with only a veneer of visual design. They
are the blueprints of a product.” Designing for Interaction, Dan Saffer
Wireframes
Wireframes
Wireframes
Wireframes
So what is a wireframe?
We often think of wires as deliverables.
But wireframing is a process.
They are a communication tool between the interaction/UX designer and: – Clients, funders, business people
– Other designers (visual, industrial, UX)
– Developers
– Copywriters
– His/herself
The messy design process
Central Story’s Process
The messy design process
frog / Jon Kolko Process
The messy design process
Devise’s Process
!"#$%&'&%()*)+,$%('-$#.,)/%0#1,)2.()3%4#-'5)670$%80) !"
#$%&'()*#+,-'-*
9#%:%4)'$)')"#1"%()5%;%5<)#$%('$#.,0).2)$"%0%)$"(%%)4%0#1,)0$'1%0)
=,2.54)'-(.00)$"(%%)-.,0%-=$#;%)&(.>%-$)&"'0%0?
*) #$%./()*0%1('2)3%1?)4%$%(8#,#,1)$"%).;%('55)0-.&%).2)$"%)070$%8<)
4%@,#,1)(%A=#(%8%,$0)',4)%,;#0#.,#,1)$"%)"#1"B5%;%5),'$=(%).2)$"%)
&(.4=-$
*) 4'-351*6$,7'8%$9?)4%@,#,1)$"%)=,4%(57#,1)0$(=-$=(%).2)$"%)=0%()
%C&%(#%,-%)',4)1#;#,1)2.(8)$.)$"%)2%'$=(%0),%%4%4)D7)&(#8'(7)',4)
0%-.,4'(7)&%(0.,'0
*) 4'),3:'.*4'-351?)'44(%00#,1)'55)'0&%-$0).2)=0%(B070$%8)#,$%('-$#.,0)
',4)@,'5#E#,1)$"%);#0='5)5..F)',4)2%%5).2)$"%)070$%8G0)&(%0%,$'$#.,
/%0#1,)'-$#;#$#%0)-',)8.;%)A=#-F57)',4)0%'85%0057)$"(.=1")8=5$#&5%)
#$%('$#.,0).2)$"%)-.(%)4%0#1,)0$'1%0)'$)%'-")&"'0%).2)$"%)&(.>%-$H)I.()
%C'8&5%<)4=(#,1)$"%)/%0#1,)I('8%:.(F)&"'0%).2)')&(.>%-$<)4%0#1,)
0$'1%0)-.=54)8.;%)$"(.=1")',)#$%('$#;%)J.:)0=-")'0?)
!.',)3%1!;%.':315!
!.',)3%1!;%.':315!<'-)315!
!.',)3%1!;%.':315!<'-)315!*"
D%2.(%)%8%(1#,1)',4)8.;#,1).,)$.)$"%)/%$'#5%4)/%0#1,)&(.>%-$)&"'0%H)
K'-")4%0#1,)0$'1%)-.=54)5'0$)D%$:%%,)')2%:)4'70)',4)')2%:):%%F0<)
4%&%,4#,1).,)$"%)%C#1%,-#%0).2)7.=()&(.>%-$)0-.&%)',4)0-"%4=5%H)
K'-")&(.>%-$)&"'0%)-.=54)5'0$)D%$:%%,)')2%:):%%F0)',4)')2%:)
8.,$"0<)'1'#,)4%&%,4#,1).,)0-.&%)',4)0-"%4=5%)&(%00=(%0H)L%-'=0%)
$"%)-.(%)4%0#1,)&(.-%00)4%0-(#D%4)"%(%)#,$%1('$%0):#$")=&B2(.,$)
4%;%5.&8%,$)%22.($0)0=-")'0)(%A=#(%8%,$0)4.-=8%,$'$#.,<)#$)4.%0),.$)
'44)0#1,#@-',$)'44#$#.,'5)$#8%).()-.0$H)!"'$)$"%7)4.)#0)(%4=-%)(#0F)
',4)%5#8#,'$%)1=%00:.(F)$"(.=1".=$)$"%)&(.>%-$H)
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:'$%(2'55)8.4%5)0".:,NH)
!"#$%&'&%()*)+,$%('-$#.,)/%0#1,)2.()3%4#-'5)670$%80) !"
#$%&'()%('*+,-,./01)
9,)%:'8&5%)2(.8)$"%);%54).2)'(-"#$%-$<(%)#55<0$('$%0)$"%)#8&.($',-%)
.2)#$%('$#,1)4%0#1,)=.(>)'-(.00)0%?%('5)&"'0%0@)!"%,)-.,-%#?#,1)')
".<0%A)$"%)'(-"#$%-$)B%1#,0)=#$")<,4%(0$',4#,1)#$0)(%0#4%,$0)',4)
5.-'$#,1)$"%)".<0%C0)2.<,4'$#.,).,)$"%)&(.&%($7@)D"%,)$"%)'(-"#$%-$)
4%;,%0)$"%)(%5'$#.,0"#&0)B%$=%%,)(..80)'0)=%55)'0)$"%#()&(#,-#&'5)
2%'$<(%0A)',4)%,0<(%0)$"'$)5.'4EB%'(#,1)='550)'(%)&5'-%4)-.((%-$57@)
F#,'557A)$"%)'(-"#$%-$)'44(%00%0)$"%);,%()2%'$<(%0).2)$"%)".<0%A)
20)1('/*1,3)'*+,-*14)$)5,'*%605)7
*) F.()=".8)%:'-$57)#0)$"#0)".<0%)B%#,1)
B<#5$G
*) !"%(%)0".<54)$"%)".<0%)B%)0#$<'$%4).,)
$"%)&(.&%($7G)
*) H.=)B#1)=#55)$"%)4=%55#,1)B%G))
*) !"'$)I<'5#$#%0).2)$"%)".<0%)'(%)8.0$)
#8&.($',$)$.)$"%)-5#%,$G)
20)1('/*1,3)'*+,-*14)$)5,'*%605)7
*) H.=)8',7)B'$"(..80)'(%),%%4%4G)
*) !"'$C0)$"%)%:'-$)(%5'$#.,0"#&)B%$=%%,)
$"%)>#$-"%,)',4)$"%)4#,#,1)(..8G
*) /.%0)$"%)0-'5%)8.4%5)(%?%'5)',7)
2%'0#B#5#$7).()<0'B#5#$7)#00<%0G))
*) 9(%)$"%)"'55='70)=#4%)%,.<1")$.)-.8&57)
=#$")0'2%$7)-.4%0G)
!"#$%&'(&#)&*!'+#)
$*,+-)(."/0*1#"2
$*'/+3*$($*,+-)
20)1('/*1,3)'*+,-*14)$)5,'*%605)7
*) !"'$)0$75%)2'<-%$0)0".<54)B%)#,0$'55%4G)
*) !"'$)>#,4).2)8'$%(#'5)0".<54)-.?%()$"%)
>#$-"%,)J..(G
*) !"'$)#0)$"%)-.0$).2)')1#?%,)8'$%(#'5)
-".#-%G)))
*) !.<54)$"%)(%0#4%,$)5#>%)')5'(1%)B'7)
=#,4.=)#,)$"%)5#?#,1)(..8G
#,-5<4#,1)#$0)?#0<'5)',4)$'-$#5%)-"'('-$%(#0$#-0@)9$)%'-")&"'0%A)
$"%)'(-"#$%-$)#0)#4%'$#,1A)8.4%5#,1)',4)$%0$#,1).<$)#4%'0)=#$")
#,-(%'0#,1)5%?%50).2);4%5#$7A)2(.8)&'&%()0>%$-"%0)$.)0-'5%)8.4%50)',4)
&%(0&%-$#?%)4('=#,10@)K"',1#,1)$"%)0"'&%).2)$"%)2.<,4'$#.,)5'$%)#,)
$"%)&(.L%-$)=.<54)B%)')-.0$57)4#0'0$%(@)D"(.<1".<$)$"%)&(.L%-$A)$"%)
'(-"#$%-$)'50.)-.55'B.('$%0)=#$")$"%)-5#%,$)'0)=%55)'0)&%.&5%)=".)=#55)
B%)-"'(1%4)$.)B<#54)',4).<$;$)$"%)".<0%@)
The messy design process
teehan + lax Process
Where wireframing fits in
Storyboards, Scenarios,
Personas
Use cases, Task analysis,
(Hero) flows
Hand-drawn wires
Digital wires, Task flows, IA,
Prototypes
Annotated wires, User
stories
Concepting Refining
Visual/brand language,
Comps
Usability Testing
Card sorts, Co-design
patientnudge.com
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 understand and stick to their treatment plans.
Kyle has just had ACL knee surgery. He receives instructions and medicine from his primary physician.
During his discharge process, nurse Tina schedules Kyle to receive their standard set of follow-up Nudge messages for ACL patients.
At home over the next week, Kyle automatically receives text messages each day asking him how he is feeling and what his pain levels are.
Nurse Tina monitors all her patient replies on Nudge and notices that Kyle’s pain levels are getting worse when they should be getting better.
She sends him a quick message using Nudge. They schedule Kyle for another appointment to determine next steps.
1
2
3
4
5
Welcome, Jennie | My Account | FAQs | Log Out
Katie Nabovky Send Katie a 1-Time Message
Katie is scheduled to receive the following messages:
512-555-5555
Enter patient notes here
RX ReminderSent at 9:30 a.m. every day
Good morning. This is a message from Dr. Smith. Have you remembered to take your medication today?
Stop sending Julie this message | Edit Message
Edit
EditNotes:
Lunch CheckSent at 1:30 p.m. every day
Hi. This is a message from Dr. Smith. What did you have for lunch today?
Stop sending Julie this message | Edit Message
12:00 p.m. 05-13-2011
10:30 a.m. 05-6-2011
10:04 a.m. 04-29-2011
10:03 a.m. 04-22-2011
2:00 p.m. 04-15-2011
6:10 p.m. 04-8-2011
10:00 a.m. 04-1-2011
yes. will need 5 shakes
not today.
see you at 6. no shakes this week.
yes! and no!
yes! 30 shakes please.
yes. and need help with...
no, can i come wed. instead?
Message 1
Check-in 1
Message 1
Message 1
Message 1
Check-in 2
Message 1
WHENMESSAGE IN REPLY TO
Send Message
When?
NowToday
SC HE DULE . CONNECT. REFLECT.
DASHBOARD
< Back to all patients
MY PATIENTS CHECK-IN MESSAGE
5 weeks
12:00 p.m. 05-13-2011yes. will need 5 shakes Message 1
WHENARCHIVED MESSAGE IN REPLY TO
Archive Selected | Delete Selected | Flag SelectedSelect All | Select None
NOTES:- how to deal with archived messages? - which functionalities exist for Pilot MVP? archive? delete? flag messages?- one big “edit client info” button or individual edit buttons like above?
- alternate footer
CONTACTEmail us: hello [at] mynudge [dot] orgFollow us: twitter.com/mynudge
PRIVACY POLICYWe take your privacy and that of your patients seriously. Read more about the measures we’ve taken to safeguard your data.
FAQsHow does Nudge fit into HIPAA?What do I tell my patients about Nudge?Where did the idea for Nudge come from?
How are you feeling today? Reply on a scale of 0 (terrible) to 5 (great), and if you’d like add a note.
For more information or if you’d like to try Nudge out, email [email protected].
Hi Kyle. How is your knee feeling? If your pain is getting worse, give us a call so we can schedule a follow-up appointment.
Storyboards, Scenarios,
Personas
Who’s using it, why, how?
Credit: Christina Tran for PatientNudge, Adobe Illustrator
Use cases, Task analysis,
(Hero) flows
What are the main things people’ll be doing (hero flow)? In what order?
Credit: Jon Kolko
Hand-drawn wires
How will the content be shown and how will the actions work? (Start small. Then draw it over & over again—each time bigger and with more details.)
Credit: Christina Tran
Digital wires, Task flows,
Prototypes
Where does everything go? What’s the hierarchy? Which UI patterns will be used?
Credit: Christina Tran for TeamOne, Omnigraffle
Has aList BeenCreated?
ManDecidesto Shop
CreateGrocery List
AddItem?
OpeniPhone Application
StartNew List
Save List Sort By Distance Select LocationAlert User:
You must pickan option.
Pre-LSC List =+1
Pre-Non-LSC List= +1
Alert UserAlert User
OutputDirections
No
Yes Yes
Arrive at Store
Weigh produce
NoNo No Yes
Yes
Yes Yes Yes
No
No
ListFinished?
Yes FindLocation?
Yes TakesLone Star
Card?
Yes GetDirections?
Yes
Sort List
Alert User:Your list iscomplete.
Alert User:Proceed toCheckout.
Start ShoppingLSC List = 0
Non-LSC List = 0Now Balance = $0
Find Item Take Photoof UPC
Non-LSC List= +1
Alert User:Item currently not
on any list.
Item CrossedOff Pre-LSC List
Item CrossedOff Pre-Non-LSC
List
LSC List = +1
Sort List
Sort List
OptimizeList?
No
No
ShortestTime?
Yes
No
ShortestDistance?
Yes
No
ShortestDistance?
CashierScans Item
Total List = +1
Purchase TotalAppears on iPhone
Screen
Enter PINPIN = +1
QR CodeAppears on
iPhone Screen
User HandsiPhone toCashier
Cashier Hands iPhone Back
to User
Cashier Scans iPhone Screen
Scan = +1
User History= +1
Display(LSC Funds -Now Balance)
DisplayNext FundingRefresh Date
DisplayNo Future
Funding Dates
User ReceivesPaper Receipt
User GrabsGrocery Bags
User swipesLSC Card
Cashier TypesID# From iPhone
User EnterPIN
User Pays UsingAnother Formof Payment
Yes
PublicTransit?
NoDrive?
NoWalk?
No NoBicycle?
Is ItemLSC
Eligibile?
Yes
No KeepItem?
Yes
No
Go to Store
No
LSC List = Pre-LSC List
Yes
Retrieve printed UPC sticker
and place on item.
No
Is there aUPC?
Yes
No
Item onPre-LSC or
Pre-Non-LSC List?
Yes
No
ConfirmAdd?
Yes
Now Balance =+ Price
No
Item LSC Eligible?
Yes
Alert User:Your list total exceeds yourLSC funds.
No
LSC BalanceExceeded?
Yes
No
Proceed?Yes
Alert User:Your list total exceeds yourLSC funds.
No
NowBalance> LSC
Balance?
Yes
No
Total List = LSC List + Non-LSC
List?
Yes
No
Purchase Total = Now
Balance?
Yes
No
Pay Using LSC Funds?
Yes
No
ConfirmPurchase?
Yes
No
Will UserGet Funded In Future?
Yes
No
ScanCorrectly?
Yes
No
User Has LSC Card?
Yes
No
Will Cashier Type ID#
from iPhone?
Yes
No
Scan = +4?No
No
Is Now Balance <= to Purchase?
Yes
No
PINcorrect?
Yes
No
Pay Using Other
Payment?
Yes
No
Yes
PIN = +4?
EnterCheckout LineTotal List = 0
Alert User:Confirm Purchase Total with Cashier.
Alert User:PIN Incorrect.
Alert User: Too many incorrect PIN attempts. Use
another form of payment.
Yes
Finished Shopping?
No
AbandonPurchase
AbandonPurchase
UserLeaves
What are ALL the possible routes someone can take?
Digital wires, Task flows, IA,
Prototypes
Credit: Scott Magee for AC4D, Omnigraffle
Visual/brand language,
Comps
What’s the hierarchy? What’s the visual language? What do the pixels look like?
Credit: Christina Tran for Fugaboo, Illustrator/Photoshop
Annotated wires, User
stories
What 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
Annotated wires, User
stories
What should people be able to do? What does the developer need to start planning their sprints?
Where wireframing fits in
Storyboards, Scenarios,
Personas
Use cases, Task analysis,
(Hero) flows
Hand-drawn wires
Annotated wires, User
stories
Concepting Refining
Visual/brand language,
Comps
Usability Testing
Card sorts, Co-design
Digital wires, Task flows, IA,
Prototypes
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?
Wireframing tools Tool (in order of fidelity) Why
Analog (handdrawn, pen
& paper, whiteboard,
stencils)
When you’re thinking,
Quick iterations,
Playing with options,
Collaborative, Cheap
Repurposing other apps
(Powerpoint, Keynote,
Fireworks)
If you already love the
program, If it can help
your team collaborate
Wireframing tools Tool (in order of fidelity) Why
Wireframe-specific apps
(Visio, Omnigraffle, Axure,
Balsamiq, MockFlow, so
many more…)
When you’re focused on
content & structure instead
of visual, easy consistency,
Stencil libraries, some
prototyping abilities
Digital (Illustrator,
Photoshop)
When you’ll need to give
someone hi-fi pixels, 960
grid
Prototype it (HTML, Ruby on
Rails, Flash, Adobe Catalyst,
etc.)
Some interactions just need
to be seen, Easier to test
user interactions
A note about usability testing
Do it early and often! You are not the user!
“Testing is really more like having friends visiting from out of town. Inevitably, as you make the tourist rounds with them, you see things about your home town that you usually don’t notice because you’re so used to them. And at the same time, you realize that a lot of things you take for granted aren’t obvious to everyone.” Don’t Make Me Think by Steve Krug
A note about usability testing
“Testing one user is 100 percent better than testing none.” Don’t Make Me Think by Steve Krug
Can be done:
• Easily
• Cheap-ily
• Fun-ily
Just look up Jakob Nielsen’s “Discount Usability Testing”. Explore think-aloud method, paper prototyping, & co-design.
Practice makes…process
“Enlightened trial and error triumphs over the
wisdom of the lone genius.”
IDEO person on 60 Minutes
Wanna try it out?
Wanna ask questions?
Want feedback on your wires?
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/