Dunkelweiss.net

Skeuomorphic User Interface Design: What is skeuomorphic user interface design?

By definition a skeuomorph is a derivative object that is designed in such a way as to retain the structure of the original object. As such skeuomorphs tend to feature purely decorative elements that are made to resemble the design or structure of elements that were essential in the original. They can be physical objects but they also have a major role in user interface design, which is getting more and more pronounced with the so-called “post-PC” devices such as the iPad. Apple is very much at the forefront of the Skeuomorphic user interface design approach having made QuickTime 4.0 resemble an actual consumer electronics product over a decade ago complete with a brushed metal look. A storied example from the time was the implementation of a dial to adjust volume just like on a Walkman, for example. This works well when holding a Walkman in the palm of your hand but looses practicality when using a mouse on a GUI. Another great example of skeuomorphic user interface design is with the virtual keyboard of the iPad which features bumps on the F and J keys. These bumps obviously can’t be felt when fingering an iPad so have no practical purpose.

The resurgence of skeuomorphic user interface design as a UI design paradigm owes a lot to the introduction of the iPhone. Native apps such as Notes and Voice recorder all sport skeuomorphic UI designs with the former resembling a notepad and the latter looking like a vintage microphone with an old-school volume dial rather than LED volume meters that are used in modern audio recording equipment. This skeuomorphic user interface design approach is proving to be particularly en vogue amongst audio applications. Jonas Eriksson’s 76 Synthesizer features knobs and audio cords that can be inserted into polished brass slots. Just a screenshot of the user interface design makes you want to start playing around with it and lets you know you’ll be manipulating sounds. Korg’s iMS-20 iPad application (a recreation of the (physical) MS-20 synthesizer) is the same but even includes a musical keyboard and modulation wheel. Admittedly the user interface design is busy and might be overwhelming for the average user but musicians who have used a similar synthesizer should be able to pick up the iPad app and create right away. The same can’t be said about traditional audio workstations where they would have to learn what and where their options are. The same can be said of the Djay app which looks like an actual mixing deck.

]]>

Skeuomorphic user interface designs work well with multi-touch interfaces of tablets which take advantage of our evolution as a species by working intuitively. On the desktop where the input devices are invariably the mouse (or trackpad of some kind) paired with a keyboard the situation becomes a bit more problematic. Previously I mentioned how a volume dial on a computer screen just simply doesn’t work as well as on a Walkman in the palm of your hand. The latest iteration of Mac OS X, Lion, features a couple controversial skeuomorphic user interface designs in the shape of the new iCal and Address Book applications. According to Kaishinlab there are 5 major things to look out for when creating skeuomorphic user interface designs:

Since skeuomorphic UI designs mimic real world objects users will be inclined to expect that they work accordingly. The new Address Book in Lion looks like an actual book but you can’t go through your contacts by turning pages. This discrepancy is bound to cause frustration. This is the UI design version of Tennis’ unforced error.
Filling a user interface design with more and more detail might make it more visually interesting but this all adds to the traffic or noise of a UI design. In the end it is just more user interface design elements crying out for attention. The faux stitching in iCal has no added value and even if it weren’t there users would not all of a sudden not realize that they are dealing with a calendar app!
Creating skeuomorphic user interface designs imposes limits due to the fact that you are trying to mimic a distinct look. The new Address Book does away with the practical three-pane user interface design for a new UI design that shows less information and is more cumbersome to use simply because the user interface design team at Apple thought their app would look cuter if it looked like an actual book.
This is tied to potential false affordance as users who are used to a standard way of operating a user interface design have to come to grips with alien interactions.

In other words skeuomorphic user interface design is a growing trend but UI designers need to make sure that aesthetics do not trump usability.

Source: ArticlesBase.com

Usability Terms Explained: Learnability and Its Significance for User Interface Design ? Part I

Usability testing of an interface design measures five basic factors. These are Learnability (how fast a user who has never seen a user interface design before learns to use it well enough to accomplish basic tasks); Efficiency (how fast a user can accomplish tasks after learning to use a user interface design); Memorability (After using a user interface design in the past, can users remember enough of the system to use it effectively or do they need to learn it all over again); Errors (how many errors do users make using an interface design, how severe are these errors, and how easily can users recover from them); and Subjective Satisfaction (how much does the user like using the interface design). In this article I shall focus on the learnability of an interface design.

According to the Usability First glossary learnability is a measure of the degree to which a user interface design can be learned quickly and effectively. Learning time is the typical measure. User interface designs are typically easier to learn when they are designed to be easy to use based on core psychological properties, and when they are familiar. Familiarity may come from the fact that an interface design follows standards or that the interface design follows a metaphor from peoples’ real world experience. The learnability of an interface design can be, in turn, further broken down into five similar but distinct components: the aforementioned Familiarity, Consistency, Generalizability, Predictability, and Simplicity.

]]>

When optimizing a user interface design for learnability, familiarity comes into play because users tend to expect certain things to happen. An example of this is the expectation of where to find an application’s menu such as File, Edit, View or Help. Users will expect to find those at the top of an application, usually in a particular order with corresponding sub-menu options. This setup will also have to correspond with the operating system in use. Windows users will expect to always find minimize, maximize and close window buttons on the top right of a software application’s interface design whereas Mac users will expect them on the top right with the traffic lights color codes. When engendering the familiarity of an interface design one has to keep in mind all users, resorting to the lowest common denominator. Usability testing with participants who are not developers or power users is key in uncovering any usability issues.

Beyond the expectation of familiarity in an interface design, extra attention needs to be paid to maintaining consistency. Although familiarity itself also calls for consistency, consistency must also be maintained within the different parts of a software application’s interface design. Your application has to react in the same way throughout. An example of this is with the login process. The login and sign up buttons should be consistently displayed throughout your website’s interface design i.e. if it is found on the top right corner then so should it remain throughout. Consistency becomes more of a challenge with applications that allow users to change skins or customize the interface design. A skin that requires users to relearn how to use an interface design is likely to turn off users.

Source: ArticlesBase.com