Two years on the other side – from making stuff to sell stuff, to making stuff that just works

I’m not one to generalise, but let me do some generalising. My career in design has has been unplanned and random at best, and my life as a designer has been varied – there have been some common themes but the biggest shift was a couple of years ago when I joined Semantico, and the world of digital publishing.

Before Semantico I had a stint for a small agency that mostly made games with the purpose of selling stuff, and before that I had a longer stint at a strategic comms agency which made all sorts of different kinds of stuff with the purpose of selling stuff (Back then I was the creative lead for our publishing clients – Faber & Faber, Hachette Livre and Dorling Kindersley, one of the reasons I’m enjoying working with publishers again now). And before that I spent quite a few years freelancing at various advertising agencies large and small, making stuff with the purpose of selling stuff  (Mother London and Mccann Erickson being two of note). So that’s knocking on 17 years designing to push product, shift units or somehow facilitate ‘engagement’ (because engagement somehow means stuff will sell).

‘Clickthroughs’ used to be the currency, soon followed by the zeitgeist of ‘likes’ and ‘shares’ – that was the ROI, the bottom line, how work was judged (I will avoid mentioning ‘awareness’  - unquantifiable but seemingly keeping the internet in banners).

So what’s changed? I still work for a paymaster, a business with clients to satisfy, clients that need to make a profit, have ‘brand values’ to communicate, who want a return of investment, and who need to sell product, shift units. But there is a difference.

In the main, the differences are in the product’s lifecycle, its longevity or life expectancy. Often (but not always) in the world of advertising the work is campaign work, and those campaigns can be short sharp affairs, designed to burn brightly but quickly, just like Rutger Hauer in Blade Runner. The emphasis is on the message, the comms, the impact.

I've seen things you people wouldn't believe. Attack ships on fire off the shoulder of Orion. I watched c-beams glitter in the dark near the Tannhäuser Gate. All those moments will be lost in time, like tears in rain. Time to die.

Semantico make products that hang around for a while. They have to be robust. The product our users interact with isn’t just for a few three minute bursts but for hours and hours. They are not used for entertainment, distraction or sociality, but for work, for research and study.

And our clients don’t just sell stuff, they also have to do a ton of other stuff really well too. They need to add value around their content, find new relevant ways to get their content to new audiences. A student or researcher will use this product for years. A single purchase by one institution will serve a multitude of people. Not everyone has a bought the product they are using, or even directly paid for it.

In the world of advertising, knowing your demographic, your target audience is a huge part of the creative process. You need to speak the same language as your audience, communicate in the same way, resonate. Be their friend, part of the same pack, the same tribe.

Within publishing, understanding your audience is just as important, but there is a change of emphasis. I am now designing tools, and designing a service, for different wants and needs.

Full Circle

At Semantico we very user centric. Our whole design methodology and philosophy is based on user insight. So my design life has come a little circular in fashion – The agency where I learnt most of my game was, for the time, particularly user-centric. When I joined them in the early noughties it was standard process to produce wireframes and user journeys and use these as tools for insight and production. We actually had an information architect and producers who ‘got’ UX. And as I was reminded by my old strategy director the last time we hooked up in London, we often profiled archetypical users, and created stories and narratives around those archetypes – designed to get under our audiences skin and help us deliver effective solutions for our clients. We wanted to understand our users so we could offer them the aspirational experiences our clients expected us to deliver.

Now I have the need to understand our users so we can design a better service, better tools. User research is now a task absorbed into all our design activity and all our design choices are informed by real users and the user insight we gain from research.

I can’t say I miss working on stuff that just disappears into the internet abyss once a short term goal is reached (or not), but what I find most rewarding is that I am designing useful stuff – stuff to help people educate themselves, learn about new stuff and answer problems. And in the case of the online clinical procedures tool we launched earlier in the year, stuff that might help save lives too.

 

op

From the physical to the emotional: User experience research and design

In my previous posts on User Experience (UX) methodology I have touched on sketching, wireframing and prototyping. I would be remiss not to discuss the most important factor in any user-centric design approach: user research.

Since the emergence of Participatory Design in the 60s and 70s design thinking has moved on from the physical to encompass the emotional and behavioural. Designers today create a context for experience* and user experience is an expertise that provides a user-centric and data driven approach, needed when designing appropriate and effective products in today’s digitally fragmented world.

