20three » Design

Metaphors & skeuomorphs in touchscreen UI design

Owen — Mon, 30 Jan 2012 15:21:06 +0000

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.

Design process for mobile devices: Part 1

Owen — Tue, 06 Sep 2011 18:46:55 +0000

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.

Designers Don’t Have Influences: Austin Howe

Owen — Fri, 26 Aug 2011 09:08:40 +0000

I had better start by owning up to not having read Designers Don’t Read by Howe – I had seen lots of press for it but never got round to picking up a copy. So I have come to his second book without reading the first, but Designers Don’t Have Influences (Amazon US|CA|UK|DE) is stand-alone and can be picked up without any prior knowledge of Howe or his writing.

Designers Don’t Have Influences is a collection of short essays on people that have influenced Howe throughout his successful career in advertising. Rather than write about people working directly in his field Howe writes about all sorts of people from various disciplines. He writes in the forward:

“My basic premise is that we can often learn more from people in other disciplines than we can from our own”

This really resonated with me. As a designer my own influences are often from beyond my profession and can be divorced from their context. Howe’s introduction had already got me excited about reading on.

“Disclaimer: this book is not an exhaustive compendium of every notable author or artist or inventor or entrepreneur. It’s really more of a random collection of individuals who have impacted me in some way – people I think most designers would probably appreciate knowing a little more about.”

There are no work samples in the book – Howe explains that Designers Don’t Have Influences follows in the “spirit and tradition of Norman Potter’s little gem, What is a designer: Things, Places, Messages” (a book I would also recommend, Potter is a great influence on me). Howe also explains that he wanted to dismiss the idea that designers don’t read – hence the title of his first book.

Each chapter in Designers Don’t Have Influences is a self contained essay. At the start of each chapter is the estimated time it will take to read it – I loved this element (one he uses in Designers Don’t Read), as I could pick up the book in my lunch time, waiting for a tube, sitting on Brighton beach, and flick to a chapter which I knew I would be able to read in the time I had. I felt I was carrying round a bunch of observations and ideas I could dip into rather than a book I would have to read from page one onwards. Each chapter has a little nugget of Howe thinking, seemingly designed to make you think a little, question a little and maybe re-evaluate your position and approach to your design work.

Some of the chapters are simply Howe’s observations of the experiences of working with others in and around his industry – the chapter on Bill Cahan gives a great insight into the processes of an innovative and successful design agency and those that run it. Many of Howe’s other subjects will be familiar to designers, the ubiquitous Ayn Rand gets a chapter, as do the Saatchis, Julian Schnabel, Josef Müller-Brockman and Damien Hirst, but it is the people I had never heard of that interested me the most – a great example is the chapter on François Allaire, a Canadian Hockey goalie coach. As a Yorkshireman who grew up with only a passing interest in football (my trips to Elland Road were on the whim of friends, I was never a committed football fan), there was no way I was going to have heard of a Canadian Hockey coach. Within this chapter Howe explains how Allaire re-invented goalie coaching from the ground up, and coached some of the most successful goalies in Hockey history. Howe writes about how Allaire can be an influence to someone working in the field of design:

“First of all he teaches us that it can be done, wherever and whenever it is actually attempted. That by questioning the conventions of how something has been done for years, we can find new ways of approaching it, simply by being aware, observant, ambitious.”

At the back of the book, once the essays are over, there’s a collection of doodle style portraits of the chapters subjects (along side a quote), credited to Aaron James. – my favourite is the starey scary disembodied Damien Hirst, but Maurice Saatchi’s portrait is worth a mention. I also liked the book design and typography credited to Fredrik Averin – a seemingly modernist design subverted with bold lines striking through the words, a treatment carried through from the cover to the chapters headings.

Maurice Saatchi

The best accolade I can give this book is that I already have bought his first book on the back of this one – and I will be keeping an eye on out for further publications and writing by Howe.

This review also features on The Designer’s Review of Books.

Now in Lemon: lo-fi art & illustration

Owen — Mon, 01 Aug 2011 18:33:03 +0000

Now In Lemon is a 40 page black and white zine produced by Dan Drakeford and myself. I won’t try to describe it, you can see it all here.

Available for the majestic price of £3.00 plus postage at the Now in Lemon website.

Now in Lemon was printed by those nice people at Footprint Workers co-operative.

Tankboys: Manifesto project 2010

Owen — Fri, 20 May 2011 15:26:08 +0000

Tankboys are an independent design studio based in Venice. I recently got hold of their book: Manifesto. Information about this project from their site:

To say that the end result is what counts is just not true. Especially in design. Rather, a good designer is more concerned with the process; that winding, potholed road he embarks upon every time he gets a new job.

