Something looks off

How seeing possibilities in a design can obscure what’s there.

Jakob Køhn
UX Collective

--

An example of how a card containing information about a panda could be designed.
A card design showing information about pandas. Photo of the panda by Jay Wennington, and information by Wikipedia.

TThe image above shows an example of how a card element can be designed. The card displays some information about a panda, which could be used in some kind of animal encyclopedia website. Imagine you were asked to give feedback on its design. The information is understandable, but something looks off, maybe increase the space between the different elements? Now imagine you have designed this card and you are the person presenting it to other observers, what do you see in it? Potential, possibilities, and a starting point for further design?

Hi-fi

Presenting a high-fidelity prototype is exciting, it can inspire, motivate, and change the perception of what the design and the finished product can or has become. High-fidelity prototypes are powerful, they can tie the loose ends and land its observers safely on common ground, making them eager to continue exploring how best to accommodate and maintain its radiating solution. But sometimes this chiseled marvel of exactness makes its “fantastic features frail, finicky and finite, freeing focus for finding fatuous flaws”. The designer knows how quick and easy it is to increase the space between two boxes or change the font-size to accommodate for fewer line breaks, and that makes the designer able to see its ability for rapid change. This sense of transformation is arguably a good trait in a designer, and seeing a high-fidelity prototype through the lens of multiple possibilities is a sign of creativity and problem-solving. Similar to actual glasses, this “lens” enables the wearer to see, but (luckily) not everyone is wearing the same set.

Taking the foot off the metaphorical metaphor-pedal for a second, designers have to understand that they do not see the same prototype as other observers, even if they are all looking at the same thing. The designer’s ability to see possibilities obscures what is there. A designer can present a high-fidelity prototype hoping for feedback on the possibilities it entails, but as the other observers do not see them, they give feedback on its “fatuous flaws”: the shortcomings that in the eyes of the designer are silly and easily changeable.

A design should not come with a prescription on which glasses to wear (sorry, I needed some more metaphor-fuel) to understand and know which feedback is to be expected. This is the fault of the designer, who will, by not correcting his or her vision (okay, I needed some more), continue down a path of misunderstanding. Or worse: The designer might not be able to understand that the kind of feedback is a result of his or her blur, and think that the design is good as long as these small flaws are fixed¹.

What we don’t know

I think the initial panda card design is interesting because I feel it sits on an edge between a low and high-fidelity prototype:

An example of how a card containing information about a panda could be designed.
What the observers see.

Imagine you are asked to give feedback on this design, what should be done differently? Maybe the image, the spacing, or the choice of fonts? An observer sees a single panda card design, but the designer presenting the design might think the design visualizes a wireframe that demonstrates how the information about the animal could be organized, still allowing for multiple possibilities. The designer sees something else:

Six examples of how the card containing information about pandas could be designed differently.
What the designer sees. The illustration of the panda is based on a photo by Shiyang Xu.

While still wearing the “lens of multiple possibilities” the designer would think they were presenting something like the image above. But they are not, and the other observers would still think something looks off with the single panda card design, dutifully giving the feedback on what they are presented with. The designer might get frustrated by the feedback: “What? Do they only want more space around the different elements? Why do they give the f- fatuous spacing so much attention?!” The designer returns with a new design, this time increasing the space between the different elements:

The same single card design, but this time with increased space between the different elements.
What the observers see: The same card design but now with more space between elements.

Even though the designer presents this new single panda card design with more space, the designer still hasn’t turned off their “designer vision” and, blinded by the possibilities, think they are presenting something like this:

What the designer sees: The same possible card designs but with the spacing increased in all of them.

In their mind the designer edits all the possible card designs, giving them all more space. What the designer doesn’t know already is that a possible card design that otherwise could have worked well might now be changed to the worse. By adjusting all the possible designs they think they are presenting, according to the feedback linked to the actual presented design, the designer is changing future possibilities without even realizing it.

Just like a film enthusiast might watch a movie by which techniques are used, and just like a music creator might listen to a song while wondering how to recreate a specific tune: a designer might look at design through its possibilities. As mentioned earlier: being able to see multiple possibilities is arguably a good trait in a designer, but sometimes it is important to leave the “lens of multiple possibilities” at the table and look at the actual design together with the other observers. Isolating what we are seeing, opens for solutions that don’t affect the other possibilities, and makes us able to build something on common ground. The first lesson when trying to draw another object is practicing seeing what’s there² and I think it fits naturally in the design process as well.

What we already knew

As a designer, it is sometimes better to show the client or test user a low-fidelity prototype to adjust their expectations and direct their feedback.

This also holds for adjusting what the designer expects and how they perceive limitations. Low-fidelity prototypes allow the designer to allocate their creative resources to focus on the interaction, the structure, or overview of the information that needs to be displayed. Time spent fitting and moving boxes for the margins to be perfect, just to get that initial presentable high-fidelity prototype, yields results that — ever as beautiful — hides the dynamicity of the prototype. Even though many designers have the powerful “lens of multiple possibilities” that gives them the ability to see high-fidelity prototypes as mere lumps of clay, imagine how powerful the lens becomes when looking at a rough low-fidelity sketch.

Let’s recreate the panda card design, but this time as a low-fidelity prototype by drawing it as a simple sketch in their notebook. The designer presents their notebook with the drawing to the other observers, and ask for feedback:

A notebook containing a single panda card design sketch on one of the pages.
What the designer is presenting.

Still seeing multiple possibilities in the low-fidelity sketch, the designer think they are presenting this:

A notebook containing many different ways of designing and arranging the panda card design.
What the designer think they are presenting.

The observers look at the notebook and back to the designer. They start opening their mouths about to give their initial feedback. By imagining misunderstanding as a small invisible creature, this small creature is now grinning, eager to get back to work. The observers give their feedback: “We think the card could work if it’s shaped like a circle, that would also look nice if they are arranged horizontally.” The designer and the small creature of misunderstanding looks at the observers with shock. Where is the feedback regarding the spacing, the font, or the colors? The designer slowly starts smiling and nodding, while the creature of misunderstanding dissolves in agony. This time, the low-fidelity prototype enabled the observers to see many of the same possibilities as the designer. I think this change of feedback regarding the low-fidelity prototype is a result of two things: (i) the low-fidelity prototype presents fewer variables to give feedback on, and (ii) it is apparrent that the designer spent less time creating the low-fidelity prototype. The observers giving feedback on the low-fidelity prototype considers the variables that are present, which at this moment only includes the general shape of the panda card design and its placement on the paper. Since it is also apparrent that the designer spent less time on the low-fidelity prototype, feedback regarding larger or more experimental changes comes more naturally to the observers.

What we now know

The designer and the other observers do not see the same thing in a presented prototype and practicing seeing what’s there isolates it from affecting thought-up possible designs. The observers and the designer achieve a common ground when all of them see the same thing. This enables them to discuss the design without having to worry about the other participant’s minds being somewhere else. Many of us know that low and high-fidelity prototypes each have their place in a design process, and I think it is important to remind ourselves of this knowledge.

¹ The design might turn out well after fixing small flaws, most naturally if the prototype is in its final stages.

² This was the first lesson in a drawing class I attended!

The UX Collective donates US$1 for each article published in our platform. This story contributed to Bay Area Black Designers: a professional development community for Black people who are digital designers and researchers in the San Francisco Bay Area. By joining together in community, members share inspiration, connection, peer mentorship, professional development, resources, feedback, support, and resilience. Silence against systemic racism is not an option. Build the design community you believe in.

--

--