Wireframing for user workflows

Treat wireframes as state machines

Treat wireframes as state machines

• Can help reveal poor page flow

Treat wireframes as state machines

• Can help reveal poor page flow

• Dead ends

Treat wireframes as state machines

• Can help reveal poor page flow

• Dead ends

• Overly complicated paths

Treat wireframes as state machines

• Can help reveal poor page flow

• Dead ends

• Overly complicated paths

• Error message handling

Wireframing a series of HTTP requests

incoming arc points to starting state

Wireframing a series of HTTP requests

rounded rectangles represent different views (states)

incoming arc points to starting state

Wireframing a series of HTTP requests

rounded rectangles represent different views (states)

labeled arrowsrepresent state transitions

incoming arc points to starting state

Wireframing a series of HTTP requests

rounded rectangles represent different views (states)

labeled arrowsrepresent state transitions

incoming arc points to starting state

arrow labels represent HTTP requests,transition trigger actions

Logging in & out of Facebook(with 2-factor authorization)

GET facebook.com

Logging in & out of Facebook(with 2-factor authorization)

login screen

GET facebook.com

Logging in & out of Facebook(with 2-factor authorization)

login screen

enterincorrectlogin details

GET facebook.com

Logging in & out of Facebook(with 2-factor authorization)

login screen

enterincorrectlogin details

enter correct login details

GET facebook.com

Logging in & out of Facebook(with 2-factor authorization)

login screen

security code screen

enterincorrectlogin details

enter correct login details

GET facebook.com

Logging in & out of Facebook(with 2-factor authorization)

login screen

security code screen

enterincorrectlogin details

enter correct login details

ask toresend code

GET facebook.com

Logging in & out of Facebook(with 2-factor authorization)

login screen

security code screen

enterincorrectlogin details

enter correct login details

enterincorrectsecurity code

ask toresend code

GET facebook.com

Logging in & out of Facebook(with 2-factor authorization)

login screen

security code screen

enterincorrectlogin details

enter correct login details

enterincorrectsecurity code

enter correct security code

ask toresend code

GET facebook.com

Logging in & out of Facebook(with 2-factor authorization)

login screen

GET facebook.com

security code screen

enterincorrectlogin details

enter correct login details

enterincorrectsecurity code

enter correct security code

ask toresend code

Logging in & out of Facebook(with 2-factor authorization)

login screen

GET facebook.com

security code screen

enterincorrectlogin details

enter correct login details

enterincorrectsecurity code

enter correct security code

ask toresend code

if new browser

Logging in & out of Facebook(with 2-factor authorization)

login screen

GET facebook.com

security code screen

enterincorrectlogin details

enter correct login details

enterincorrectsecurity code

enter correct security code

ask toresend code

“remember browser?” screen

if new browser

Logging in & out of Facebook(with 2-factor authorization)

login screen

GET facebook.com

security code screen

enterincorrectlogin details

enter correct login details

enterincorrectsecurity code

enter correct security code

ask toresend code

“remember browser?” screen

if new browser

if remembered browser

Logging in & out of Facebook(with 2-factor authorization)

login screen

GET facebook.com

security code screen

enterincorrectlogin details

enter correct login details

enterincorrectsecurity code

enter correct security code

ask toresend code

“remember browser?” screen

if new browser

if remembered browser

news feed

Logging in & out of Facebook(with 2-factor authorization)

login screen

GET facebook.com

security code screen

enterincorrectlogin details

enter correct login details

enterincorrectsecurity code

enter correct security code

ask toresend code

“remember browser?” screen

if new browser

if remembered browser

news feed

respond “yes”

Logging in & out of Facebook(with 2-factor authorization)

login screen

GET facebook.com

security code screen

enterincorrectlogin details

enter correct login details

enterincorrectsecurity code

enter correct security code

ask toresend code

“remember browser?” screen

if new browser

if remembered browser

news feed

respond “yes”

respond “no”

Logging in & out of Facebook(with 2-factor authorization)

login screen

GET facebook.com

security code screen

enterincorrectlogin details

enter correct login details

enterincorrectsecurity code

enter correct security code

ask toresend code

“remember browser?” screen

if new browser

if remembered browser

news feed

respond “yes”

respond “no”

log out

Logging in & out of Facebook(with 2-factor authorization)

login screen

GET facebook.com

security code screen

enterincorrectlogin details

enter correct login details

enterincorrectsecurity code

enter correct security code

ask toresend code

“remember browser?” screen

if new browser

if remembered browser

news feed

respond “yes”

respond “no”

log out

click profile photos, names

Logging in & out of Facebook(with 2-factor authorization)

login screen

GET facebook.com

security code screen

enterincorrectlogin details

enter correct login details

enterincorrectsecurity code

enter correct security code

ask toresend code

“remember browser?” screen

if new browser

if remembered browser

news feed

respond “yes”

respond “no”

log out

user profile

click profile photos, names

Logging in & out of Facebook(with 2-factor authorization)

login screen

GET facebook.com

security code screen

enterincorrectlogin details

enter correct login details

enterincorrectsecurity code

enter correct security code

ask toresend code

“remember browser?” screen

if new browser