“Manifesto.” is an ongoing project that leaves the final result to one side so as to focus on the creative process. It brings together under one roof the personal manifestos of some of today’s smartest and most renowned international designers.

Whilst some of these statements are very well known, others have been prepared exclusively for the project: some are programmatic pieces of writing, some are detailed work manuals, all are passionate tributes to graphic design, creativity and the design culture.

Reading these manifestos without the authors work shown alongside is an interesting set up as the reality of the finished product does not interfere with the readers interpretation of the words and ideas. Although I am aware of many of the designers work it was still novel to read the words and not see the work – the ideas on process and ‘design philosophy’ can then be taken at their face value and I can imagine more easily applying those ideas to my own work and design processes.

Going back about seven years, when 20three was a working studio, I toyed with the idea of writing a manifesto, or a statement of intent. It never materialized and looking back I think I was lacking the clarity of purpose that is needed to put such concise thoughts to paper. Reading these collected manifestos is inspiring and has given me the motivation to look again at seeing if I can sum up my own design philosophy in a short manifesto.

I wanted to re-produce a couple of the manifestos so readers of this blog get a taste of the book – there are a few I could have chosen but The cult of Done by Bre Pettis and Kio Stark is definitely one of my favorites, possibly as it made me smile the most.

The cult of Done Manifesto

01 There are three states of being. Not knowing, action and completion.

02 Accept that everything is a draft. It helps to get done.

03 There is no editing stage.

04 Pretending you know what you’re doing is almost the same as knowing what you are doing, so just accept that you know what you’re doing even if you don’t and do it.

05 Banish procrastination. If you wait more than a week to get an idea done, abandon it.

06 The point of being done is not to finish but to get other things done.

07 Once you’re done you can throw it away.

08 Laugh at perfection. It’s boring and keeps you from being done.

09 People without dirty hands are wrong. Doing something makes you right.

10 Failure counts as done. So do mistakes.

11 Destruction is a variant of done.

12 If you have an idea and publish it on the internet, that counts as a ghost of done.

13 Done is the engine of more.

Although the book is now sold out, you can read the manifesto’s here: http://www.manifestoproject.it

Screenprint: Black Madonna

Owen — Mon, 28 Mar 2011 15:27:27 +0000

One from the archives. Hand pulled screenprint using 13th century iconography, 14th century heraldic imagery and some random shapes. Printed at Brighton Independent Printmakers. This print is part of a limited run of 10, produced in 2007/8.

Illustration: Dials gauges and meters

Owen — Mon, 28 Mar 2011 09:01:15 +0000

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.

Sketchbook: 20three type

Owen — Mon, 21 Mar 2011 11:57:04 +0000

I did do some post production work on this scan from my sketchbook – I made the image grayscale then reversed the colours, making the image white on black. The letters were also generated on the computer then printed out, cut up and glued into my sketchbook.

The font I have thoroughly abused is Futura Book. Paul Renner is probably spinning in his grave, considering that legibility was a fundamental concern when he designed Futura, widly known as the first mass produced geometric sans-serif typeface.

Ah well, destroy your heroes and all that.

Spare Place :: mapping empty shops and pop up places

Fri, 28 Jan 2011 10:25:58 +0000

Open Sussex has teamed up with the Empty Shop Network to create a new web site called Spare Place

A map of spaces across the UK which can be used for temporary and pop-up projects: it includes empty shops, church halls, fields, shopping precincts and old offices. All spaces can be legally occupied by agreement with the owner.

It’s not a comprehensive map of every empty shop or derelict building across the UK. It’s a crowdsourced guide to interesting, unusual and underused places that are available and ready to go.

The site is currently in beta testing stage. We wanted to get it live because we wanted people to add their places, and see if the resource was used and adopted by people. From a development point of view both Open Sussex and the Empty Shop Network felt it was important to get the site live and people using it rather than spending months and months putting together a detailed specification only to find out no-one actually wanted to use it.

We hope that people will start adding their places. We hope that Spare Place will encourage people to add more interesting locations for people to use for art spaces, workshops, community resources, fun days and events. We also hope that it will encourage people to start to look at the spaces around them and see them in a different light, and start using them.

If you know of any interesting spare places , or know people who might be in the know then please spread the word.

No related posts.

Jun’ichirō Tanizaki: In Praise of Shadows (谷崎潤一郎: 陰翳礼讃)

Owen — Tue, 04 Jan 2011 15:45:49 +0000

In Praise of Shadows

I came across this slim book (which is more an extended essay) while looking into texts on aesthetics. I was particularly interested in books about the differences in perception. Not specifically from a design point of view but more general ideas on cultural differences in the perception of everyday objects, the spaces we occupy and how we interact with them.

