114

Many years ago, I ran across a good icon design tutorial. It said that having unique contours to icons help users scan for the item they're looking for. If this is true, why don't iPhone and Android app icons use unique contours?

iPhone

iPhone icons are all rounded squares. The only visual cues for zeroing in on an app is the inner design. I don't know about you guys, but sometimes it takes me 5 seconds to find the Map app.

iphone

Android

Android icons only have a few contour variants: square, circle, talk bubble, ... In my opinion, Android's limited set of contours is worse than iPhone's uniform contours. It tricks people into utilizing the contours to help them parse, even though it won't help them. For example, I'm often confused when trying to find the music speaker icon because it has the same concentric circles as the camera and settings icon.

android app icons

Windows

What ever happened to good old fashioned Windows style icons? I think Window's icons elevate scanability over consistency / style. I never find myself aimlessly gawking at Windows icons because almost all contours are unique.

Windows start menu

6
  • 8
    Windows also has the advantage of showing icon + text. I’m used to scanning text; adding icons makes that easier. Removing the text entirely makes it harder again.
    – Martijn
    Jun 10, 2011 at 9:04
  • 1
    A few years back I was working on adding user-selectable icons to a product using all the free-to-use icon sets out there I could find. I was initially concerned that all these sets would look inconsistent when mixed together. However, the end result seems to be a visual diversity that helps with scanning as you say. OS X also gets this right just as Windows does -- and on the Dock this doesn't even give you text, but it works beautifully for visual scanning.
    – jlarson
    Jun 10, 2011 at 13:35
  • A lot of those iPhone icons have strong internal contours, and I'll bet the consistency of the external shape allows our minds to mostly ignore it. Some of those icons are still pretty weak though.
    – Steve S
    Jun 10, 2011 at 17:32
  • 3
    Would it make a difference that people might have more control over the placing of the icons on their mobile phones? I don't really remember my iPhone icons by their looks, more by their place. I have less control over the placement of the icons in the Windows start or task bar, or the Mac OS X Dock (except for those that are always in my Dock).
    – Jan Fabry
    Jun 11, 2011 at 12:17
  • 1
    @Jan Fabry: you have plenty of control over placement of icons on the Quick Launch bar (you can drag them around provided you didn't lock the taskbar as that locks the quick launch bar as well), just not the task bar (opened apps), though - finally - that has changed in Windows7... Jun 11, 2011 at 12:33

10 Answers 10

25

Many years ago

That's probably the key factor. The rendering technology we now have is considerably different than what we had in say 1985 or 1995.

Now, that shouldn't really change the principles of good icon design, but it has changed the trends over the years. OS X and Windows have become progressively 'shinier' over the years at times implementing almost full blown illustrations and 3D renderings as their icons. And people can be suckers for shiny…including those of us that design the icons. ;o)

Fortunately, it seems that we've gotten that mostly out of our system and we're now moving back towards a saner visual icon language. Windows Phone 7 is an interesting move back towards the traditional concepts of icon design.

Now, all that said, the question was more about app icons. An app icon is just as much about UX as it is about what the marketing department wants/needs. I can be a bit more forgiving of the app icon than the internal UI icons of the app. App icons are really mini advertisements. But I do agree, some of the icons (including Maps), become lost as it's less of a true icon and more of a small photo.

27

On a slightly related note; there have been some studies into rounded corners vs sharp ones and whether rounded ones aid cognition.

"A rectangle with sharp edges takes indeed a little bit more cognitive visible effort than for example an ellipse of the same size. Our "fovea-eye" is even faster in recording a circle. Edges involve additional neuronal image tools. The process is therefore slowed down."

Source:http://www.uiandus.com/blog/2009/7/26/realizations-of-rounded-rectangles.html

13

There are two major visual pathways that help us recognise objects: the dorsal pathway, which is all about working out where stuff is and how we might interact with it; and the ventral pathway, which is about what that stuff actually looks like. (Ungerleider & Mishkin, 1983; Goodale & Milner, 1992). Evidence from neuroimaging studies suggests that even when you don't intend to pick up or otherwise have any motor interaction with objects, your brain is still, on some level, probably working out how (e.g., Faillenot et al, 1997).

As you point out, there are a number of ways in which individual items in an array can be distinguished (shape, colour, contour, etc). I'd imagine contour would a be great way of improving identifiability: if all icons have the same contours, as on the iPhone, then from a 'preparing to grasp' perspective, they all invite identical motor preparation. However, when icons' contours vary, so must grasp preparation: in other words, you have given the brain a (motor) way of distinguishing between the icons, and one that it doesn't require much conscious attention to achieve.

The dorsal "where" pathway is also involved in spatially locating items. I agree about the positional stuff discussed above: positional info is great as a way of remembering where to look for something, but when you consider that users may have several near-identical screens' worth of apps to memorise locations for, that spatial information might get diluted (this is speculative, though; I can't point to any data beyond a general consensus that uniqueness is memorable). Also, as I think someone else has pointed out, a lot of us move our app icons around as we acquire more, or re-evaluate their usefulness, so spatial navigational cues aren't necessarily very stable over time.

