What the wireframe?

A pragmatic point of view

Hi, I’m Jason Robb

@jasonrobb #wtwf

Tweeting today?

MyHappyPlanet

• Start-up company

• Wearer of many hats

• Design of: UX, UI, IA, IxD, etc...

Why listen to me?

• Made a fair share of wireframes.

• A few methods. Not all.

• You’ll learn something! (Even if it is what not to do, I win!)

Note: I have no idea what I’m

doing up here.Throw me a bone. Ask me questions!

What are wireframes?Language InternationalWireframe: Home page

Purpose of this document:

This wireframe shows the redesigned content on our home page. Is this the right content? The presentation will change, the layout is a bit cramped, but that will be adjusted later. Shown below is the home page MINUS the header, navigation and footer.

Notes

Clear, concise H1 & Tour linkA) Pending final revision, this is our mission statement packed into 7 words or less.B) Take the tour - maybe not the best copywriting. Something to this e!ect. The people that "get it" will find the search form, destinations, or special courses below.

1

Created on Tue Feb 17 2009Modified on Wed Feb 18 2009

Created by Jason Robbwf-HomePage2.gra"e

IconWe have thousands of courses, all at high quality schools.

Search courses now

Easily compare multiple courses & schools Icon

Learn more about us

Our student advisors are knowledgeable, friendly, and want to help you find the perfect match.

Free student counseling

Icon

Price matching policy

If you find a cheaper price somewhere else we'll match it!

Low prices guaranteed

Photo of a city or personFind language courses at the best schools

USA Boston

San Antonio

Nomans Land

New York City

Pittsburgh

Someplace

Los Angelos

Baltimore

Lightville

UK London Cambridge Berkshire

Study abroad destinations

Study English

Find a course

Select a language

Language

Select a country

Country

Select a country

City

Study in sunny Boston USA, where the grass is greener and the air is cleaner.

Summer courses

Your boss will love you and want to give you a raise immediately.

Business courses

Send your kids to Italy to work like slaves for 6 weeks.

Kids courses

1.A

Triple playThree great things that we do that makes us stand apart from out competition. Icons are either already made or need minor tweaking to fit.

2

2Mini-search got minifiedNo AJAX . Why? It's complicated and redundant. The original design was apart of a larger (now extinct) UX.

No duration - it isn't something people think about from the start. It's important. But I'd be willing to bet that data shows that nobody adjusts it from the home page (reference needed, lil help Mike?).

3

Search courses

Destination tableList all locations in every language we o!er. These links go to our SERP. If they click "USA", then we show them the default search for all cities in the USA, intensive courses only, for an duration.

4

Study Spanish

Specialty coursesThese won't be blue links, but they'll be obviously clickable. Presentation withstanding, ideally, these clicks send our users to SERP for these course types. Until then, we'll push them to our contact form. (See notes on Navigation paths.)

5

Take the tour >1.B

43 5

What are wireframes?

• Basis for discussion

• Give visible form and structure to info architecture

• Cheap to make

How abstract ideas become

concrete designs

Why use them?

Why use them?

• Developers: How is it supposed to work?

• Business: Do we understand the business goals?

• Progress check: Are we on the right track?

• Discussion: Get people talking about the UI.

When are they used?

Whenever an idea needs to have form

See it, test it, iterate.

New product design

Before visual design & after structural design

© Jesse James Garrett http://www.jjg.net/elements/

Existing product?

Any time the UI needs improvement

Types of wireframes

• Fidelity (high or low)

• Medium (paper or digital)

“Designers should choose whichever medium and

level of fidelity suit their practical needs and

design goals...”High-fidelity or low-fidelity, paper or digital?

Miriam Walker, 2002

http://dub.washington.edu:2007/projects/fidelity/pubs/Walker_HFES_2002.pdf

Practical needsGetting things done.

Practical needs

• Technical requirements

• Business requirements

• User requirements

Design goalsShape & discuss ideas

Who are they for?

© James Kelway - http://www.flickr.com/photos/userpathways/2612549491/

Who are they for?

• Designers, creatives, marketing

• Developers, usability, QA

• Users, user groups, user testing

• Business, stakeholders, CEO’s

• Everyone!? Your mom, too?

How are they made?

Pick the fastest tools for you.

Analog toolsFastest for thinking (at first).

Analog tools

• Pens, markers

• Sticky notes

• Moleskins

• Whiteboards

Use a pen,don’t be scared.• Pen: Micron .35mm water-proof,

fade-proof, permanent

• Forces you to be decisive

• You’ll be faster at getting your thoughts on paper

• Maybe this is drawing-related?

Start with sticky notes

I like sticky notes

• I write small, so the size constraint doesn’t bother me.

• They’re transient. They’re not museum-bound.

• Moved easily, arranged in a flow.

