Beauty VS Usability: Why the discussion about iOS looking ‘dated’ misses the point

Martin Charlier

The tech blogs were buzzing after the presentation of Microsoft Surface.

The new tablets have impressive hardware and the snap-on keyboard covers finally provide a sign of a more holistic product concept to me. By that I mean a concept that fits with the strategy of including the full ‘traditional’ windows desktop UI as an option on the tablet form factor. It’s a promising start and it will be interesting to see how the wider market responds.

However, there’s also been a number of discussions about the UI design approach of Windows 8 over that of iOS and Mac OS X and not all of them have been positive. One complaint I read a number of times is that aesthetically speaking, iOS is looking ‘dated’ and needs a refresh. Yet for me, this argument misses a fundamental point: in an interface for such devices, aesthetics are secondary after usability.

Whether the ‘leather’ looks dated or not, such elements of the UI fulfil purposes of conveying affordances, visual metaphors, structure or plain familiarity that make it intuitive, easy to understand, and non-threatening to use.

Does the ‘leather’ look dated to you? (Screenshot from iCal)

As a user of both the iPhone and Windows Phone, I’ve been able to test first hand the differences in the UI and being a designer, of course I’ve paid close attention to the fundamentals of this along the way! When it comes to the notion of beauty versus usability there are a few elements of the Windows UI that really stand out to me and I’ll be following Microsoft closely to observe how and if they are addressed.

1) What’s a button and what isn’t?

I appreciate that the approach of skeuomorphism isn’t necessary to make clear what is clickable and what isn’t, but on the Windows Phone I found that the approach of pure typography isn’t making it any easier either. I found it often took a while to understand what is a clickable piece of text and what isn’t. To me this is a clear disadvantage of the minimalistic styling of Metro.

People’s understanding of the world is physical – this is what makes Apple’s interfaces so simple to understand. Ideally, of course, technology like Tactus would physically alter the structure of a touch screen to make buttons tangible. But for the time being, I think visual mimicry is still a very good approach. With iOS6 Apple even shows that we haven’t reached the limit of this visual mimicry yet: The redesigned music app in iOS6 will have metal sliders that are changing their reflection based on the angle the device is held at, making them behave even more like a real metal button.

iOS 6 music app metal buttons changing their reflection based on the device angle.

2) Where is this app I’m looking for?

The utility of live tiles on the Windows Phone is more advanced than what Apple currently has to offer. Their visual treatment however meant I often found myself scanning my home screen from top to bottom to find what I was looking for. The issue: The monochromic styling makes everything look alike. On iOS, the colourful and detail-rich icons are like book covers that are remembered based on a certain colour or graphical feature. These features then make it really easy to spot what you’re looking for in a big collection of things.

Since not all apps seemed to follow the guidelines, there were tiles using their own accent colour or breaking out of the monochromic icons entirely. Arguably they ‘break’ the aesthetic – but they were of course the ones that stood out, were easy to spot and helped find other things based on their proximity to the rule-breaking tiles.

Of course another big cause of not finding apps on Windows Phone is the alphabetical list, but I want to stay focused on the aesthetic so won’t go into this.

3) What’s with all these font types and sizes?

Relying on typography makes for another disadvantage. While it looks beautiful when done well, it looks terrible when it doesn’t quite work or hold together. As a designer I’m probably overly sensitive to this, but I felt that the slick aesthetic turns into badly done graphic design when alignment, combination of typefaces, sizes and treatments was getting chaotic. The app where this was most problematic was of course the email client – looking at a formatted email with different font styles had a negative effect on the overall look and feel.

4) Nice transition, but what did it tell you?

While the animations and transitions used throughout the OS are beautiful, some of them turn into time-consuming irritation within a matter of days. I felt this especially on the ones that didn’t seem to add anything other than quirk.

Animation of shrinking window in Mac OS X telling the user what is going on.

This is a pity because animations can be used effectively to convey an interaction paradigm, and still be a little quirky. One of the classic examples is the way Mac OS shrinks and zooms a window that is being minimised into its place in the dock, making it clear what happened and where it went.

Final thoughts

Windows 8 Metro UI screenshot

Looking at the pictures of Windows 8, it seems that the guidelines are more open for individual colours and styling, which is great for two key reasons. For one, this openness provides developers with a playground to explore and express ideas, and on the other it has great positive effects on usability. It provides ‘hooks’ that allow users to make sense of a collection of stuff and navigate it on their own terms, even though it might look messy or illogical to outsiders.

Martin Charlier

More Stories from Fjord