Date post: | 27-Jan-2015 |
Category: |
Technology |
Upload: | catharine-robertson |
View: | 118 times |
Download: | 2 times |
Wireframes: Choose the Right Tool for the Job
Catharine Robertson The Berndt Group
What I bring to the Lean conversation: I work for a successful entrepreneur who founded his startup in 1991. “Successful” means • Grew from 1 person to 30 people • 20+ years of profitability, 0 layoffs • Privately held • 85% client retention • High employee retention
Tools of the Lean Trade | Catharine Robertson
Full disclosure: Not Lean, or even lean. Not Agile, but occasionally agile(ish). We do waterfall. [Insert controversial statements here.]
Tools of the Lean Trade | Catharine Robertson
Our Project Process
Tools of the Lean Trade | Catharine Robertson
Our Project Process
Tools of the Lean Trade | Catharine Robertson
Our Project Process
luxury of the waterfall
Tools of the Lean Trade | Catharine Robertson
My role:
Tools of the Lean Trade | Catharine Robertson
Some of my tools: • User task flows • User personas • Sitemaps • Card sorting • Affinity diagrams • Mental models • Content inventories • Taxonomies • Wireframes
Tools of the Lean Trade | Catharine Robertson
Wireframes
Serve as: • Functional specification • Work order • Contractual agreement • Process management
document • Project artifact
!
Consumed by: • Team peers • Manager • Co-founder • Visual designer • Developer • QA tester • Client/customer!
Tools of the Lean Trade | Catharine Robertson
Wireframe is another name for blueprint.
http://mffanrodders.wordpress.com/page/120/?archives-list
Tools of the Lean Trade | Catharine Robertson
This is a wireframe.
"##$%&&'()*+,('(-.'/0-1&2'+*3(.#+*450+&6+7'(#+36(*+4*51(.8&!
Tools of the Lean Trade | Catharine Robertson
This is a wireframe.
http://wireframes.linowski.ca/tag/annotation/
Tools of the Lean Trade | Catharine Robertson
Caveat & Caution
A wireframe that can’t be or become a working prototype will cost you time and/or money. (Sometimes worth it, sometimes not.) Money and time you save up front on wireframing tools will be spent later on html/css production, on credibility with clients/customers, or on realignment with designers/developers.
Tools of the Lean Trade | Catharine Robertson
Wireframing & Prototyping Tools
Tools of the Lean Trade | Catharine Robertson
Pen & paper Pros: FREE! Limited only by paper size & imagination Group collaboration Instant disambiguation Cons: Paper size limitation Not digital Annotations limited Prototypes are hard No rich interaction
Tools of the Lean Trade | Catharine Robertson
Paper Prototyping
For wireframes (specs) For prototypes (user testing)
http://www.interaction-design.org/encyclopedia/contextual_design.html http://courses.csail.mit.edu/6.831/wiki/index.php?title=Projects/Build-It-Yourself_Universe
Tools of the Lean Trade | Catharine Robertson
Paper Prototyping Pros: CHEAP! Only the cost of supplies User testing Group collaboration Hi-fi ones look like the real product Cons: Bad for big projects PITA to prep PITA to redraw digitally
Tools of the Lean Trade | Catharine Robertson
Until UX Pin, that is. Pros: CHEAP! (from $37) Pre-done kits save time Paper prototype recognition Cons: Proprietary kits = finite App recognizes only UX Pin paper prototypes Bad for big projects
Tools of the Lean Trade | Catharine Robertson
Adobe InDesign Pros: Sophisticated templating Robust (history of print) Excellent annotating Layers Navigation of app Pixel-perfect Good for big projects Cons: Expensive ($1000+) High learning curve No prototyping per se
Tools of the Lean Trade | Catharine Robertson
Adobe Fireworks Pros: Hi-fi Prototyped wireframes Export to html or css Clickable pdf prototypes Templating system Comes with templates Adobe’s ConnectNow Cons: $300 Medium learning curve Proprietary
Tools of the Lean Trade | Catharine Robertson
OmniGraffle Pros: CHEAP! ($100) Easy to learn Diagramming app Many stencils available Templating system Outline view Import/export; linking pdf Cons: No Windows Not robust Primitive templating
Tools of the Lean Trade | Catharine Robertson
Visio Pros: From $170 Easy to learn Diagramming app Many stencils available Templating system MS-connected Cons: No Mac Not robust Primitive templating
Tools of the Lean Trade | Catharine Robertson
iRise Pros: Most robust product Simulations, not just prototypes No coding needed Free, simplified version for mobile only Cons: Made for enterprise “Adoption center” Full version $6000++
http://www.irise.com/irise_in_action/
Tools of the Lean Trade | Catharine Robertson
Axure Pros: Hi-fi or lo-fi (sketching) Rich html prototypes, no coding Sophisticated templating Sophisticated func spec system w/MS Word Client review online Change history Feedback tracking Cons: Expensive (from $589)
Tools of the Lean Trade | Catharine Robertson
Balsamiq Pros: CHEAP! (from $79) Use demo for free Desktop or plugins Hand drawn look Drag & drop = instant Annotations Cons: No templating Crude prototyping Hand drawn look Bad for big projects
Tools of the Lean Trade | Catharine Robertson
Others
• HotGloo • Mockflow • Cacoo • WireframeSketcher • FlairBuilder • Mockingbird • ProtoShare • JustInMind • iPlotz • Pidoco • Gliffy • JumpChart • Creately • Lovely Charts • Templatr
• Foundation – “coded wireframing” for rapid prototyping responsive design
• Sinatra – Ruby “micro-framework” for rapid prototyping
• Pencil - open source browser add-on wireframing & prototyping tool (available for Firefox, other versions coming soon)
• Stencil kits: – for Mac OS – Facebook apps – OmniGraffle, Visio – PSD files – Flex, Eclipse – Yahoo design stencils for many apps – EightShapes’ Unify for Adobe apps – Keynotopia for Keynote
!Tools of the Lean Trade | Catharine Robertson
5 Questions to Choose the Right Tool
Who are you communicating with? • Clients/customers • Developers • Team members • End users What are you communicating? • How it works • How to build it • Process management
How quickly do you need a prototype? • At every step • When wireframes are done What is the prototype for? • Communicating functionality • User testing
What is your budget? !
Tools of the Lean Trade | Catharine Robertson
For more info
• smashingmagazine.com • uxmatters.org • boxesandarrows.com
• alistapart.com • mashable.com • uxbooth.com !
Tools of the Lean Trade | Catharine Robertson
http://www.irise.com/
Catharine Robertson [email protected] @cathro
Tools of the Lean Trade | Catharine Robertson