Date post: | 17-Aug-2014 |
Category: |
Design |
Upload: | jason-robb |
View: | 13,428 times |
Download: | 2 times |
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