A Picture is Worth a Thousand Words!

You definitively know the saying "a picture is worth a thousand words", don't you?

Low Fidelity vs. High Fidelity

Generally speaking, the saying is absolutely true! But why do some of our drawings, sketches, GUI mockups or software prototypes do cause such an amount of discussion ... afterwards? Very often it turns out, that some of the discussions don't focus on what the original author intended.

I would like to show you two examples to guide you towards what the main intention of this posting is ... Tell me, what of the following mockups has the higher fidelity?

Do you think the right one? My answer: Nope.

The right picture might look better, because the there has been more attention to visual detail. But when looking at the interaction quality of the dialog designs (taken from the printerpullpages effort by the way), the left drawing offers nearly equals the interaction quality, maybe it even uses a better approach of visualizing content (the print page preview).

Got the point? When looking at ideas, it doesn't work better if it just looks better. Moreover, strange guys like the UX people do even try to avoid keeping too much attention on visual design (in the first run). Mostly we use something called "wireframes" to present our ideas. Why? Because otherwise you might easily run into something called "taste war" :-)

Problem solved, and now?

Not really! Now it gets even more complicated. As you may have noticed, there is an effort to improve the StartCenter. The original idea was to apply the refreshed the branding, then changes have been added which address the handling. Well, many people already brainstormed and presented ideas for this and that ... but what's the problem?

Now, it is really easy to mix up the "visual design" and the "interaction design". What is your idea about? Terminology also unchecked yet? Then, you are in real trouble ;-) At least if it is just intended to show your "visual" ideas.

When I was at the CHI (see CHI 2010, Day Four) I attended the course "Developing an Effective Prototyping Strategy". The guys proposed to address such problems with an fidelity matrix which is supplied to each design artifact. To me, being the author of the pictures above, it would have been easy to rate the intended fidelity of the content. Have a look ...

Of course, the example pictures have been discussed in detail and the intended use has been described. But does everybody like reading that? I assume not :-)

So, if people would like to discuss the graphical content of something like the StartCenter, then simply add the matrix. For example, it might then be very unlikely that get "hit" by UX comments about unfinished interaction design or sub-optimal information design. So, it also deals with your comfort ;-)


Another thing the guys in the course proposed has been the expiration date. Simply speaking: things change and you cannot do anything against it. In the first months your ideas might be great ... but then technical constraints change and your design might look like the wrong approach. Take care of that. So here is how this might be avoided ...

Summary

At work, I found this "fidelity matrix" and "expiration date" approach work very well. So I propose to add at least the former item to each of our proposals - website design, software mockups, marketing stuff, ... And then, let's keep focus! Then, a picture is really worth a thousend words. And doesn't cause a thousand lines.

Cheers,
Christoph

PS: Is there anyone who can help me to work on a small template for our wiki? I don't have any clue ... Currently, I think of replacing the fidelity numbers by little stars or dots.

Update: I've added a SVG template to the OpenOffice.org User Experience Tools Page.