A Design Is Only As Deep As It Is Usable

Advertisement

There are well-known proverbs that imply (or state outright) that beauty is superficial and limited in what it can accomplish. “It’s what’s inside that counts” and “Beauty is only skin deep” are a few simple examples. Because the Web design industry is now flooded with a lot of raw talent, and because virtually anyone can create a “beautiful” website, recognizing a truly beautiful website experience is becoming increasingly difficult. What appears beautiful to the eye might in fact be more of a hindrance.

In this article, I hope to provide a clear demarcation between what is perceived by most to be beautiful in Web design and what is truly beautiful, along with some guiding principles to help designers today create websites whose beauty is not superficial, but rather improves and enhances the user experience.

Gradients, Drop-Shadows, Reflections, Oh My!

A lot of things could fall in the category of “beautiful” or “attractive” in the context of Web design. But a number of factors would make such beauty shallow. Is a website more attractive if it has tastefully placed drop-shadows, gradients or reflections? What if it has an eye-pleasing color scheme? What about big over-designed buttons? Could these be standards by which a design would be deemed beautiful?

If you’ve been keeping tabs on the Web design industry in the last five years, you’ve probably at some point visited one of the many CSS galleries. Visiting those inspirational showcases is great, and I’m sure we’ve all done it, but we need to be careful not to fall into the copycat syndrome, whereby we prettify our websites for no other reason than to make them CSS gallery-worthy.

Mint's Web 2.0 Look1
Mint.com2 has everything a client could ask for in a “Web 2.0 design”. Does that mean it’s beautiful?

The designers, developers and content strategists who planned and executed many of the websites in those galleries did what they did because they felt it would truly benefit the user experience and their clients’ bottom line. The truly beautiful websites and apps in those showcases are not just visually beautiful; they’re usable, accessible and optimized to benefit both the user and website owner.

The Dribbble Syndrome

With the recent popularity of Dribbble53, the copycat syndrome might be gaining momentum. On Dribbble, a designer reveals a sample of something they’re working on, and then the style of that small snippet starts spreading. The context and strategy underlying it are unknown, yet the style is still viewed as beautiful in and of itself. The designer may have taken hours, days or weeks to arrive at the decisions that informed the design, but now that it’s out in the wild, the snippet becomes nothing more than eye candy.

Dribbble's design teasers4
Dribbble53 shows out-of-context design shots. Is this a bad thing?

Of course, the intent of this article is not to blame those who share their designs on Dribbble, nor to blame those who review these designs and offer feedback. But we mustn’t lose sight of the fact that every design decision should have significant reasoning behind it.

The Style-Less Comparison

How do we measure beauty? If a website is difficult to use, then isn’t its beauty without purpose? Look at the comparison in the image shown below.

Nettuts+ logo and navigation6
The Nettuts+7 logo and navigation bar.

I think Nettuts+ is a very nicely designed website. But is the fancy navigation and logo section shown on top more usable than the plain blue and white version below it? Taken at face value, some might argue that the plain version is more usable (if only slightly) than the “beautiful” one.

Facebook's homepage8
The Facebook9 home page.

While the Facebook home page shown on top might not appear the most beautiful design to many of us, it still contains attractive aesthetic elements (colors, gradient background, styled buttons, etc.). But when most of these minor elements are made plain, does it really affect the usability (of course, after you increase the color contrast for the form labels in the right upper corner)?

If prettiness is really as important as we think, then the current Facebook home page should perform much better than the plain alternative. How do we know, though, that the plain version wouldn’t outperform the adorned version?

What Makes A Design Usable?

I’m not about to make a case for bringing back blue links on a white background on every website. In fact, as I’ll explain, both Nettuts+ and Facebook may very well qualify as truly beautiful websites. The examples above were more illustrative, and not meant to criticize the designers who worked on them.

Rather, I’m encouraging designers to consider two things when adding “beautiful” enhancements to their designs.

  • Responsive and intuitive page elements,
  • Branding and consistency of theme.

Focusing on these two things will give every pixel in a design a purpose and will contribute to the website’s overall usability. Let’s consider both of these, with a few simple examples to illustrate their effectiveness.

Responsive and Intuitive Page Elements Make a Design Usable

If a design element makes a website feel more friendly or gives subtle hints as to what’s happening, then this adds to its usability. Look at the simple example below from Design Informer10:

Design Informer search box11

On the Design Informer website, hover over the search box in the top right, and you’ll notice it brightens up. This is not intrusive in any way, and it looks especially elegant in WebKit browsers, because the brightening animates with CSS3. The default look of the search box could be a bit brighter to improve the general usability of the site, but in this specific case the idea counts more than the execution.

This very simple effect conveys to the user that this is a usable element, and it makes the search box more inviting. It’s a ridiculously simple technique but has a very powerful effect.

But just because you can use an animated effect does not mean you should. If, as in the case of Design Informer, the effect makes the UI more intuitive and responsive, then it is justified. This statement by Stuart Thursby12 sums it up well:

