Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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

share|improve this question
102  
I was trying to find the maps icon on your first iPhone screenshot, took me way too long to realize that it's not actually there :) –  TomvB Jun 10 '11 at 7:54
7  
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 '11 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 '11 at 13:35
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 '11 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... –  Marjan Venema Jun 11 '11 at 12:33

10 Answers 10

up vote 20 down vote accepted

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.

share|improve this answer

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.

share|improve this answer

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.)

share|improve this answer

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.

share|improve this answer

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.

share|improve this answer
2  
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 :) –  Vitaly Mijiritsky Jun 10 '11 at 5:01

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

share|improve this answer

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.

share|improve this answer
    
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 '11 at 11:14

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.

share|improve this answer

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

share|improve this answer
    
Wish that article cited any sort of proof or evidence or research... –  Alex Feinman Aug 5 '11 at 15:44
    
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 '11 at 6:50
    
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 '11 at 9:06

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.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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