UX is no new speciality, rather it is an umbrella term for processes and methodologies that have had their genesis in other specialities for a number of years. Human-computer interaction, behavioural and cognitive psychology, usability and user centered design: all influences on what we call UX, and all methodologies that have a focus on the user.

Ignore users at your peril

I generally work with publishers, and I often encounter a quite complex user ecology. To make a generalisation we usually design for a specific task – research. But our user base is complex. Domain expertise varies between the undergraduate, the postgraduate, the academic and the professional. Differences in subject area throw up variations in behaviour, down to the favouring of a tatty notepad over using the latest digital tools. There is a vast difference between an undergraduate accessing textbook content through a desktop computer situated at their university library to an architect accessing building regulations whilst onsite, through a tablet on a 3G connection.

We have to understand this complexity of our user base. The differences and commonalities between user types, mental models, motivations and triggers – all areas that as designers and UX practitioners we need to fully comprehend before we can design the appropriate collateral that combined, make up the overall experience and impression of a product. This can only be achieved by talking and listening to our users and UX methodology gives us the tools to do just that.

Crafting experiences for online research

One of the most important factors in our approach to UX is that we are involved with a projects lifecycle from start to finish. We have an integrated and embedded approach – our front end development team encompasses developers, UX architects and designers – this integrated approach ensures UX is a consideration in every decision no matter at what point a project is at.

At the preliminary stage of any project our work is predominantly requirement gathering. We do a raft of exercises and workshops with client stakeholders designed to sanity check business requirements, aspirations and priorities, making sure a project brief is created that all parties involved believe to be feasible. We facilitate workshops around our clients data, the earliest stage of producing a sites taxonomy: the information architecture and interaction model. The output of these collaborative exercises and workshops are the beginnings of the documentation that make up the ‘blueprints’ of a particular project.

Following on from these early requirement-gathering workshops we move onto user research.

Once we identify the appropriate testing and research techniques we recruit a user group that we test on throughout the whole production process of a site build. At the beginning of a project we use our user group to create personas defining common user mental models and user tasks. The insight we gain from our user testing can point to the relevance of tools and features, and how those tools are used. What motivates our users to use our product, how social activity differs between user types and an idea of device usage. This research gives a shared view on the typical user(s) of a product, a view we can share with all stakeholders. When decisions are made, they can be made within the context of understanding users’ needs and motivations.

During a project build we use our user group for comparative testing and prototyping, giving us feedback and direction on our interface design. We also carry on this activity post launch, checking benchmarks have been met and making sure a product is being used as intended, and if not, why and how? It is important at this post-live launch to be especially active – feedback forms and surveys, a look at analytics and a further round of user testing all make sure that the solution we have provided performs as expected and intended.

The image below is a snapshot of a few desks at the studio where I work – everyone works on a Mac, but as individuals we have different roles, we use these machines for different tasks. We bring our idiosyncrasies into our working habits. Our personal life bleeds into our work environment. All these desks are different, but we all use the same tool.

If we speak the same language we could have different accents, different traditions and inclinations. Localisms change the cultural meaning of symbols and signifiers with a short hop across a border. This is what makes people interesting, the differences, the ability to surprise and be surprised. And this is why we cannot make assumptions about our users.

User Experience challenges

There are challenges in the adoption of UX methodologies. One such consideration is cost. Research and development in any field is not cheap, and with UX research it is no different. Time and resource defines the extent and scope of our research. Analytics alone, although cheap to obtain, can only take us so far. We believe in a lean methodology – we keep our UX overhead as low as we can get it, but when it comes to user insight we want to do as much as we can, and we firmly believe that any quantitative data needs to be paired with more in-depth qualitative data that could be more costly to obtain.

Combating bias can often be the hardest challenge to overcome. I mentioned the importance of keeping an open mind – this was no throwaway comment. We all have bias, a favoured interface, a way of interacting we are familiar with. A prefered aesthetic, a cultural association …  all these factors add bias. Overcoming them is a matter of self awareness and by having the experience of being surprised one too many times. We all have our prefered solutions and outcomes usually for seemingly rational reasons but seeing your own expectations confounded and discovering insights previously hidden from you is the best antidote to adhering a little too much to your own predilections.

Keeping it real

