Skeuominimalism: Ending the Debate?

Edward Sanchez has written an article to end the debate between flat design vs skeuomorphism.

It makes a lot of sense.

He notes the undeniably advantage of skeuomorphism – “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”.

Drawing cues from Donald A. Norman’s “Design of Everyday Things”, Edward notes that it is important for designers to consider the common affordances that we humans are familiar with – “switches” that are meant to be flipped, “buttons” that are meant to be pressed.

In contrast, flat design can be visually stunning at a low development cost. Typography and layout do most of the heavy lifting, loading times decrease and responsive design becomes much easier. Yet, flat design carried out too far affects the usability of design.

Edward suggests the merger of these two design trends – taking the inherent usability of skeuomorphism and slapping on a minimalistic design. He calls it skeuominimalism.

“Skeuominimalistic design is simplified up to the point where simplification does not affect usability. And its skeuomorphic affordances are maximised up to the point where it does not affect the simple beauty of minimalism.”

Indeed – i mentioned the idea of using abstracted versions of these affordances in order to fit into the flat design trend in my earlier post here.

Let’s not go all crazy with new design trends and forget that we are design for humans eh?

 

Infographic of Flat Design vs Skeuomorphism

What Happened to Skeuomorphism?

The debate between skeuomorphism vs flat design is always somewhat associated with the battle between Apple vs Microsoft, with Apple embracing the former for the initial iterations of iOS interfaces and Microsoft adopting the latter for Win 8 designs.

And with iOS7 going flat, it seemed as though Apple had raised the white flag on skeuomorphism.

But what actually is skeuomorphism? And what were its flaws?

This article gives us some really interesting clues on this. I’m not going to spend much time discussing flat design here since it’s pretty much the flavour of the moment in design worlds now, but rather, let’s understand skeuomorphism.

Skeuomorphism, in essence, describes the way designs borrow a particular feature of the past, even when the functional need of it is gone.

Case in point, the ‘clicking’ sound of cameras used to originate from actual mechanism – yet phone cameras have appropriated this sound in their own iterations.

Likewise, switches can be flicked up or down – and certain toggle buttons on interfaces cater for this as well.

The interesting point to note here is that skeuomorphism in its purest sense is different from the design trend we commonly ascribe to Apple’s earlier iterations of iOS, which should be more accurately described as a combination of skeuomorphism and visual realism.

Taking the calculator app as an example, skeuomorphism influences the placement of the buttons as referencing the traditional calculator, whereas visual realism skins the buttons in a way that gives the buttons dimensionality.

The article mentions that of course, these two design elements usually go hand in hand — skeuomorphic designs tend to look realistic (to make the connection with the original object clear), and realistic designs tend to be skeuomorphic (otherwise the realism would look out of place). It also notes that whilst realism only contends with superficial skinning and textures, skeuomorphism influences design at a deeper, more functional level. 

Now, we can’t discuss the decline of skeuomorphic and realistic designs without talking about what replaced it – flat and minimalistic design. Flat design counters visual realism by removing the shadows, highlights, gradients and textures, in essence, removing what made things “real”. But in doing so, it unfortunately also removed the skeuomorphic element of the designs – buttons could be confused as banners and the like. The resultant design is clean and professional looking, but an overuse of flat design could seriously thwart the usability of interfaces.

So what were the problems of skeuomorphic designs?

1. (the silly reason) Realistic designs rendering leather-y and wooden textures lost their appeal with people – it quickly became kitsch. Such rendering also faced issues with the advent of responsive design – resizing and shape-shifting made it difficult for fixed-size assets (used to skin the textures) to be used. 

2. (the more sensible reason) Skeuomorphic design needs to inherit all design elements of its predecessors in order to make sense. This led to two issues:

a. When not all the elements could be implemented, the realism illusion breaks and people are left even more confused or unsatisfied. Consider an app rendered in the form of a book but could not allow virtual pages to be flipped. =(

b. Inheriting all design elements meant inheriting the good AND bad and previous constraints associated with the previous design. The iOS calculator only allowed a single line display of characters even though functionally it could possibly calculate more.

—

So the hey-days of skeuomorphic and realistic designs seem to be over. But nowadays designers can fall into the trap of making designs so flat they lose all usability cues. Which is kind of a step back. I’ve always disagreed with Win 8 apps in particular because you never know what to press.

I think successful design in the flat-design era is one that abstracts realistic/skeuomorphic gestures whilst adhering to the flat/minimalist visual aesthetic. I suppose that is what the article cites of skeuominimalist. One good example i think is how articles now can be swiped from right to left to move forward, and left to right to move backward – abstracting the flipping of pages from books. I think this abstraction frees skeuomorphism from the gaudy realistic textures and also from inheriting unnecessary “baggage” from previous poor designs.

Golden Rules of User Interface Design

Is there really such a thing? This article notes down Ben Shneiderman’s eight golden rules of interface design from his book “Designing the User Interface: Strategies for Effective Human-Computer Interaction”. Note to self: go speed-read this book. 

Anyways, let’s see the golden rules and some of my comments:

1. Strive for consistency. Consistency quickly familiarises a new user to a particular interface by allowing quick transferral of knowledge. This also gives users a greater sense of control (tied to point 7)

2. Enable frequent users to use shortcuts. Hmm.. not too sure about this point. I think the base-line design of an interface ought to be both graspable and usable by a newbie and not frustrating to a frequent user (i.e. having excessive prompts and orientation screens). I tend to believe there shouldn’t be a need for frequent users to need to customise their own hotkeys or hidden prompts if the base design is simple enough and intuitive enough. [But then again maybe this applies to interfaces that are fundamentally more simple. I can see how this would apply to toolkits with an extensive range of functionalities (eg. Photoshop)].

3. Offer informative feedback. So important! Let people know whether a button they have pressed has actually been pressed. I love it when the feedback has a certain level of real-life relevance – my favourite example is Apple’s wrong password “shudder”.

4. Design dialogue to yield closure. Hmm.. don’t really understand this. Any help?

5. Offer simple error handling. Because no one likes to see some weird jumble of numbers corresponding to a particular type of error.

6. Permit easy reversal of actions. A user will only be confident to explore an interface if he knows that he can reverse his actions easily. Such confidence can come in the form of toggle buttons, back buttons, clear navigation breadcrumbs and so on..

7. Support internal locus of control. Users feel more engaged and involved when they feel like they are in control of whatever “world” the interface allows them to explore. Users should feel like they are the initiators of actions and events.

8. Reduce short term memory load. Our short term memory sucks. Max 5 – 7 distinct items at one time before we feel overwhelmed.

Yawnz.. somehow ‘golden rules’ never appealed to me. I guess these rules can form the basis of interface development, but it definitely cannot substitute actual user testing. Never assume..

What exactly is AB Testing?

Oh man.. I’m still quite the neophyte when it comes to web/mobile development – there’s still much I need to learn in terms of methodology and tools.

That being said, I kinda wish user experience jargon could be a little more intuitive. haha.. eat your own medicine eh?

AB testing is (simply put) a simple science experiment used to make a decision between two choices.

There’s a control – A

There’s an alternative – B

Ideally, A and B should only differ on ONE variable (the variable you are interested in – this could be placement of a particular button or so on) Common sense dictates that including too many variables in one test just muddles the end results, though i suspect the lack of time and resources just makes people do a short cut.

We choose a test group (of statistical significance) and randomly allocate the subjects into either the control condition or the alternative condition and check for resulting conversion rates.

Conversion rates essentially refers to the number of subjects whom are sufficiently “convinced” in the particular condition to become a “follower”. In more web development/marketing specific terms, it just refers to first time visitors who decide to buy something or follow something.

That’s AB testing in a nutshell. Useful tool for development, but I can imagine the amount of effort required. Am not too sure on a few points though –

1. Seems like AB testing is used when there’s an existing product/interface and one wants to make changes and see if the changes has a positive effect on conversion rates.

Does it make sense to do it on a brand new project — to offer two alternatives and potentially double the development effort?

Or is it used in a incremental manner – compare updated development version with earlier version to see if change is well received. If not, ditch the change and move on to a different feature.

2. In a development phase, how do we get a steady stream of first time visitors? Or do we just have a pool of testers and re-use the testers? (the mere hypothesis would argue against this)

Read more about AB testing here.

Yay or Nay: Infinite Scrolling for Shopping Sites

Infinite scrolling essentially allows a user to scroll endlessly (until there is no more data to fetch) through chunked data. It is usually implemented for comments, blog posts, product listings and other “chunk able data”.

Such an implementation requires the pre-fetching of content from a subsequent page and adding it to the user’s current page.

Seems like a yay for most things — i mean who wouldn’t like to click less next/more result buttons?

But the implementation at Etsy seemed to say otherwise. Read the article here, which discusses plausible reasons including

(1)  Some users, when returning to the search page after backing up from a product page, would find that they had lost their place in the infinite search stream (probably the biggest problem with infinite scroll implementations). Hence, it seems like without typical pagination, users typical navigational patterns when thrown askew.

[It then delves into an interesting issue of Etsy assuming a typical power-user behaviour (of open new tabs more each new product search) as the default behaviour.. but that’s another topic for discussion in the future.]

(2) Was it psychological? Perhaps users simply did not want to feel like they were facing with an overwhelming number of choices. There was perhaps an illusion of limited choice with pagination, where perhaps the additional action of clicking the next button acted as a psychological breakpoint in limiting a user’s possible choices. With infinite scrolling, this psychological breakpoint disappeared and users ended up being fatigued by the choices.

It’s so interesting that such psychological reasons can have such a great impact. But what the Etsy experience tells us is this – there is value is quick, dirty and modular testing — user interactions are becoming such a nuanced feel that any change or addition could have unexpected and undesirable consequences.

Don’t assume just because infinite scrolling happens to be the next big design trend that it is the next feature one should pursue.

Usability Woes

had an experience today at the mall that really reminded me how important usability is.

a lady was at the hardware shop frantically asking around for help on how to use her samsung phone. she was trying to figure out why her input method had switched to a symbol/number keyboard and was trying to switch it back to the QWERTY keyboard.

seeing a young looking dude (me), she prods me and asks for help after exhausting her options with the cashier and assistant at the hardware store.

and so, presented with the  phone and the different buttons, i got hit by a usability nightmare. on first glance, none of the buttons instantly seemed to hint toward a change of keyboard. after fiddling with plausible buttons (“1/2” button gave me the next keyboard of symbols, the “T” button gave some symbol selection, and the “V” button closed the keyboard)  for a while, i still drew a blank. so that’s two strikes.

my dad, a seasoned samsung user suggested going to settings to see if something needed to be toggled, which to me completely didn’t make sense since such a toggle function probably required heavy usage.

i tried long pressing, double pressing. nope.

apologetically, i returned the phone to the hapless woman, to which she commented “oh no.. i always get this problem. i’m just not smart enough for a smart phone”

le sigh. i felt like telling her it was the fault of the UX designer at samsung. and truthfully it is. things are ultimately meant to be usable for the average customer. any such complaints just speaks of poor design. yet another reason why i refuse to switch from apple to samsung.

but i realised the way i tinkered with the phone also shows how we humans normally react to a novel situation of usage.

(1) Look for intuitive clues. Things that close ought to have a “x” button, things that can drag out have a handle in the desired pull-out direction etc..

(2) If intuition fails, fiddle around with plausible options. The trial and error should not heavily penalise the user, i.e. it should be easy to return to the same screen, reverse the effects of the button press (hopefully by pressing the same button)

(3) Indications – if a button is pressed, show it so. If the keyboard is in some mode, show it! Indicators also work well as toggle buttons.

(4) If all else fails, and USERS shouldn’t get to this step.. they go to settings and hope for the best. But really, settings should be used for one-time off functionalities and changing of settings.

Usability is so important. honestly. samsung has so many functionalities and capabilities ahead of apple. but i refuse to change, just because using it frustrates me and i refuse to go on that learning curve.

What Makes a Great Infographic

HBR released an article “What Makes the Best Infographics so Convincing?” by Andrea Ovans. It makes a very good read and does identify some important points.

1. Have good background content

The article quotes Gareth Cook saying that the most compelling infographics mine relationships among overlooked variables to tell you something unexpected and get you thinking. In order words, you’ve got to have a good story before you can work out some good illustration of the story.

2. Cut away the clutter. 

Learning from the negative, Cook comments that the least effect info graphics overwhelm us with data and confuse us. He lists the example of nutrition labels (well.. i don’t know whether you consider them as infographics). The much improved example comes from Better Food Label, which has redesigned nutrition labels and has cut the clutter into 3 main dimensions – nutrition, foodness and welfare, and then uses a colour scheme to give the consumer and instant visual grading. I particularly like the “foodness” dimension (how much of the food resembles its original form) consider how everyone is concerned about avoiding processed food and eating clean nowadays.

 A redesigned and more relevant food label?

3. Don’t forget the whimsy.

Infographics are to communicate and to persuade – humor opens people up and makes them more willing to hear messages. It’s like trying to get a conversation up – stand up comedians are best at that. Have fun communicating!

4. Be honest.

Allow the viewers to have the sense that they’re free to move around and find their own relationships. The article mentions that when viewers are allowed that freedom, they’ll have the confidence that you really are giving them the whole story.

Dashboards, Schdashboards

Read an article on the psychology of informational dashboards by Shilpi Choudhury  today. In it, she summarises the fundamental reasons why humans crave for information summarised on dashboards:

[1] Humans have a natural desire to be in control.

[2] Humans have a notoriously short short term memory.

[3] Humans desire to cut down clutter.

My thoughts

I guess being the pragmatist I am, the next question that naturally comes to my mind is then: How do we create appealing, effective dashboards?

Some things came up to mind:

Reducing cognitive clutter

Shilpi cites an article by Jakob Nielsen and mentions that we typically can only remember up to 7 distinct chunks of information in our short term memory, and that this information fades in about 20 seconds. What this suggests to me is that we can’t exactly perform cognitive processes involving more than 7 distinct pieces of information — so excel sheets can actually hurt more than help.

Here’s where presenting data visually becomes important – graphs, info-graphics and the likes all serve to reduce the cognitive load such that we can absorb, understand and memorise (short term) more data in order to perform more complex analysis and trending, in effect allowing us to see the forest for the trees easily.

[Likewise in communications, people tire when seeing too many pieces of information/data and would much rather welcome an image]

Of course, not all info-graphics were created equally. The well crafted info-graphic utilises natural psychologically distinct visual attributes like colour, size, density, shape (the gestalt principles!) in order to compress information and hence convey more information to the viewer at a quick glance.

Timely Reminders, Proper Organisation

A second point that would make dashboards useful would be the way it can coordinate and inform users when and where intervention is needed. There should be flexibility for intervention rules to be set in order for the dashboard to prove valuable to the user, whose requirements might change across time.

Finally, a proper dashboard calls for proper organisation of data – and this honestly, shouldn’t be done at the level of the dashboard, but rather at the data architecture level. Ultimately a dashboard is meant for the display and manipulation of data that has been captured and organised within a system – if the system has a crappy data architecture, then the dashboard is probably not going to be any bit helpful.

Introduction

About

This blog is an experiment of mine. I intend to use it to record my lessons learnt from the vast and vastly interesting field of user experience. Hopefully with careful meta-tagging, it becomes a useful repository of User Experience (UX) and Design Thinking (DT) for future reference.

Why UX and DT?

I suspect I would develop this section much more as my thoughts get clearer, but i think proficiency in UX and the application of DT both lead to more well-designed systems with the end-user in mind. UX deals with more general concepts based on psychology whilst DT attempts to dive into specific user desires.

End State

 Eventually i hope this blog gains a life of its own and becomes a genuine platform for engaging conversation about UX/DT and also a true, well-critique repository for everything UX and DT related.

Cheers.