If designers think that using HTML5 and CSS3 makes them a better designer just because they use them, then they’re sorely misguided.

Include an element only if it accomplishes some usability-related purpose. If the design is not made more usable by a particular technique (whether via CSS3, JavaScript or something else), then the designer should reconsider whether the extra code is worth the effort. Decoration only goes so far and often has an effect opposite to the one intended, so consider yours carefully before including it in your design.

Another example of an animation that enhances usability is found on Soh Tanaka’s new website13. Look at the screenshot below from this post14 on his blog:

Soh Tanaka's Expanding Code Highlighter15

When you hover over any presentation of code on his website, you’ll notice that the block expands to the right (probably via jQuery, so it would work in every browser).

Again, a simple effect, but not just eye candy; it has a purpose. In tutorials, HTML code is often too long to fit in the highlighter, so the code either wraps or creates ugly scroll bars. Tanaka’s solution makes the code more inviting and readable, and it decreases the likelihood of wrapping or scroll bars.

So whether we’re talking about text links that change color on hover, buttons that move when clicked, AJAX that creates subtle yet intuitive effects, we can take a design beyond mere decoration16 in many ways and truly enhance its usability.

Branding Makes a Design Usable

If an element contributes to a website’s overall branding, image or reputation, then it’s safe to say that it contributes to its usability. Properly planned and executed branding is not superficial or decorative. Carefully chosen colors and graphic elements create an inviting atmosphere that leads the user to make easy decisions and helps them interact with elements smoothly and intuitively.

Look at the screenshot below from 10k Apart17:

10k Apart's Branding18

The laurel wreath19 in the background and the distinctive illustration immediately distinguish this website as belonging to A List Apart20. Consistency in branding contributes to the usability of this ALA microsite and makes it feel inviting and familiar.

And then we have the beautiful and intuitive design for Launchlist21:

Launchlist's Branding22

This screenshot doesn’t do justice to the website’s look and feel; you’ll have to poke around to really experience it for yourself. The design might appear decorative and superficial at first glance, but it’s not. The elements work together to create a consistent and inviting atmosphere, extending the “launch” theme throughout with subtle animations.

Usable Doesn’t Have To Mean Ugly

My purpose here was not to tell designers to forget about slickness, sexiness and beauty. This should be obvious from the beautiful examples shown, which certainly qualify as both usable and attractive. No one expects owners of beautiful websites to suddenly drop their enhancements in favor of the Craigslist look just to make them more usable.

Rather, this post is just a reminder that eye candy is important, but it isn’t everything, and that for a design to be truly beautiful, it has to be functional, have purpose and contribute in some way to the website’s intuitiveness, usefulness and branding. All of these things contribute to the overall effect of a design.

Related Posts

  • In Defense of Eye Candy23
    Research proves attractive things work better. How we think cannot be separated from how we feel. The next time a boss, client, or co-worker scoffs at the notion that beauty is an important aspect of interface design, point their peepers here.
  • Looks Matter Because We All Have Feelings24
    An article about the importance of aesthetics in web design.
  • Stop Designing Aesthetics, Start Designing Emotions25
    Gradients and colors and contrast are all good, but there’s a more important side to web design that many people overlook most of the time: Designing emotions. A beautiful article on Web Designer Depot.
  • Stop Inspiration Hunting When Designing26
    There is definitely a difference between looking at sites for research purposes when beginning a design versus looking at sites just to find some cool stuff you might be able to use. Nice article on Drawar.
  • Web Design? Screw Aesthetics27
    “When I talk about design I try to do more than mention the aesthetic/visual aspect of it, but it seems people tend to focus on that aspect the most. Web design however adds many more elements to the elegant answer that we are so frantically searching for.” Another interesting article on Drawar.

(al)

Footnotes

  1. 1 http://www.mint.com/
  2. 2 http://www.mint.com/
  3. 3 http://www.dribbble.com/
  4. 4 http://www.dribbble.com/
  5. 5 http://www.dribbble.com/
  6. 6 http://net.tutsplus.com/
  7. 7 http://net.tutsplus.com/
  8. 8 http://www.facebook.com
  9. 9 http://www.facebook.com/
  10. 10 http://designinformer.com/
  11. 11 http://designinformer.com/
  12. 12 http://sthursby.com/thoughts/?p=336
  13. 13 http://www.sohtanaka.com/web-design/
  14. 14 http://www.sohtanaka.com/web-design/popout-details-on-hover-w-css/
  15. 15 http://www.sohtanaka.com/web-design/popout-details-on-hover-w-css/
  16. 16 http://www.cornify.com/
  17. 17 http://10k.aneventapart.com/
  18. 18 http://10k.aneventapart.com/
  19. 19 http://en.wikipedia.org/wiki/Laurel_wreath
  20. 20 http://www.alistapart.com/
  21. 21 http://launchlist.net/
  22. 22 http://launchlist.net/
  23. 23 http://www.alistapart.com/articles/indefenseofeyecandy
  24. 24 http://www.drawar.com/articles/looks-matter-because-we-all-have-feelings/89/
  25. 25 http://www.webdesignerdepot.com/2010/08/stop-designing-aesthetics-start-designing-emotions/
  26. 26 http://www.drawar.com/articles/stop-inspiration-hunting-when-designing/164/
  27. 27 http://www.drawar.com/articles/web-design-screw-aesthetics/113/