I have been undertaking some user research in conjunction with the University of Sussex. Initially we have been conducting in-depth interviews with a cross section of student and academics. This research will hopefully point to areas of interest which we can investigate more thoroughly. Andrea Fallas, our UXA, will be publishing some insight from our research activity with the University on the Semantico blog soon.

This post first appeared (with some slight edits) on the Semantico blog.

*Hummels, Djajadiningrat and Overbeeke (2001)

op

Future Book!

Thoughts on the creative possibilities of the future textbook

There is a slightly tatty paperback on my bookshelf. It doesn’t often get to see the light of day but in its time it’s hung around various design studios and has been passed around any number of creative types. It is the 1975 paperback edition of Josef Albers’ teaching tool The Interaction of Color.

Originally published in 1963 The Interaction of Color presented Albers’ theory that colour was governed by an “internal and deceptive logic”. Alongside the texts and commentary in the original edition Albers included 150 silkscreened plates intended for use in the classroom.

However, it’s my tatty 1975 paperback (with its small number of illustrations) that many would best know: a limiting format that doesn’t do the work any justice. The Interaction of Color was never meant to be read in such a limited, linear fashion, divorced from its rich illustrations. As such it is a perfect work to be given the interactive treatment – and in July this year Yale University Press launched the The Interaction of Color iPad app.

As a designer working in digital publishing this is an exciting project. The impact of digital on the industry is obviously huge, and projects like The Interaction of Color iPad app are significant pointers to the capabilities of the future textbook.

Albers’ exercises are all included in the app. Users can create, compare, save and share their own colour experiments. And of course functions that enable linking, annotating and bookmarking are all included – as is video. This is an addition that Albers could have never anticipated and it is to the app designers’ credit that this video content sits seamlessly alongside the texts and interactive studies. The ability to create studies is the most powerful tool in the app. Studies can be saved, commented on and shared. Colour pallets can be created and saved and used across studies.

The app does not pander to the book metaphor. There are no page curls or skeuomorphic page turning animations and so on. Unlike much of the digital publishing industry, it does not wholly align itself to the physical and metaphorical. It is the kind of design project that rises above the hackneyed ‘flat vs skeuomorphic’ debate. This app has great visual design – with enough affordance and signposting to understand the interactive model without relying too heavily on metaphors.

The Interaction of Color feels like an appropriately designed experience. It does not simply pander to current design trends and is a fantastic example of the level of design excellence that can be achieved at the intersection of hardware and software.

It is obvious tablet usage is growing as the technology gets cheaper. Tesco has just launched a £119 tablet with the questionable name of Hudl (‘the whole family can huddle around the Hudl’). Tablets and smartphones are becoming ubiquitous and integrated into our lives in a way unimaginable just 10 years ago. There is a mass of evidence pointing to the rise of tablet and mobile devices in the realm of education.

I was lucky enough to catch postgraduate medical student Joshua Harding talk at UKSG 2013 back in April. His presentation described his transformation into a paperless student.  He very succinctly summed up his issue with the printed textbook by showing a photo of the entire set of textbooks and ringbound notes from his first degree – a rather large pile.

His problem was obvious: how to quickly find information within that pile. So Joshua abandoned paper and went 100% digital. His iPad ‘study buddy’ was with him always, allowing him full access to all his texts wherever he might be. He could quickly find information through the search capabilities of his iPad. His notes and annotations were also made on his iPad – and could be linked and cross referenced with his textbook content.

Based on such experiences its easy to imagine the value of tablets in the classroom, and the opportunities digital brings to both instructors and students.

The networked device

There is a growing ‘standard’ feature set for digital texts. You can bookmark, highlight and annotate just like you could do with a paper textbook. But with digital you can also cite, track, organise, share, discuss and generally exploit the interconnectivities of the internet. No longer constrained by the linear format of the printed book, students can construct their own narratives individually and collectively and tailor the multitude of shared user generated narratives to their own needs.

The Kindle provides an excellent example of the usefulness of annotation tools within a networked environment. When a sentence gets highlighted everyone sees it – the more people that highlight the same sentence, the more affordance is given to the highlight that everyone sees. This functionality opens the door to user generated hierarchies just as link tracking helps generate user defined navigation.

