Menu Search
Jump to the content X X
Smashing Conf Barcelona 2016

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. upcoming SmashingConf Barcelona, dedicated to smart front-end techniques and design patterns.

Showcase Of Beautiful But Unusable Websites

“Form follows function” is a widely accepted — albeit controversial — principle that most designers in a variety of disciplines have adopted since its inception at the turn of the 20th century. On the web, we commonly refer to function as usability which is the ease of use and navigation of a website in order to achieve user’s goals.

In this showcase we present websites that sacrifice usability for beauty and present issues related to clutter, loading, navigation, archiving or visibility. Unfortunately, although the sites featured in this showcase are visually appealing, they are quite difficult to use. By studying such examples, we can learn what mistakes we can avoid in our designs and how not to strive for strong aesthetic appearances on the account of usability.

You may be interested in the showcase of Bizarre Websites On Which You Can Kill Time With Style281 as well.

Visual Clutter Link

Where do I look? Where do I click? What do I do? Visual clutter is one of the most serious issues a designer can present to an audience. Not only is the user unlikely to achieve the desired goals (because it’s hidden in the clutter), chances are they’ll just leave out of frustration before they do anything.

Creative With aK2
Navigation overload! Not only are we unsure of where to look, we’re unsure of what’s clickable! Having to scan around the design with the mouse is not helpful for usability. And that’s if, and only if, you get past the load screen with no load progress bar. In addition to that, it takes a while until one has figured out that the welcome screen has to be closed to enable the actual in-site navigation. The inexistant scroll finally lets potentially interesting content disappear under the frame of the browser window.


Marc Ecko
Marc Ecko is an extremely successful businessman with countless ventures and he definitely wants us to know it. The problem is, he’s got so much business we don’t know where to start, provided you get used to the almost erratic horizontal scrolling feature! Getting the information you are looking for will take quite some time.


Content Of4
Even after reading the “About” page and randomly clicking links, we’re still not sure what this page actually is about. Our best guess is a portfolio, but due to link clutter and no solid explanation of what the navigation does, we’re left confused.

There Studio5
Half of the circles that look clickable aren’t; the other half jumble into a new rotation if you drag and drop them. Granted, the movement makes sense for the philosophy of the company, and there isn’t too much clutter, but it took us a minute to figure it all out and that’s 58 seconds too long. If you feel the need for more bubbles, click and drag on the empty space to add more to the confusion.


Loading Issues Link

As bounce rates increase, and time-on-sites decreases web-wide, it is becoming increasingly important to grab people’s attention immediately. By the time all of your effects load, chances are your user is back on Google or Facebook looking for the next cool site. Loading times, skip buttons, missing instructions on navigation and many other issues are all subject of considerations here.

Coke Light
One of the worst things you can do as a Flash designer is force an introduction on your audience. A long intro and no skip button means this site is likely to be abandoned by most of its visitors before they get in. Add an unclear “Call to Action” and no visual navigation indicators and most people will never encounter the beauty this site has to offer. Long transitions back to the home screen waste time the visitior could have spent successfully “travelling the world”, searching for the numerous balloons hidden within the map.


Design Sul
We’ve never seen so many load issues on one site. Multiple load times for different elements, re-loads once you’re in to the site core, and no clear indication that loading is finished make for an extremely confusing and difficult to use website. Actually, discovering how to reach the content takes some time, what it all has to do with milk cartons is a different question.


Nicola Walbeck7
A big loading wait-time at the beginning of the site is excruciating, but sometimes manageable once you enter a beautiful, usable website. Scratch that here, because once you get in, you’ll have to wait again and again for each individual image, forcing you to stare at blurred photographs. A better idea would be to use loading bars on the image to indicate that the image is loading. If you are on a broadband connection, then it’s fine, but if you are not, you start to get nervous very quickly. Add the fact that there’s no prominent back button and the experience could be a bit frustrating.


