Experience vs. Function — a Beautiful UI is Not Always the Best UI
A good user interface (UI) is essential if you want your product to be usable, but you must always be careful to not fall into the trap of focusing too much on that interface.
A good UI should fade away, putting content in the front seat — it should be transparent. Sometimes there can be too much ‘UI’ — controls and buttons that are too strong and distracting win over content in their battle for attention.
Remember that the visitor or user is there to do something — they’re not there to appreciate the aesthetic of your buttons and marvel at the style of your navigation bar. If you let the UI take over, if it’s no longer transparent and in the background, then it will dominate content and in turn would be too distracting to use.
Let’s see an example. Here’s a site called newspond. It collects news from around the Web and ranks it using a popularity algorithm:
It’s a pretty nice system with a very beautiful interface. And that’s the problem. The interface is too beautiful, there’s too much of it — it’s distracting because you cannot easily focus on the news stories. The beautifully crafted (and to some extent a fairly usable) UI is the downfall of this powerful service. The designer has fallen into the trap of focusing too much on the interface, and not enough on the content.
What would work instead? Let’s see an example from a similar site. This is Hacker News from YCombinator, a social news site for entrepreneurs and developers:
It’s very basic. It’s pretty much just content. While I can only see a couple of news stories on my screen on newspond, on Hacker News I can see about twenty. I get what I’m looking for: stories. I can get to them without having to block out the UI. It’s simple, and it accomplishes its function beautifully.
Imagine if Google looked like newspond — would you still use it? I know I wouldn’t. Part of a great user experience is to be able to get to information quickly — very quickly. If you have to block out UI in your mind to read the headlines then that UI has failed. There’s not much ‘UI’ in Google — it’s just a list of links. And that’s exactly why it works. It’s just content.
Experience vs Function
Cutting back on UI style isn’t always the right thing to do — it all depends on the function of your website.
If you’re working on a marketing site, promoting your product or company, then a beautiful UI may work for you. You’re there to deliver an experience, not just content.
If on the other hand, your site’s core function is in the content you publish, then the interface should take a back seat. Make an interface that’s transparent and not distracting to use. Remember that the UI is not the content and not the focus of your site. Getting these priorities right will help you make a great user interface.
What do you think? Would you use Google if it looked like newspond? Post your thoughts in the comments below.
13 Oct, 2008
Excellent point, I completely agree. Working increasingly on designs and UIs for web applications, I find that I must push my design back and bring out the content. The content is king and so the site should be built from the content out.
13 Oct, 2008
yep. UI, however pretty, should always serve as secondary to the content. A lot of sites are so overwhelming on the glitter and users almost forget what they should be looking at. Finding the right balance is often hard.
13 Oct, 2008
Google would not have gotten to where it is today if it looked like newspond. Strip away your iGoogle, your gmail, your Google Reader and your Google documents, and look at the standard Google homepage: simplicity at its best, with the options (through iGoogle and so on) to get more complicated, if you’d like.
13 Oct, 2008
User Interface does not refer exclusively to pretty buttons and rounded corners.
Newspond is poorly designed, not overdesigned.
The site does not look beautiful - it looks outdated at best and inappropriate at worst. Its developer(s) should focus on the popularity algorithm and the data behind the site to reveal the true value of the service.
13 Oct, 2008
I love the *look* of Newspond, but I must confess, you definitely don’t get the same usability on the front page as the site you mentioned, or from sites such as Digg.
However, there are elements of the Newspond UI that are fantastic. The commenting system is simply one of the best I have ever used. If you have not experimented with the beautifully fluid process of leaving a comment on Newspond then I highly recommend you try it out.
All in all, though, I absolutely agree - Content is King!
13 Oct, 2008
Reddit seems to have a pretty solid content driven system similar to that hacker news site mentioned. I think they have the best setup so far
13 Oct, 2008
Josh — I really like reddit too :) You get what you’re looking for, really quickly. Newspond looks like a desktop app. Content inside an app, inside a browser app.
13 Oct, 2008
Tho I hate Google design, it is very effective. I am sure they can improve it a little if they want (they can even validate it), but I think they are scared the user will be scared of changes.
13 Oct, 2008
Excellent points, the UI is merely the messenger. It must let the message (content) take the spotlight!
13 Oct, 2008
Fantastic point! Many people forget that great design doesn’t get people gushing over it when they see it. It should be so good that they’re too busy using it and getting things done to stop and go “WOW, it’s so pretty!”
Google definitely hit a point on minimal-oriented design and many have followed. You can argue the same point for Craigslist, most people use it because it’s so easy and straightforward…design-wise.
Again, great post!
13 Oct, 2008
In Firefox, View / Page Style / No Style (shortcut Alt-V Y S) turns most pages circa 1995 ugly but more readable. I use it to turn most pages some degenerate circa 1995 ugliness that are blessedly readable — black on white text, text content uses the full browser width, no funny fonts. For instance, I like it especially on sites (even this one) to make the one narrow content column use the full browser window.
13 Oct, 2008
Pretty sure that Hacker News is derivative of reddit, based on the same code.
And who mentioned Digg and Usability in the same sentence? Digg suffers the same problem as News Pond while not even looking good.
14 Oct, 2008
ulu의 생각…
Experience vs. Function — a Beautiful UI is Not Always the Best UI / 역시 이건 내가 digg나 raddit같은 UI를 좋아하는 이유….
14 Oct, 2008
Great article,
Google has definitely gained its transparency, but I do feel its about time to update their design. I am not saying it needs to become yahoo, but they can make it look better.
14 Oct, 2008
Hacker News was created by Paul Graham, who was the main investor in reddit.
It’s design was pretty much copied from reddit.
14 Oct, 2008
nice article. another good example occurred during the reddit redesign a few months back. they changed to a multi-line display and people went nuts. like you said, people want to take in as much information as possible.
14 Oct, 2008
[...] Visit Source. [...]
14 Oct, 2008
The comparison of the two sites hardly seems fair. I don’t use or know either site, so I have no bias towards either.
The problem I see in this article, while I agree perfectly well with its intent, is that the designers at Newspond made the conscious decision, in terms of content, to show more information per article, then just a headine, whereas Hacker News has made the decision, in terms of content, to focus on scannability of headlines.
Whether or not Newspond is ugly, overdesigned, or less usable is a valid question, but not one that can be asked in comparison to Hacker News.
I think the better statement that could be made in this article, is that a UI needs to have both a strong experience and strong functionality to be a good UI.
Experience and Beauty are discussed as synonymous in this article, but that is far from the truth. Experience is exactly that. Experience. It depends on your target audience. Certain types of audience have absolutely no need for beauty, but are fully immersed in the experience of the website because of the nature of that website’s content and the nature of those users (in general). (see Wikipedia)
In contrast, some websites’ UI are most effective when the experience matters more then function (see sites such as Nike’s, and other large companies and their promotional campaigns)
Just my thoughts. Again, I agree with the essence of the article, in that “A Beautiful UI is not always the Best UI”, but I disagree that beauty and experience the same. Far from it.
14 Oct, 2008
I would say Digg would be a better example of good design for this kind of site than either reddit or hacker news; though I prefer the content of both of those over Digg.
14 Oct, 2008
A beautiful UI is always superior in my eyes. Of course it has to be a “good design” (there are many books on this topic. It’s everything but sparse). If you can’t make one, the second best option is to make it sparse. In that I agree.
14 Oct, 2008
[...] then I submit that Palin=Stalin. Complete guide to Google Analytics | News | TechRadar UK Experience vs. Function â a Beautiful UI is Not Always the Best UI Its All a Sham - An Indian Techie’s Take on OutSourcing DIY, 100 MPG Car is Back on the Road After [...]
14 Oct, 2008
Excellent points. The content should be the king and design should just support it. Yeah, it can be fancy, grungy or whatever - It will be functional as long as it puts the content in the front seat, like you said.
14 Oct, 2008
Good point well made. UI stands for ‘User’ Interface and that’s the key, *user*. Not viewer, or observer — user!
14 Oct, 2008
[...] Dmitry with another great article: Experience vs. Function — a Beautiful UI is Not Always the Best UI [...]
14 Oct, 2008
“The interface is too beautiful, there’s too much of it — it’s distracting because you cannot easily focus on the news stories. The beautifully crafted (and to some extent a fairly usable) UI is the downfall of this powerful service”.
Not so! You can’t have an interface that’s too beautiful. Beautiful aethetics are a major plus point of this site (@Jimmy G - AGREED!) but interface design is all about finding a balance between form and function that works best for it’s intended audience and that doesn’t happen here.
Ultimately, this site’s main focus should be the aggregation of all the news story headlines. HEADLINES being the operative word. If newspond had the summary content loading dynamically and at the users request then i’m sure it would do a much better job of satisfying it’s users. The only two downsides i see are that it assumes the user wants to see a summary of every article, which is rarely the case and the line-length in each article summary is WAY too long for comfortable reading.
Drop the article summary, unless it’s requested and shorten the line-length and it’s a pretty appealing and intuitive UI.
14 Oct, 2008
Congrats for the examples.
14 Oct, 2008
I notice a lot of similarities in terms of design with http://slashdot.org
Do your comments apply to them as well?
14 Oct, 2008
thanx for examples
14 Oct, 2008
Absolutely agree - and its why I hate flash sites. There’s gotta thousands of lines of code in them and about 30 seconds worth of information to read.
14 Oct, 2008
Agree too, minimalism is good. An other example of very simple UI but very peaceful : http://rososo.com/
14 Oct, 2008
My 2 cents… UI is a also a function of guest expectations, as well as the needs that must be met to satisfy those expectations. Less isn’t always more - less can in fact be less. This can be dangerous if taking functionality off the table compromise the biz’s ability to deliver. We’ve all been on “minimal” sites begging, “where the #$%^@! is…?”
There can and is a point of diminishing return.
It is also a function of the target audience. Anyone who has seen many video game UIs will realize that for some (read: most under 30) a detailed and sophisticated UI can be effective and engaging.
A UI that relies on aesthetics is like a woman/man who relies on looks. Eye candy is nice but it’s typically no basis for a LTR.
14 Oct, 2008
Dmitry, how can you justify making a comparison between the UI on the sites, when the information they convey is different? I see fewer stories on my local news site than YCombinator, what does that have to do with beautiful UI?
14 Oct, 2008
I really really do like the style of Newspond, and I think the designer deserves a lot of praise for it. However I completely understand where you are coming from, and as a designer it can sometimes be hard to sacrifice some good looks for some good functionality.
I think a blend between the Newspond site and the Hacker News site would be the safest bet. I rarely read through a list that is presented the way Hacker News stories are presented, but like to you said it is a lot easier to see more information.
Lovely read.
14 Oct, 2008
Tor: Both sites have the same function — the only difference is Hacker News sorts stories by voting and newspond using an algorithm. Each are at the extreme ends of UI design — one has an abundance of aesthetics, looks and polish; the other is pretty much just a list of links.
My point is that while newspond is beautiful, I feel there are too many graphical elements used in the layout. I think the designer has fallen into the trap of focusing too much on interface design. I believe that for an informational site like this, minimalism works best.
Liam: I think that neither Hacker News nor reddit are beautiful — they’re just functional. They can definitely be designed a little better. I’m a big proponent of good aesthetics in UI design, so I definitely think there is room for little touches, for a little style.
The designer however must have a lot of self control and restraint to implement those touches — especially if the primary function of the site involves a lot of information consumption. Part of a great user experience is getting what you’re looking for quickly — the UI must not impede that.
14 Oct, 2008
Dmitry,
congrats on yet another post I’d like to have on my blog.
I’ve reviewed Newspond before and stumbled upon the same problems too.
It looks like some fancy Mac OS app - not like a functional web service.
Excellent post.
14 Oct, 2008
Great post (as always)! Usability is always so important and yet it’s almost always overlooked.
14 Oct, 2008
“Great post (as always)!”
Agree :)
14 Oct, 2008
Sorry, i cant agree on 100%.
Yes, usability is important, as always, and that’s the part that I agree.
But you guys are looking just as a developers, not as final users, and for sure we shouldn’t do that.
As a user, who appreciate a “good” visual - this is something absolutely personal, you know - I’ll never prefer to read my news o Hacker News instead on Newspond.
The look and feel is important, because not everyone who access our site is a developer or programmer who think that a blank page with text is the most beautiful thing on universe.
And, as a developer and designer, I probably will do some adjusts on Newspond, to make him more usable on the content part of the site.
Beautiful UI is important, you just should not forget the usability.
A really usable UI without any visual will probably get less users than the beautiful and less usable UI.
That’s the market, and we need to learn how to work with that, in my opinion.
14 Oct, 2008
Flep, I can understand where you are coming from. As Dmitry said, it depends on the nature of the site.
The truth is, for a site that’s primary for usage such as a news site, blog, or web-apps, graphical eye-candy has a very high diminishing return. You may be whoa-ed the first couple times you visit the site, but after hundred ‘n thousands of times visiting the site, all those graphical elements are simply background noise. This is when you appreciate a more simplistic approach.
14 Oct, 2008
[...] Designing the best interface is not always about beauty but about understanding the context of the user experience. Sometimes beautiful isn’t always best, and sometimes it is. [...]
14 Oct, 2008
I think that you promote “quiet structure.”
You want the design of the page to support the content - not drown it. With a toned-down structure you let the content be the main focus on the page not the design of the page itself. Good post.
14 Oct, 2008
you make valid points but I think your example of newspond is not the best one. I think newspond is done good, there are a few things I would change but not quite the example I think you should use.
cut out the prominence of the buoyancy rating and comments and turn that into the title and it should be fine
15 Oct, 2008
Great article. So true. Good examples too.
15 Oct, 2008
Couldn’t agree more. I love the looks of this blog, I think it’s picked a fantastic balance.
15 Oct, 2008
Thanks Michael :)
15 Oct, 2008
Totally agree. Right now working on one online project and facing the same dilemma. I chose to work on wireframes first (with Axure) to make sure I get the functionality down. Otherwise, too many times we focus on functionality and design together at the same time…missing focus on each of them.
16 Oct, 2008
Basically, I agree with your arguments. “Make it as simple as possible”. But there’s also the “…,but not simpler”. Your examples are bad ones for your arguments. Hacker News is a “…, but not simpler” thing.
When I have a look at the readability I would prefer Newspond. Your eyes can recognize/scan a structure. Hacker News is a massive textblog with almost no structure. The bold headlines are no real help as long as you don’t use blank lines between them.
I could even live with Newspond for Google, because only a small part of the Google hit list is really relevant to what you search for. The amount of information can be limited anyway (and the space could be used more efficiently).
16 Oct, 2008
I think people forget that all these sites are content *wrappers*, nothing more - and their UI should reflect that.
16 Oct, 2008
[...] Experiencia contra diseño - una bella UI no es siempre la mejor UI [en] | Usability Post. Interesante punto sobre el diseño de interfaces, aunque posiblemente no del todo bien enfocado. Vale la pena leerlo. [...]
16 Oct, 2008
q ficti estos tipos creen q la de jhack news esta bien y no es asi quieren volver a una UI donde solo haya textos y ya , la verdad es q tener un blog de 100 visitas a la semana no te enseña diseño
16 Oct, 2008
rainwebs: I don’t think Hacker News is pretty and it can definitely be made clearer by increasing things like whitespace between each entry — I’ve never said it was a good example of simple design :) It’s an example of something completely opposite of newspond — a site with almost no UI design. My argument is that I would rather use the bare Hacker News UI over the intricately designed newspond one because the UI there is more transparent and lets me access the content faster.
17 Oct, 2008
If it’s UI for a portfolio site, I feel you can leverage more to the beautiful end as it shows your web skills at the same time. If it’s a web app, I’d like to see it emphasizing more to the usability end.
22 Oct, 2008
[...] + Enlaces Experiencia contra diseño - una bella UI no es siempre la mejor UI [en]. Vía El50. Buen artículo, pero que queréis que os diga, a mi el diseño de Newspond me parece [...]
22 Oct, 2008
[...] Experiencia contra diseño - una bella UI no es siempre la mejor UI [en]. Vía El50. Buen artículo, pero que queréis que os diga, a mi el diseño de Newspond me parece brutalmente bueno. Permalink Comments (0) Oct 22, 2008 [...]
27 Oct, 2008
This is a great article, it made a lot of good points such as a “good UI should fade away”. The no. 1 role of the designer is to make UI disappear.
The problem with the article is the way it uses extreme examples to validate the point. Both sites in the example are bad! the other is too much design noises and the other one is just plain timid. I have seen a lot of sites that are both beautiful and functional, I am sure you are familiar with http://www.apple.com/ and also another great example is this http://psdtuts.com/.
I also do not agree that we have to differentiate experience and functions. Both must exist and if your site lack one of those, then you might need to find another designer.
And P.S.
I think having the google site redesign is not a bad idea. It would not scare people away if they have a nice looking and usable design there.
27 Oct, 2008
Hi duren,
You’re right — there was no good examples of great UI design here — I was just saying that the ugly Hacker News interface performed its function better than the beautiful newspond one.
The sites you mentioned: Apple and PSDtuts are fantastic in a sense that they add graphical polish and yet retain a simple and clear design. A UI that looks good shouldn’t be flashy — it should achieve beauty through good proportions, typography, clean lines and attention to detail; as opposed to stuff like glossy buttons, gradients and other interface visuals that add bulk to the UI.
28 Oct, 2008
Subtle gradients are details, Dmitry.
1 Nov, 2008
[...] Experience vs. Function — a Beautiful UI is Not Always the Best UI (Usability Post) [...]
1 Nov, 2008
Tor: The key word being ’subtle’ ;) I agree about adding a level of polish to the UI — but how much of it to add depends on context.
2 Nov, 2008
[...] Are beautifil user interfaces usable ? [...]
9 Nov, 2008
Simply The Best!
13 Nov, 2008
[...] 原文链接：Experience vs. Function — a Beautiful UI is Not Always the Best 如果你想让你的产品具有更好的可用性，一个好的用户界面(UI)是必要的，但是要小心陷入了把大部分的焦点放在界面上的陷阱。 [...]
14 Nov, 2008
Beauty in simplicity. People want stuff that works without making them think.
A great example of this is:
http://epic-downloads.com
Little bit of a shady site, but it’s a good example of simplicity like Hacker News. There’s a lot of information on every page and two layers of navigation, but everything you want is right there, without making you think too much.
Another great example of Less Is More.
15 Nov, 2008
[...] Experience vs. Function — a Beautiful UI is Not Always the Best UI (Usability Post) [...]
17 Nov, 2008
Good point.
Minimalist web design rocks!
19 Nov, 2008
[...] it. The best-case scenario is where the designer’s vision matches what the users want. Users may not want pretty user interfaces and this is where designers need to learn to tame the designer [...]
26 Nov, 2008
“Design is not just what it looks like and feels like. Design is how it works.”
Steve Jobs
28 Nov, 2008
I disagree.
About Newspond you say: The designer has fallen into the trap of focusing too much on the interface, and not enough on the content.
And in general you say: If your site’s core function is in the content you publish, then the interface should take a back seat.
Well, about Hacker News I’d like to say: The designer has fallen into the trap of focusing on content only, and not enough on the interface.
In my opinion, the interface at Hacker News does not even have a back seat. I guess it must be left somewhere in the trunk…
To be honest: the site hurts my eyes. It’s like reading a telephone book…
As more often, I think the truth must be somewhere in between.
And above all: experiences are subjective. Alway. No matter what…
28 Nov, 2008
UI is very imp in each & every device!
http://www.desi-mobilez.com
Free Mobile Downloads…
2 Dec, 2008
[...] 原文链接：Experience vs. Function — a Beautiful UI is Not Always the Best 如果你想让你的产品具有更好的可用性，一个好的用户界面(UI)是必要的，但是要小心陷入了把大部分的焦点放在界面上的陷阱。 [...]
20 Dec, 2008
[...] Experience vs. Function — a Beautiful UI is Not Always the Best UI — Bacaan menarik untuk mereka yang berkecimpung dalam bidang rekabentuk laman web. [...]
1 Jan, 2009
[...] Experience vs. Function — a Beautiful UI is Not Always the Best UI (Usability Post) [...]