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?

instagram

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