For content/category heavy sites especially, navigation is extremely important. Imagine driving without a map, or the grocery store with no aisle indicators. Navigation tells us where to go and how, or — in these cases — tells us very little. You might consider taking a compass with you, these examples make getting lost easy.

After quite a long load, this site requires the user to click “enter”. Okay, we’re in. Unfortunately, although there is a quick-menu, it does not draw attention and the user is required to blindly scroll over images to see categories. Navigate with caution and carefully look out for navigation buttons!


Prism Girl9
Unusable sites have actually developed conventions. When we don’t see clear category navigation on a beautiful site, we poke around with our mouse looking for the category links. This site is beautiful (and complex) enough to poke around for an hour, but you’ll probably never guess you have to click on the mouse trailing icon to enter. Other than impressive design work, this site does not have much to offer.


On Toyota’s Mind11
Slow load time leads to an unclear ‘Call to Action’, no visually clear navigation as well as a hard-to-find back action. Our question: What crossed Toyota’s mind when conceptualising this site?


No button to skip intro. No visually clear navigation. Slow transitions. And here’s the kicker, a separate page to mute the music player. When visiting the site using a fast connection, the animations make the visit even less enjoyable.


Archiving/Category Issues Link

Your site loaded fine, it’s clear what you want people to do, you have a solid navigation, but once the user begins moving around, they can’t figure out your category structure. When you want meat, you go to the deli, not the dairy aisle. Some sites, unfortunately, get it wrong.

Self Titled13
A hidden quick menu and unclear category organization make this site difficult to navigate. The actual information one gets when entering a category is rather scarce.


Image slivers make-up the category composition on this site, giving us very little information as to where/what to click on. If you’re new to the site, you are likely to spend a while until you find what you were looking for.


Grip Limited16
The website does tell you to “click and drag” but finding this instruction amidst what looks like a typographic poster is something we suspect many people weren’t able to do. Realizing this might be a problem, Grip did create an “Open Menu” bar at the top of the page, but what are the chances you’re going to look there?


Kyle Tezak18
Another example of an extremely talented visual artist who has great design work, but a small usability problem makes the user experience less enjoyable. There is no actual navigation on this page, just a floating header and illustrations of Kyle’s work. To find the designer’s contact information, you need to click on the “Information” link in the upper right corner. Using more traditional wording would improve usability: e.g. putting an e-mail right there or naming it “Contact information” or adding contact information at the bottom of the page would help. A nice example of how one little detail can improve site’s usability.


Visibility/Scrolling Issues Link

A site may be uncluttered and have great navigation, but if the magnification is off, or scrolling is dysfunctional, no one is going to see it. Visibility issues can quickly turn to invisibility issues as users navigate away from your site.

Real Casual
This site is invisible until you start hunting with your mouse, at which point different areas of the screen appear. A long roll-over hunt is followed by long load times, during which fade effects additionally take your chance to get a good look at content.


Lego Click
Scrolling is conventionally top to bottom or left to right, but this site starts at the bottom which is confusing. Add to that an inability to retrieve closed elements, and several other minor issues, and you get an extremely frustrating (but beautiful) website from Lego.


Journey to Zero20
This site is rather large, but you wouldn’t know it. It starts magnified with no suggestion to drag scroll, leaving the user wondering where all the content is. If you scroll too far on the other hand, you might end up in empty regions of the site, making it hard to get back to the content. Very beautiful website that is difficult to use.


Faub22 (currently offline)
Another beautiful site that starts magnified and does not let you decrease the magnification, or suggest dragging for navigation.


Uniqlo presents what looks like a beautiful and usable online store. That is, until you’ve added 10 items to your cart only to find out there is no check-out. Turns out it’s not a store at all, just a wishlist! A truely frustrating experience for every consumer willing to spend!


Bio Bak26
Another drag navigation site that’s just too big for its own good. This is one of our favorite sites from a beauty/having fun perspective, but it does an awful job of presenting the design agency from a usability perspective. Using the mouse wheel by chance let us discover that the site has more to offer than what is visible on the first glace.


