Don’t fear complexity

“Simplicity is the ultimate sophistication.”

― Leonardo da Vinci

A very sensible thing to say Leonardo. Elegance and ease of use are often down to simplicity, not just in terms of design and aesthetics, but also features and functions. If an object has only a few features, it’s usually easier to understand and operate and is therefore perceived as sophisticated. This has become a truism: simplicity has become a contemporary design fetish.

As a model of simplicity of design a table chair is a good example. Possibly this nice Quaker number. Look at it – it’s beautiful. For me it seems to satisfy that famous Modernist principle: form follows function.

 

~

This chair is comfortable to sit on. It’s beautiful to look at as it’s unblemished by erroneous detail. It’s made with quality wood. I know this because I can see the raw material. If I could touch it I would be able to feel the grain of the wood.

I often hear this quote from ex-lifestyle salesman Steve Jobs: “Design is not how it looks but how it works” this chair works because it is comfortable to sit on. If this chair was uncomfortable I doubt it would be held in much regard. It would be a useless object, a bit like this useless cheese grater.

Useless cheesegrater by Jeremy Huchison

But surely this is a far too simple example for our complex, ever evolving digital world. A chair is an archetype. I have been sitting in chairs before I understood what a chair, or even the act of sitting, was. And they really only serve one major purpose; I don’t wish to stand, what shall I do? I shall sit. Simple.

But can – or should – we fetishise such simplicity when remembering our complex, ever evolving, digital world? Given more complex scenarios, do we require more complex solutions to govern how we interact with the world around us or should we always – as do Leonardo and Steve Jobs – fetishise the ‘simple’?

What got me thinking about our need for complexity was the upcoming demise of Google Reader, an RSS feed aggregator that has been part of my daily ritual for a number of years now. Its retirement prompted me to check out the raft of services that were popping up in my feeds, all excitedly selling themselves as the best alternative to Google Reader.

So I checked a few out – and got a little frustrated by the amount of compromise over control I would have to give up – many of the services were offering stripped down, overviews of my feeds (usually with a prominent and mysteriously curated selection I didn’t ask for) all so that they could offer a simpler product – simpler in its use, and simpler in it’s features and functionality: and this was exactly not what I was looking for – I wanted complexity. I wanted control. I wanted all the features Google Reader offered. This made me think a little on why I liked Google Reader so – I wanted the breadth of features Google Reader offered even though I didn’t use them all – I wanted options. I wanted features. I was used to Google Reader, it was like an old friend, a comfy tracksuit, my favourite mug to drink tea out of. It wasn’t perfect (what, or who is?) but I was used to its dense landing page, its no frills Windows-like setting and management areas – quite cumbersome at times, a little ugly, but lots of features, lots of control. The design is no way perfect, but once I had got used to it, it was my pal, my friend.

We expect a lot from the devices, websites and apps we use on a day to day basis. Much more than simply wanting to rest tired legs. My phone is no longer a phone, it has a multitude of uses. Think of the last time you had to learn a brand new operating system for a new mobile or computer – you had to learn how to use it. It might appear simple now, beautifully realised and a wonder of ease of use – but that didn’t happen instantly. There was a learning curve, however short.

So sometimes we need complexity to deal with complex tasks. And sometimes we actively desire complexity. UX/Design guru-type Don Norman uses a lovely example in his book ‘Living with Complexity’ of when we actively pursue a more complicated experience.

His example is the humble cup of coffee. I love coffee but try not to drink too much of the stuff, but I always have a mug after dragging myself out of bed. I don’t want to mess about in the morning – my coffee making priority is speed. I chuck some pre-ground coffee out of a packet into a cafetiere, pour over boiling water, wait a bit, pour into a mug. Add milk. Drink. Job done. I can set off to work riding my coffee buzz.

But there is another instance of coffee making, one which requires a lot more complexion for (basically) the same result. Here is Don Normans example of a complex way to make coffee:

 

