Well-designed icons, and a combination of symbols and text, simplifies communication and creates a beautiful, memorable user experience.
Icons are designed to be simple, modern and helpful. An icon reduces the subject it’s representing to its most basic form, communicating information to the viewer quickly, and with minimal detail. When dealing with large amounts of varied information, like a recipe catalog, you have to take into account what you’re trying to represent, and who you’re trying to represent it to.
In the Drop Recipes app, we’re representing food to a global audience, and the importance of offering a common visual language that transcends language, cultures and tastes becomes even more urgent. Choosing to use iconography isn’t an easy decision. Tests have shown that consumers often only remember the meaning of a small number of icons (gears for settings, a magnifying glass for search, all those ones that you tap without thinking twice about), which is why a combination of icons and text labels is best practice for clear communication.
”We’re representing food to a global audience, and the importance of offering a common visual language that transcends language, cultures and tastes becomes even more urgent.
We have tens of thousands of recipes on the Drop platform, and ensuring people can find what they’re looking for is an important part of serving up the right recipes — both for our partner brands and our users. For this, we’ve created a taxonomy of tags that sort our recipes into categories, which will be launching in early 2021, and our iconography conveys them to users at a glance.
When it comes to representing food, it might seem like photography is the obvious choice. Photography is the undisputed king when it comes to recipe visuals, closely followed by video, and we do use photos to represent individual recipes in the Drop Recipes app. However, it’s impossible to sum up an entire category of recipes with one photograph. Our experience addressing the visual smorgasbord of possibilities that food offers brought us to conclude that icons were the smarter choice for representing our recipe taxonomy.
Take, “Chicken” as a category example. If a user is searching for chicken recipes but doesn’t like the look of the Chicken Cacciatore photo representing the category, there’s a risk that they will abandon their search and get discouraged from exploring the app further.
For our appliance brand partners that have multiple appliances available on the app, like Instant Brands or Thermomix, showing just one model to represent their category might have the same result. By restricting these visuals to icons, we can show users a shorthand to the complete collection, inviting them to discover the wide range of recipes available within.
A Little Color Goes a Long Way
We are no strangers to icons here at Drop, and our iconography system has to grow and evolve as the Drop platform does. Our apps have a system of well over 1,000 ingredient, tool and appliance icons, with the number growing constantly. Every time we add a new ingredient, or appliance brand (or our existing partners launch new appliances!) we add icons for these to be represented in the apps.
Generally, these icons appear in a single color within the app — they are created and added to our system as one-color dark gray images, with individual ingredient colors being added dynamically.
When representing our recipe categories, the additional detail that adding color provides in such a small space is invaluable.
Defining a Scalable System
For icons to be done well, and create a beautiful user experience, they must follow stylistic rules and convey a sense of harmony. Easier said than done, especially when you factor in the need to be flexible, scalable and consistent in order to work across mobile, tablet and desktop apps.
For appliance brands looking to take advantage of all the user benefits that icons offer, working with an experienced partner can be the difference in getting to market quickly and effectively. Drop’s design team, for instance, has years of experience in creating, testing and refining instantly recognizable assets that move consumers effortlessly through the recipe apps we serve. We’ve developed a set of golden rules over the years our partners benefit from, including:
- Clarity before style.
- Leverage established conventions.
- Keep it simple.
Where appropriate, colors and shapes are shared between icons, unifying the overall visual system. For example, carbohydrates are represented with the same set of browns and beiges, whereas fruit and veg share the same brighter tones. All the cookware, like bowls and pots, use the same two colors as if they all belong to the same kitchen set. Likewise, all the appliance category icons in our upcoming designs are drawn in shades of white, silver or grey because, well, in reality, most appliances are either white, silver or grey.
How to Convey More with Less
Even with design guidelines in place, every icon is individually designed and optimized. When creating our cheese icon, for instance, we wanted to represent a range of cheeses and reflect our gourmet prowess.
As seen below, the first iteration had too much detail, and while the second iteration was an improvement (with more graphic shapes and bolder colors) it still wasn’t simple enough. The third and final iteration, with two-tone, bold colors and minimal detail, tested as the most quickly recognized as cheese. Ultimately, user recognition is more important than representing a range of cheeses (who’d have guessed?).
There are other pitfalls to avoid. With meats, we had started out with using animals as a first iteration. They were cute and fun, but ultimately user testing gave us the insight that they could end up being offensive for some users. The second iteration was a pleasingly consistent approach and solved the problem of offensive representation, but showed the raw material rather than the tasty results. The third — and final — iteration had easily recognizable, cartoonishly-cooked versions that resonated with our users, and so we sadly said goodbye to our farmyard friends.
Simple Icons Are Complex but Offer a Beautiful, Memorable User Experience
As a design-led company, Drop has always been an advocate of the work needed to represent the complexity of cooking in a way that makes it effortless and delightful for the home cook. Cooking is so personal, and the faster we can get users to what they want with easy-to-navigate road signs, the better it is and the more joy we can offer. The appliance brands who work with us know that offering this common visual language benefits them, their consumer, and a lot of hungry people.
To learn more about Drop’s design-led ethos and KitchenOS, the neutral, cross-brand platform for the smart kitchen, please contact Cynthia West, VP of Global Sales.