Comments on: Why low-fidelity prototyping kicks butt for customer-driven design

By: Laura Klein

Laura Klein — Thu, 07 Jan 2010 22:45:06 +0000

Do you mean for prototyping or for building applications?

I've used it for both, and it can be helpful for prototyping, but the vast majority of designers don't know it. It can be a bit of a hassle, since you need to have a server to run it. Also, I haven't really seen any good php tools that help you quickly build prototypes, although there certainly might be some out there.

In general, I'd say it's way too heavy duty just for building interactive wireframes, unless you happen to already be great at using it.

By: jack

jack — Thu, 07 Jan 2010 21:03:19 +0000

i was wondering if you anything about php#/

By: Michelangelo

Michelangelo — Mon, 28 Sep 2009 12:26:16 +0000

I am surprised that no one mentioned Axure Rp. It allows your prototype to be as rough or as polished as the stage of the project demands; it maximizes reuse and quick updates across pages through the use of templates; most importantly you can annotate every object or page.

But as always, pencil and paper are a must. (or 'marker and whiteboard' if it is a joint design session). I use them to clarify the flow in my head before I fire up any software.

By: besocial

besocial — Mon, 28 Sep 2009 11:31:07 +0000

Connect-A-Sketch is really cool app that let's you draw out sketches, as Andrew suggests, and then drag and drop them into a prototype:

http://bit.ly/3w40C8

By: Erik

Erik — Mon, 28 Sep 2009 11:07:32 +0000

Great article – thanks!

I believe that the level of fidelity of your prototypes needs to match the stage of the process you are in – which I think you alluded to in the article. It's important that the process be iterative. If there is a solid iterative approach at the beginning, sketching with the customer/client can go a long way to fleshing out the best ideas early on. This also helps to set the expectations of deliverables at this stage, keeping everyone on the same page. Also, sketching helps to keep any “visual design” issues at bay, and retain focus on the interaction design.

Thanks again,
erik

By: jasonrobb

jasonrobb — Sat, 26 Sep 2009 13:09:54 +0000

Outstanding post, thanks for taking the time to write about this. You're emphasis on refining the page flow rather than the page design is priceless. Defining the interactions makes it so much easier to visually design the page.

Well said, I'm really excited about the article. Thanks again!

Cheers,
Jason R.

By: huang

huang — Sat, 26 Sep 2009 05:07:26 +0000

Frozen winter is coming,do you like to buy ugg to preventing cold and keeping warm.As a pursuer for the most stylish ,is there any ugg boots you have in mind?I think you have no excuse anymore if you don't have a pair of UGG Bailey Button Boots.The Bailey Button UGG can be worn as a UGG classic short Boots or UGG classic mini Boots . Hottest pop style.If you like the UGG tall boots,www.realugg.com can provide high quality of Ugg Tall Boots in low price,Are you straitened for Ugg Boots Insoles,don't worry ,we have the best Ugg Boots Insoles on sale ,many of which are hand made by craftspeople.RealUGG,Inc came up with some new-styles- Ugg Lo Pro Button , Ugg Women's Rainier, We offer a wide range of UGG Boots in different color and styles. Browse the website, we are sure you will find Real UGG to tempt you!

By: bookmousey

bookmousey — Sun, 20 Sep 2009 18:17:00 +0000

I like the division between showing the low-fi prototypes to execs vs end users. But then another comment mentioned that without interactivity, you are not actually measuring the usability of a product.

Another distinction that might be useful here is the purpose of the prototypes.
Possibly when testing usability and interaction, an actual css/js wireframe would be better, whereas if I am still at the concept stage, the paper prototypes will help the iteration process move along quicker.

Currently I am planning on developing some tests (for end users) using paper prototypes, and the main reason for this is to help define the feature list of the project. Personally I have not done user testing with lo-fi prototypes yet, so we'll see if it works.

By: Vaibhav Domkundwar

Vaibhav Domkundwar — Fri, 18 Sep 2009 15:48:39 +0000

Just sent it to you via email. Let me know what you think

By: Laura Klein

Laura Klein — Fri, 18 Sep 2009 15:35:45 +0000

There's a real trade off here. If the goal is to very quickly mock up a bunch of rough wireframes and then do several iterations during testing, the HTML and CSS can get messy pretty quickly. As with anything, the faster you go, the less likely you are to have something production quality at the end. However, if you follow decent semantic markup guidelines, some of it can be reused later.

Also, if I've written a lot of JS for transitions or any other sort of interactivity, quite a bit of that seems to be reusable, since the logic's all there, and it just needs to be tweaked if the HTML changes.

I'm actually going through this process currently with a project, where we specifically took a little extra time with the wireframes in order to save time later during implementation. I think it will end up being quite a bit quicker, but it's a fairly simple project where we're doing the implementation, which isn't generally the case. Larger, more complicated things like full web applications that have big teams of programmers working on them often still need to be built from scratch.

By: Andrew Chen

Andrew Chen — Fri, 18 Sep 2009 15:23:27 +0000

In reality, the design will probably be both low-resolution, low-fidelity, and very inaccurate

By: Andrew Chen

Andrew Chen — Fri, 18 Sep 2009 15:05:12 +0000

Hi Cristian,
is Flairbuilder your project? Would you email me when the new versoin is out, so that I can review it? Thanks.

By: Cristian Pascu

Cristian Pascu — Fri, 18 Sep 2009 14:38:39 +0000

Hey,

FlairBuilder will very soon feature a Napkin like l'n'f letting you create complete interactive prototypes that look hand-drawn. It's a very exciting combination and I'm sure people will love it.

By: Andrew R.

Andrew R. — Fri, 18 Sep 2009 12:16:31 +0000

Laura, in taking your approach of building basic HTML/JS wireframes, do you find that you can easily add the final visual elements to those wireframes, or do you only use the wireframes to test interaction and pageflow but then start again when slicing/coding the final design?

By: K. Warman Kern

K. Warman Kern — Thu, 17 Sep 2009 19:13:24 +0000

Big fat pencils and plain white paper were also the tools at Leo Burnett, back in the day.

Conference rooms – used mostly to get away from the phone and brainstorm uninterrupted – always had a pad of blank white paper and a big fat black pencil at each seat. Because Leo, I'm told, believed that no lines on the paper and a big fat fuzzy pencil line forced you to say what you are trying to say as simply as possible – whether in words or visuals.

Also, from my experience. People get very literal when they don't know what to say or how to react to something. So if you give them executional detail before they've bought into the overall concept, they will get distracted. (Maybe to avoid telling you they don't get or like the overall concept?)