Shop Talk

Skeuomorphic UI – Progressive design with legacy thinking

Garageband User Interface

Designers are currently designing for one of the most pivotal points in the webs history. Gone are the days of Geocities and Angelfire and we were happy with star field backgrounds, marching ants and blinking banners (shudder). Today we have learnt to pioneer an everyday legacy design theory that has evolved for millennia from other mediums whilst adapting to an ever-changing landscape of consuming digital content. Progression is a byword for modern design, but we mustn’t forget where we came from and none more especially than in the bi-polar world of digital design. The viewports are getting smaller and the web now goes wherever we are so expectation for what users experience has shifted organically. Responsive design (designing a website to be scalable for all viewports) is now no longer a buzzword but a standard methodology, and HTML5 is slowly eroding native web apps grasp on the mobile web (whether or not it will replace them is another conversation). Designing for these environments come with its own set of rules and web design has now grown into maturity, dragged kicking and screaming into working within these frameworks. It’s been a long time coming!

This transition has been achieved by simply taking the time to grow up, roughly two decades in web terms. A generation of designers has grown up with it too and web design is now taken seriously, but in no uncertain terms are we breaking new ground here we are just digitising the old one.

There is now a wave of criticism amongst the web design community that we are not innovating enough in this relatively juvenile industry and we should be taking steps not to just ‘re-skin’ the old ground but start terraforming a new one! Clive Thompson is one such critic and his article ‘Retro design is crippling innovation’  is the catalyst for this blog post and its provoked conflicting thoughts and ideas amongst the community. He laments technology giants Apple and Google for being the main culprits of using useless skeuomorphs that essentially hold back logic in their applications, one such example he presents is the Google calendar. He points out that if you are at the end of the month you are forced to look at the previous 3 weeks of the past, wasting space that could be used for future dates. When the next month ticks over the active day is at the top and as the month moves on the inactive days grow. Sound familiar? That’s because it has been designed to act in the same way as a physical calendar does.

iCal example

Example of ical using skeuomorphic design. Note the wood patterned header bar and the ring binder. Are they needed? No. Do they look good? Maybe

 

The Google calendar is an excellent example of a skeuomorph, and they are very much in vogue at the moment. Practically every facet of digital design currently has a skeuomorph designed in especially apps. But they are also everywhere in the real world too: wood-look dashboard in Dads car, rivets on your jeans, Roman style columns outside the porch door (looking at you Essex) and the fake wax drippings on your Nans lamp. They’re not needed but its designed to create an emotional response to the viewer, and your Nan likes it so what’s the problem?

But I dare say that design isn’t all about logic and reason, a vast and, some say, more meaningful partnership with design is emotion, and this is the sole nature of skeuomorphs: human emotional attachment with the physical object. This is something that is very hard to replace with a virtual one, so on that merit I believe skeuomorphs are here to stay.

Other examples include apps for tablets and smart phones such as Instapaper and Readability. These apps clean up web articles you wish to view later into a readable format creating a reading environment more suited to our eyes in a comfortable format. You might be using one now for reading this blog. They use a simple reading system that has been developed over centuries with the book: reading left to right with a single central, column, with paragraph breaks in the right places and using a large enough, legible, universal font. iBooks uses a similar system but goes one step further by introducing Skeuomorphs. It introduces a stylized red ribbon bookmark as a… well, bookmark. Your library of books is presented as a bookshelf. Going to the next page initiates a turning page animation. All are designed to look like the real thing.

iBooks library

iBooks library shelf

Turning a page in iBook

Turning a page in iBook

 

This form of ‘legacy design’ is thoroughly important for every day users who have generally been put off by technology in the past because of the naturally alien disposition of technology. These skeuomorphic devices are intentionally made to feel like the real thing making it user friendly for people who are used to centuries of consuming content in a certain way. So as a result, users who are used to flipping the page of calendar month by month for most of their interactive life will feel more comfortable viewing the complete month as a calendar would do so.

As people get used to technology encroaching into their everyday lives skeumorphs will pass out of fashion and will be thought of as a quaint trend rather than a serious method of engaging users. Maybe the paper look and feel of the calendar will move from device to nuance just like the rivets on your jeans.

Close up of rivets on jeans

Close up of rivets on jeans... completely useless.

Nathan Langley