I call this book an essay – I could easily call it a mild rant. A personal plea against homogeneity. In Praise of Shadows (Amazon UK US) concerns itself with the difference in attitudes regarding light, and how western influence has diluted the Japanese love of shadows.

Originally published in 1933 in Japanese, the English translation was published in 1977 and as the title hints at Jun’ichirō Tanizaki makes the claim that traditional Japanese objects such as lacquerware and the Japanese home itself have been made specifically for low light, or to be specific, the light produced as the day closes – for example the central living space in a traditional Japanese dwelling would always have a sand or neutral finish, all the best to subtly highlight an evenings fading light.

Why should this propensity to seek beauty in darkness be so strong only in Orientals? The West too has known a time when there was no electricity, gas, or petroleum, yest so far as I know the West has never been disposed to delight in shadows. Japanese ghosts have traditionally no feet; Western ghosts have feet, but are transparent. As even this trifle suggests, pitch darkness has always occupied our fantasies, while in the West even ghosts are clear as glass. This is true too of our household implements: we prefer colours compounded of darkness, they prefer the colours of sunlight. And of silverware and copperware: we love them for the burnish and patina, which they consider unclean, insanitary, and polish to a glittering brilliance. They paint their ceilings and walls in pale colours to drive out as many of the shadows as they can. We fill our gardens with dense plantings, they spread out a flat expanse of grass.

Tanizaki argues that the West is quite opposite to the Japanese: the West emphasize brightness and uniformity. Tanizaki believes that western culture associate brightness with cleanliness and hygiene. In modern western architecture light is a premium. Buildings are designed to be as bright as possible, no matter what the time of day. Shadows, dim corners, nooks and crannies are reduced. By contrast Japanese architecture regards light in a much more subtle fashion; light is seen as liquid and as having different properties depending on the time of day and season. Tanizaki believes that in Japanese culture shadows and low light are intrinsic to how their homes have evolved. Japanese homes filter and diffuse light through paper walls, letting it absorb onto neutral surfaces, reflecting the change in light throughout the day. This concept of varying light is not alien to western architects but Tanizaki’s bugbear is of western hegemony and to address this he needs to generalize.

An example of a Japanese interior he uses early in the book, and one that made me smile, is of the water closet. Tanizaki bemoans the loss of the traditional Japanese toilet – the western equivalent is made up of shiny metal faucets, highly reflective tiles or surfaces invariably white. The Japanese closet according to Tanizaki is a place of spiritual reflection:

“Every time I am shown to an old, dimly lit, and, I would add, impeccably clean toilet in a Nara or Kyoto temple, I am impressed with the singular virtues of Japanese architecture. The parlor may have its charms, but the Japanese toilet truly is a place of spiritual repose. It always stands apart from the main building, at the end of a corridor, in a grove fragrant with leaves and moss. No words can describe that sensation as one sits in the dim light, basking in the faint glow reflected from the shoji, lost in meditation or gazing out at the garden. The novelist Natsume Soseki counted his morning trips to the toilet a great pleasure, ‘a physiological delight’ he called it. And surely there could be no better place to savor this pleasure than a Japanese toilet where, surrounded by tranquil walls and finely grained wood, one looks out upon blue skies and green leaves.”

In Praise of Shadows jumps around from subject to subject with no apparent rhyme or reason – for such a slim book there is a fair amount of repetition, but this only adds to the character of the text, and the slightly chaotic feel seems to reflect the personal and singular attitude that Tanizaki takes with his subject matter.

The passage regarding skin colour was also quite revealing, discussing as it does the Japanese tradition of teeth blackening combined with green lipstick. Of course teeth blackening is not just a Japanese tradition and why this was seen as attractive or desirable in Japanese culture is never explained by Tanizaki. His explanation of why Japanese culture has such respect of the days changing light seems to be one of not surrendering to progress and the respect of tradition – I came away from this book thinking that Tanizaki had created a swansong to a disappearing culture – whether that is what he intended I can only presume, but the Japan he wistfully talks about probably does not now exist apart from in a few rural areas. I have never visited Japan, but I wonder what would Tanizaki think about my perception of the modern Japan, a perception gleaned from people I have met, movies, books, magazines, the internet and the TV: modern, technologically advanced, clean, bright – and neon.

So why would this book interest the designer? Maybe this book can serve as a reminder of how differently we view and use spaces and ‘things’ depending on our cultural background; that design decisions will always be fundamentally subjective no matter what the logic or rational that underpins them. Maybe it is a reminder to keep one eye on the passage of time and that ‘good’ design can be timeless.

This review also appears on The Designer’s Review of Books.