“Put the water in the righthand container, the coffee in the left. Light the fire under the right-hand container and when the water boils, the resulting air pressure forces the water into the left-hand container, where the water mixes with the coffee. The left-hand side is now heavier than the right-hand side, which causes a cover to drop over the flame, allowing the right-hand side to cool, decreasing its pressure. The coffeemaker’s manual says this creates a vacuum on the right that sucks the coffee back into the container, straining the beans out as it makes its passage.”

 

The Balancing Siphon Coffee Maker by Royal Coffee Makers.

Now you could argue that this gives you a better cup of coffee – I would imagine you would certainly be more smug when drinking a cup – but is this complexity really needed? Or is this complexity all part of the experience, a cultural ritual?

I have hopefully illustrated that sometimes there can be a need or a desire for a complex experience, or, in digital terms, a complex interface. In other words, we should not fetishise simplicity above all else. We should not always run scared of complexity and assume that we can create a ‘one click’ solution to every problem.

Instead, as designers and user experience practitioners it should be our aim to tame complexity.

There is a wealth of writing and thinking around complexity and simplicity (there are links to a couple of books at the end of this post), but as a starting point, here are a couple of pointers that I have found useful when planning and designing interfaces.

Use compartmentalization – a very logical and obvious starting point, and a method that can be applied early in the planning stages of any project. Grouping features into logical ‘compartments’ is a way of defining focus – users can easily ignore whole ‘compartments’ of features if they can quickly deduce those features that are not needed for the task in hand. Design can really make a difference with compartmentalization with colour being a very useful tool in reinforcing the differentiation of feature sets.

If you are reading this at a desktop computer take a look at your keyboard. If it’s like mine, my numeral pad is separated into it’s own unit, and most of the time I ignore it unless I need it and when I do, I shift my focus. No colour difference involved or different styling, just grouping, compartmentalization. And as a user I did a little work – I shifted my focus from one area of my keyboard to another – not a huge ask at all and proof that you don’t always have to hide away features for users to maintain focus.

An easy solution to dealing with complexity is to hide features behind buttons or actions. This technique is often bandied about as a solution but I see it more as a last resort. Introducing an interaction to hide/show features down on the importance hierarchy when your feature list is huge I can agree with. Concealing features to maintain your minimal aesthetic is style over content. Only do it if all else fails.

Don’t fall for the white space aesthetic – beautiful, minimal design is appealing, it fulfills that ambiguous word ‘clean’ – minimal, simple layout designs look wonderful and I wouldn’t want to put people off striving for this aesthetic, but the temptation with minimal design is to hide functionality behind buttons and actions, or to remove features completely. Start with the worst case scenario, keep all your functionality visible – that is the complexity you need grapple with. Chasing an aesthetic trope before you have done any planning can give you a headache later on in the design process.

One last point. Get your noise to signal ratio right,  avoid superfluous graphical elements that serve as decoration only.

So there are various methods that can be put to good use in taming complexity and designing useful interfaces – and its worth remembering that sometimes we need users to put in a little effort too.

Going back to my Quaker chair. I could take this lovely chair, paint it hot pink and varnish it. I am sure it would look quite mad, and someone out there would think it just right for their post-modern brutalist-pop loft apartment in rejuvenated Hackney. I haven’t designed a new chair but ‘styled’ an existing design. “Don’t think too much of style.” said William Morris over 200 years ago. I agree, best to design the most comfortable chair we can, one without pointless decoration or detail. One that I can sit on for the 20 minutes I might be eating my tea without having to think about the act of sitting. As long as it fits in with the other clutter in my home I would be happy. Mine’s an Americano please. Splash of milk.

Living with Complexity by Don Norman is published by MIT Press and can be found at the MIT Press website. Another designer type who has written great words on the relationship between simplicity and complexity is John Maeda, and his book The Laws of Simplicity, (also published by MIT press) can also be found at the MIT Press website. Please take a look at the work of Jeremy Huchisons at his website. You can check out the amazing Balancing Siphon Coffee Maker at the Royal Coffee Makers website.

For those of you interested I am trying out http://www.feedly.com/ for my RSS feeds.

op 

Metaphors & skeuomorphs in touchscreen UI design