To be able to align these sorts of social, utilitarian feature sets with the design consideration of texts such as The Interaction of Color and apply them to digital books that live online (and are therefore updatable, live, and delivered seamlessly across multiple devices) should be the utopian aim of today’s etextbook designers and developers.

In Future Shock (1970) Alvin Toffler argued that the accelerated rate of technological and social change caused people to be ‘Future Shocked’ or left in a state of “shattering stress and disorientation”.  It was hard not to think about Future Shock when I attended the recent AGI Open panel discussion on the current state of editorial design. There seemed to be a little bit of Future Shock in the eyes of the venerable members of the AGI when digital was discussed.

But they were reassured by strong evidence that print is not dead, or even dying. Hyphen Press and Unit Editions provided perfect examples of publishers producing small runs of beautifully crafted books for a niche audience. A smaller run means more care over design and construction and has a parallel with music formats. Vinyl had been long pronounced dead but a new audience has now embraced this (apparently) anachronistic format. Sales are up and so is the quality: todays pressings all seem to be of the 180g variety – reassuringly thick and heavy. A little like my huge Unit Editions Herb Lubalin book:

So the book is not dead. It has a little life yet. It’s possibly going to be more specialised, more  niche.

And with digital the opportunities and possibilities are there for all to see. The Interaction of Color app is an assured step into the future and hopefully a sign of things to come.

An edited (therefore probably less meandering) version of this post first appeared on the Semantico blog.

op

ios7 – a few thoughts on UI design

A small disclaimer. I am an Apple user, and have had an iphone for a number of years now. I get on with the current interface but do find it a little over decorated. With ios7 I was hoping for some toning down of the various visual embellishments. I was excited about the more minimal approach Apple were said to be taking: I was looking forward to the dumping of the leather effect, the stitching and the green felt …

as flat as I could make it

I am using a slightly buggy developer version for this review (7 Beta 2), I will not comment on the really flaky bits as I am sure these will be fixed once the final version is launched. There has been a lot of talk around the interaction detail and I don’t want to add to the noise, but with so much chat over the design – chat all based around the same static images – I wanted to experience the operating system myself, on a device in my hand, interact with it and hopefully offer up a few salient comments.

I guess its a little harsh reviewing the design of a product still in development, I will try to keep this to a critique of the general aesthetic – what it looks like and how it feels to use. it’s difficult to judge what is a know issue and is going to be ironed out, and what are deliberate choices by Apples UI team.

To start there is the obvious talking point – the turning anti-clockwise of the Skeuomorphic dial and the flipping on of the Flat switch (sorry). I feel this whole skeuomorphic vs flat debate is overcooked, a generalization and focusing debate away from more important matters. And as for skeuomorphism, this overused term is one I look forward to seeing the back of (I am guilty of adding to the skeuomorphic noise myself). None of Apples design has even been truly skeuomorphic (can anything digital be skeuomorphic?)  but I guess the word has a new life and a new context … in reality Apples OS has been heavy on the use of metaphors. These metaphors still exist in ios7 no matter how ‘flat’ the design. An example is the dials for setting time on the alarm. exactly the same as they were, a forward facing dial, receding on the top and bottom edges giving a 3D effect. So a metaphor then. Of a real dial. A stylistic change rather than a conceptual one and not exactly ‘flat’ at all.

So onto the ‘flat’ design. There are many instances where the minimal design really does look quite beautiful – the easily accessible settings screens look lovely, and the weather app certainly looks ‘nice’. The calculator, with its simple functionality, really benefits from the minimal aesthetic and the subtle ‘tapped’ animation on the buttons game me one of those nice ‘ahhhh’ moments.

The icons suit this minimal thin lined aesthetic but the thin Helvetica just doesn’t work for me (more on that later). With the weather app, a cloudy day means white thin Helvetica on white clouds renders the text unreadable – hopefully something that will be fixed on the final release.

… And talking of the Weather app, if I swipe down to reveal the overview panel, the weather is shown as a description. Without any visual clues I missed it … and tapping on the description takes me to the weather app – an interaction with absolutely no signposting – a slightly concerning issue.

The calendar, music player and Messages app are examples of how white space and pure typography doesn’t always work, especially for small screens with dense information. For all its cleanliness the reduction of structure makes it all look a little out of focus – with no clear delineation of content the elements on the screen feel a little lost. When looking through the messenger app I was hankering for a little decoration or colour (I never thought  would write this but … ) a little drop shadow to lift the design and separate out the content a little.