Summary Link

Design for function and communication. If your website ends up beautiful in the process, you kill two birds. Design for beauty only if the primary function of your site is to convey beauty.

Be wary of visual clutter, especially in navigation and on landing pages. Designing with too much clutter can make an audience unsure of how to use your site. In the worst case users won’t be able to load your page in the first place. Web customers don’t like to wait. Ensure that your site has a fast, clear load that conveys an easy understanding of how long it will take and when it is finished. This minimizes your risk of losing visitors to other sites in the meanwhile, keeping them occupied with joyous anticipation.

Once users arrive, you want to direct them to certain pages on your site. Always make clear what and where your navigation is, and what each element of your navigation does. Don’t make users guess or poke around to find an answer. On big sites, with lots of content, archiving and categorization is especially important. Make sure people can effectively navigate your archives. Try to make your menus self-explanatory, saving the users time, letting them invest it in effective exploration of your site.

Visibility is a huge issue most people don’t consider. In addition to designing for minimum resolutions, make sure your audience can clearly see the content you want them to at all times. If you’re designing to sell, make sure you’re designing to sell. This is especially important as your goal is to promote purchases. The more difficult you make it to buy your product, the less likely you’ll make money.

(ik) (vf)

Footnotes Link

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10
  11. 11
  12. 12
  13. 13
  14. 14
  15. 15
  16. 16
  17. 17
  18. 18
  19. 19
  20. 20
  21. 21
  22. 22
  23. 23
  24. 24
  25. 25
  26. 26
  27. 27
  28. 28
  29. 29
  30. 30
  31. 31
  32. 32
  33. 33
SmashingConf Barcelona 2016

Hold on, Tiger! Thank you for reading the article. Did you know that we also publish printed books and run friendly conferences – crafted for pros like you? Like SmashingConf Barcelona, on October 25–26, with smart design patterns and front-end techniques.

↑ Back to top Tweet itShare on Facebook


