The lows and highs of fidelity

17 10 2006

I’ve spoken before in ‘speed designing‘ about low fidelity.

This is nothing new to many of you, but for some of you that are still working through the skill this post might help to clear up what the hell I’m talking about.

My designers are encouraged to work on a methodology that is iterative, building upon an initial baseline and through consultation and feedback refine and build upon the baseline to develop a finalised design specification.


A baseline is essentially the rough foundation design that very loosly describes or illustrates the design.

Low fidelity
When a designer works with the clients on the development of the baseline, this is where ‘Low Fidelity’ screens get used.

Low fidelity screens are generally hand drawn, have notes written all over them to describe behaviour and iteractivity, and generally cover most of the variants of screens in the application or site.

They are low fidelity because they are drawn rapidly, disposed of easily and very very very cheap to make. A large portion of time can and probably should be spent doing the low fidelity screens. Sometimes as much as 60% of your overall design time.

This is because the designer will design the core interactive behaviours of pretty much all of the devices to be used in the later versions.

Level 2 Low fidelity
Level 2 low fidelity or medium fidelity designs are the next step up from that. These ones also generally do not have any real style applied, but they do almost work, are sometimes written in html that is quasi functional, and can be used for user centric testing purposes.

Level 2’s are generally only of specialised screens or process flows that are highly complicated and would benefit from deeper usability testing.

Don’t waste too much time on these making them look nice either, black and white is fine. With big boxes that say “logo goes here” will work just fine.

High Fidelity
This is what many designers jump straight into. Now I appreciate why, it feels nicer, the outputs are nicer, everything looks good. We can get bound up in the technicalities of fibonacci calculations and colour palette matching, advanced geometric mathematics for relative size matching, painting with our fingers an so on.

The catch with it, is that it can take around 4 hours to come up with such a screen, particularly if you’re talking a home page, or primary core design theme complete with navigation model.

The High fidelity screens are used for the look and feel tuning, the actual visuals. These screens will most accurately reflect what the finished product would look like.

It’s not often necessary to actualy model any of the actual screens specified in the previous two levels. Generally, the high fidelity screens will contain various bits and pieces which can be used to form the final specification for how things will render on screen.

Building iteratvely
Above I wrote about building upon a baseline. Perhaps this will help:

Of a 40 page transactional service:
low fidelity screens:

  • 60% of the overall work time
  • 90% of the overall screens
  • 100% ugliest

level 2 low fidelity screens:

  • 20% of the overall time
  • Only the necessary screens to be used for testing or whatever purpose you decide is needed

High fidelity screens:

  • 20% of the overall time
  • only the screens required to illustrate all the required elements of the look and feel.
  • 100% fully rendered in either HTML or static images.

The key part with what’s above, is that you are building upon what you did in the previous level(s). But through building upon what you did before, you also get more selective with what you develop. The idea is that as each level requires more time to deliver, so in order to keep delivery times under control do less screens!




Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: