content top
The Need for Superhuman Interaction Design

The Need for Superhuman Interaction Design

Here I’d like to rant about something that’s been bothering me for a long time. Skeuomorphs and their contributions to friction-filled, annoying interfaces. This reduces the ability for people to feel like superhumans when they use an interface. If you already know what a skeuomorph is, skip down to “The Most Annoying Skeuomorphs”.

What is a Skeuomorph?

“an element of design or structure that serves little or no purpose in the artifact fashioned from the new material but was essential to the object made from the original material.

Basalla, George (1988). The Evolution of Technology. Cambridge, UK: Cambridge University Press. p. 107. ISBN 0-521-29681-1.

“a derivative object that retains ornamental design cues to a structure that was necessary in the original”.

The Compact Edition of the Oxford English Dictionary. Oxford University Press, 1971. Volume II, page 4064.

Skeuomorphs in the Wild

When done well, a skeuomorph helps a user to feel comfortable with an interface. Slight textures in digital interfaces help them to feel tactile. Good skeuomorph take cues from an analog world to help a user navigate a digital one. when done poorly, the skeuomorph forces the user to deal with an interface in an outdated way by blatantly ignoring the fact that the interaction is being done on a platform that is capable of handling new and improved interactions.

The Most Annoying Skeuomorphs

There is one place in particular where skeuomorphs aggravate me the most. This is the book reader or “page turn” skeuomorph. A book in real life takes some effort to hold, and some effort to flip a page. Many designers keep this effort around when they translate a book into a digital format. This results in the following annoying user interface experiences. Have you ever tried one of these badly designed pager turners out? When you try to flip the page, you have to physically press down on it and drag it over to the other side of the screen! And this is supposed to help people relax and enjoy reading on a digital device! Not if I have anything to do with it.

I first struggled with these annoying interfaces that blossomed during the 2000′s with the advent of quick Flash design. One or two people figured out how to program a page turner, released a tutorial and everyone was off to the races to copy it. The problem did not solve itself when the iPad came out. Instead, users saw and unfortunately experienced a increased bevy of ostentatious and distracting skeuomorphs. Things that made them feel bad while using a device.

Superhuman Interaction Design

Look at this interface for Flipboard. When you use it, you get an entire new page of content with the touch of a finger. Content pre-loads on either side in a visually pleasing way, taking a neurologically stressful set of RSS feeds and presenting them in a way in which the human has implied control over the data.

Flipboard presents a very important turning point in Skeuomorphic interaction design. It takes the best parts of the page turn, reduces them by half (the page pivots from the middle, not the side) and presents the reader with more information instantly. It is seamless. It is empowering. And because of that, it is relaxing.

People are excited to use Flipboard because it is not just a mentally joyful experience, but a physiologically joyful one as well. It is because of this that I consider Flipboard to be a part of what I’m calling “superhuman interaction design”. In order for an interface to be considered superhuman, it has to have the following characteristics:

  • Minimize visual skeuomorphic cues and reduce the interaction to action ratio. Flipboard reduces the page curl to a centralized pivot, and allows a page to be turned with the touch of a finger.
  • Make the user feel physiologically empowered. Present information in a way that makes the user feel more powerful than the information, not overwhelmed.
  • Make the user feel exhilarated when using the interface, as if they had suddently turned into a superhuman and they are able to do this because you’ve made them an excellent interface that empowers them instead of frightens them and makes them run away from data.

Other Superhuman Interfaces

Do you know of any other superhuman interfaces? I really like Skitch for its ability to quickly capture and store information, as well as it’s slick flipping interface. Least stressful tool on my machine.

JumpCut allows one to store up to 50 clipboard objects and access them with a tiny set of keyboard shortcuts. The interface is invisible until one needs it. It makes me feel like my short term memory is suddenly 50 memories long, instead of just 4 or 5.

9 Responses to “The Need for Superhuman Interaction Design”

  1. Chris Swetenham says:

    Loved the idea of making the user feel more powerful than the information; it perfectly describes what I think is missing in many interfaces.

    A quick correction – the link for “Skitch” points to the JumpCut url.

  2. Another example is dials, most often seen in music apps. Many music apps try to emulate the physical hardware synthesizers that have real dials on them. These infuriate me since it is extremely difficult to “spin” a dial with a mouse, when all you can do is wave your mouse in front of it. It’s a classic example of a skeuomorph gone wrong.

    Here is an example from Reason of trying to emulate a physical interface, which ends up being difficult to use:

    Reason – synth view

    On the other hand, Reason also has this interface, which shows you data in a way a physical interface could not, and so is a great example of taking advantage of the new digital medium.

    Reason – sheet music view

    • Amber, I agree with most of the things you say in this post…

      Aaron, I have always been annoyed by the dials on music software too… Although I found this interesting Skeuo/non-Skeuo hybrid dial on the RD3 (a cool little groovebox app for Android) which incorporates a bit of both worlds…

      (In the vid, the guy starts using the dials at around 0:46)

      Amber, I promise not a bot making an RD3 sales pitch, just thought it was a pretty neat example of a hybrid skeuomorph!

      • caseorganic says:

        Thanks for the comment and example, Zubin! I don’t think I’ve noticed that hybrid form before! Thanks for showing it to me!

    • Toffanin says:

      The usage of emulated dials is a curse also on almost every control software used with SCADA systems; not only the dials are unrealistic but spinning them with the mouse leads soften to a lot o human errors and mistakes, which is something a SCADA system is supposed to avoid (it isn’t fantastic? :D ).

      p.s.: Amber, I really enjoyed your speech of today at Frontiers of Interaction 2011; thank you for partecipating.

  3. caseorganic says:

    Thanks for the examples, Aaron! I especially like that they’re from the same software. Great find!

  4. Seth Falcon says:

    Enjoyed reading and really agree with the friction introduced by bad skeuomorphs such as page turn effect/interaction.

    I’m surprised you highlighted skitch as a good example. I love what skitch does, and am a regular user, but find the visual effects it performs when coming to focus and going away egregious, time wasting, and confusing. Worse, have you tried to use the history feature? The screen flips around and should you a view that is too small to see any real detail. In order to see detail, you click and the whole screen pivots again in a slow 3-d rotation. Usability nightmare.

  5. caseorganic says:

    Thanks for the comment, Seth! I agree that the history feature on Skitch is a little lacking. LittleSnapper is a tool that does a much better job of screencap history and allows one to annotate, tag and upload in a batch to Flickr.

    As I tend to only upload one photo at a time to Flickr through Skitch, I tend to never look at the history. It is quite painful.

    When I did a lot more bulk uploading, I used LittleSnapper. Do you have another screencap tool you like better than Skitch?

Leave a Reply