#5 Prototype is worth a 1000 pictures

For a UX designer, a prototype plays a critical role.

A picture is worth a thousand words.

A prototype is worth a thousand pictures.

As an example let’s say,  “I want to create a stop-motion of a clay model performing pushups”.

From a product point of view, this could be an instructional video product, or part of an exercise app, but let’s not too worry about that, as we are focusing on differences between words, a picture and a prototype.

If I want to communicate my concept in words as descriptive as possible, it would be something like this:

A stop-motion of a clay model performing pushups.

1. Create a human figure using a clay
2. Put the clay model in a pushup starting position
3. Take a still photo of the clay model in a pushup starting position
4. Bend arms of the clay model slightly to represent an initial progression of the pushup movement going down towards a ground, and take a still photo of it.
5. Repeat step 4 until the clay figure is fully in the bottom position of the pushup touching the ground.
6. Import all the photos into an animation software, and place photos in a sequence. This is the first half of pushup sequence, from a top position to a bottom position.
7. Copy above sequence, and reverse the order of still images to create the 2nd half of pushup sequence, pushing up from the bottom back to the top position.
8. This completes one pushup movement.
9. Copy and repeat the cycle the desired number of times

Stop-motion: An animation technique where you take many still shots of an object with slight changes, put those in sequence, and playback one after another in order to make it look like the object is moving.

Now this lengthy text description can be visualized in one diagram, which is basically a picture.

As you can see, a picture, in this case a diagram, makes it easier for human to comprehend the concept better compared to a lengthy text because it’s visual, therefore you can immediately see it.

Now, while this picture, which is a diagram, is easier to see compared to text-only description, it still requires some sort of logical decoding to fully understand what’s explained, and does not convey the feeling of the final product.

It’s like looking at an instructional manual for assembling a furniture.

You can see what kind of furniture that is, but you don’t get the feeling of what it’s like when its built.

We, humans respond to things emotionally.

Before we understand things logically, we sense and feel things intuitively, emotionally first.

OK, let’s go back to our clay model stop motion.

So here’s a “prototype” of the clay model stop-motion.

As you can see, it immediately gives you a live, vivid impression including the color, the texture, the motion, and so on.

Now, I intentionally made the picture rough and black and white to make the prototype stand out even more with a stark contrast.

I also intentionally used an example which is not a typical UX project with some digital user interfaces.

I wanted to really highlight the differences between words (text), picture and a prototype through a simple, straightforward example to make the point clearer.

A definition of prototype is broad.

According to wikipedia, “a prototype is an early sample, model, or release of a product built to test a concept or process.”

A fidelity of a prototype ranges from extremely low to extremely high.

It all depends on the context and the intention.

Engineers often make so-called functional prototypes. These typically look ugly, and focus on the functionality part. In these engineering prototypes, the primary goal is to prove that the functionality actually works.

In UX prototypes however, the functionality part is not the focus. The overall experience is.

What this means is that functionality part can be, or should be faked. But the experience part should be simulated as close as possible to the final product.

This includes emotional aspects of the product, such as feeling that you get from colors, textures, tactility, motion, sound, or even smells and tastes in some cases.

So the value of a prototype is to simulate the feeling of a final product as much as possible under given limitations and constrains.

Sometimes, you may only be able to make a wireframe prototype. Or even a rough paper prototype. Or a simple click-through prototype without any transitions. Or just an animation sequence without any interactivity.

Industrial designers always make physical mockups, low fidelity ones with clay or a 3D printer to test forms, then high-fidelity mockups at a mockup studio with real-looking material and finish.

Whatever those are, in whichever fidelity those may end up having, prototypes are going to be far more effective, valuable and meaningful especially for a group of people to get on the same page, compared to just images or text description.

UX designers should be smart and creative in how to fake and simulate the experience of a final product in the most effective way possible at any point in the process of a project.

From this perspective, UX designer is like a magician!

It’s actually quite fun when you successfully faked certain user experience of a product in front of your audience as if it’s working for real!

Check out YouTube version too!

---