ux sunday: advanced wireframing and detailed design

32
ADVANCED UX: Wireframing and Detailed Design HourSchool.com | UX “Sundae” SF | April 1, 2012

Upload: sodelightful

Post on 01-Nov-2014

1.530 views

Category:

Design


0 download

Tags:

DESCRIPTION

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.

TRANSCRIPT

Page 1: UX Sunday: Advanced Wireframing and Detailed Design

ADVANCED UX: Wireframing and Detailed Design

HourSchool.com | UX “Sundae” SF | April 1, 2012

Page 2: UX Sunday: Advanced Wireframing and Detailed Design

Who am I? 

Christina Tran sodelightful.com

Visual design > fd2s & service design >

teaching > ac4d & interaction design > ??? 

Page 3: UX Sunday: Advanced Wireframing and Detailed 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?

Page 4: UX Sunday: Advanced Wireframing and Detailed Design

But first…Who are you? 

•  “Vote with your feet”

•  “Graphic Jam”

Page 5: UX Sunday: Advanced Wireframing and Detailed Design

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

Page 6: UX Sunday: Advanced Wireframing and Detailed Design

Wireframes 

Page 7: UX Sunday: Advanced Wireframing and Detailed Design

Wireframes 

Page 8: UX Sunday: Advanced Wireframing and Detailed Design

Wireframes 

Page 9: UX Sunday: Advanced Wireframing and Detailed Design

Wireframes 

Page 10: UX Sunday: Advanced Wireframing and Detailed Design

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

Page 11: UX Sunday: Advanced Wireframing and Detailed Design

The messy design process 

Central Story’s Process

Page 12: UX Sunday: Advanced Wireframing and Detailed Design

The messy design process 

frog / Jon Kolko Process

Page 13: UX Sunday: Advanced Wireframing and Detailed Design

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%@)

Page 14: UX Sunday: Advanced Wireframing and Detailed Design

The messy design process 

teehan + lax Process

Page 15: UX Sunday: Advanced Wireframing and Detailed Design

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

Page 16: UX Sunday: Advanced Wireframing and Detailed 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

Page 17: UX Sunday: Advanced Wireframing and Detailed Design

Use cases, Task analysis,

(Hero) flows

What are the main things people’ll be doing (hero flow)? In what order?

Credit: Jon Kolko

Page 18: UX Sunday: Advanced Wireframing and Detailed Design

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

Page 19: UX Sunday: Advanced Wireframing and Detailed Design

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

Page 20: UX Sunday: Advanced Wireframing and Detailed Design

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

Page 21: UX Sunday: Advanced Wireframing and Detailed Design

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

Page 22: UX Sunday: Advanced Wireframing and Detailed Design

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

Page 23: UX Sunday: Advanced Wireframing and Detailed Design

Annotated wires, User

stories

What should people be able to do? What does the developer need to start planning their sprints?

Page 24: UX Sunday: Advanced Wireframing and Detailed Design

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

Page 25: UX Sunday: Advanced Wireframing and Detailed Design

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?

Page 26: UX Sunday: Advanced Wireframing and Detailed Design

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

Page 27: UX Sunday: Advanced Wireframing and Detailed Design

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

Page 28: UX Sunday: Advanced Wireframing and Detailed Design

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

Page 29: UX Sunday: Advanced Wireframing and Detailed Design

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.

Page 30: UX Sunday: Advanced Wireframing and Detailed 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?

Page 31: UX Sunday: Advanced Wireframing and Detailed Design

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/

Page 32: UX Sunday: Advanced Wireframing and Detailed Design

Thanks!

HourSchool.com | UX “Sundae” SF | April 1, 2012

Christina Tran [email protected]