Do aesthetics need to be compromised for the sake of usability?

Gerry McGovern seems to believe designers are more concerned with aesthetics than usability. Do you agree? Is either more important?

As you will know if you have followed me for any length of time, I have great respect for usability expert Gerry McGovern. We work on similar projects and share a similar view of the web.

However, this week I parted company with Mr McGovern over his most recent post “Why web links are calls to action.”

In it he wrote:

It’s hard to read what Dustin writes on this black background; gave me a bit of a headache actually. But that’s okay. I had a great overall experience of the page because its black background communicated an important emotional, aesthetic thing to me.

Seriously, it’s a bit of a pity Dustin makes it so hard to read his stuff because what he has to say is quite interesting.

Later he went on to attack designers for their dislike of underlines.

Isn’t it amazing how many designers hate underline? They think it’s ugly, that it takes away from the look of the page.

Finally he reached the crux of his argument:

Have you read any grey books recently? I mean, have you read any books that use grey text or that have black backgrounds? Or, for that matter, have you read any print newspapers or magazines that use grey text? It’s well documented that it’s harder to read on a screen than in print. So why do designers deliberately create webpages that make reading even harder? Simple, really. Many web designers are more concerned with how the page looks than how it reads and functions.

In essence Gerry seems to be arguing that aesthetics should always take second place to usability. I disagree with this. It depends on the type of site. On some sites it is important to communicate more than information. Some websites are about conveying emotion and feeling too.

As for particularly targeting black backgrounds and underlined links, this is entirely unjustified.

Black backgrounds can (if done right) actually aid usability. Contrast is the issue here, not the colour of the background. As long as there is sufficient contrast a black background can actually reduce eye strain caused by white light, aiding on screen reading.

An example of a black background website with high contrast text

As for underlined links, I again disagree. Although I think it is important to underline links I tend to use border-bottom rather than text-decoration:underline. The problem with the latter is that the line intersects descenders making words hard to read, especially for those with cognitive disabilities. Not using underlines in their traditional sense actually aids readability.

An example of descenders intersecting underlines

The idea that most designers do not care about usability is incorrect. We care passionately. However, we do not always solve these problems in the way that usability consultants would prefer. Instead we try to balance aesthetic considerations with usability. We care both for how the page looks and how it functions.