Skeuomorph:
(Greek: skeuos—vessel or tool, morphe—shape), is a derivative object that retains ornamental design cues to a structure that was necessary in the original. Skeuomorphs may be deliberately employed to make the new look comfortably old and familiar.

There is no question that Android interface design has caught up with Apple IOS in terms of delivering a premium user experience, and with the release of Android 4 (or Ice Cream Sandwich) it appears that two opposing philosophies are emerging in mobile UI design.

An interview at fastcodesign.com with Android UX Design Chief Matias Duarte makes interesting reading. Duarte’s design thinking seems to be opposite of Apple’s – while Apple go for a skeuomorphic design heavy on using metaphors, Duarte opts for the opposite. His rational (and I’m para-phrasing here, you can check out his interview here) is that people don’t care for real looking buttons or metaphors – they are a hang up of  a 30 year old computer interface design, and over-designed buttons with a 3D effect look great on their own but overwhelming when all put together. In his words: “…when you assemble the individual elements on a screen, each one becomes prominent on its own… Each is very pretty, but when you try to make a wall or a house out of them, all the embellishments fight with the larger building.”

In the fastcodesign.com interview with Duarte, references to Android’s new UI design being ‘like a magazine’ crop up rather a lot – although never directly attributed to Duarte as far as I can tell, the magazine as UI metaphor gets mentioned a few times – on the surface this seems at odds with his design thinking, as a magazine inspired layout, complete with turning pages, is of course… a metaphor. Magazines have been around a lot longer than computer interfaces, and can hardly be called a current and modern interaction model.

And then there is that problem of the ‘Pictures Under Glass’ technology, a phrase nicked from the very insightful Bret Victor. In this great blog post, Victor rants (his word) that “Pictures Under Glass is an interaction paradigm of permanent numbness.” – we can’t ‘feel’ the pages of a magazine through the interface of a touch screen device. Using ‘real’ objects as interactive elements within an interface helps a little with this problem – buttons under the glass of a touch screen will never be tactile, but they can have the appearance of being tactile, which can only help.

I am not a huge fan of using metaphors but I often find myself encouraging their use. I have found them useful for quickly communicating functionality – the one great advantage of using metaphors and skeuomorphic design is that you already know how something is going to work – if there is a dial, I know that I have to turn up or down. A toggle? I can toggle it. The big downside is that we tie ourselves to the limitations of the objects we are basing our metaphors on, we lose the chance to innovate or create new methods of interaction.

I would like to think that the average smart phone user is capable of learning new interactive conventions and can get by without the blatant signposting of metaphors, and that decent UI design can be accomplished with new interaction conventions; but to make sure a UI is understandable quickly, without instruction and by a broad demographic I will choose a metaphor. This piece of advice I have lifted from http://developer.android.com sums it up: “Real objects are more fun than buttons and menus: Allow people to directly touch and manipulate objects in your app. It reduces the cognitive effort needed to perform a task while making it more emotionally satisfying.”

Android 4 is promising a much more refined and improved user experience. As more people upgrade and as Android’s market penetration continues to grow it will be interesting to see how Apple reacts.

op

Related links:

  1. John Siracusa at arstechnica.com writing about Lion and Apple’s use of the Skeuomorph. (Part of a much larger article)
  2. Info on Android 4

Design process for mobile devices: Part 1

At Kerb, the digital agency I work for, we have been doing a lot of mobile work. Most recently we have been commissioned by a large multi-national entertainment brand to produce a multi-lingual ‘match 3’ type game that has to be ported across 33 Android devices and the iphone 4 and iphone 3Gs.

As there is currently no standardized methodology for designing across multiple mobile devices (an assumption based on our own research that was confirmed by various speakers at this years dConstruct conference) I thought I would post up some of our design processes.

This first post is about our initial reaction to the task of converting art and design assets for use on multiple mobile devices.

As is with many projects, time-lines were challenging and we had to get a working version on one particular Android device before we ported the game to the other devices – so we went ahead with the one Android version of the game before we went to work porting the game to other handsets.

The challenge for the design team is to take an existing game that has been designed for one particular handset and then make that design look intentional and considered across 33 other devices which all have different screen dimensions and resolutions.