If we restrict icon contours to the standard Apple round-cornered squares, it has to come down to the other, less motor-based stuff — the ventral pathway's "what" function. I'm surprised nobody's banging the 'colour' drum harder here; colour is one of the major ways that I distinguish icons on my phone while searching for them (which is why I get so messed around by lots of app developers choosing shades of blue). I agree that the Map app on the iPhone is really hard to find, and I can't help but think that's because it's not visually striking: it's almost army desert camouflage in its colour-scheme (compare that to the findability of jewel-coloured apps). I wonder if there's an evolutionary thing going on here: while we've evolved highly sophisticated visual systems that can discriminate very finely (at least, given enough expertise and processing time), getting our attention without actually having something move is much more easily achieved by giving us something unusual and brightly-coloured to look at.

Lastly, just an aside: it's interesting that you say it can take you several seconds to find the one you want: the ventral pathway is generally slower than the dorsal.

12

I agree 100%, the edges of the andriod icons are nice each by themselves but when scanning the eye gets very confused.

However, the advice from that tutorial is still solid. They are talking about within the icon. Bold shapes and unique contours catch peopels eye.

A few more bits of advice I gleaned from a presentation from Bess Ho: (You can check it out HERE)

  • Realistic
  • use of textures
  • small preview of app
  • mini version of UI
  • Use of layers to show depth
  • use of little banners to show free or version #

and there are a few more pointers in there as well.

9

I know this question is answered and all, but I've just seen this and thought it was relevant.

UX Movement | Why Distinct Icon Outlines Help Users Scan Faster

Uniform outlines make the shape of your icons look the same. Since they all look the same, it’s hard for any particular icon to stand out when users scan them. Instead, they have to focus more intently on the icon pictures because of the visual noise surrounding the icons. The user’s visual path will hit the background borders first before they can fixate on the icon.

enter image description here

3
  • 1
    Wish that article cited any sort of proof or evidence or research... Aug 5, 2011 at 15:44
  • 1
    Seems like none of their articles are based on research. But I have to admit most of what they say make sense.
    – JoJo
    Aug 6, 2011 at 6:50
  • 1
    The article author has (somewhat snidely) offered links to associated research in a comment. Why he didn't offer this in the main body (or as references) is anyone's guess.
    – Sam K
    Aug 8, 2011 at 9:06
7

The use of Android's contours definitely limits the search space as compared to no change of contours (and the whole point of scanning is to limit search space by doing easy preliminary check). I can totally see why the speaker and camera icon are confusing because they are very similar, BUT you still need to only differentiate between two icons that are easily spotted in the bigger set when scanning, rather than evaluating every icon which makes the chances of missing it completely smaller.

I am not having any luck with finding research papers on visual discrimination tasks at the moment though, but the research has been done (usually with words and colours, not icons, but the principle is the same since the word check is usually also some sort of shape check on things like length and easily spotted properties, before the word is fully read.)

4

I'm not sure if icon shape is really that important except for the first use. People often remember where the icon should be, this is much faster than scanning. So, for smartphone users, shape uniformity might not be a usability issue but gives an aesthetic appeal.

1
  • 1
    That only works if the icon position is fixed. In scrollable windows and especially if it is about app icons (apps get added and removed, so the set isn't constant), this won't work.
    – Inca
    Jun 11, 2011 at 11:14
3

It depends how you are showing the icons - with a small number of widely spaced icons shape makes them easier to recognize. Put them close together and you have an overwhelming collection of different things, none of which stand out.

The problem with the android icons isn't that shapes are duplicated but that the irregular shapes disguise the grid that would make scanning easier.

2

I instantly felt more efficient in scanning the iPhone Springboard than the set of Android icons you've presented.

The consistently shaped icons in iOS remove the need to think about the shape of the icon and focus on the colours and patterns in the "square". When I look at the Android icons I find my first point of focus is the shapes of the icons, and this distracts me from looking at the internal colours and patterns used in the icon, making scanning for a specific application cumbersome.

1
  • 3
    One of the reasons for your perceived difference in efficiency might be that a narrow 4x5 set is in itself easier to scan than a wide 6x4 :) Jun 10, 2011 at 5:01
0

This might be related to what James Kalbach in his book "Designing Web Navigation" refers to as information shape (page 40 onwards in first edition).

Here he mentions that researchers Andrew Dillon, Misha Vaughan and Elaine Toms have performed research on these matters.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.