“TapSense: Enhancing Finger Interaction on Touch Surfaces” Paper

Reading a post celebrating the genius of Steve Jobs, I discovered the concept of skeuomorphism. Wikipedia defines it as

a derivative object which 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, such as copper cladding on zinc pennies or computer printed postage with circular town name and cancellation lines.

On interaction design blogs there is a debate about the use of skeuomorphism in interface design, most of the criticism are referred to latest Apple IOS apps.

Dmitry Fadeyev argues that the use of skeuomorphism in interface design hampers innovation

I especially dislike the latest set of interfaces from Apple for the iPad. They look great, but they cling to the physical look far too much, losing the opportunity to create a fresh look in the process.

iBooks user interface

James Higgs finds a dichotomy between Apple minimalistic product design and the expression of purest kitsch found on many apps interface.

[...] how difficult can it be for someone, even a relative digital newcomer, to understand a list of books? Difficult enough that the only possible way they could understand it is to present them in a “wooden” bookshelf format?

James Higgs questions the need of leather trim in Find My Friends app

It’s undeniable that the latest  IOS apps push too much on physical world resemblance.

I personally dislike this manneristic approach, I don’t find it neither beautiful nor useful  but I understand that Apple products are designed for a vast audience, iPhone and iPad are contributing in bringing on-line many digital illiterates. I believe for these users the use of skeuomorphism makes perfectly sense.

At the same time most of mobile apps are not used for mere productivity, they are considered tiny videogames to have fun with. From this point of view skeumorphic interfaces helps in setting the mood. For example if you use a music mixer on iPhone the real DJ consolle look and feel helps in setting the context. The same thing happens with iBooks, Reminders and many other apps. The same concept is gaining field on Mac computers with the introduction of the app store and other IOS elements.

UI Touch CDJ Pro

Of course there are a lot of people using IOS devices in a productive way, the App store have plenty of options for them, just check the straightforward interface of Photoshop Express or the minimalist approach of Stanza, my favourite book reader.

Stanza book reader

One of the latest trends in web design is responsive templating. Responsive layouts use the finest techniques to arrange page elements according to screen size. In this way a web page should perfectly fits any screen resolution from a mobile phone to HD TV displays.

I’ve seen some nice responsive layouts so far, for example Simon Collison web site looks simple and beautiful both on my laptop and my ipod. But I believe responsive layout is not an elegant solution for many web sites.

From September 2011 Boston Globe web site started using a responsive layout, it switches from 3 columns to 1 depending on the device. It’s the first example of broad audience web site using this technique. In my opinion the final result is not good at all. Regarding page design the web site looks poor, I usually like clean pages but the Globe looks to me as it is missing something (I don’t know how much the visual appearance was influenced by the responsive layout but I guess they had to sacrifice some details). The need to have the same information at different page widths means it is not optimized for any screen resolution. At 1280px the 3 columns do not seems well balanced, it looks too stuffed. On the contrary it renders nicely on small screens (Tested on ipod and on my 240×320px android phone) the horizontal space is well used but I find the page too long, there is too much information for a mobile home page.

From a usability point of view the idea of having different rendering with different devices do not helps in having a consistent user experience. It does not allow to use spatial memory to find an element you have previously seen in another device.  It is much better to display the full  layout even on smaller devices such as ipad in portrait mode and 7″ tablets. Both ios and android do a great job at rendering 1024px wide web pages.

I believe the best approach in designing a web site nowadays is adopting solutions relevant to the content. It can be a good idea to have a fluid layout for image galleries but does a newspaper really need all of users screen width? Fluid layouts works well on a limited  range (for ex. 980px to 1440px wide) they fit a wide range of devices, from 7″ tablets to 27″ screens (usually people with HD screens do not use their browser at fullscreen). Sometimes the 980px wide layout can be used even on mobile phones, the smart zoom allows smooth navigation and reading ability.

In most situations having a mobile version of the web site is ideal. Mobile version means mobile layout and a mobile information architecture. Think about the context in which mobile browsers are used. As many guidelines suggest having a “full version” link is a good practice, as I explained before, people usually rely on spatial memory to retrieve information.

To sum up, I don’t think responsive layouts are overall bad, they can be used successfully for simple page structures, for example one column designs and web sites with not much content. Responsive templates can also be fine for general purpose blog templates, usually people using them do not have enough tools or time to take care of screen resolution issues, they need a one-size-fits-all solution. Custom designed web sites, newspapers, magazines and content rich web sites better have 2 different web sites (standard and mobile).

At http://designmodo.com/responsive-design-examples/ you will find a rich gallery of responsive web sites.

Gamification is the use of game elements and aesthetics in non-games context.
The practice is gaining increasing success on Internet based services. Some of the most common examples of successfull gamification are Foursquare with its badges and Stack Overflow reputation system.

At the moment I’m reading Reality is Broken: Why Games Make Us Better and How They Can Change the World by Jane McGonigal, In the first pages I found an excessive enthusiasm on bringing the joy of videogames in so-boring real life. Going on reading I found many relevant examples and explanations of how videogames work at a psycological level, it’s a really interesting reading to better understand games, but I’m not sure if the behaviors explained by McGonigal can have a real impact outside game context.

For sure games mechanics have been used successfully in other context since long time. For example recruiters use role games to better understand candidate social skills, loyalty programs and points systems are used in retail marketing to stimulate consumers to buy.

Another interesting resource on the topic is the Google Tech talk Meaningful Play: Getting Gamification Right by Sebastian Deterding.

Deterding analyzes what UX designers and product managers can learn from games.
Some of the ideas expressed in the talk:
1. when designing a score system it is important to connect with users personal goals and community shared interests.
2. In games the story, even if basic, can be fundamental for the fun.
3. Goals have to be linked with learning and reaching goals have to be increasingly difficult.
4. Failure increases the pleasure of success.

Other resources about gamification
The Gamification on codinghorror.com
One of the founders of Stack Overflow explains where did they get the games-like ideas used on their Q&A engine.

What Web Designers Can Learn From Video Games on smashingmagazine.com
Anne Miles gives some examples of videogame interface elements that can be used in web design.