So what do you think? Do you believe that designers care more about aesthetics than usability? Post your thoughts in the comments.

  • http://twitter.com/simonhamp Simon Hamp

    I absolutely agree with your response. Why on earth can you invert screen colours in accessibility modes on your OS if it makes it worse for poor-sighted users to actually see it that way?

    Silly rant in my opinion. You really need to think before you sound off sometimes… otherwise you end up looking stupid.

  • http://www.kamikazemusic.com Dave Sparks

    “have you read any books that use grey text or that have black backgrounds? Or, for that matter, have you read any print newspapers or magazines that use grey text?”

    A web page should be considered more in the category of a magazine in which there are often black backgrounds with contrasting text. Web pages generally aren’t conveying the amount of text that a book or newspaper would and whilst there are many things that web design can take from print they should be compared seperatly.

    Wouldn’t it be boring if all web sites were black text on white backgrounds?

    Great post!

  • Arturo Molina

    aesthetics and usability never walk one after other. both go together. good post!

  • http://www.norestfortheweekend.com Mark Stickley

    OK, first of all: Do Aesthetics, not Does Aesthetics. Sorry, I’m a terrible pedant.

    I do agree that some designers don’t take usability into consideration as much as they need to, but there’s always going to be the stubborn minority who continue to do as they always have without learning and adapting.

    However, many designers are very aware of things like usability as well as other things that designers traditionally ignored like feasibility, accessibility etc.

    I do agree with you Paul that black backgrounds are fine. Look at the iPlayer! The BBC spend massive amounts on usability testing and so if people had a hard time with black backgrounds I think something would have come up there.

    Links are slightly different… I do think links should look significantly different from the rest of the text, preferably some sort of underline AND a different colour. Think about colour blind people, if the contrast isn’t great enough they won’t be able to distinguish a link from plain text because there is no other visual cue. Likewise for people with full colour vision: if there is an underline only it looks like an underlined part of the normal text.

    Adding an underline on hover only isn’t good enough because if you can’t see it to hover over it the chances are you won’t and you’ll miss it.

    • http://twitter.com/simonhamp Simon Hamp

      Hahaha! Mark, I think you should change your last name to Stickler! ;P

    • http://www.norestfortheweekend.com Mark Stickley

      Hehe yep… sorry, I kind of feel bad now because I think I remember Paul saying it bugs him when people do that :(

  • http://danny-t.co.uk DannyT

    I would leave a comment but the lack of a blue, underlined link has rendered me completely unable to identify the mechanism to do so.

  • http://dingdongnation.com Leslie Straw

    Mr. McGovern’s tightly-spaced wall o’ type site reminds me of our old Market Street (San Francisco) conspiracy theorist’s typewritten manifestos we used to collect. They were hard to read, too.

    • http://headscape.co.uk/people/boag.html Paul Boag

      Hey no picking on Gerry’s site. If we go down that road then it will lead to pointing out the usability problems on my site and I don’t like the idea of that :-)

  • http://www.mariepoulin.com Marie Poulin

    I think its a pretty lame comparison to say “have you read any grey books lately?”

    There are obviously printing costs/limitations associated with printing grey or black backgrounds. Can you imagine the ink transfer on a white text/black background newspaper? and of course ink bleeds depending on the stock it’s printed on, which doesn’t happen with web. Obviously we need to be mindful of contrast…

    There are lots of designers that do not take usability into account, (I find this tends to be the case when print designers design websites) but it’s certainly unfair to generalize, as there are many of us out there who are quite passionate about it.

  • http://www.fiveminuteargument.com/ Five Minute Argument

    To be fair to Gerry, I don’t see anywhere in his article that says “use ‘text-decoration:underline’, and only that CSS declaration, nothing else, including ‘border-bottom-width: 1px’, will do” :) He refers to “underline”, I believe, in the visual sense, rather than the CSS-text-decoration-value sense. I wholeheartedly agree that text-decoration: underline should be avoided like the plague.

    His initial point, about linking the word “here” as opposed to the word “Twitter” is also spot on; even if linking the word “here” gave me a greater clickthrough rate, I’d avoid it for the usability abomination that it represents!

    • http://headscape.co.uk/people/boag.html Paul Boag

      Agreed about the text underline point but I strongly disagree with the comment about linking here. From a usability and accessibility point of view that sucks. In fact all the options suck. The best solution would be to link the whole sentence. That way it makes sense out of context for screen reader users and also for those scanning through links on a page. The word ‘here’ in isolation is not very descriptive!

    • Ben

      I’ve got a little technique I use for making “here” or “more” links completely accessible… I’ll post a blog on it soon ;)

    • http://www.fiveminuteargument.com Five Minute Argument

      Read my original comment, Paul!

      ‘even if linking the word “here” gave me a greater clickthrough rate, I’d avoid it for the usability abomination that it represents’

      Although he doesn’t explicitly say it, I think Gerry agrees too, so that makes three of us :)

  • http://inteldesigner.com Kevin Dees

    @Marie Poulin, Your dead on about the whole ink thing, the point about books was his weakest.

    My site has a dark background, though I’m not really a designer, but as you say the contrast is what’s !important. It takes priory when it comes to accessibility and usability. This is not just about color either; underlines, whitespace, borders, and even images all apply contrast to a website.

    Contrast is hugely important in more than web design too. Music, photography, dance and drama all use contrast in much of the some way.

    Heck, the link getting clicked has a lot to do with the sentence contrast in the paragraph itself; if you read the article.

  • http://www.designbyadmiral.com/ Doug S.

    Personally, I think people need to stop comparing web to print. They’re different. The rules do not apply and there are times when using rules that work great in print on the web will actually cause more problems. Example? Try using 9pt text on a web page.

    Besides, what a lot of people seem to be forgetting is that aesthetics are a part of usability just as usability is one part of user experience. Nothing in web is separated from anything else. Each piece effects the whole. If you focus on pure usability you get something like Jakob Nielsen’s website, which is hideous. If you focus on pure aesthetics you get something like a Joshua Davis website, which tends to be impossible to use. We need a balance.

    • http://web-design-miami.com/ Miami web design

      I agree with Doug, stop comparing web to print.
      The main reason books don’t have black backgrounds is because it would be cost prohibitive to print that way.

  • http://www.finalendeavor.com/ Dawn Chatman

    I’ve been working as a designer for over a decade, and I find I sigh every time I think about that length of time. So much has changed, not just coding & usability practices, but accepted “good design” as well.

    Especially when it comes to the Elitists with all the time in the world to write articles and who make maybe 4 sites a year, (if any, I hear blogging can be pretty profitable). Not to knock boagworld, this my first visit to this site and I like what I see so far. =)

    I spend 3x more time working out usability issues then I do on the actual design, which I have to say, most clients now are still the same as they were in 1999. They want what they want on their little 800×600 monitors with IE5/6, (or dated Mac’s), no matter what you tell them the modern world is using or what the current design trends are. The clients I’ve encountered that live in the present are far and few between and the only reason I’m still doing this today.

    What’s my ranting-point? uhm… …right, I think most designers care about both usability and aesthetics, and we hate it when our designs are crippled by usability, (and clients), but really, what other choice do we have? In the real working industry we have deadlines and project managers that promise clients the world, and designers & programers have to bend over backwards do what they can to fulfill those promises and not go insane. All the while, we strive to make our private blogs/sites live up to all the Elitists do’s & dont’s for the fear we might be branded a bad designer. Because out of the millions of us out there, that matters right?

    Also I’ve seen several magazines with dark backgrounds, rich images, so on and I love them for it! I also agree with DougS that Web Design is not Print Design. Print can do “anything” with zero load-time and has no issues with rendering on different eyes. Well, there are issues, but no groups have sprung up to vilify any companies that don’t make their print pieces accessible to them.

    /end wall-o-text & Happy Friday!

  • http://www.nopun.com Noel Wiggins

    I recently experienced a change or redesign of linked in. and they are currently boasting that they have a “new” design!, They seem to be so proud about how it looks and feels.

    but my reality is that aI was frustrated with the redesign, they moved features and things I used on a daily basis, so when I first noticed the change I was frustrated wondering where my featured went.

    this experience helped me form my opinion that I think usability comes first then the design. What I find interesting about this realization is that I am a web designer who makes his bread and butter from “designing” websites!.

    Thanks and Regards

    Noel for Nopun.com
    a graphic design studio

  • http://deconstructioncode.blogspot.com/ choen

    Is aesthetics it, not usability? I think that they can not be separated.

  • http://businesscards24.com Creative Business Cards

    In my opinion there are many designers that make gorgeous websites but absolutely don’t think about usability. Also many designs are so unusable that even the “experience” that’s used as an excuse loses from this.

    There are some styles and designs that just can’t be usable. I remembered a quote “Good Art Is Interpreted. Good Design Is Understood.” That’s why I think design is secondary after usability, it is the package and not the product.

    On the topic of dark backgrounds I think they shouldn’t be used where text is the primary content, blogs for example. On the other hand dark backgrounds are great when images are the primary content like in photo-blogs and portfolios.

  • Ben

    Great post Paul! I’ve found this to be a growing point of contention between the web designers I know.

    I personally love Dustin Curtis’ site design and find it extremely readable (doesn’t the high-contrast setting used by people with low vision give you a black background?).

    Despite what we all learned about usability and content being king and how the best way to do things is to throw a slab of text on a white background, I’m finding myself increasingly attracted to sites that do the opposite and make an effort with the design while keeping it accessible (eg Dustin’s, jasonsantamaria.com and thebolditalic.com).

    If I can say this without bashing Gerry’s site (as it’s definitely not unique to his site), I find the slab of black text on white background far less readable… when was the last time you read a magazine that was just text on white and nothing else?

  • Oscar Lovnicka

    Dynamic solutions arise out of the play between the aesthetic concerns and the usuability issues in the design process.

    It is when it is treated as window dressing that it loses its’ communicative value. Underlined links were born in a time of limited options…Yes, some sites obliterate the difference in links and normal text but railing against that practice ignores the huge number of examples where alternatives have clearly been sucessful.

    An entire generation of younger people will never recall underlined links being any sort of standard. The diversification of media and content delivery is just going to change all those rules and conventions will cross-populate….look at how many new conventions have made their way out of the mobile phone world into the web.

  • http://twitter.com/beelzebuddha Kevin

    Hi Paul,

    As a usability expert ~and~ designer, I think that good design aesthetics are part of determining the usability of a site. There are so many things that a user brings when visiting a site that it’s impossible to declare concrete “best practices” for usability. Black backgrounds, underlines for links, etc., are all relatively minor things that really depend on the user you are trying to attract. Usability really comes down to the user you want to attract to your site. If you think your user will respond to your aesthetic, then make design aesthetic the most important thing. How do you determine what your user wants? Well, ~that’s~ where the usability and user research comes in.

    To steal a quote from Whitney Hess (via a recent ALA article), “User experience designers are liaisons, not subject matter experts, doctors or any type of magical beings. We don’t have a set of best practices that we can robotically implement, nor do we have all the answers. Our greatest skill is that we know how to listen.”

  • http://www.dlod.org Matt Gould

    Weird .. I was just trying to write a blog post about this, always one step behind … Just wanted to throw my 2 cents in and I say I’m with Paul on this one. There is a growing body of evidence to support the idea that how aesthetically pleasing a thing is has a big impact on how people interact with that thing, in the case the thing being websites. The A List Apart article Visual Decision Making by Patrick Lynch explains this really well. The basic idea is that people are emotional, aesthetics effect emotions, and emotions effect how we interact. Don Norman’s book Emotional Design explains points to several studies that support this idea. You can download a free PDF sample of part of the book from his site which contains some research about the attractiveness of a cash machine that I found particularly compelling.

  • http://www.facebook.com/linolsilva Lino Leitão da Silva

    Hey Paul,
    In this article you talk about aesthetics and usability as distinct factors in trying to focus the users’ attention, but I think that they should go together (just like Simon and Garfunkel).
    Although, through my experience I learned that designers usually have absolutely no idea of what a website does, or how it does it. Maybe it’s because I’ve worked with some poor-skilled designers, but I really think (and I’m generalizing, obviously) that some designers just want to make the website look pretty, but “painting” pretty, never thinking about how the user would navigate through it or what the user might bump into.
    Basically designers and programmers should co-operate (instead of banging heads with eachother)  in order to provide the user with a pleasant, and at the same time smooth, experience.

    • Anonymous

      Although I am not sure I agree with the idea that designers only care about
      making their websites look pretty. However, I do agree that design and
      usability goes hand in hand. The only reason I separate them out is because
      it helps me to concentrate more fully on each. When I am wireframing I only
      need to worry about information hierarchy and don’t get distracted by
      aesthetics.

      Equally when I am working on aesthetics I don’t have to think too much about
      usability and visual hierarchy, instead focusing on branding and
      personality.

      That said, you still need to look at the design as a whole and not just
      as separate components.

  • Anonymous

    Paul, sorry, I deeply respect your work and have been a happy follower of boagworld for a long time. But I have to agree with Gerry on this one, I have to confess I find the readability in your “blockquote” extremely difficult to read – even though it looks really good. So going back to your argument, I do think usability should come before aesthetics. 

    I don’t mean, however, that emotion is not important. I just don’t agree that aesthetics necessarily convey or create emotions. I have been to beautifully designed websites, filled with slick fonts and a pretty flash effects… but I hated most of them simply because I could not do what I wanted.

  • bgrggfe

    The Louis Vuitton Handbags are sold with higher price in china that other countries, because china has the very high inprot taxes of handbags,so many chinese always 
    want to buy a Cheap Louis Vuitton Handbags and they will go aboard and buy cheap items from Louis Vuitton Outlet ,buy the others who can’t go aborad will find a Louis Vuitton Online out.

Headscape

Boagworld