The use of colour seems a little haphazard. In places garish colours seem to clash (the horrific Game Center homescreen) within other apps (the music player, Messages app) the lack of colour and predominantly white and grey colorway contribute to the lack of structure evident on these screens.

To be frank, I am not getting along with the thin Helvetica. Retina displays mean the screen resolution can do a good job rendering thin typefaces but just because you can doesn’t mean you should.

I am not sure of the rationale for choosing this typeface – I am guessing that it was because connotations of slickness that Helvetica thin has are values Apple shares and aspires to, but unfortunately there are other connotations. Helvetica thin is the typeface of makeup counters, lipstick ads in fashion magazines, flyers for cheezy house clubnights … not all high flying fashion expensive watches and ‘aspiration’. My initial gut feeling was that it felt too much ‘fashion’, too ‘cheeze’.

I have seen the word ‘Holographic’ used for the subtle animated effect of the homescreen icons and background. again, this could be memory issues, but it was a little glitchy. It also felt a little Flash Parallax effect circa 2003 rather than 2013 cutting edge tech. Overall a little gimmicky. I felt the same about the number pad in the previous Beta version. Tapping a number makes made the numeral and its circular holder become transparent, briefly showing the parallaxing background behind. This should have been one of those lovely tactile moments you associate with a slick Apple Interface or transition but it just came across as a little, well, cheap. In the updated Beta version flat colour is used instead of the background – an improvement, but with a lovely ‘tapped’ animated effect in use for the calculator other conventions are really not needed – I hope these conventions are reduced and Apple go for one effect for each interaction.

There seems to be the addition of depth in the overall design strategy – the animated background that sometimes peeks through the layer above, all hint at navigating through, into, rather just from side to side – when transitioning in and out of apps, scale is part of the animation transition, again, hinting at navigating ‘through’  - this 3D aspect of the navigation is a possible clue for future development into interaction models and is the one genuinely exciting thing I get from i0s7.

In conclusion

The new minimal ‘flat’ (arghhhhhhhh) design almost works, most of the time it looks lovely. There is a slight lack of visual clues for interaction, rather worryingly so. For all the over-embellishment of the previous OS at least thought had gone into wayfaring and signposting. A little more thought needs to go into the design of the more dense screens but from what I have seen so far small tweaks will fix these, and I am confident the final release will have these issues solved.

The thin type just does not work. A bespoke face, designed for screen must surely be in the pipeline if Apple really are claiming to be leaders in mobile design. Culturally and practically, Helvetica Thin is just not suitable or appropriate.

The hints of navigating through a 3D space are intriguing even though it is just a hint, and it will be interesting to see if this ends up being just gimmick instead of a clue for future innovation.

I am looking forward to the final release, my main hope is that the interaction signposting and wayfaring is much clearer, I have confidence this will be so, and that at some future point they dump Helvetica Thin for a bespoke face designed by Apple for Apple devices. The Helvetica fanboys may not like it but it just ain’t right.

 

op

Wireframing: Why low fidelity rules

Wireframing is a fairly ubiquitous tool used as part of the UX process when building sites, apps and games – anything you would interact with through a screen. Generally used to convey what requirements and features are on each page or screen, and to communicate a rough understanding of layout, grouping and hierarchy, wireframing is a great tool for UX practitioners.

Wireframing

This post is not about whether wireframes are needed or not – sketching out a project in one form or another is never a bad thing even if your canvas of choice is the back of a fag packet … and semantics aside, I see ‘sketching’ as wireframing too; sketching out pages or features is simply wireframing in a very low fidelity manner. This post is my thoughts on why low fidelity wireframing can be a much more useful process than high fidelity wireframing.

I will try to outline my issues with high fidelity wireframes below:

They are costly to produce

Firstly they are time consuming (and therefore costly) to produce – time better spent prototyping and refining features rather than specifying and documenting them with detailed annotations and diagrams.

They can become scope

With full-on bells and whistles wireframing there is a risk that a wireframe document becomes a project scope – other documents should be fulfilling this task, using stories and scenarios is a sensible approach to defining functionality and scope and one that developers can produce and work to.

They can be intimidating