↑ Back to topShare on Twitter

Louis Lazaris is a freelance web developer and author based in Toronto, Canada. He blogs about front-end code on Impressive Webs and curates Web Tools Weekly, a weekly newsletter for front-end developers.

Advertising

Note: Our rating-system has caused errors, so it's disabled at the moment. It will be back the moment the problem has been resolved. We're very sorry. Happy Holidays!

  1. 1

    Recently, I also made a post defending aesthetics without sacrificing usability, mostly based on Donald Norman’s research on emotional design. You can check it out here: http://beta.mariusz.cc/blog/text/12603815

  2. 2

    God, I hate Cragilist.

    Jesus christ.

    • 3

      I agree. It’s design (can we even call it design) hasn’t changed since pretty it was launched… And even though it’s ugly, it’s still not the most usable site.

  3. 4

    While usability should trump aesthetics, there’s always the aesthetic-usability effect: http://www.markboulton.co.uk/journal/comments/aesthetic-usability-effect

  4. 5

    Thank you for pointing out the problem with dribbble. The styles on dribbble have increasingly become similar over the last few months. Everyone has some sort of retro-style / noise texture / drop shadow / embedded buttons look. Seriously.

    Dribbble is increasingly becoming a club for people who design a certain way, rather than a showcase for original creative work.

    Come to think of it… isn’t that the problem with 99% of “best design” galleries out there?

    I guess that’s what happens the people who run them don’t know the fundamentals of what makes a website design good in the first place.

  5. 6

    The Design Informer search box should be readable without having to mouse over it. I’d argue it is intrinsically bad design made marginally more usable by the brightening effect.

    As for:

    “This very simple effect conveys to the user that this is a usable element, and it makes the search box more inviting. It’s a ridiculously simple technique but has a very powerful effect.”

    Unless you mouse over the search box it conveys nothing.

    • 7

      The Design Informer search box is perfectly readable to me, even without mousing over it. The mouse over effect is an enhancement that makes it feel more usable and inviting, but I think it’s fine without the effect, too.

    • 8

      I’d say you both have a valid argument. It really depends on the site/application. You want your most important content/functionality to stand out. For a site like google, search is the most important thing…so this kind of effect would be bad UX. However, for a site like Design Informer, it is more important for users to focus on the current articles, so search is more of a feature and not a necessity to most users. It all depends on the context and scale of importance.

      Personally, in this context, I think Design Informer has done a good job as the search box is present and reactive to user interaction, but it is not over powering to the overall design.

      • 9

        I totally agree.

        What’s interesting is that SM actually edited my original version of the article to say that the Design Informer search box is not bright enough, but I don’t agree with that statement.

        • 10

          “What’s interesting is that SM actually edited my original version of the article to say that the Design Informer search box is not bright enough, but I don’t agree with that statement.”

          While this is a small alteration, I find it quite surprising (disturbing?) that SM would impose some of ‘their own’ opinions in an author’s article. In this case, it isn’t severe, but on a matter of principal I don’t agree with SM meddling with author’s words*

          *I can understand people in editorial roles helping authors out with rewriting sentences (or complete paragraphs) that don’t explain or express something properly… but to start fudging the author’s words (which results in breaking an author’s opinion) is a no-no as far as I’m concerned (if the author expresses something that is truly out of line with proper web development and is obviously wrong, that’s another matter completely).

          How much will be altered in the next article? SM, editing articles for the purpose of better grammar and explanations is one thing… editing to add your own opinions into the mix is quite another. *wags finger*.

          With all due respect, of course.

        • 11

          To be honest, I must agree with SM that the searchbox is not bright enough.
          If your site has a dark theme then it can be a pain finding the searchbox for less experienced web users. They don’t know that on most websites the searchboxes can be found in the right top corner of the website.

          • 12

            In the case of Design Informer, there was purpose to the search box not being brighter than it is. If you read this article on Design Informer explaining the design you’ll see that the primary improvement in the new design was to help the user focus on the content as much as possible. An overly-bright search box would have taken away from that focus.

            The bottom line is, I don’t think anyone that visits Design Informer has any problem finding the search box on any device, so I think people’s opinions on this matter are just plain wrong, and the search box is fine the way it is.

  6. 13

    Launchlist yes/no switchers a bit similar to the apple mobile interface. I think it’s eyecandy, not a usable thing. A styled checkbox also works for this and more known – understandable.
    Sometimes designers follow trends and not design for function. Websites and apps are functional or even interactive, functional design is more important. And it’s differs for each project. Apple impress the webdesign too, but they don’t create websites (apps impress). The gradient tool was also available for many years ago and the button height wasn’t limited too. These are good things, but sometimes could be better. And it’s a bit ironic if i think about the apple slogan: “Think different”. “Think” would be a good start, for the “Don’t imitate, innovate”. For usability the most important thing is thinking with a creative mind, but in many times we use boxed solutions, because it’s works well.
    I’m awaiting how many websites will integrate the big “load more” content button at the end of the website after facebook and google images.
    Mothers and fathers are the good start (or grand) for usability and not always the masses – improve with aesthetic :)

  7. 14

    I’d disagree with the search box appear on hover example you gave. I suggest this is a bad design because:

    – By default it looks like the search box is grayed out, and by convention, this means “unusable” or “inactive”.
    – It only becomes 100% opaque on hover, but how does the user know to hover over it? Do they hover over all items on the page?
    – The effect is lost on touch devices such as the iPad, because they have no hover ability.

    Because of these points I’d argue the search box is less usable than having it fully opaque by default.

    • 15

      I disagree.

      The contrast that’s evident between the search box and the header background makes the search box perfectly visible. The spacing around it in the header also contributes to it being easy to see and identify.

      Also, many visitors to Design Informer are return visitors. I think the effect is great for the intended audience. I guess the example was subjective, because I didn’t necessarily mean to imply that this effect would be good for any website.

      And although you do make a good point about touch devices, I think the use of whitespace and the contrast make the search box stand out enough, regardless of the hover effect.

      • 16

        The contrast that’s evident between the search box and the header background makes the search box perfectly visible. The spacing around it in the header also contributes to it being easy to see and identify.

        Sure it’s visible, and yes most people probably won’t have any problems with it. However, is it really better than just the fully opaque version? The article claims this effect increases usability, but I’m not convinced, I only see ways it could hinder usability.

        Of course the only way to know for sure is to test.

        BTW other than that, the rest of the article is a great read, thanks!

        • 17

          I agree.

          Making the mag glass change colour on hover would be a better solution than greying the whole thing out.

  8. 18

    In Facebook case original design has advantage: it draws attention to login and signup forms. On the “light” version eyes are left to wander.

  9. 19

    I kinda agree with the search box comments.

    The ipad comment is especially true. A lot of rollover effects won’t be seen on ipad or any touchscreen devices so this sort of thing might phase out.

    However i don’t think having a greyed out box on a design discussion website will be much of a problem for the people viewing the page as they will hardly be web ‘idiots’.

    Alot of design and usability is down to the user that you are targeting. Design informer needs to think about an entirely different sort of viewer than say a supermarket website. One will attract web/design specific people that are web-savvy and don’t need to be guided around the site like sheep. The other will have a more broad spectrum of visitors so will need alot more thought how different people will react.

    Nice article though :)

  10. 20

    I agree with Tim regarding the search hover effect. By default, it’s an inactive element and looks unusable. Hoping that the user would discover this feature on hover is not an effective strategy.

    • 21

      August 10, 2011 Wow! That’s awomese I’m sure a lot of the vitamins stay in the veggies this way tooThanks for the explanation!

  11. 22

    “But we mustn’t lose sight of the fact that every design decision should have significant reasoning behind it.”

    You’re so right! It seems like some “designers” forget about that important point…

  12. 23

    I personally like the search bar rollover effect, even though it doesn’t work on my iPad. Sure, you could argue that because it’s greyed out, a user would assume it doesn’t work – if we’re talking about websites five years ago. People live on the internet, they click, they hover.. if you’re in need of a search on a website, you’re not going to avoid it just because it doesn’t look the way it does by default.

    • 24

      I agree. I actually don’t think it looks greyed out at all, because of the contrast. I think people are being a bit too picky about it because they’re focusing on the hover effect.

      Without the hover effect, it’s easy to identify, and it’s usable. The hover effect, as I mentioned, adds to its responsiveness, making it more inviting and memorable.

      • 25

        I think this is a really interesting discussion. I also think that the enabled/disabled argument is very compelling.

        A similar effect could be achieved by using colors (I’d definitely use desaturated colors…) instead of grays.

        A good designer question is, “how much traffic loss are you willing to tolerate due to your design decisions?” By testing several designs, a designer can find out if they’re losing 10%, 30%, 80% of users. You could even print this screen, along with a screen with the search box not grayed out, on paper, and ask participants how they would find X. That would be a quick and easy 10 second test of the designs you could carry out with users very efficiently using a paper prototype.

  13. 26

    sleek article!

  14. 27

    Great work on this article. I especially like the screen shots that get the usability or design across without have to go to the actual site. I usually find myself reading these on an iPhone and these little touches make the article MORE USABLE! How about that!

  15. 28

    Wow, that was a really good article. I too have noticed a lot of “good” designs look really pretty but don’t really offer anything for the user. It dissent even help establish the brand because they look like every other 2.0 website.

    It also covers my dislike for a lot of critiquing sites the people tend to ignore why the site was made and for whom it was made and judge completely from their own likes/dislikes and only on the aesthetics side of things.

    Hopefully this article can remind myself and fellow designers from getting too occupied with aesthetics over function.

  16. 29

    Rimantas is right about the Facebook website. And the same can be said for Nettuts+ design.

    The separation of the main element from its navigational cues is essential. Any design that clearly distinguishes the website name from the menu is already doing its job.

    And in cases where there are commonly used aspects (like Facebook’s sign in), a highlighted banner that separates it from the remainder of the site focuses your eye onto what’s most important.

    It’s all about the hierarchy of information.
    Website name before menu.
    Commonly used aspects before rarely used aspects.

    Without it, your eyes really are just wandering aimlessly.
    Good design seems natural, it does the work for you.

    • 30

      I agree 100% with you and Rimantas. As I said in the article:

      “The examples above [Facebook and Nettuts+] were more illustrative, and not meant to criticize the designers who worked on them.”

      For the record, I love the design of Nettuts, and I do think the Facebook home page is better than the plain version I showed. Again, these were just illustrative points using a couple of popular sites.

  17. 31

    More than once I have I been chided for my “form follows function” approach to design. Who would deride such a fundamental principle? Newbies, addicts of the latest trend, unoriginal thinkers, and worshipers of the gradient swirl, that’s who.

    I am convinced that anybody who has successfully designed *anything* understands that once a functional framework is in place, aesthetics are applied to transform the product from good to great.

    Thank you, Louis, for injecting a little sanity into the design world.

  18. 32

    Stipping those sample pages of colour and imagery to illustrate their intrinsic usability is a clever idea, point well made. Also, thank you for pointing out Launchlist, very cool idea.

  19. 33

    This is a great article. however I don’t agree with the belief that “anyone can create a beautiful website” Though beauty is in the eye of the beholder, and I admit, I am a little elitist when it comes to what I’d say is professionaly, I can EASILY say that over 98% of the websites I visit are anything BUT beautiful.

    It truly is an art in and of itself to merge a beautiful design into a website. Many novices are surprised Photoshop doesn’t come with a “auto-beautify” button that does all the work for them. :)

  20. 34

    I tend to agree with your general idea—that aesthetics should be carefully marshaled in support of usability—but you make some broad, sweeping statements about how aesthetics and usability interplay while offering no data or research to support your views.

    For example, you say, “Taken at face value, some might argue that the plain version is more usable (if only slightly) than the ‘beautiful’ one.” Where is your data to support this assertion? If people are merely arguing, we’re operating in the domain of opinion. When we’re talking about usability of a site, the performance of actual people, observed using the site, is what matters. Opinion has no standing.

    You also say, “If an element contributes to a website’s overall branding, image or reputation, then it’s safe to say that it contributes to its usability.” Again, I’d like to see some support for that potentially dangerous assertion. In my experience, juggling brand and end-user usability is a tricky balancing act, as branding elements can very often compete with clear calls to action.

    Do you have research or data to back these assertions?

    • 35

      The first statement I made was hypothetical. I said “some might argue…”, implying that it was a possibility that is not unreasonable.

      As far as the branding issue: What is dangerous about the assertion I made? I don’t think there’s anything dangerous about making a website beautiful and usable. I guess the problem is, I’m using the term “usable” in a way that people might not be comfortable with. I personally don’t think it’s necessary to limit “usability” to the actual physical interactions between user and web page. I think the look, feel, and memorability of a site contribute greatly to how usable it is. If you *want* to use something, it becomes more usable.

      As far as my lack of data is concerned, I think the fact that the most successful design agencies in the world (like Happy Cog) create beautiful, inviting, and reputable websites is enough to back up my assertion.

      • 36

        I hope you didn’t take offense to my comment. As I said, I agree with your premise that aesthetics are an important part of usable design, so long as aesthetic choices do not create usability problems.

        From a rhetorical standpoint, though, “some might argue” is a lazy device. If some *do* argue, cite them. If the some you’re referencing is actually you, own your thoughts. Regardless, the crux of my criticism there was that usability is not a subjective matter. If you have two options, you can test them with real and potential users to determine which design better creates the desired result.

        As for the branding comment, I labeled it dangerous because many decisions in support of good branding can directly compete with good usability. To tell people that a good branding decision is necessarily a good usability decision lulls them into a false security and devalues usability as a whole. Modern marketing has been branding extremely well for decades, but those same decades have seen hit-or-miss usability. (Case in point: the Netflix iPad app is branded consistently with other Netflix properties, but is a usability train wreck.)

        All that said, I want to reiterate that I agree with your thesis here. Aesthetics and usability have, at times, been separated into distinct goals, but in reality, they are inextricably intertwined one with the other. Your article would much better support that thesis, however, if you supported your assertions with data. Absent data, this article is just one person’s well intentioned opinion and is unlikely to persuade anyone who doesn’t already agree with you.

        • 37

          No, no offense taken. I understand your view.

          Many people tend to have the “Wikipedia editor” view, that you should never overgeneralize and never use what Wikipedia calls “weasel words”. But in this case, this is an opinion based on my experiences as a designer and developer. No design opinion can ever be labeled as “fact”.

          But besides that, even when I have included “data” in my articles, then you have the anti-data people that never believe any data can be used to support any point, because they feel the studies conducted are too subjective, and aren’t accurate. So, the result is, even with data to back up your point, it’s still just “your opinion”.

          But thanks for your thoughts. I certainly have no problem with being criticized; I’m always trying to improve my writing and look at things from different viewpoints.

    • 38

      I agree with this. While the article is good in general, there is a lack of researched data to back up some statements. Personally, I find more visually appealing sites easier to navigate as there is use of colour, size, contrast, etc. to attract the eyes to the most important functionality. So it is in fact subjective.

  21. 39

    For me this article ended way before it even got started. Like Will above, I also was looking for some actual data to back your words up. For example I totally disagree with the search highlight animation from dimmed to bright. Why would you want to dim the search field in the first place? The answer might be ‘to better suite the layout’ which is the exact opposite of the point you are trying to make in this article.

    The topic is very, very interesting and I would like SM to go much further on this topic in near future.

  22. 40

    I don’t think Dribbble is a very bad idea, actually. I believe it’s ok to borrow ideas for further improvement and changes. If your creativity is at bottom, that is.

  23. 41

    This article confuses principles of visual communication for trends / ornamentation / prettiness where a more thorough discussion of these principles in relationship to style and usability would have been nice.

    Clearly we need to use visual elements to provide hierarchy, rhythm, contrast, etc. How these visual elements are styled is often determined by UX needs as well as branding, trends, designer preference, and a million other reasons. In most of these examples, the visual elements have a distinctly “web 2.0″ style, but despite this, most also serve some UX purpose. Removing the ornament along with the ornamentation adds nothing to the conversation.

    For instance, the “plain” Facebook example suffers from a severe lack of contrast and is far less usable than the original. From a usability AND marketing perspective, removing the gradient and blue bar creates a page where the sign-up section (presumably the most important element) now completes with the other elements in the visual hierarchy, and the “map” illustration is completely blown out. My eyes jump all over that page, not quite sure where to look. Not Usable. A more thoughtful conversation could center around the use of a gradient, rather than a solid field of light blue, to provide that contrast. Is the gradient “style” more usable than the solid color?

    I’ve read reports that the ever-so-trendy “subtle noise” style actually makes webpages/apps easier on the eyes when view on insanely bright iPhones or iPads. Getting to the bottom of this and other “style vs. functionality” beliefs/myths would be a much more interesting article.

    • 42

      Some good points raised here.

      But I disagree about the “plain” Facebook example. In both the designed version and the plain version you can see 3 distinct sections: The header, the map, and the signup form. What else is needed? The whitespace alone is enough to indicate a hierarchy and use the principle of proximity effectively.

      I think the main thing that gets lost in the “plain” Facebook version is the focus on the login form (which actually is the most important element in my opinion). However, in this case, I don’t think the blue design elements would make any difference to a return visitor who knows how to log in, so the effect is somewhat minimal.

      • 43

        Hi Louis, thanks for clarifying some of your design decisions regarding the plain FB example. Both versions are “designed” — the FB log-in page has good bone structure to begin with, so even the plain version isn’t horrible. I just don’t believe it’s AS usable as the version that uses color fields to further organize the content. The whitespace/negative space isn’t that well designed, or, rather, it was well designed for use with fields of color/gradients. The type hierarchy suffers from the lack of organization. I’m a firm believer in the value of good typography to usability. The new FB logo (black/dark on white) begins to compete with the subheads where the original, with white text knocked out of the blue background, keeps the page more organized. Whether this has profound impact on usability is left to be determined. At most, the two versions are equally usable, but the original has the added bonus of conforming to FB’s branding.

  24. 44

    The benefit from having compelling, striking design could easily trump slight usability tweaks. How much are you really going to gain with the blue on white Nettuts version? And it looks terrible – there is push and pull to be considered here.

    Users are generally pretty wise – if they want to fill out a form – they will. Not to short change clean consistent web pages and usability design – but there is a place for design for designs sake.

  25. 45

    Mark @ Alchemy United

    August 23, 2010 5:39 pm

    FWIW, Design of anything (not considered art) exists within context. Typically within the context of the brand the design of X is suppose to reflect and enhance.

    Therefore, my belief is that it is impossible to look at something (without being familiar with what the context should be) and say, “That’s good design.” No can do. “That looks nice” or “That’s pretty” or “I like that color green”., etc. are fine but calling a design good strictly based on visual appeal is a serious faux pas.

    Nice article. It’s encouraging to see this issue raised. That is, good design is not strictly about aesthetics. Thanks!

  26. 46

    Isn’t this the idea behind creating wireframes or sketches first? Build up something usable, with the right layout for the job, then move ahead and add some colors & design to it. This step is crucial, unless you are making a really quick landing page for something.

  27. 47

    this is the worst article you guys have written. we get it, you guys are too good for gradients, drop shadows, and reflections…. Provide some actual critique instead of coming off like the backup quarterback wishing he were actually out there playing the game.

  28. 48

    Many of the things in here are just plain wrong!

    “But we mustn’t lose sight of the fact that every design decision should have significant reasoning behind it”
    – If the reasoning could be to just make it look more elegant, then ok.

    Both the net|tuts+ and facebook example fail completely.
    Net|tuts+ : You want to separate logo from other links and your navigation from the rest of your site.
    Facebook : Your light example makes everything a single piece, making it difficult to scan and quickly establish what is on the page.

    • 49

      Henrik, the Facebook and Nettuts examples were not meant to say that the plain designs were better or more effective. Those were just to illustrate that “eye candy” doesn’t necessarily make something “beautiful”.

      The Nettuts logo (as long as it’s placed and sized properly) is just as clickable and recognizable when it’s a blue text link. Look at the Facebook example again. Even the plain version has three primary sections clearly identified, so the plain version could still work (in my opinion).

      But that doesn’t mean they are more usable. As I mention later, beautiful elements that contribute to branding and intuitiveness (as I think is true of both Nettuts and Facebook) will help a site’s usability and prevent it from just being “eye candy”.

  29. 50

    Great post Louis! I am excited to see this on Smashing of all places, considering how much inspiration you guys feed us. It’s good to know that your opinions aren’t just skin deep. I read a good post by a designer on the west coast talking briefly about this as well. Both posted yesterday. I’m looking forward to hearing more opinions from designers throughout the community.

    Blog post I’m referring to: chriskalani.com/post/998075130

  30. 51

    I’m actually in a phase where I’m forcing myself to come to design from an aesthetic standpoint first. With my geek past, I find it very hard to put any kind of aesthetics anywhere in my designs, even though a) they do have a purpose and b) it doesen’t look like design if it’s all black text on white, unless it’s a very displayable font and very strategic use of whitespace, which in itself is not inherently “useful”.

    So, there you have it. Create, don’t optimise…

  31. 52

    Maleika Esther Attawel

    August 24, 2010 4:19 am

    This is a good article. I entirely disagree with your stance on Dribbble, however. People are people. The platform is irrelevant. People copy. People imitate. And people take ideas from someone else and try to improve on them. Progress through iteration. Actually, I’ve seen some of the highest quality icons released that were born out of the process of iteration, one of Dribbble’s core concepts, as I understand it. People took other people’s ideas, altered, tweaked and fine-tuned them, created a new product and released them to the public.

    Eventuallly, good things can come out of communities like this. And bad things, too, obviously.

    Yes, there are, and always will be, people who “just” copy. But these people did not need Dribbble for that. They’ve likely done that before Dribbble and will do that after Dribbble.

    The only difference there is, is the fact that the whole world can now see how people work, how, when, and why something is copied or isn’t copied. It’s a public and transparent striptease of one’s ethics, or lack thereof.

    Then there is the popularity stuff. Sometimes I wonder whether it might not be a good idea to not attach a name to a screenshot at all and have fellow designers just vote on what they like without knowing who did what. That is something I’d welcome, but I realise with something like that enforced, it wouldn’t be Dribbble.

    In closing, I think Dribbble is one of the best things that has happened to the design community. The concept is fun, motivating, and productive. How effective it is for a designer depends on, well, you know, the designer.

    • 53

      Well said.

      I also disagreed with this article’s stance on Dribble. In a large majority of images on Dribble the application of a design is often discernable, meaning that competent designers wont be appropriating those aesthetics within the wrong context. Dribble is a wonderful source to discover new techniques that can enhance the aesthetics of a site, which when used in the right context can greatly increase usability. (I agree, the aesthetic usability effect should have been mentioned in this article)

      By saying Dribble only worsens the copycat syndrome many designers suffer from is a misguided attack and undermines many designers who use Dribble as a source of correctly appropriated inspiration.

      • 54

        Guys, as you can see from the last paragraph in the Dribbble section, it was not my intention to blame Dribbble or its users for anything. I was just telling designers to exercise caution, which is what I think most responsible Dribbble users are doing.

        I think whether it’s Dribbble or any CSS gallery, the copycat syndrome could exist. But that doesn’t mean those resources are bad. Mention of those things was just a cautionary thing, nothing more.

        • 55

          Even if I understand the side effects you mention, It would be wise for you to mention that Dribbble is a place to show iterative snippets of your work and get feedback in the first place, in case some people don’t know what Dribbble’s about.

          You don’t have to browse much to get that conclusion, You just have to… DO IT.

          Add the instant feedback to the fact that u can understand how’s other people work process and you easily think Dribbble is BRILLIANT.

          Of course you can just think something else, I will not stop you but it would be nice to see the all picture and not just the one it fits best on your article.

  32. 56

    Great article as ever. Something i always try to get across to clients to or employers is that the website needs to first and for most be usable. It also has to have a clear goal set. If those things arent achieved they may as well have burnt their money and time.

  33. 57

    Interesting post, i pretty much agree on this one. I’m more interested in usability, clarity and whether the site is any good or not, as opposed to shallow graphics.

  34. 58

    I’m always baffled at how people tear apart the specifics of an example to tear it to shreds to satiate their own ego and affirm their “rightness” … all while missing the whole point.

    The example for me here being the search box that brightens on mouseover. This is one of infinite examples to describe a sort of design process. To bring attention to design fore-thought and how that little ‘extra’ can help. It’s the same reason buttons or links change on hover. It’s a thumbnail expanding to fill your screen, but not take over it (liquid image lightboxes) … it’s designing a brand that fits on mobile, web, print, and works seemlessly. Easily recognizable. Useful. Has purpose. Not just a pretty button, but a button designed to stand out in its area, contrasted and beautified by complimentary colors and placement. Or a form element that lets you know when you’re focussed on it and automaticaly deletes a default value. Etc. etc. etc.

    Don’t get stuck on any single example above. Try to understand the point of the article before you judge it.

    • 59

      Thanks, Nick.

      Yeah, I think a few people became overly concerned with picking apart the examples given. But they did raise some good points, even if those points are a bit peripheral to the main message of the article.

  35. 60

    I think all visitors want to be treated to some eye candy these days. It lifts the page and can help you stand out.

    I guess the key to success is to make the eye candy serve a purpose and to make it a passive experience.

    A subtly shaded call to action button is a prime example.

    ^RM

    ^RM

  36. 61

    Louis you’ve oversimplified the argument. I was going write a giant rant, but then I realised that would have required more effort than was put into the offending article.

    Here is an example of a good article on aesthetics and usability.
    http://www.usabilitynews.com/news/article5483.asp

    Structure your argument and define it before you launch a tirade of criticisms on random examples.

    • 62

      Another great example of someone who has no interest in reading an article before commenting. Here’s a quote from the article:

      The examples above were more illustrative, and not meant to criticize the designers who worked on them

      So there was no “tirade” here. But thanks for the trolling. :)

  37. 63

    I think for the most part I agree with what you’re saying in your article. I believe in designing with function in mind and not simply reproducing ‘pretty’ designs for the sake of using a certain style. Graphic design for me is about communication and web design is about usability, right?

    Is for instance using a background image considered unjustified because it has no function? Of course not! You could argue a background image would give emphasis to and support the content? Fair enough but some would state that most backgrounds just look pretty because there’s a space to fill! Saying that, I think if you ask most designers why they’ve styled/placed an element in a certain way they’ll be able to provide you with the reasons why. Because you find a search box that highlights on rollover ‘subtle function’ doesn’t mean that I don’t think it’s a pointless piece of CSS3 simply implemented because it can be. Which it is, sorry.

    What I do struggle with is the foundations from which you are arguing… Smashing Magazine offers some great tutorials, free vectors and graphics in a similar fashion as a CSS gallery showcases designs, it’s offering you the opportunity to recycle ideas and styles. No? Go Media had a similar argument in an article regarding cut and paste designers, however their sole product(s) supplies designers with ‘cut & paste’ graphics. Now is that contradictory?

    • 64

      As I understand it, the content of Smashing Magazine doesn’t necessarily represent the exact opinions of their owners and editors. The articles are written by a wide variety of authors who hold different opinions on design and usability. This particular article represents some of my opinion, based on my experiences, and doesn’t necessarily mean that Smashing Magazine abides by all of these principles.

  38. 65

    For Nettuts+, the second may be more usable but it lacks a visible difference between the Home link on top and the category links below, otherwise as-is, they weight the same importance.

  39. 66

    Everyone that is posting on here has to argue about one aspect of the article. Can’t anyone say thanks and nice article?

  40. 67

    Thank You Louis! really liked the drible syndrome part..

  41. 68

    The article has sparked off some interesting conversations. Seeing people mimic design trends on Dribbble is quite depressing, but i like what Maleika said – it’s always gone on, it just seems more apparent now it’s open for everyone to see. Makes sense to me.

  42. 69

    No thanks.

  43. 70

    The article has sparked off some interesting conversations. Seeing people mimic design trends on Dribbble is quite depressing, but i like what Maleika said – it’s always gone on, it just seems more apparent now it’s open for everyone to see. Makes sense to me

  44. 71

    That is to be expected in a long-term, high-risk project like ours. So, we turned to the blogging community for help – and got it! We have published our problems, and the community responded with results!

↑ Back to top