Download - Wireframes: Choose the Right Tool for the Job

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.]


Our Project Process


Our Project Process

luxury of the waterfall


Presenter

Lean vs. waterfall: we have the luxury of studying, talking to users up front. Also, we’ve already been paid at least half by the time we start the first day of work. So we have to get signoff all along the way. Which is why we put so much effort into studying users at the beginning.

My role:


Some of my tools: • User task flows • User personas • Sitemaps • Card sorting • Affinity diagrams • Mental models • Content inventories • Taxonomies • Wireframes


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!


Wireframe is another name for blueprint.

http://mffanrodders.wordpress.com/page/120/?archives-list


Presenter

Can be a: functional specification, a work order, a contractual agreement, a process management document, a project artifact. For your team peers, your manager/co-founder’s signoff, for your visual designer, for your developer to know how to build it, for your client to agree to and sign off on.

This is a wireframe.

"##$%&&'()*+,('(-.'/0-1&2'+*3(.#+*450+&6+7'(#+36(*+4*51(.8&!


This is a wireframe.

http://wireframes.linowski.ca/tag/annotation/


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.


Wireframing & Prototyping Tools


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


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


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


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


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


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


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


Visio Pros: From $170 Easy to learn Diagramming app Many stencils available Templating system MS-connected Cons: No Mac Not robust Primitive templating


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/


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)


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


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? !


For more info

• smashingmagazine.com • uxmatters.org • boxesandarrows.com

• alistapart.com • mashable.com • uxbooth.com !


http://www.irise.com/

Catharine Robertson [email protected] @cathro


Download - Wireframes: Choose the Right Tool for the Job

Top Related