Skeuomorphism in e-Learning

I have a confession to make.  I’m having a little bit (okay, a lot) of difficulty with embracing flat design.  I’ve tried, and I know it’s supposed to be the latest and greatest, but I just don’t get excited by this.

So, when the Articulate e-Learning Heroes challenge of the week #124 was posted challenging participants to “share an example of skeuomorphic design in e-learning”, I was pretty happy!

The goal this week was to show how real-world items and environments can be used in e-learning.  In preparation for this challenge I’ve done some research on skeuomorphism vs flat design and discovered that there seems to be quite a bit of confusion out there.

Some are saying that “proper” skeumorphic design brings real world visual familiarity to help people navigate the digital world.  In other words, if the design feature is decorative (as in excessive textures and structures), not functional, then it’s not true skeuomorphism.  I believe this is open to individual interpretation and like all design, is very subjective.  In my mind, if using texture adds visual realism to the object, then I would consider this skeuomorphism.

In all my research, the explanation I found most useful is this one by Edward Sanchez:

 [Skeuomorphism is] when an application tries to mimic its real-life counterpart – it’s an object (or interface) that retains ornamental design cues to a structure that was necessary in the original but is no longer necessary.

He goes on to state that skeumorphic functionalities such as buttons, shadows, ridges and toggles make it easier for us to understand how to interact with a 2D interface and therefore serve an important purpose, and quotes Tom Hobbs who states:

There is validity to a skeuomorphic approach.  To create any good interface, it is essential for the designer to understand the cognitive models that a user brings to any new product.

Tom also goes on to explain that when designing an interface, the relationship to the design of the physical product is just as relevant as the relationship to the elements of graphic design, and that with the evolving challenges surrounding designing interfaces and influences of film, animation and title design, it is naive to dismiss digitally recreating real-world materials in UI design.

Additionally, I’m delighted to have discovered another term:

Skeuominimalism (aka almost-flat design) – flat design with elements of skeuomorphic design.

The focus here is on colours and shapes (used to add dimension) and typography.  Subtle drop-shadows are OK – they can create dimension in a design without being over-the-top.

So, my takeaway from the research I did on skeuomorphism is that my preference for other than flat design is probably based on the fact that I find skeuomorphism inspires emotive qualities that make the interface more attractive to use – simple!

The recommendation for designers from Sven Lenaerts is twofold:

Pick a style you enjoy and design it the best you can.

Practice as many design styles as possible.  Rather than a conflict between different styles, we should embrace their differences and make it a choice which strengthens your application.

The Design


My approach for this challenge was to take the role of instructional designer and not developer and I’ve produced a video with screen overviews and a narrated explanation of the interactive elements and navigation for the design.  My thought process behind the design was that I wanted to simulate the stages of cooking in a show not unlike “MasterChef”.  So I’ve mostly spent time thinking about how to engage a user visually by relating the objects on the screen to real life.

As with all instructional design, this is an iterative process and once development starts there will no doubt be modifications and additions to this first iteration.  Needless to say, the development of this design will be a future work in progress!

I’m hoping this design does justice to the skeuomorphic definition as it could be applied to designing for e-Learning.

Lastly, as I usually do, I started a Pinterest board on Skeuomorphism to gather together some resources – hopefully it might be of interest to someone else!

One thought on “Skeuomorphism in e-Learning

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s