Now, I must point out that I am not talking about amending the functionality of the game to fit with the functionality of different handsets – I am talking about the graphical aspects, the visual language, and in particular how the interface and art assets would scale to fit different aspect ratios. Our overall user experience, in terms of user interaction, is the same across all the devices.

This process is also particular to our game, other apps and games would not necessarily have the same process; our game is a visually rich experience with lots of animation and illustration all based on our clients IP. Visually simple games and apps would not need the same approach.

So, our initial challenge was to simplify the information we had about the different handsets, and then re-present this information to the design team. This information will help us create a clear strategy for amending our art and design assets with the least amount of impact on time and budget.

We simplified the mobile phone specifications with three simple steps.

1.
Firstly we grouped our device list into their respective screen dimensions. We did not worry about screen resolution at this point as we would deal with resolution as part of the export process (a process I will talk about in a later post).

This grouping helps simplify the list, we can quickly see that there are four different screen dimensions from a list of 33 devices – which means we have four different aspect ratios to consider.

2.
Our first comparison of screen sizes – by anchoring the different screens top left we can see the differences in the aspect ratios and how they will impact our design. We have rich illustrated backgrounds to our game levels – What will be the simplest way to amend our assets to fit these different aspect ratios? Can we keep a consistent grid?

3.
Our next comparison of screen sizes gives us the solution. By giving the four different aspect ratios the same fixed height and aligning the screens on a central vertical axis we can further simplify the amends we have to make – we can now see that the differences in the screens can be restricted to width, and the amends to the relationship of elements within the design (art assets and UI) can be restricted to the vertical edges of the device screen. We are now in a position to make decisions on whether to apply a fixed or a relative structure to our design.

By presenting the information in this way solutions arise, and complex looking tasks appear much simpler and far less daunting.

The next step in our process is the physical amending of the art and design assets and their export to sprite sheets and mobile-ready assets, which we do with both off-the-shelf software and bespoke components we write internally. I will write up these next steps in another post with the help of Kerb’s Technical Director, Pete Hobson.

…And for any Brighton/Sussex based developers, Pete is doing a talk at DotBrighton about developing for mobile on the 28th of September.

op

Illustration: Dials gauges and meters

While looking through work I produced for Kerb a couple of years ago I came across an e-learning project I worked on – Kerb were commissioned to produce a set of interactive screen based tools to educate drivers on efficient driving techniques. Below is a set of dials gauges and meters I produced which were used throughout the project.

I am usually a little disparaging about my own commercial work when I look back at it but I really like these illustrations. Minimal in the approach and execution with a simple colour palette. Nice.

op

Wordagon: A Kerb iphone app

I have not posted work from the agency I work for before on this blog, (Kerb – website due for a face-lift soon) but thought I would make an exception in the case of our iphone game Wordagon, mainly because it is a project we produced internally – it is not attached to a client, therefore not trying to ‘sell‘ anything – and it’s free.

The visual design was produced by Kerb designer Will Weaver. There are still a few tweaks to be made: some re-working of some of the interface elements, extra work laying out the instructions (and re-writing them too) and a little bit of colour correction. We are also going to implement a global high score table with the next Wordagon release – and we will possibly then start to charge for the app.

With absolutely no promotion apart from Kerb employees spreading the word, Wordagon has managed over 900 downloads with a user rating of 4+ (as of Febuary 2010).

Some screenshots:

From the itunes store description: (please excuse the excessive use of exclamation marks!)

Wordagon is a game of high pressure and mental agility. Battle against time and space… and by space, we mean words!

With each letter tile having a value, the bigger the word, the more points you score! The longer it takes it to find a word and submit it, the closer you get to falling foul of the onslaught of new letters taking their place.

Before you get trapped beneath an alphabet avalanche, you need to find words and remove them, but as you progress through the levels, the words you must come up with keep getting longer!

  • Key features:
  • Bonus tiles for letters
  • Bonus tiles for words
  • 5 levels of difficulty
  • Highscore table to allow you to challenge yourself or your friends

Get it for free from the itunes store here

op