Category Archives: Visualization

Maker Year Project #11: Letter Apps

Letter apps are apps whose icon’s primary visual element is a letter. For instance, Hyperlapse, Gmail, and Groupon are letter apps.

icon-mistaken icon-abstracted icon-letter

I looked through the top 10 000 apps on the iTunes App Store on January 1 2015. From those, I found 834 letter apps. Then I visualized them. Tap or click the visualization below to see it in its full glory.

It looks really good really big. 1 MB


When using a colour background, white is almost always used for the foreground.

For the letter C, over half of the icons have white backgrounds. No other letter has such a high percentage of white icons.

Many names of the O apps don’t actually begin with O.

M and S are very popular letters (62 and 57 icons). This is probably because a lot of app names begin with M and S.

J, K, and I are least popular (6, 11, and 11). Most likely because there aren’t many apps beginning with J, K, or I. But I like to think the dots on the i and j make them particularly unpopular.


Sometimes apps like Guitar Master Class are letter apps and sometimes they’re not. In some, the icon dominates the letter. In others like Gmail, the letter dominates the icon.


I didn’t include apps like CamCard because there’s more than one letter. But if I did, there’d be 386 more apps in the set.

Flat is a misnomer

I worked with someone fond of saying “I reject your false dichotomy.” Any time he was presented with an either/or option, it was most often rejected. Presenting a false dichotomy often meant I hadn’t thought in an integrative way to make the best of both options work together.

In software user interface (UI) design, flat vs. skeuomorphic is a false dichotomy to me.

Skeuomorphism is the use of shadows, textures, and patterns to make things look like real world objects. The intent is to make software easier to learn and use if it mimics real world objects, interactions, and metaphors. Even if there isn’t a real world equivalent of what you see on screen, an object’s styling can provide enough cues on how it should work.

“Flat” is the name that’s been given to the removal of skeuomorphism.

Right now there’s a popular belief that flat is better, as if there’s a binary choice between flat and skeuomorphic. But making it an either/or choice seems misguided. Discard everything helping discern depth? Discard everything providing affordance? Discard everything supporting metaphors?

Instead of flat vs. skeuomorphic, I thought it’d be interesting to look at things in different terms: Ornament vs. Metaphor

Ornament: How much detail and embellishment, like shadows, reflections, and textures, is applied to the appearance of UI?

Metaphor: How literally does the UI represent familiar objects and concepts?

I always find visualizing things on two spectrums reveals insights, so here’s some “flat” and “skeuomorphic” UI elements arbitrarily compared by ornament and metaphor.


The button metaphor is consistent and literal, but the ornament varies quite a bit.


Looking at the window controls, all are quite abstract concepts. The windows icons only make sense once you know what the buttons do (hide, full screen, close). The OSX metaphors are extremely abstract, as they follow the patterns of north american traffic lights: Red = stop (stop using this window), Yellow = slow down (hide the window), Green = go! (make the window big and start using it to its full potential.) Regardless of the styling, the metaphors are the same.


These are all over the place and present extreme opposites: The original iOS style looks like a literal volume slider on a 1970s hi-fi amplifier, complete with a machine milled aluminum knob. The Windows Phone slider is abstracted as far as visually possible. Even the slider knob has been removed. It’s conceptually pure, representing only the percentage of progress or used space. But does that make it more compelling?


Again, Windows Phone is extremely devoid of embellishment. The iOS 7 toggles are interesting: They look exactly like the hardware switch used on the iPod shuffle and iPad switch (literal), yet also appear abstract.


And here’s everything in one diagram because it’s fun.


I didn’t know what to expect from this exercise. But in doing it, I realized my compelling aesthetic is less about flatness and more about subtlety. Removing all ornament in a puritan idealism reveals stark, sharp, high-contrast controls that touch on brutal and is in no way subtle.

At the other end we see extremely rendered lighting effects, shadows, and reflections that (while I have a soft spot for them) are also not subtle can be seen as distracting.

But that spot in the middle? To me, that’s where everything feels right and balanced. Notice the iOS 7 sliders and toggles are greatly reduced in literalism, yet still use shadows and highlights to convey physicality. However, the OK button uses nothing. While iOS 7 is deemed “flat”, it’s certainly not. Instead, it’s subtle.

Subtlety isn’t about not using ornament. It’s about using ornament where it’s necessary.

Milton Glaser gave a fantastic talk decrying “less is more”, articulating it better than I ever could:

Being a child of modernism I have heard this mantra all my life. Less is more. One morning upon awakening I realized that it was total nonsense, it is an absurd proposition and also fairly meaningless. But it sounds great because it contains within it a paradox that is resistant to understanding. But it simply does not obtain when you think about the visual of the history of the world. If you look at a Persian rug, you cannot say that less is more because you realize that every part of that rug, every change of colour, every shift in form is absolutely essential for its aesthetic success. You cannot prove to me that a solid blue rug is in any way superior. That also goes for the work of Gaudi, Persian miniatures, art nouveau and everything else. However, I have an alternative to the proposition that I believe is more appropriate. ‘Just enough is more.’


I’m not writing this to say you should use “flat” or “skeuomorphic” or that one aesthetic is better than the other or that you can even come to major conclusions without considering other experiential aspects like colour, motion, or sound.

Instead, the next time you’re making an either/or decision between A and B, consider whether A and B are appropriate labels and whether they’re obscuring parameters that might reveal more insights.

Then visualize the conversation on those parameters.

If you’re interested in false dichotomies and integrative thinking, I highly recommend reading The Opposable mind by Roger Martin.