UX Magazine

Defining and Informing the Complex Field of User Experience (UX)
Article No. 508 March 26, 2010

Eye Candy vs. Bare-Bones in UI Design

The general public seems to be kind of shallow when it comes to user interfaces. They think "prettier = better." A couple of gradients here, some fancy translucent buttons and there you go: an interface that's just overflowing with awesomeness.

Fact is though, fancier graphics do not equal a better interface. Most UI/UX professionals agree that graphics should be kept firmly in check or they'll take over the entire application, sacrificing usability over eye candy. Should we then abandon eye candy altogether? Ban all gradients and icons and go with a bare-bones version of the application? Going bare-bones would focus the user purely on the task or goal the application is designed to do. Sounds like exactly the thing we want to achieve.

Either approach, when designed without care, will yield the same result: decreased usability. Eye candy distracts, whereas bare-bones fails to attract. So which one is the lesser of two evils? What are the pros and cons of both? Are graphics even important? That last one is easy: we're (usually) designing graphical user interfaces. The very presence of the word "graphical" indicates graphics are a big aspect of the interface. But graphics aren't important simply because the term GUI mentions it; graphics largely define the application's appeal for the user. If the application doesn't have some kind of aesthetic value, it will not only fail to attract the user's attention, it will also fail to hold the user's attention.

Attracting attention by having a pretty front-end is important, as it makes the user want to use the product. They are attracted to it just as they are attracted to a beautiful person. The first glance establishes a relationship with the user. Pretty graphics seem to say, "Hi, I appeal to your senses; don't you want to interact with me?" They make the first experience with the application a pleasant one.

Note: by "first experience" I don't mean the very first time you ever laid eyes on the application. By first experience I mean the first few seconds after starting the application, when you are only looking at it, prior to actually doing stuff with it.

The saying goes: "Don't judge a book by its cover". We all know this to be true, as the cover's quality is no indication of the quality of the book's content. But even though we know to judge a book by its cover, we do anyway. We are attracted by pretty covers, so we are more likely to pick a book with a fancy cover from the shelf for further investigation. Books with "humble" (or downright ugly) covers have a larger chance of remaining unnoticed or even knowingly ignored.

Book covers

So once we've got the user's attention, we need to hold it. Keeping him distraction-free will allow him to reach a state of flow: a state in which he is immersed into his work with the application and in which he feels happy just by doing the task. When in a state of flow, you leave self-consciousness for what it is and no longer think of your individual self but are fully focused on your task. A sense of joy takes over, your mind is entirely devoted to the task, time seems to go slower and everything around you fades into the background.

So where do graphics fit into this story? Do they help in facilitating a state of flow?

Why yes, they do! One example of this is the rounded rectangle. Often considered as "mere decoration" when used in a UI, they apparently also have a lower cognitive impact than regular rectangles. Credit for uncovering this to the greater public goes to Keith Lang in this article on rounded rectangles. Windows 3.1 style graphics, which are still used in some applications to this day, are harsh, full of visual obstacles and hard to scan. The obstacles, like big borders with sharp edges, constantly interrupt the eyes' movement across the screen, making it hard to navigate the application.

Subtle gradients and "soft edges" (created by subtle drop shadows or embossing) lighten the visual impact of the screen on the user, making it actually easier to use. But that's just one small part of the whole.

Panic's Coda interface with rounded edges and gradients

Bare-bones GUIs prioritize the task at hand and all variables that it has to deal with. They say: "Users use me because they have some task to accomplish, and I want to help them reach that goal ASAP". A commendable approach.

Unfortunately, by focusing on handling the task, they neglect to spend some tender love and care on handling the GUI itself. They may succeed in facilitating fast task-completion times; they fail at being pleasurable to use. And because they fail at being pleasurable, the user has a hard time entering a state of flow. Emotion plays a big role here. If the user has a negative state of mind, he or she will also have a harder time using the application. This state of mind might not have been induced by the bare-bones UI, but it won't be alleviated by it either.

A rather bare-bones UI design

As Donald Norman pointed out in his book Emotional Design, prettier things are actually easier to use, or are at least are perceived to be. This book is all about the relationship between aesthetics and experience, and is a mandatory read for those interested in any kind of design.