• Super fast to complete. (that’s twice as fast as regular fast.)

Get a big moleskin

• Sticky notes take the place of my pocket moleskin.

• Small doesn’t allow for enough details to be fleshed out.

• Big isn’t an option.

• Stickies fit in the big moleskin!

Stickies fitin a moleskin

Process of wireframing

How I do it...

Wireframing process

• Start with sketches (low-fidelity)

• Increase fidelity as the concept moves forward (skip levels as needed)

• The goal is an interactive prototype

• Once tested, it quickly becomes a real product.

My typical process

Thumbnails > full pages > prototype

Don’t waste time.Your sticky notes are not

your web site.

“A piece of paper, on the other hand, is only on its way to the garbage can.”

Getting Real by 37Signalshttp://gettingreal.37signals.com/ch11_Dont_Do_Dead_Documents.php

Don’t waste too much time with static wireframes. Get

to HTML fast, if you can.

My recommendation, based on 37Signals wireframe sentiments.

“You can’t go from nothing to a prototype

unless you already have a prototype to work with.”

Get realistic by Jason Robb

1. Wireframes don’t always need finished.

Spoolcast: Roughing it with Interactive Prototypes

http://www.uie.com/brainsparks/2009/03/06/spoolcast-roughing-it-with-interactive-prototypes/

2. Only wireframe the unknown pages.

Getting to prototypes

Get here as fast as possible

Digital tools

• Omnigraffle - easy to use, easy to get too detailed. (That’s bad)

• Photoshop - less easy to use, more easy to get too detailed.

• HTML - just right, if you set it up first. (Initial time sink)

OmnigraffleLanguage InternationalWireframe: Home page

Purpose of this document:

This wireframe shows the redesigned content on our home page. Is this the right content? The presentation will change, the layout is a bit cramped, but that will be adjusted later. Shown below is the home page MINUS the header, navigation and footer.

Notes

Clear, concise H1 & Tour linkA) Pending final revision, this is our mission statement packed into 7 words or less.B) Take the tour - maybe not the best copywriting. Something to this e!ect. The people that "get it" will find the search form, destinations, or special courses below.

1

Created on Tue Feb 17 2009Modified on Wed Feb 18 2009

Created by Jason Robbwf-HomePage2.gra"e

IconWe have thousands of courses, all at high quality schools.

Search courses now

Easily compare multiple courses & schools Icon

Learn more about us

Our student advisors are knowledgeable, friendly, and want to help you find the perfect match.

Free student counseling

Icon

Price matching policy

If you find a cheaper price somewhere else we'll match it!

Low prices guaranteed

Photo of a city or personFind language courses at the best schools

USA Boston

San Antonio

Nomans Land

New York City

Pittsburgh

Someplace

Los Angelos

Baltimore

Lightville

UK London Cambridge Berkshire

Study abroad destinations

Study English

Find a course

Select a language

Language

Select a country

Country

Select a country

City

Study in sunny Boston USA, where the grass is greener and the air is cleaner.

Summer courses

Your boss will love you and want to give you a raise immediately.

Business courses

Send your kids to Italy to work like slaves for 6 weeks.

Kids courses

1.A

Triple playThree great things that we do that makes us stand apart from out competition. Icons are either already made or need minor tweaking to fit.

2

2Mini-search got minifiedNo AJAX . Why? It's complicated and redundant. The original design was apart of a larger (now extinct) UX.

No duration - it isn't something people think about from the start. It's important. But I'd be willing to bet that data shows that nobody adjusts it from the home page (reference needed, lil help Mike?).

3

Search courses

Destination tableList all locations in every language we o!er. These links go to our SERP. If they click "USA", then we show them the default search for all cities in the USA, intensive courses only, for an duration.

4

Study Spanish

Specialty coursesThese won't be blue links, but they'll be obviously clickable. Presentation withstanding, ideally, these clicks send our users to SERP for these course types. Until then, we'll push them to our contact form. (See notes on Navigation paths.)

5

Take the tour >1.B

43 5

Photoshop

HTML

HTML, why I love it

• HTML Templates: make a half dozen different layouts. Reuse.

• They take time to make, worth it.

• Use frameworks: 960GS, blueprint, YUI, etc...

• Then spend more time thinking in the prototype

Tool time &Goal time

A lesson from Jared Spool

Tool time is...

• Wasted time.

• “If it takes longer to make something bold, it’s not any better bold”

• (You’re still learning how to use your tools faster/better. ;)

Goal time

• Goal time is time spent making progress toward the final product

• The ultimate goal is to spend more time working towards the goal, and less wasted with your tools

Separate the goals from the tools

Use whatever tool is fastest for you!

That’s all yinz!Any questions?

How’d I do? Seriously, tell me!

http://speakerrate.com/jasonrobb