Daniel Eckler is the founder of Piccsy, an image bookmarking site for creatives. Glenn Manucdoc is the creative director of Piccsy.

  1. 1

    I agree with Lazlow. Just from the screenshots these websites look horrible (except a few but), then again. Upper management often like to screw things up. Reminds me of The Oatmeal’s “How a web design goes straight to hell” to be honest.

    • 2


      November 25, 2010 8:13 am

      Sadly, I agree. Sucks people are disliking your comment just because you’re honest. I knew what to expect coming here. “Beautiful but Usable” seemed to suggest they were atypical but still UX-friendly. Just from the look of the screens I am inclined to disagree. They seem way more design-centric.

  2. 5

    Hopefully the designers/coders of the sites mentionied above read this article, and the word gets to them. Way to go Smashingmag!

    • 6

      Yup. But agency sites aren’t for regular visitors or even for clients. They’re for potential hires. These people often understand and appreciate the quirky navigation. Horizontal scroll FTL! But whatever, I had fun.

      • 7

        Maybe u didn’t understood the direction os those websites. Most of them didn’t suppose to be portals, blogs, with narrow and flat navigation.

        They are mostly focused on experiences.

        Also, some of them have coding problems and not navigation or usability problems.

        Sorry but it was bad post…

        • 8

          Nicolas Franz

          December 4, 2010 7:59 pm

          Can’t agree with you, Web Design is based on “USER” experience. I have no problem to design a website with an innovative experience, and I love to pass some hours looking for Inspiring Websites on the net, but when we start to forget who’s the one that will be exploring it (by the way, the user).. then we are not talking anymore about design, but art.

          Then we are bringing life to a ‘piece of art’, and to many interpretations under million perceptions.

          • 9


            Web Design will never evolve if everyone continues to blindly follow this pop rhedoric of usability trumps all.

            Form should follow function, but did you stop to think about the creators function before you pick these sites apart based on your personal opinion?

  3. 10

    A really great collection, as ever. Form should *never* trump function.

  4. 11

    Great list. Can we get a showcase of sites currently using modern JS libraries and HTML5.

  5. 12

    Isn’t that basically like every showcase of ‘beautiful’ sites on SM? :snark:

  6. 13

    But the creators of these websites will be happy or not for this report?

  7. 14

    Great post! But does your advertiser who is promoting Flash sites know it looks like an idiot in context?

  8. 15

    Awesome compilation! This is a perfect study of where web art and web design are very different, and while I agree that many of these are pretty to look at and interesting conceptually, they truly fail at user experience. I would love to see a list of sites that find the happy medium – breaking out of the grid while still maintaining utmost usability.

  9. 16

    Personally, I’m glad there are sites like these out there. They have their place and it’s not as if EVERYTHING has to follow a set of rules ;)

    • 17

      I agree Liam.

      Bio Bak and Journey to Zero (and all the other work by Iamalwayshungry) are a couple of my favourite sites. They may be harder to use than your average grid-based wordpress theme but they offer an entertaining and imaginative experience. Surely there is a place online for this, or are we aiming for total homogenisation?

  10. 18

    I have to admit, I’m disappointed. Not in the article (it actually features some interesting sites), but in the author. One should be clear on what one writes of. It doesn’t take a genius to understand that many of the websites in the list are what are called ‘experience sites’. Sure, those too could have a clear path to follow, but they don’t necessarily have to. Best example: the Toyota site. Now, if this was Toyota’s main site, the critique would be in order. But it’s not. It’s an ‘experience site’ to offer, well, experience. Now, one could argue that the experience should, as well, be clear and simple and, quite frankly, dull, maybe even? I disagree. Sure, I love a site gone through the endless jaws of usability experts (whom have a wonderful ability to organize chaos, I tip my hat for you), but only if I need to find certain information ASAP. So called ‘experience sites’ are for fun, for promoting, for sitting back. For both, the visitor or the customer, and for the maker or the company. These are the sites where both can ‘get crazy’. Why can they? Because offering certain information isn’t necessarily top priority, it’s experience, emotion, fun. Why should they? Because they offer experience, emotion, fun. A nice change for dull companies and designers with no imagination who think “Buy now!” signs in side-columns make visitors want what they’re offering.

    I agree that some of the sites featured in the article made my head spin for wrong reasons, but there’s a whole bunch in there which where meant to, I’m sure, and glad they did. It was a nice experience, for a change.

    So thank you and no thanks.

    • 19

      Experience sites? You must have just made that up, because I’ve never heard of the term or concept before. How about stupid sites? For the bloated ego. Some of these sites aren’t even beautiful. Most are a bit silly, especially considering the load times, and IMO simply make the company/artist or whoever it is behind the product or brand, look bad. If you want to make a real ‘experience’ then you should just hire a director and make a music video, TV commercial or better yet, a movie.

      • 20

        I’m sorry you’re not familiar with the term ‘experience site’, but that does not mean I made it up. Please, go ahead and Google it. I’m sure you’ll find some Ubisoft experience sites in the first 10 answers. They’re actually titled as ‘experience sites’. You could also go and check out award winning North Kingdom’s portfolio. You’ll find that theres lots you’re missing, I’m afraid. The world of interactive design spreads well beyond grids and sidebars.

        • 21

          This article is about sites which deliver a poor or fail at user experience. How could you possibly argue, for example, that a site like the first one (Creative with AK) is any good at user experience? Take for instance Mark Ecko’s site. Even when you zero in on the actual about page (which isn’t easy to find), it is written as an interview which is sort of hard to follow. As an end-user I would rather just read a couple of paragraphs on who this person is. I will admit, I have never heard of this guy before. After visiting his site, I tried to find out who this person is and what he does, and after about 5 minutes I left the site. I still don’t know who he is or what he does. And I read the about page. I don’t feel like ever returning to his site, because the first impression I got was that it was clumsy to use and secondly, whoever this guy is, he immediately looks and sounds very full of himself. Does that sound like good PR and usability to you? Experience, perhaps. But not both. NO WAY.

          Shouldn’t good experience be enhanced to include good usability? That’s the central point you are missing. If you want to label everything that is mystic and out of this world as experience and art, well then I can’t argue with that. That sort of definition can apply to almost anything. Beauty is in the eye of the beholder.

      • 22

        Go back in your cave kid.

    • 23

      Thank God. One person with some imagination and the willingness to explore and experience. I completely agree with your term “experience sites”. There are so much wonderful printed material out there that requires exploration in order to appreciate it. Some people can tear themselves away from the usual rush of ‘functionality! efficiency!’ etc and experience it. Others immediately tear it up and throw it away. Guess it’s the same with the web, or probably even worse.

    • 24

      I must say a new analysis, today we are so much into the functionality and usability….
      The list breaths a lil fresh air into that.

    • 25

      I totally agree.

    • 26

      Experience sites may refer to a “good experience” or “bad experience” in these cases: a terrible one… you have no point

    • 27

      Just because you name something different doesn’t mean this article is wrong. “Experience” sites or not, the term was coined to excuse bad user-design in favor of showcasing an agency/medium/channel’s “glam” factor. Much the same way people excused away poor user-design with “Splash Pages”.

      Call it what you want, heck, call it “Intentionally Poor Usability Sites” if you want. The fact remains, it showcases that the designer is really good at making a site that looks good but is a headache to use and when you’re a business, having users stop for a second in awe at your flashy-lights and sounds doesn’t get them to fill out the lead form you didn’t see before bouncing and going to a site that couples good design with good direction.

  11. 28

    From the thumbnail, I’ve always wanted to love Grip Limited… until landing on their site and trying to do something.

  12. 29

    Moeed Mohammad

    November 25, 2010 8:48 am

    Flash, flash, flash, flash, flash, flash, flash. I think there is a trend.

  13. 30

    Thanks for a much needed article!
    The web site for Le Gavroche, Britain’s poshest restaurant, takes an agonising 1’45” of mind-numbing white-screen boredom to load on my 2Mb connection and once you get there, its hard to see why they used Flash anyway.
    And, in my experience, all architect’s web site are guaranteed to be absolute stinkers.

    • 31

      Maybe there’s something wrong with your connection if it takes so much time to load. It took me 2 seconds. Really.

      • 32

        Thanks – appreciate your comment.

        I don’t want be be pedantic, but I get a subliminal animation at 15″, which I didn’t count, then a white box until 55″ retrying it this morning and my speed is 2.35Mb. That’s on Safari with Click-to-Flash enabled (and clicked, obviously)

        • 33

          It took me 3 seconds to enter their site. But I agree – it should be done in flash.

  14. 34

    In the UK the shopping cart for Uniqlo works perfectly, and we have successfully purchased from it many times, so perhaps in the US there are other issues at work, rather than poor web design.

  15. 35

    Great title for a blog post! And I’m glad none of my website creations is shown ;-)

  16. 36

    Once users arrive, you want to direct them to certain pages on your site. Always make clear what and where your navigation is, and what each element of your navigation does. Don’t make users guess or poke around to find an answer. On big sites, with lots of content, archiving and categorization is especially important. Make sure people can effectively navigate your archives. Try to make your menus self-explanatory, saving the users time, letting them invest it in effective exploration of your site.

    And while we’re at it, all movies should have a clear storyline which is told from start to finish. There shouldn’t be any visual effects that isn’t 100% necessary to convey the story. All actors should have a clear personality that is easily, and immediately, grasped by the viewer. Dialouge should be clear and consistent, the viewer should never have to think about if the character in the movie meant something else/more than what was actually said….

    Bah, BORING! This is the same “let’s hate on flash and everything else that is mildly experimental” stuff that feeds the stupid flash vs html5 war. Get over it! Let people have fun! Stop being so phreakin’ BORING!

    • 37

      I don’t think movies and websites are the same thing.

      When watching a movie, you go into it knowing that you are going to invest a certain amount of time for plot development, etc. You are purposely turning over the next couple of hours of your life to the director and actors. Most important is the fact that you are going there to be entertained.

      I would venture a guess that most users visiting corporate or shopping websites are not going there to be entertained. They are looking for something. Information, or a product, perhaps. I don’t know why a business would want to make it difficult for them.

      With the bazillions of websites out there fighting for our attention, if someone can’t find what they are looking for quickly, they may move on to the next site. They don’t have to, and may not choose to, sit for two hours trying to understand the navigation the way they will try to understand a movie.

      With that said, if a designer knows his or her audience, and, based on that knowledge, chooses a purposely chooses a confusing navigation (or other usability issue), then it might work.

      But if business is the name of the game, why risk it?

      • 38

        I think the main problem with this “business” argument is that it’s so black and white. Many websites are not THE single point of entry for a potential customer. And not ALL websites have the purpose to sell. Take the Toyota site mentioned above. This isn’t we’re talking about, this is one (of maybe ten at the same time) ongoing campaign, which highlights ONE message that Toyota want’s to convey to the customers; Toyota is eco-friendly.

        Now, they could just have written that on the website, but who would have spent more than 5 secs on that page. And who would have taken their word for it. So they make this “experience”, that is basicallty all smoke and mirror, I agree. But it serves a purpose, and adds value, to Toyota as a brand. Anyone who denies this, should take a marketing course and read some analysis on the effect of actual campaigns.

    • 39

      Yeah, and actually it’d be lot better if movies would simply feature a narrator telling you the plot with no emotion, showing a black screen. You get the info, right. So everything should be okay. Who cares about emotion anyway?

      I agree, boring. Really loved this comment. I thank you : )

  17. 42

    November 25, 2010 9:16 am

    Very Dangerous piece. These are beautiful sites, but hopefully the designers/codes do not get annoyed by it. I am sure they understand the design process and the demanding needs of clients “ideas & suggestions”, and they way you sometimes have to bend over backwards for them.

    On the sites above there are lots of user-ability issues and long load times but its good to experiment. Right or wrong people are always learning.

  18. 43

    This is definitely a big issue… For the most part it’s better to have a really plain usable site then a good looking site. The object is to inform not impress. To impress is a display of selfishness in the sense you’re bragging about yourself to win the client. To inform shows that you are thinking of the customer and “THEIR” needs. ;)

    • 44

      I think you need to look at the intended audience for a particular site too.

      Most sites listed here are NOT informational at all. They’re meant as fun experiments or pieces of art. Almost like a video game for some.

      So clarity sometimes is counter productive. We want to lead the user through the experience and have them think, solve problems.

      If this drives people away from the experience, perfect! That’s probably a person who is too stoic to have appreciated it in the first place.

  19. 45

    I read smash a lot and one thing I consistently see is the writers and audience seem to not be able to differentiate between a site whose purpose is to provide information, and one whose intent is to provide an experience.

    Let’s take our site: Grip limited. A Cannes winning ( and a lot of other awards I might add) site. The site has recieved praise for it’s unique but intuitive navigation. It has been recognized by the Hoelfer foundry as a “typographical tour de force”. The designers of this site also designed and

    Not the different approach to navigation and information layout. We consider out audience and the experience we believe they want to have. The result is award winning effective interactive design. Design that drives business. Design that inspires instead of restricts.

    Not everything needs to look like a pretty instruction manual.

  20. 46

    re: grip website. Yes, it was really hard to click and drag my mouse around the screen. I totally see what you mean.


↑ Back to top