if remembered browser

news feed

respond “yes”

respond “no”

log out

user profile

click profile photos, names

click profile photos, names

Logging in & out of Facebook(with 2-factor authorization)

login screen

GET facebook.com

security code screen

enterincorrectlogin details

enter correct login details

enterincorrectsecurity code

enter correct security code

ask toresend code

“remember browser?” screen

if new browser

if remembered browser

news feed

respond “yes”

respond “no”

log out

user profile

click profile photos, names

click “home” link

click profile photos, names

Logging in & out of Facebook(with 2-factor authorization)

login screen

GET facebook.com

security code screen

enterincorrectlogin details

enter correct login details

enterincorrectsecurity code

enter correct security code

ask toresend code

“remember browser?” screen

if new browser

if remembered browser

news feed

respond “yes”

respond “no”

log out

user profile

click profile photos, names

click “home” linklog out

click profile photos, names

Logging in & out of Facebook(with 2-factor authorization)

login screen

security code screen

enterincorrectlogin details

enter correct login details

enterincorrectsecurity code

enter correct security code

ask toresend code

“remember browser?” screen

if new browser

if remembered browser

news feed

respond “yes”

respond “no”

log out

user profile

click profile photos, names

click “home” link

log out

click profile photos, names

cleaned-up state machine diagram

GET facebook.com

Wireframing AJAXed/client-side interactions

use a large rectangle for the view

Wireframing AJAXed/client-side interactions

use a large rectangle for the view

use nested rectangles for

sub-states

label how you enter the initial sub-state

Wireframing AJAXed/client-side interactions

use a large rectangle for the view

use nested rectangles for

sub-states

label how you enter the initial sub-state

sub-state transition

Wireframing AJAXed/client-side interactions

use a large rectangle for the view

sub-state

2

use nested rectangles for

sub-states

label how you enter the initial sub-state

sub-state transition

Wireframing AJAXed/client-side interactions

use a large rectangle for the view

sub-state

2

use nested rectangles for

sub-states

label how you enter the initial sub-state

sub-state transition

state transition

Wireframing AJAXed/client-side interactions

use a large rectangle for the view

sub-state

2

use nested rectangles for

sub-states

label how you enter the initial sub-state

sub-state transition

view 2

state transition

Posting a new status on Facebook

news feed

Posting a new status on Facebook

news feedclick the status input form

Posting a new status on Facebook

news feed

new status form

click the status input form

Posting a new status on Facebook

news feed

new status form

click the status input form

tag friend

Posting a new status on Facebook

news feed

new status form

click the status input form

tag friend

untag friend

Posting a new status on Facebook

news feed

new status form

click the status input form

tag friend

untag friend

add photo

Posting a new status on Facebook

news feed

new status form

click the status input form

tag friend

untag friend

add photo

remove photo

Posting a new status on Facebook

news feed

new status form

click the status input form

tag friend

untag friend

add photo

remove photo

add hashtag

Posting a new status on Facebook

news feed

new status form

click the status input form

tag friend

untag friend

add photo

remove photo

add hashtag

removehashtag

Posting a new status on Facebook

news feed

new status form

click the status input form

tag friend

untag friend

add photo

remove photo

click “post status” button

add hashtag

removehashtag

Posting a new status on Facebook

news feed

new status form

click the status input form

tag friend

untag friend

add photo

remove photo

click “post status” button

add hashtag

removehashtag

NOTE: The sub-state transitions are local updates happening on the client. The state transition (clicking “post status”) sends the entire update to the server.

Wireframing for page layout

Wireframing individual pages

Wireframing individual pages

• Separate page structure from aesthetics

Wireframing individual pages

• Separate page structure from aesthetics

• Focus on position & hierarchy

Wireframing individual pages

• Separate page structure from aesthetics

• Focus on position & hierarchy

• No colors or images

1. Determine layout with boxes

logo navigation

user profile links

favorites

pages

groups

apps

chat

update status form

news feed

ads

birthdays

fine print

search bar

2. Add information hierarchy

logo search bar req

favorites

pages

groups

apps

chat

What’s on your mind?

ads

birthdays

fine print

msg feed user priv set

Alyssa P. HackerEdit Profile

Ben Bitdiddle shared a link.

Link title link title link titleLink summary link summary link summary..

Like · Comment · Share · XX minutes ago

# likes

comments section

Update Status Add Photos/Video

Ben Bitdiddle shared a link.

3. Add grayscale coloring

favorites

pages

groups

apps

chat

What’s on your mind?

ads

birthdays

fine print

Alyssa P. HackerEdit Profile

Ben Bitdiddle shared a link.

Link title link title link titleLink summary link summary link summary..

Like · Comment · Share · XX minutes ago

# likes

comments section

Update Status Add Photos/Video

Ben Bitdiddle shared a link.

logo search bar req msg feed user priv set

Wireframing tools

• Pencil & paper!

• Balsamiq balsamiq.comSoftware for wireframes.

• OmniGraffle omnigroup.com/omnigraffleSoftware for wireframes.

• Wirify wirify.comBrowser extension that lets you see a “wireframed version” of a website, to show you the difference between a wireframe and the final implementation.