Talking about icons: Between the grid and intuition

At the end of episode #90 (1:05:55) of The Critical Path, Horace Dediu raised the issue that "we don't know how to talk about design, we have a real problem with the language... and even designers have this problem. They can't justify their work because so much of design is ambiguous". It is an issue close to my heart, although specifically conversations about trying to define design quickly lead me to wanting to kill myself. Instead I would rather get back to doing some real work. All I will say here is I remain unconvinced a new vocabulary is needed and that everyone, designers included, should just strive to be clearer in what they say. That is also to say as designers we should always be alert to the every present danger of being overly pretentious and disappearing up our own arse.

Last week Neven Mrgan made an interesting critique of the iOS 7 icons, which was followed up by a dickish follow up which focused on Neven's claim that some intuition is needed to make icons look right. I don't know Neven, but I am a fan of his work and have followed him on Twitter while now. So I am going to restate some of what rung true for me.

With iOS 7, every detail warranted the same rigor toward design. Like refining the typography down to the pixel. Redrawing every icon around a new grid system
— http://www.apple.com/ios/ios7/design/

For iOS 7 there is a new grid system and Apple were so excited about this they felt it worthy enough to use in their public marketingWe see grid systems at work every day in newspapers, magazines and their online equivalent. A grid is used to consistently align the columns and rows of text and images. This grid, or variations of it are then used throughout the paper and magazine and give it a consistent personality. If you ever made an invite for a party or tried to create a newsletter and found the end results looked somehow amateurish, it was probably due to among many other things a lack of understanding of how to use a simple grid to line everything up. This is just a small taste of what grids help with.  

When you start to create software and developers discover grids they get excited as well. They see how everything should be spaced and aligned. And then something funny happens. The designers start to ask for changes that seem to outsiders to randomly break the grid. Just as it seemed those wishy washy designers had brought some rigour to their work they want to stop using it everywhere. So what is going on?

Once you have a real design using a grid system you start to see weird things happen. The grid tells you certain items are in perfect alignment and are correctly sized. But your eyes tell you they are not aligned and mis-sized. What is going on here?

A Necker Cube

A Necker Cube

It starts with the issue our eyes are not video cameras. Our eyes have some inbuilt assumptions about reality and then our brain does a huge amount of work to reinterpret these results which we perceive as the real world. This whole process is riddled with mistakes. If the human visual system was considered hardware and software we would say it is rather buggy. One of my favourite aspects of how poorly the eyes are engineered is that the optic nerve at the back of the eye means we have a large blind spot. Other aspects of the poor engineering of the eye are the wide range of ways it can be tricked in the form of optical illusions. An example is a Necker cube. Look at the cube above and stare at the red dot. The cube appears to flip so that the red dot is sometimes inside, and sometimes outside the cube.

The human visual system is not thoroughly understood to the point where science has  much to say about iOS icon designs, but we do know why it has all these engineering issues. Yes, our visual system was not engineered, it evolved. And although we have good reasons to believe it gives us a pretty good approximation of the real world, evolution does not lead to perfection. These kinds of issues mean you find yourself having to nudge items in a design by a few pixels so they end up looking like they are aligned, even though they are not actually following the grid perfectly. The same goes with the size and shapes we use for icons. A range of shapes may all fit perfectly inside a grid, but factors such as the shape and the colours may mean one shape looks smaller or heavier than another. I am sure there is a research program here and we could spend time trying to develop a range of rules. But I suspect that every shape might need its own rules. And then the background colour and icon colour would also have an effect. And pretty soon a very complex formula, if one exists as all, would be needed. It is here we have to rely on the eye of a talented and experienced designer. This does not exempt designers from giving some rational, but it does afford some patience and forgiveness on those who expect a very precise answer. This is why it can often help to have more than one design solution to a problem so at least people can compare one icon with anther.

Something that I deeply feel is an important part of this craft and often goes unrecognised, is the importance of standards. A big part of design is taking the knowledge of what has been found to work over what has been known to fail. Examples of this are avoid 'yes and no' dialogs and instead offer clear actions. So in design we prefer 'Delete Photo? <Delete> <Cancel>' over 'Are you sure you want to destroy all your photos? Maybe you don't? <Yes> <No>'. The same goes for graphic design and this is where some of the new iOS 7 icons are real head scratchers. It is totally legitimate to change the style of what an iOS icon should be. But some of these changes appear to go against what has been accepted as good graphic design in general. 

I stole this from http://mrgan.tumblr.com/post/53308781143/wrong

I stole this from http://mrgan.tumblr.com/post/53308781143/wrong

Session 221 - iOS User Interface Design from WWDC 2012 describes a great iOS icon as being 'Beautiful and Instantly Recognisable' as well as having a clear recognisable shape. Some of the new app icons, such as the App Store icon, have a shape that fills almost the entire space of the icon reducing how recognisable it is. This has been considered the mark of an amateur icon and to now suggest this standard is wrong is bound to provoke some serious discussion. Many people don't find apps based on the name under the icon. I bet we could arrange a test where by hacking a phone to make all the icons black rectangles, but still have their name underneath people would struggle like hell to find their apps. Similarly a shape with a decent amount of space around it is is both more visually appealing and faster to recognise. This is not an ambiguous statement, but an actual testable consequence.

I hope this was a small step to bring some clarity to why designers have issues with some of the icons in iOS 7 without resorting to 'its just my special opinion'.