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!


Speed designing

17 10 2006

How to design with speed, and remove the “design is a bottleneck” issues.

Quite often I’ve seen designers, and I’ve been very very guilty of this my self, over designing.

I must have heard every reason under the sun:

“It’s just as fast for me to do it in photoshop as it is for me to draw it.”
“I don’t want to have design specs that look awful, it’s unprofessional.”
“I can’t draw very well, I’m much better in photoshop”
“Its easier for me to code it in dreamweaver”

Long lost is the art of talking to a client / user, and litterally scratching down on paper (electronic or otherwise) what the screens will look like.

Now you all must be thinking, (unless you know where I’m headed) “but hand drawn pictures look so aweful! and how could they possibly be reflective of the design enough to form specification?” or something equally disqualifying, but riddle me this:

“If you can rapidly, and I mean within 2 minutes craft the general layout for a screen with your client present, and get conceptual agreement on the screen within the next 10 minutes, would that be considered fast?

If you take their requirements, and then come back with a reasonably finished design done in photoshop, then cycle through that at least once at the next client review, would that be considered fast?”

I have a view that the design process during the planning phase, should not yeild any actual assets (images, css, javascript) unless they are used as part of the creation of high fidelity / working prototypes. Even then!… the assets should only be either pulled from your core reuse library (presuming you have one) or created in a fairly slap together nature.

During planning the design process needs to be streamlined and highly ‘agile’ in order to catch and respond to all the masses of input that is gathered during the research tasks of the UCD methodology.


When you do your intials, do you do them in photoshop?
Do you spend more than 1.5 seconds drawing the frame for your page?
Do you spend more than .5 seconds drawing and postioning a text box?
Do you put in the actual logo, with the right padding around it?
Can you draw a screen that has 10 text boxes, 3 buttons, a lump of text, headers, footers, nav model and maybe even some tertiary links somewhere within 60 seconds using your NORMAL practices?

I’d suggest not if you answered ‘yes’ to the first question.

What I’m getting at here is that the method behind getting the core design down fast, relies on the designer being able to accept very rough, hand drawn pictures to form the basis for specification.

More commonly these are called low fidelity screen designs or initials.

When the primary layouts have been developed and agreed upon, then and only then should the designer even consider cracking open photoshop.

Here are some tips which can dilute the garbled mess above:

  1. Don’t get over zelous about how nice your initials look. They are created during a highly creative process where a lot of information is banded around, and change can and does come through all the time. (anyone ever said this? “the damned client has changed their mind again, now I have to redo the whole design!”) Avoid this problem by designing in low fidelity until the overall layouts are resolved.
  2. Don’t worry about spelling things correctly, or nice alignments. In fact, don’t worry too much about anything except getting the ideas down.
  3. Do encourage the people you work with to try out the screens once you have the basics down. Almost like an on the fly usability test
  4. Do consider what tools you use to do this task. Paper vs. Tablet PC or electronic whiteboard. I’ll write a post later about the advantages of tablet PC to the designer
  5. Do make inline notes about the behaviours of objects on the screen as you think of them. Eg, “on select, this button turns green, then on press it launches the calculator and turns blue”
  6. Don’t get attached to the design, it’s going to get butchered many times during this process, let the change happen and use your skill to guide where it goes rather than dictate
    There’s many many more but if your’e an avid reader then more will come.