Design Decisions That Matter
With online shopping and retail becoming rapidly more popular since COVID-19, the icons and layouts of websites and mobile apps may just be one of the most important aspects of user or customer experience. Such carefully curated designs can make a subtle difference, but are significant on the consumer side. According to Adobe, 38% of people will leave a website they find unattractive. Let’s take a look at a few design decisions (specifically icons) that could make or break the user experience.
Icon Designs
Icon designs are probably the most notable part of an application for navigational purposes. First, it’s important to highlight what makes a good set of icons. Consistency is key: companies like Apple, Adobe, Google all use the same “theme” for their icons that make them easily recognizable. Simplicity is also necessary to ensure a good user experience and minimize confusion.
Universal Icons
Icons like the home, print, settings, and search buttons are universal to most users. In this case, they would not require any descriptions, because people would easily recognize them. However, unique icons (like mobile apps on a home screen) would require a written description underneath, or hover text.
Solid vs. Outlined Icons
Either option can be suitable depending on the specific designs of the icons. However, the most important factor is that the icons must be easily noticeable and ultimately stand out.
If the icons have distinct patterns that are more precise, it would be wiser to choose outlined icons:
For narrower icon designs like the ones shown below, solid icons may be the better choice:
Instagram is one example that uses outline icons for its navigation bar, and solid icons for button selection:
Rounded vs. Sharp Corner Buttons
While sharp corner edges may appear “cleaner” or more traditional, users may be inclined to rounded corners because of the Bouba-Kiki effect. In this psychological experiment, people are shown a round and sharp blob, and asked to identify if it was “Bouba” or “Kiki” (which are both nonsense words). Most people assigned Bouba to the round, and Kiki to the sharp. The Bouba-Kiki effect also suggests that sharp edges are associated with seriousness and danger, which makes round edges more favorable.
Key Takeaways
An app’s icons are crucial to its branding and personality. Though subtle, the differences between icons on apps such as Twitter and Waze go a long way to express a particular message. All icons carry a certain sense of weight relating to their fill, stroke, thickness, size and shape. Luckily, you may not realize most of these things — which means the designer is doing something right!
While there are general rules like sticking to softer edges and simpler icons, many other decisions — despite constant debate online — lay at the designer’s discretion.
Think you can figure out which design decisions are more “correct”? Check out https://cantunsee.space or Designer Tom on TikTok.
Sources
- https://www.forbes.com/sites/blakemorgan/2020/10/19/50-statistics-showing-the-lasting-impact-of-covid-19-on-consumers/?sh=5acb5369261f
- https://www.bigcommerce.com/blog/ecommerce-ux/#what-is-ecommerce-user-experience
- https://uxmovement.com/mobile/solid-vs-outline-icons-which-are-faster-to-recognize/
- https://careerfoundry.com/en/blog/ui-design/icon-design-process/
- https://uxdesign.cc/7-principles-of-icon-design-e7187539e4a2
