Back to Basics:
Wireframing & Planning
Paul Crimi @paulohnine
Michael McArthur @gorfed
So, you want to create your own digital product…
planning
Here are a few things you should know:
planning
Information Architecture is:
what is IA?
Grouping of content so that it can be presented in a logical order.
what is IA?
Creation of clear and consistent navigation that allows the user to easily find the content they are looking for.
what is IA?
Clear and visible content hierarchy on each page or screen.
what is IA?
#1 UX rule: !
Don’t make me think
why is content hierarchy important?
Always ask yourself: !
· What must users know first? · Which actions do I want them to take? · How can I persuade them to take those actions? · How can I make the user feel good about the action they just took?
when approaching IA:
action funnel
welcome
supporting info
user takes action
what am I looking at?
what do you want me to do & how do I do it?
what happened?
IA design
Define the end-game for your site/app. !
Define the end-game for each screen.
The best interfaces are invisible. They get out of the way so that the user feels like they achieve their goals without interruption.
remember:
App Maps.
A high-level (bird’s eye) overview of all the screens or pages that exist within an application.
what is an app map?
what is an app map?
Entry
0.0
Stream
1.0
Login
0.1
Register
0.2
Forgot Password
0.1.1
My Profile
5.0
Other User Profile
5.0
Explore
2.0
ExploreResults
2.1
Take Photo / Video
3.0
Filter Selection
3.1
Confirmation
3.1.1
News
4.0
Profile Options
5.1
Other User Profile
5.0
Other User Profile
5.0
Legend:
Page
Duplicated Page
Conditional Page
X.X
X.X
X.X
X.X
Not A Physical Page
Well then, how do we go about planning a product?
planning
UX Methodologies !
· Deep dives · User empathy · Creating the appropriate hooks · Iteration
planning
Nir Eyal’s hook model
H K
planning: iterative approach
fig 3. the ux design cycle
idea
productdata
build
measure
learn
Step 1: !
Outline the key features and/or requirements
planning
Step 2: !
Research the competitive landscape !
· Outline key features/requirements · Define differences in feature sets · Establish each product’s brand essence
planning
Step 3: !
Create a feature set comparison !
· Identify common and rare features · Outline what works and what doesn’t · Highlight the good, bad & ugly.
planning
Step 4: !
Perform a heuristics on any competitor products in market !
· Outline assumption, observations, implications and recommendations · Be harsh :)
planning
Step 5: !
Draw a high-level (rudimentary) Application Map !
· Boxes & arrows are your new best friends
planning
Step 6: !
Map features to the pages you outlined in the Application Map. !
· Put functionality in the boxes (figure out what goes where).
planning
Step 7: !
Make sketchy love to your whiteboard !
· Once satisfied that all requirements and functions have been accounted for, take those words in your boxes and start iterating on your interface. !
planning
Step 8: !
Capture your work !
· Take pictures before you erase anything from the whiteboard · Erase everything · Make improvements · Repeat until satisfied
planning
Step 9: !
Massage your wires !
· Open your wireframing app of choice and vectorize your whiteboards
planning
Wireframes.
A visual representation of an interface that excludes visual design.
what is a wireframe?
what is a wireframe?
username
username comment lorem ipsum dolor sit amet consectetur.userTwo reply lorem ipsum.
location lorem ipsum13 m
Like Comment
To express how our website or app will function.
why do we need wireframes?
The client. !
To show them what we’re building
who is it for?
who is it for?
The dev team. !
To define scope & begin development
who is it for?
Our users. !
For user testing
who is it for?
Yourself. !
To test and iterate from
fidelity: !
lo-fi vs hi-fi
tools:
Kick it old skool. Good ol’ paper and pencil
tools:
Quick n’ dirtys whiteboard
tools:
Step it up a notch Balsamiq
Omnigraffle !
(…and many more)
tools:
Hi-fi Illustrator Fireworks
Omnigraffle !
(or your vector tool of choice)
ok, let’s solve your problems*
*all problems not guaranteed solved.
(workshop.)
Wireframes, App Maps, Flow Charts & Prototype Resources:
resources
App Maps, Flow Charts & Wireframes: !Omnigraffle http://www.omnigroup.com/omnigraffle/ !Omnigraffle Stencils https://www.graffletopia.com/ !Sketch http://www.bohemiancoding.com/sketch/ !Adobe Illustrator http://www.adobe.com/ca/products/illustrator.html !Adobe Fireworks http://www.adobe.com/ca/products/fireworks.html !Balsamiq http://balsamiq.com/ !
Prototypes: !InVision http://www.invisionapp.com/ !Axure http://www.axure.com/ !Origami http://facebook.github.io/origami/ !UXPin http://uxpin.com/ !Keynote http://www.apple.com/ca/mac/keynote/ !Using Keynote To Prototype http://www.lukew.com/ff/entry.asp?1155
Recommended Books
resources
Don’t Make Me Think Steve Krug
Head First Design Patterns Eric Freeman
Sketching User Experiences Bill Buxton
Lean UX Jeff Gothelf
Envisioning Information Edward R Tufte
The Essentials of Interaction Design Alan Cooper
The Laws of Simplicity John Maeda
Mobile First Luke Wroblewski
Recommended Links
resources
Luke Wroblewski http://www.lukew.com !Interaction Design Association http://ixda.org/ !Boxes and Arrows http://boxesandarrows.com/ !UI Patterns http://ui-patterns.com/ !Pttrns http://pttrns.com/ !UI Parade http://www.uiparade.com/ !
Capptivate http://capptivate.co/ !The Hipper Element http://thehipperelement.com/ !UX Archive http://uxarchive.com/ !UX Porn http://uxporn.uxpin.com/ !UX Magazine http://uxmag.com/ !Mobile Patterns http://www.mobile-patterns.com/
Thank You.
Paul Crimi @paulohnine
Michael McArthur @gorfed
