To the front pageThe Interaction Designer's Coffee Break - Weekly postings and quarterly articles about interaction design  
  To the front pageSign inTo the frontpageSearch in GUUUI postingsAbout GUUUI  
   
 

ISSUE 15 - q3 2005

Balancing fidelity in prototyping

Choosing the right level of graphic detail, interactivity, breadth and depth

Deceived by their ideas of what clients will accept, many web development teams build prototypes that are too costly and doesn't serve the purpose prototypes are supposed to. To exploit the full potential of prototyping, it's critical to choose the appropriate level of fidelity.

Some projects put an undue emphasis on certain aspect of prototypes, such as the graphic design or the implementation of advanced functionalities. Often they don't want to show clients something that appears unfinished. Fact is that prototypes by definition are unfinished, and if you start building prototypes that are highly detailed, things quickly gets overly costly and time consuming.

Unless the project is on an unlimited budget and without any deadline, you have to lower your ambitions. If you've started out with a highly detailed graphic design, the compromise will most likely be to prototype only the "essential parts" of the product, and you end up with a prototype that looks great but is incomplete.

To design or not to design

The most important reason for building a prototype is to make sure that a product gets designed rather than happen by accident. Designing is the art of making plans for how to create things. Architects draw blueprints rather than depending on the workmen to come up with something along the way, and interaction designers build prototypes instead of making the developers think something up as they write their lines of code. Parts of the user interface ignored in the design phase, are unplanned, undesigned, and left to happen by accident.

Balancing fidelity

The more of the final product a prototype covers, the more the product is designed. But a prototype cannot cover all the details. For the prototype to work as an effective tool in an iterative design process you need to make the right trade-off between graphic detail, the level of interactivity and the breadth and depth of features covered by the prototype.

Graphic detail is how close to the final product the prototype looks. A prototype with high graphic detail attempts to demonstrate exactly how the product is going to look, while a wireframe has low graphic detail since it primarily deals with site structure and which feature goes where.

Prototype with low graphic detail vs. prototype with high graphic detail

Prototype with low graphic detail vs. prototype with high graphic detail.

Aesthetics is an important aspect of design. But creating and making changes to a full-featured prototype with high graphic detail can be devastating. Graphic detail should be held to a minimum with approximate positioning of page elements, placeholders for images, neutral typography, and shades of grey instead of colours. In this way, the prototype can serve as a qualified input to the graphic designers, by outlining the features that has to be designed, and making it easier to create an aesthetic whole.

Interactivity is to what level you can interact with the prototype. Is it possible to click on links and go from page to page? Is it possible to fill out forms and submit them? A series of screens linked together in a linear scenario has low interactivity while a HTML prototype is highly interactive, since it's possible to click on links, scroll pages and fill out forms.

Prototype where the pages are linked together in a linear scenario vs. a prototype where it's possible to move from screen to screen in a non-linear fashion.

Prototype where the pages are linked together in a linear scenario vs. a prototype where it's possible to move from screen to screen in a non-linear fashion.

Since it's hard to evaluate an interactive system if it has no interactivity, it should at least be possible to move from screen to screen in a non-linear fashion. A medium to high level of interactivity can make it easier to evaluate the prototype, especially if you are going to use the prototype for usability tests.

Breadth is the scope of features covered by the prototype. Does it include all the features of the final product or are some parts ignored? A prototype of a shopping site has high breadth if everything from the front page to the receipt page is included and low breadth if it focuses exclusively on the product pages.

A prototype with high breadth (called a horizontal prototype) includes the all the features on the surface layer.

A prototype with high breadth (called a horizontal prototype) includes the all the features on the surface layer.

Breadth is an important aspect of prototyping. If you choose to ignore certain features, you can't be sure that the basic concepts of the design can accommodate the features you have left out. Also, features that are ignored in the design phase are left to the developers to solve. Chances are that they don't have the skills or interest in working with interaction design.

Depth is how deep the prototype goes into each feature. Does it represent each and every feature in detail or does it just demonstrate the concepts. A prototype of a company site that includes all the pages in the About-section has high depth, while a prototype with lower depth would settle with a single example that shows the basic layout of the pages.

A prototype with high depth (called a vertical prototype) includes in-depth functionality of selected features.

A prototype with high depth (called a vertical prototype) includes in-depth functionality of selected features.

Depth is a good place to compromise. The purpose of a prototype is to model the final product on a concept level, not to be an exact representation of it. Long text can be substituted by Greek text, data that will come from databases can be faked, error messages can be documented elsewhere, and so on.

In conclusion

The most important quality of prototypes is that they should be easy to work with. In order to function as an effective tool in an iterative design process, they have to be quick to produce and make changes to. It's a pity if a too resource-demanding approach to prototyping is the reason why the final product is badly designed.

In my experience, this is what works:

  • Don't get carried away in making the prototype look pretty
  • Keep interactivity at a medium to high level
  • Don't compromise on breadth
  • Compromise as much as you can on depth

No matter how pretty your prototype looks and how advanced it is, clients will ask for more until they have the fully finished product. To get the most out of prototyping, fidelity has to be balanced and your clients should be told that high-fidelity is not the way to go if they want a well-designed product and a cost-effective design phase.

Text: Henrik Olsen

 

RELATED POSTINGS
 
Posting added before you last visit at GUUUI How to represent sample data in interaction designs
Posting added before you last visit at GUUUI Prototyping ends the war between clients and developers
Posting added before you last visit at GUUUI Prototyping for user testing
Posting added before you last visit at GUUUI Greek text
Posting added before you last visit at GUUUI The art of UI prototyping
 
 
     
  To the front pageSign inTo the frontpageSearch in GUUUI postingsAbout GUUUI