Very detailed annotated wireframes are often cumbersome, can be intimidating to those unused to working with wireframes, and are hard to decipher. They have a very ‘final’ feel to them when they need to be open to amendment and feel ‘live’ – wireframes should be ripped up regularly – the first iteration of your wireframes will never solve every problem, and will always highlight issues that will need fixing.

They are too prescriptive

Probably the most common issue most would have experience with is when wireframes are too ‘designed’. This leads to issues with your client having to separate Information Architecture from design. Again, hard to do if you are not used to working with these kind of documents. I have had very sensible UXDs tell me this ain’t so, clients know the difference. Well, sadly my own experience contradicts this – having once been parachuted halfway through the ‘discovery’ process of a site build, when visual designs were finally presented I had to explain why I wasn’t using the button styles as defined on the wireframes …

… and this leads me to another problem with high fidelity wireframes – the situation where non designers are designing. By choosing that option of beveled corner, that line thickness, design decisions are being made that will be hard to unpick later when a visual designer gets to start the design process. “… but I liked those buttons you had in the previous designs …”

High fidelity wireframes can also be very prescriptive for a designer, and take away the value a good visual designer brings – even for grouping and layout wireframes should not be too prescriptive and need to allow for interpretation – wireframes cannot show how typography, colour, tone, contrast and texture can can all impact upon the hierarchy of information on a page.

The UX community is its own worst enemy with this issue. The amount of high fidelity tools and GUI kits available to create prototypes, diagrams and wireframes is a little scary. Perfect for rapid prototyping but not so good when used for static wireframes.

I understand the temptation to make a wireframe look pretty, resist it. If you can’t resist it, then you’re probably a frustrated graphic designer rather than a UX designer. If you’re worrying how a client will get excited about a load of grey boxes, how you’re going to sell an idea based on a sketched wireframe – well, if you’re asking those kind of questions you just don’t get what wireframing is. You’re a salesman or marketeer and you need other tools.

Your clients need to be able to divorce features and layout from aesthetics – functionality needs to be understood, tested and refined without the influence of style. Coke, for example, are instantly identifiable due to their strong red colourway even though they are currently all about personalisation (buy one with your name on it!). These values inform your concept, your idea. There is no need to to colour your wireframes bright red.

So what makes low fidelity wireframes or sketching any better?

Low fidelity wireframes encourages collaboration

Anyone can draw. The simple physicality of paper and pens lends itself to a more open discussion. Rather than one sole UXD in front a computer screen, diagramming away in Omnigraffle or Axure, UXDs, UI designers, developers – all can have input when sketching around a table. The wireframe does not become a document with one author, to be checked and approved by others, but a collaborative piece of work which can have input from all relevant areas of your business.

Speedy speedy

Sketching and producing low fidelity wireframes is a fast exercise: you fail sooner, which is a very good thing – problems can be identified and solved much quicker. Deal with fail as soon as you can. Speed also means several layouts can quickly be reviewed, refined or discarded. Time less spent on wireframing means more time and budget can be spent prototyping, a much more valuable exercise than creating detailed static wireframes.

Focus

Low fidelity wireframes look just that – lo-fi. Even more so if sketched onto paper. This communicates that the wireframes really are just sketches and not design. By avoiding ‘design’ discussion can focus on features, hierarchy and layout rather than whether your button edges are rounded or not.

Gets your client involved

Around a table, participating in the production of your low fidelity sketches, can sit your client. And this is possibly the greatest advantage of low fidelity wireframes – you can involve client stakeholders from the start – and not in a political exercise, giving client involvement a bit of lip service, but as a way to gather vital opinions, thoughts and insight. Opinions that might pop up to rock the boat unless you can prise them out of your client and deal with them at the earliest possible stage.

So, to sum up – I am definitely a low fidelity fan, but I can see the case for more high fidelity wireframing; for when complex functionality needs defining but is not reliant on visual design. Lists and search results, e-comm functionality and pages based around forms, all examples where more fidelity could be needed. Even in those cases, any high fidelity wireframing is logically an evolution of low fidelity wireframing or sketching. However you look at wireframing, the sooner you are prototyping, seeing and experiencing interactions on a screen, the better.

The best way of knowing if and what wireframes are applicable? Talk to your client. Find out their expectations, where they need help, where they don’t. Don’t have a standard process for every job or client, as not every job or client is the same. Easy!

op

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