So, a level of aesthetic appeal (i.e., eye candy) is definitely recommended for usable interfaces. But it's easy to get carried away when implementing awesomeness into your UI. Most code libraries feature some effects like "Fade," "Move," or "Glow" that only need an argument to use, and it's all too tempting to add them to spice things up quickly. But these features are exactly the things that distract when not implemented properly (or implemented when they shouldn't be implemented at all). Remember the <blink> tag?

Another example is using photographs or other fancy imagery as the backdrop for a graph. I've actually seen this being done: a picture of a coral reef with a line-graph (with a 1px yellow line) superimposed. It might be fancy, it might be exactly what the customer wanted; it is not usable.

Bad taste in UI design

With the advent of the iPhone and ever-increasing processing power, graphically rich UIs are far more prevalent than they have ever been. Gradients in applications used to be a rare thing, now it's rare to see an application without one. The gradient is just an example of how eye-candy is quickly becoming standard practice in UI design. But there's a fine line between helpful and harmful eye candy. Analyzing whether the eye candy is either helpful or harmful requires constant vigilance but also, every once in a while, some time off. Looking at your awesome-looking UI after a good night's sleep allows you to look at it objectively, and determine whether the eye candy additions are truly awesome and helpful, or quite the opposite.

Some recommended reading

ABOUT THE AUTHOR(S)

User Profile

Max Steenbergen is the resident UI & graphic designer for a Dutch company developing yacht-monitoring software. Being completely self-taught in the ways of user experience, interfaces and graphics, he's about to follow a 3-year course called Communication & Multimedia Design to gain more knowledge on the subject. He blogs about UIs and UX at http://face-value.tumblr.com and is on Twitter @maxsteenbergen.

Add new comment

Comments

0
1

"Most UI/UX professionals agree that graphics should be kept firmly in check or they'll take over the entire application, sacrificing usability over eye candy."
LOL - because "UI/UX professionals" know more than their customers. What a bunch of idiots you are. None of you have a clue how to design a decent interface: Exhibit A: 'The Ribbon'. Exhibit B: 'Windows 8'.
None of you should have a job as a 'UX designer', because you're all gullible idiots following each other round in a circle, making life difficult for the users.

49
59

[quote]missing some larger ideas around choosing how and where to apply "eye candy" to an interactive experience.[/quote]
I believe there is no "idea" to standardize or systematize proportions. Thats were "The Art" is. Talent is not an educational process, its either revealed in someone's practices, or not. According to Dao, we're all granted with such property/characteristic but far not everyone reveal that through himself.
Plus, outside judgement and social/educational growth process will create an impact on individual perception.
Some design ideas are cool, some not so, even presented by "big names". And we just hope, as UI Designers, that our very personal visual&functional translation of someone's business logic will "please" given executives to continue. (And ultimately appreciate next paycheck electronic deposit)

65
61

Great article and comments.

57
65

Great Article,It is very good and informative ! Thanks for sharing nice information.

53
47

None of what this article says is untrue, but I think it's missing some larger ideas around choosing how and where to apply "eye candy" to an interactive experience.

Some of the other comments are hinting at this, I think: behind & beyond mere aesthetic attraction, emotional pleasure, and usability details like ease of scanning, looms the more fundamental underlying principle of meaning (and the practice of semiotics -- studying what signs and symbols mean and how they're interpreted).

Thus, it's not just that a bare-bones UI looks visually unattractive. It's that it says "someone didn't care to spend much time designing me" or "I am made for boring and institutional work" (even if those things are not true). And that then colors the user's experience of using it.

It's not just that gradients look nice, it's that when properly applied they cause buttons, bars and other elements in the application to look more like real-world, three-dimensional objects with light falling on them, a glossy finish, etc. And thus like real-world objects, they encourage us to touch them, press (or click) them, try to manipulate them, see them as unified whole things (gestalt psychology), etc.

Reducing visual clutter helps not just because it makes it easier to scan the screen and see stuff, but because it makes it easier to see the stuff that's *important* -- in other words, it helps the meaning of the UI reflect the meaning of the underlying task or data.

Icons with too much detail or too little are problematic because they're hard to interpret for meaning.

And so on.

In other words, the design process isn't just a matter of "well, let's find some intermediate balance between bare-bones-ugly and so-dressed-up-it's-distracting," or even of "how do we balance form vs. function" but rather "what meaning is involved here, what meaning does the user bring to what they're using this for, and what meanings do we need and want to convey?" Both form (eye candy) and function need to serve the intended meaning in one way or another.

52
61

You bring some fine additions, and it would indeed be beneficial if I'd make it a bit clearer that finding a balance between the two is not enough.However, I felt that the articles by Lukas Mathis & Stephen Anderson in the Recommended Reading part of my article did and still do a better job at explaining in-depth just why exactly eye candy works better.

Nonetheless, I agree with you that there are some gaps in the article. I plan on addressing those in new articles. Thank you for your views.

48
67

As a strong believer that form follows function, I agree with what is said in this article However like you've mentioned, an interface needs to "look" user friendly in order to be perceived as one, images and icons can help achieve just that.

Adding flashy images and gradients because an application or a piece of hardware can handle it is not the basis for a good user interface.

55
64

Excellent article! Great links, too.

54
53

I couldn't agree more. Whereas attractive interfaces are pretty, and eye catching to the user/visitor, fat lot of good that will do if the user if they can't find the information or navigation they will otherwise find in the blink of an eye on a competitors site (of course, talking about websites, but this can refer to applictions, software, publications, etc). My motto: Design with the user in mind. Stop, think. Would my average customer (or client's customer) understand this? Is it simple? complex? Too simple? Too complex? And so on. Great post!

54
53

In my opinion, the eye candy part of a website should serve as an overlay to the actual barebone. The barebone designs the purpose, the eye candy soothes the process and makes the website attractive enough for the visitor to spend more time on it or to return.
But when the eye candy doesn't serve any purpose (just eye candy for the sake of it), that's when you should ditch it and stick to plain barebone.

57
59

Great article, I learned a important lesson.

Thankyou

54
65

I definitely prefer a UI that is simpler without many visual flares just because it allows me to quickly interact without anything distracting me however I find that attractive UI's often causes me to play around a little more, thus learning the program/app/website/etc more easily.

58
54

Great article, there is a thin line we must walk between form and function. We'll always have a bit of both. 

If we had a scale from bare-bones utility versus over-the-top flashterbation, we'd be somewhere in the middle everytime. Sometimes we'll lean towards the utility side and other times we'll lean towards the experiential side. Usually this is a page-level decision depending on the page's purpose.   

Some examples of when we lean to the experiential side include: when we need to evoke emotion, display complex information, facilitate decisions, or guide through a flow.   

We'll lean to the utility side when we need to people to do something repeatedly, when delivering serious or sensitive information, or when we want to focus attention.

56
55

Thanks, nice article.

50
55

"Eye candy distracts, whereas bare-bones fails to attract." Best line of the article. Depending on the purpose of the thing you're making, and its content, a large spectrum of eye-candy can be appropriate. How flashy one designs a DIV-overlay for a band on myspace won't work for a corporate site or a brochure for a doctor's office. And never forget that minimalism can be sexy.

54
53

Design is a creative process itself - user interface design and graphic design are/should be allied fields.

It is often a matter of sequence/priority. As a sweeping generalisation, the right way to design an interface (given that you've captured the *real* end-user requirements) is;

IA *design a "control system" that allows the real user to perform the required tasks with the least effort

UI *lay that system out in a way that makes sense to the most users (often a matter of following standards), and minimises errors in execution.

UI/GFX *design graphical elements to support task-based cognitive processes

GFX *finally, where it doesn't interfere with the above, make it as beautiful as possible

In my experience the problem is that the process often runs mostly backwards, starting from a logo and brand palette, and arriving at a control system.

Then, post launch, real user testing begins :)

59
52

Nice read. This'll help us in educating clients. By the way, the graph with the picture as a background made me laugh out loud. Just too funny some people actually get so blind for the usability of their own UI.

52
52

Thank you for this excellent article! Although I was always of the mind of 'creativity is not design', complete lack of creativity leads of a boring user experience and a lack off attraction to even interact at all. This article really helps clarify things!

57
59

Well put. I will pass this on to my clients

52
61

Great article.
I really think it depends on the task of the page.
If it is presentational portfolio page, without much functionality than by all means go with full gorgeous graphical interface to look at, and try to express some of the "portfolio message" with the graphics itself.
If it's a "complex" application go as much bare bone with gui as possible although still somewhat eye pleasing as you described.

54
54

I'm not the perfect person to say this line but "What look great attracts more". Simply if you have a good UI design its going to attract more n more. It was a version before the XP was launched. I dont think so anyone would like to talk about UI of Win 98 or Win Me as compare to revolutionary UI of Win XP which made it most popular OS till now.