Subconscious attraction — why we navigate toward certain apps
App icon design, subconscious, and typography… WTF?
Why are we attracted to open up certain apps? Could our subconscious be driving us to notice specific icons more than others? Some apps have that innate and natural ability to attract the eye and your attention. This subconscious attraction toward an app can happen for many reasons, and the design of the icon is a large part of that.
App icons need to convey many meanings, but its core principle is to remind you it’s still there on your phone. It reminds you there’s something waiting for you, just around the corner — all you have to do is tap on that little icon… In the branding field and domain of cognitive psychology, this phenomenon is well understood. Much of the topic is researched and explored on why people are attracted and compelled to certain shapes and colors more than others. When it comes to your smartphone apps, all those little square icons on your home screen, some are actually driving you to tap on them more than you realize, and it doesn’t rely on pop-ups, notifications, or loud alerts to drive you to engage. There’s a small subconscious nudge that tells your brain, “Hey! you want to tap on this.” “Take a look at me, I’m interesting, remember!”
While recently using one of my banks, Charles Schwab, I noticed that within the folder of all my other banking apps the Charles Schwab logo and app icon would get lost when I scanned the folder. When I would open up my phone and look for the app I wouldn’t be able to easily find it in the mixture of other app icons. I was wondering why this was happening. I then recalled back to a conversation I had with a few other designers — why some applications are so addictive (take for instance the Instagram app or Snapchat. Their app icons and logos are designed specifically to draw you into the app, to remind you of the value behind that little square.
Within that tiny square space, sitting on your home screen, the little icon yells out to you. It screams so subtly that there’s new stuff to check out, and it might be important. The app icon design is able to do all of this using some simple but powerful design techniques.
- Clean Lines
- Distinct and simple shapes
- Loud and contrasting colors
(the color conversation is quite deep and we won’t get into that in this article. Check here if you want to learn more on that subject)
One of the tricks designers commonly use when creating a well-branded logo or app icon is to understand how colors, typography, and shapes interact with each other. Applied properly, when these elements merge together they create a compelling visual attraction for the user. Because smartphones are interesting and newish-medium for this type of design it creates a new set of dynamics that need to be understood. In order to create the best color, shape, and typography combination, the fields of design and usability merge.
Human eyes are only adjusted and capable of seeing down to a certain definition. I’m talking about a certain pixel density to which the eye can no longer recognize. Many people struggle with seeing really small text or understanding shape differentiation at small sizes. (It’s called needing glasses, duh!) #ocularassistance
The average human eye (20/20) can see 300 microradians of visual acuity and has a near point of 25 cm. That works out to 75 microns, or 338 pixels per inch. But that doesn’t mean you can’t tell dots are there, it just means you can’t see the white space between two dots. — Stanley Yang
When I was looking at the Charles Schwab app in my folder of banking apps I noticed issues concerning the icon design.
Most people aren’t consciously thinking about why they can’t easily or quickly identify certain apps, but I’m sure many of you have experienced this perplexing conundrum. You’ve opened up your phone, you know what you want to do and you know what app you’re looking for, but for some odd reason you just can’t seem to find it. So of course you open up the phone search and type in the app name.
You keep staring at those same 10–20 apps as you scroll through the screens or open up folders, you just seem lost when looking for that one specific app. This has to do with the conjunction of design and branding, but it also is related to the issues of small iconography. Small iconography for these app icons is heavily affecting your ability to quickly navigate to the app you’re looking for. Largely influenced by your relationship to that product’s branding; your association to a brand happens instinctively through its logo, colors, and the meaning behind the services it offers. Think of the infamous “Golden Arches". Does anything specific come to mind when you see these colors or shapes? The name probably doesn’t even need to be mentioned yet your awareness of the brand is hardcoded into your memory. Only because of the shapes and colors.
Humans are naturally visually focused. Excluding those with heavily impaired vision, sight is by far the strongest sense in humans allowing you and I to understand the world around us. Before an app icon design becomes very meaningful you must first have a strong association with that icon or that brand. Having a wonderfully designed icon or branded logo won’t mean much if the user hasn’t had time to create a mental association with those images and that brand’s service. For me Charles Schwab has an obvious but strong association for banking and finance. I can normally recognize the colors and logo. However, when this brand is represented on my phone as an app icon issues start to emerge. The app in my phone gets lost in the mix of all the other apps even though I know exactly what I’m looking for. This can be attributed Charles Schwab app’s slightly outdated logo. It was not taken into account for modern-day small iconography. Brands are being represented on smaller and smaller screens. The Charles Schwab logo was last designed in 2001 and it comprises of a wordmark (the full name of the brand, spelled out in all the letters). The logo consists of two font types, a serif font and a sans serif.
So with my eyes set on solving this design problem, I took out pen and paper and began the process.
One challenge I encountered was translating the Charles Schwab brand visuals to smaller screen sizes. This would involve manipulating the logo slightly and creating icons that are easy to recognize in small format.
The first task I took on was understanding the foundations of the current logo. Where did the brand start, what are their values, how have they grown? Mapping out related verbal markers assisted me in creating a quick persona for the brand. Words like: Finance, Safety, People first, and 1971 (which was their founding year). The logo needs to both represent the seriousness of the bank and also a modern human approach to finance.
My next step was to try and recreate their current logo to better understand the shapes and the angles of the typography. The accuracy of the drawings was very important here. This would later help me feel more comfortable with understanding the movement of the letters and their relationship to each other within a relative space.
After examining the letter and word spacing, I attempted condensing that same logo into different amalgamations. Finding a way to fit all the letters into a smaller space or container was difficult, but also really fun. I tried to design as many variations as I could within a small space of time.
This type of design task (Rapid Ideation) is a great design fundamental and can be applied to any exploratory design work, no matter if it’s digital or physical design sprints.
First noticed in Bruno Munari’s book Design as Art, he explores for days a single simple shape or form, abstracting it and expanding to all absurdities and oddities. Through this method and style, nothing is “out of bounds”.
When exploring new concepts artists are suggested to sketch out as many crazy possibilities for a single concept, but within a small amount of time and in rapid succession. Even after you think you have designed all the variations of a simple shape or concept, there’s always more.
Understanding the expansiveness and manipulation of simple shapes or forms will give a designer the ability to think outside of their comfort zone.
My redesign of the Charles Schwab app logo led me toward a new goal, I needed to try and maintain a sense of relationship back to the original wordmark logo. I didn’t want to get too far from the original and risk creating an app icon that would be unrecognizable and even harder for users to remember. Don’t forget, the goal here is to help create a stronger visual representation for the app, we don’t want to make it more confusing for existing users. If the new concept is too far away from the original the purpose of this challenge would be lost.
Another important element is to ensure the new app logo emphasized strong bold shape elements within the small container. Because app icons are quite small users will be less likely to understand intricate details like small curls in the text or fine markings within an icon. A common trend in modern app icon design is the use of these types of bold, simple shapes, with loud colors. These loud colors and simplified shapes allow for the user to find that icon with relative ease. It stands out in the crowd of other icons.
*However, there is an alternate strategy that competes with the above bold-type iconography rules. Hyper-busy logomarks. If you try to design something on the very end of the spectrum, extremely busy, and illegible, you might still be able to achieve the goal of a recognizable app icon. This approach focuses on creating a pattern-style app logo. This design strategy might also achieve success, but user-testing would be suggested.
In conclusion, my finalized sketching returned me to the simple realization that massive changes are not required in order to make improvements. Even slight or small tweaks can have huge impact.
With my new Schwab app icon, it draws in the eye more strongly. More persuasive, my new icon is much more distinct compared to the others it surrounds. The icon is flexible and usable on small screen devices and better supports accessibility - e.g. people with impaired vision (supporting older populations who commonly interact with banking applications). This new logo is fresh, loud, and supports users who don’t have high visual clarity for detailed textures and text.
Let me know your thoughts. Love it or hate it?
Extra Resources: Designing for the elderly, How shapes affect our perceptions of brands, Logo Psychology
Konrad is currently a Product Design Lead @DeliveryHero in Berlin, while also running the small design agency KNP Design Collective.
