Menu

Visual Communications In Product Design

Robert Liddell

Product Development - UX

When wanting to explain a complex idea to someone, drawing a picture can be a powerful tool to help.

Many of us are visual thinkers, we understand concepts far better when they are represented visually. Not only that, but it is far easier for us to commit those ideas to memory if we have a mental image to which we can attach that idea. Have you ever seen someone in a crowd and known without a doubt that you have met them before? You cannot remember their name, but you remember their face. They say the only sense with a greater capacity for long term memory is the olfactory sense, but I would prefer not to put that to the test. Visual communication is simply the practice of explaining yourself via tangible representations. Be those two-dimensional sketches, three-dimensional models, animations, graphs, or charts. You can communicate visually in whatever way best conveys the idea that you need to transmit. I am sure you are familiar with the old saying “seeing is believing,” but in reality, I would suggest that “seeing is understanding.”

In the medical industry, we can use visual communication to create safer and more intuitive products.

The visuals may come in any number of forms. In this article, I will cover three common segments of visual communications. Universal symbols, zoomorphism, and skeuomorphism. While these certainly are not the only segments of visual communication, they will give us a pretty good understanding of how they can be useful, as well as their limitations.

Universal Symbols

There are certain universal logos, shapes, and colors that we see every day which we unconsciously interact with. At intersections, when encountering a red octagon, we automatically interpret this as a reason to come to a stop. On a slippery hallway floor, we may see a yellow pyramid that we interpret as a warning to walk carefully. Two vertical lines mean “pause” whereas two arrows pointing to the right mean “fast forward.” In my banking application, a green checkmark appears after I’ve made a transaction, assuring me that I haven’t lost the internet connection halfway through and that no, my money is not floating in a digital void somewhere.

Zoomorphism

Sometimes we don’t need any words at all to convey information. I remember my dad’s tractor had a throttle lever marked only with a rabbit and a tortoise; that did not require further explanation for me to understand as a kid.  Some zoomorphic icons are a bit more abstract. The pig representing a savings account has gradually grown out of the use of “piggy banks” to save up our excess change.  Any object which can represent the same abstract concept for different people of different backgrounds is a fantastic design tool. With that said, the main issue with zoomorphism is that people of different backgrounds tend to have conflicting ideas about what an animal may represent. The tortoise and hare used on my dad’s tractor might not have the same connotation for people who live in an area where that particular children’s story was never popular.

Skeuomorphism

When developing new devices with features that users may not necessarily be familiar with, it can be helpful to use a physical analogy. Something that the user can identify not just as a representation of an object, but as a representation of a function as well. Take a look at your cell phone’s home screen and you will likely see several examples.  An old 35mm film camera may represent your phone’s built-in camera. A classic telephone handset from a land-line phone might represent your phone’s call feature.  These examples have almost nothing to do with the actual feature or tool, yet we understand them on an intuitive level, even if we have never even used a landline or a film camera.

“A simple pad-lock symbol informs me that I’ve typed the wrong password into my phone one too many times…again”

Our electronic devices in particular are loaded with skeuomorphic representations, but skeuomorphism is used outside of the digital realm too. Thermostats often use a snowflake symbol to represent “cold” and a flame symbol to represent “hot”. The dial for the fan in my vehicle is represented by a literal fan blade. The more we look around us, the more we realize that skeuomorphic symbols have been helping us to interact more easily with new technology for decades.

A great example of conveying information visually is by further analyzing the common computer charger. I interpret the little light on my charger to mean that my device is charging when it is yellow, and fully charged when it is green. Think about all the information that is being conveyed through that little light. You first need to let the user know that the computer is actually charging. I have other devices that require me to look for a tiny symbol in the upper right-hand corner of the screen just to see if things are charging as intended. Then you also need to convey a quantitative measure or the amount of charge.  One solution to this problem that I particularly like is found in the grill of the Rivian electric truck. When the vehicle is charging, there are a series of LED lights that illuminate from left to right across the grill, indicating the percentage of charge. When the truck is fully charged, the grill has a green strip of light all the way across. A quick glance at the grill of your truck could convey to you not only that it is charging properly, but the vehicle’s available range as well. In the case of my computer, the information has been narrowed down to two modes: yellow means its working, green means it’s ready to go. All that information is transferred to the user through one little component, an LED bulb.

With medical devices specifically, conveying important information effectively can be vital to user safety.

At Duoject, we integrate risk mitigation right from the beginning of the medical device design process. It is far better to design an inherently safe device from the start, rather than to retrofit safety features onto a device halfway through development or worse, once the device is on the market.  We convey information through colors like the red ring on our Falcon safety syringe that appears only when the safety mechanism has been activated. We also use textures like the localized rough surface finish of our Xenon vial adapter, which assists and directs the end-user on how to handle the device efficiently. Sometimes, simply the general shape can indicate a direction in which a device is meant to be used. The directional design of our Intervial™ reconstitution and administration system is a good example.

In the early phases of medical device design, we try to mitigate potentially hazardous SITUATIONS using fail-safe design techniques.  However, sometimes a little visual communication is all you need to prevent an error.

Visual communication can be helpful in more than just the design of the actual product.  At Duoject, we communicate visually throughout the development process. We are constantly developing new ideas and concepts that need to be tested and proven.  When a team member has an idea for a specific feature on a device, they will convey their idea visually to make sure the rest of the team accurately understands the concept.  We will usually do this through sketches and renders, but we also share ideas in three dimensions by building quick prototypes with foam and glue.  Once we are all on the same page, we create a digital model to validate if the idea functions in a three-dimensional space. If the result is satisfactory, we will machine the components of that digital model in our in-house prototyping lab so that we can test the concept even further.

“When communicating ideas with people outside of our organization, we like to supply animations of how some of our more complicated mechanisms are intended to work”

We also like to create visuals for our clients to ensure that they understand the device just as well as we do and confirm that our concept addresses their needs. Although patent and mold drawings are efficient at revealing the complexity of our work, they are not always the ideal way to convey information about our designs so it is important to find ways to present our concepts in a language everyone can understand.

Thoughtful visual communication skills help to stay away from confusing messages. It valorizes innovation through convincing concept presentations and increases the confidence level of end-users.

Liked this article?

We would love to hear your thoughts.

Contact us