Showcase Of Beautiful But Unusable Websites

Advertisement

“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 Style431 as well.

Visual Clutter

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.

creativewithak3

Marc Ecko4
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.

markecko5

Content Of6
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.

7

There Studio8
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.

9

Loading Issues

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 Light10
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.

gringo11

Design Sul12
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.

designsul13

Nicola Walbeck14
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.

nicolawalbeck15

Navigation Issues

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.

EContent16
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!

econtent17

Prism Girl18
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.

Prismgirl19

On Toyota’s Mind20
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?

northkingdom21

Theologos22
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.

theologos23

Archiving/Category Issues

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 Titled24
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.

selftitled25

Vanalen26
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.

vanalen

Grip Limited27
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?

28

Kyle Tezak29
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.

30

Visibility/Scrolling Issues

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 Casual31
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.

realcasual32

Lego Click33
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.

legoclick34

Journey to Zero35
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.

journeytozero36

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

faub38

Uniqlo39
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!

uniqlo40

Bio Bak41
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.

biobak42

Summary

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.

Related Articles

(ik) (vf)

Footnotes

  1. 1 http://www.smashingmagazine.com/2010/05/25/bizarre-websites-on-which-you-can-kill-time-with-style/
  2. 2 http://www.creativewithak.com/
  3. 3 http://www.creativewithak.com/
  4. 4 http://www.marcecko.com/#/
  5. 5 http://www.marcecko.com/#/
  6. 6 http://contentof.com/
  7. 7 http://http://contentof.com/
  8. 8 http://www.therestudio.com/
  9. 9 http://www.therestudio.com/
  10. 10 http://www.gringo.nu/projects/cokelight-worldflavours/#/world
  11. 11 http://www.gringo.nu/projects/cokelight-worldflavours/#/world
  12. 12 http://www.designsul.pt/
  13. 13 http://www.designsul.pt/
  14. 14 http://www.nicolawalbeck.com/#
  15. 15 http://www.nicolawalbeck.com/#
  16. 16 http://www.econtent.hu/flash_version/index.html
  17. 17 http://www.econtent.hu/flash_version/index.html
  18. 18 http://prismgirl.org/
  19. 19 http://prismgirl.org/
  20. 20 http://demo.northkingdom.com/ihuvudetpatoyota/index_en.html
  21. 21 http://demo.northkingdom.com/ihuvudetpatoyota/index_en.html
  22. 22 http://www.theologos.gr/en.html
  23. 23 http://www.theologos.gr/en.html
  24. 24 http://www.selftitled.ca/
  25. 25 http://www.selftitled.ca/
  26. 26 http://www.vanalen.org/
  27. 27 http://www.griplimited.com
  28. 28 http://www.griplimited.com
  29. 29 http://www.kyletezak.com/
  30. 30 http://www.kyletezak.com/
  31. 31 http://realcasual.com.ua/
  32. 32 http://realcasual.com.ua/
  33. 33 http://www.legoclick.com/#/
  34. 34 http://www.legoclick.com/
  35. 35 http://journey-to-zero.com/#
  36. 36 http://journey-to-zero.com/#
  37. 37 http://www.faub.org/two.html
  38. 38 http://www.faub.org/two.html
  39. 39 http://www.uniqlo.com/us/
  40. 40 http://www.uniqlo.com/us/
  41. 41 http://bio-bak.nl/
  42. 42 http://bio-bak.nl/
  43. 43 http://www.smashingmagazine.com/2010/05/25/bizarre-websites-on-which-you-can-kill-time-with-style/
  44. 44 http://www.smashingmagazine.com/2009/09/24/10-useful-usability-findings-and-guidelines/
  45. 45 http://www.smashingmagazine.com/2009/02/18/9-common-usability-blunders/
  46. 46 http://www.smashingmagazine.com/2007/10/09/30-usability-issues-to-be-aware-of/
  47. 47 http://www.smashingmagazine.com/2009/10/08/15-common-mistakes-in-e-commerce-design-and-how-to-avoid-them/
  48. 48 http://www.smashingmagazine.com/2009/12/08/principles-of-effective-e-commerce-search/

↑ 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.

Advertisement
  1. 1

    I wish I worked on Marc Ecko’s site :) …meaning I would have gotten some major $$$ just to play in flash.
    Now I understand how huge agencies who ‘specialize in flash’ stay in business….they get ego-suckers for clients.

    -5
  2. 52

    Definitely a great list! Would be very interesting to check back with them in 6 months to a year to see how many have made upgrades or improvements based on these observations.

    -4
  3. 103

    Some great examples of sites with issues. Thanks for sharing.

    -4
  4. 154

    most of the sites work as intended for me, and are pretty good.

    2
  5. 205

    Yep I agree with all your usability points but considering i have no requirement for these sites, its quite nice to look at pretty things once in a while. Although then they might be best as graphic art pieces rather than usable (or unusable) websites.

    3
  6. 256

    Some good examples of how not to design a website.

    A criticism here though, considering how slow some of the sites you’ve linked are perhaps having links open in new tabs would have been a better way of doing this.

    Yes, i know you can right-click but that not the point…

    -1
  7. 307

    Really? You never guessed to press the floating ball that constantly follows around your mouse on the prism girl site? That didn’t occur to you? Have you used flash before? Or played a video game for that matter?

    4
  8. 358

    Interesting finding in UNIQLO!!

    -2
  9. 409

    Great post, if some of these sites had made the little tweaks Dan and Glenn suggest they’d be so much better.

    Only thing I’d disagree with is the LEGO, the fundamentals of lego is it’s a building block – you start at the bottom and build up. So the bottom up site design is a no-brainer for me and the red scroll bar makes it reasonably obvious you are at the bottom of the page.

    I think there some hang up in the comments on ‘user experience’, for me this talks about usability within exepriential sites, it’s like documentaries vs art house movies. If you want to know how much a Toyota costs you’re obviously not going to find it on a site called ‘On Toyota’s Mind’

    2
  10. 460

    Well first i have a normal internet connection, and i don´t have to wait much to see many of the sites, second the websites listed here are mostly personal, creative or experimental websites, the main function is to entertain more than inform, usability and functionaltity here can´t be compared to informative websites or websites made for everyone, these website are target specific, some have technical problems (coding) more than usability problems i guess. For example i love self titled navigation and grid limited, why? because they innovate, they get out of the box, and they inspire me and others to go far and create new things, to rethink over common and granted ideas and that defines the target as the creatives and studios wordwide, not common people (non creative), and why not? What’s the problem? Don´t put everything on the same plate. I can create something that don´t follow rules or standards and show that experience to other artists ou simple curious out there, to share and exchange ideas. Rules were made to be broken, we just need to know why we’re breaking them :D

    PS:. One more thing, like it or not we’re all here discussing usabillity and other questions related to user experiences because of them, so i think they manage to make some revolutions after all. They got our attention :D

    2
    • 511

      I agree. Most of the sites above are campaign or agency sites. Their strategy is to be perceived as different and creative. However, I must admit that these sites lack a wealth of content and genuine functions, which are two critical factors in sustaining traffic in the long term. Also, I could put on a Jakob Nielsen’s hat, and criticise any interface elements that are unconventional and unapparent. Nonetheless, despite all the negative aspects I could raise, I have to say that, if their main strategy is to send a sweet brand message through a visual-rich interface experience, they did well. Their visual executions are interesting enough to intrigue users to click around. Of couse, as a user, if I have a specific purpose in mind, say buying something, I would certainly find all the distractions frustrating. And I think the author came from this angle – which I also agree.

      It seems that many comments relate unusable websites with Flash. I have to disagree. You can certainly create unusable websites with web standard technology. In fact, I suspect that many people will try to achieve high level of interactivity with web standard technology in the future – just to prove that they are part of the latest HTML5 experimentalists or have the technical capacity to do so. I think is more correct to say, it’s more likely to build unusable websites with Flash because it has no limitations. When web standard technology has no limitations and little cross-browser issues, it will be the same.

      0
  11. 562

    Worthwhile article, but I don’t completely agree.

    These “rules” of usability were set by computer programmers…who know as much about design as designers know about programming.

    What they don’t get is that a website has to be memorable – if you’re looking to get a brochure designed and visit, say, 20 designers’ sites which all follow usability rules set forth by Google, they’re all likely to look the same. Nothing stands out (btw, anyone looked at the author of this article’s site, piccsy.com? Very bland, imo).

    So what the web ends up with is a whole bunch of sites reduced to the primitive level of newspaper design, instead of really good, memorable stuff – which all the above sites exhibit.

    A case in point:

    My own site, which has blatantly been designed to please the people who program Google. As a result, it does extremely well in search. It is extremely usable, by their standards. Lots of people see it. But I don’t like it.

    But if I went back to my old site, which I and most of my visitors liked more, far fewer people would see my portfolio, and I’d get less work. So of course I follow usability “rules” as set forth by know-nothing programmers.

    Makes me want to puke, the level of control that mere technicians have over the web. But that, unfortunately, is what we’ve got to work with.

    2
  12. 613

    I was thinking about the point of some of these sites, and frankly, there is no point to some of them other than to come and look (i.e., advertising for a product).

    Much like you wouldn’t skip the intro scene on a movie (because you are there to watch a movie), why would you skip the intro scene on a site (like the Toyota one) when you aren’t necessarily there for content. If you are there to look at artistic implementations, then what’s the problem?

    2
  13. 664

    i think this post is kinda old school. Modern websites have their own new unique way of presentation for their info to create impression. I believe different people have different perspective. Infact, im just agreed on “Web customers don’t like to wait”.

    2
  14. 715

    How about SmashingMagazine dot com ? It is shame how much it lags, and WHY it lags. (Open YSlow or Firebug|Network, to find the answer, why the site is able to lag in every modern browser, including Chrome and Opera). What is most sad, is the fact that named site is promoting good web practices. Hypocrisy at its best.

    10
  15. 766

    Dustin Lucier DiTommaso

    December 24, 2010 7:12 am

    Hahaha. The Best part of the article is the lead in “Create Free Stunning Flash Websites” AD. I thought it was the title photo. Didn’t realize it was an ad. Priceless.

    0
  16. 817

    I’ve never seen the Coca-Cola Light page before. Nice find!

    -1
  17. 868

    I’ve never been so disappointed in Smashing Magazine! For a site that embraces beauty and inspiration, this is a very narrow-minded article. I agree with some of the earlier commenters: We don’t need every site on the web to be homogenized clean-form functionality. That’s not even the POINT of half of these sites. I was flicking through some of the Flash sites and absolutely loved the creativity, and the way they played with expectations. And half the time the author said a site was difficult to navigate, I found myself navigating without a problem at all. Maybe it’s a matter of “This site doesn’t function the way my textbook says a site should function! Curses! I’m going to write an article lambasting this site!!”

    Sour grapes. Long live those who do so outside the box.

    3
  18. 970

    I want to make two comments:
    1. When we talk about usability and navigation we need to define the audience. It’s all about persona!
    2. Considering comment #1 I made Grip Limited site is an example of GREAT design and meaningful usability targeted for designers, UI developers and business people who think out of box. (And they did succeeded!)
    Have you tried to play video there? It plays right there on a page without popups or navigating to a new page. Want to see content from the same category? no problem: just use the scrolling wheel of your mouse or drag content vertically. This site would be ideal for iPad and other tablets (moved away from Flash).

    Basically, Thank you for featuring Grip. Too bad in wrong category :(

    0
    • 1021

      I agree with you Alexei. Grip limited is quite usable, fresh and attention grabbing! In fact, your website is so usable that your quick links feature (on the top of the page) is redundant. I didn’t need to refer to it at all because I found my way through your website very comfortably.

      0
  19. 1072

    Raitis Grandovskis

    February 14, 2011 8:56 am

    To put UNIQLO for US market in this list is silly. In US they have one shop – in Soho. Website probably is “localized” from UK.

    0
  20. 1123

    Another site that would fit perfectly into this list is the new Cirque du Soleil site – every single page requires a long load time and even pressing the back button takes load time – but in terms of form its quite nice.

    0
  21. 1174

    Good article!. You need to understand or think like the interviewer when you are the person being interviewed for a job. Likewise, you need to think like a future user of your website while you are designing one(hopefully for future users!!). That’s why understanding user psychology and their threshold for cognitive tasks is imperative to good design, and this leads us to the term “user experience”. Every creator is extremely attached to their creation, which is why we have usability studies to help critique the functionality of a website. Assuming that you are a smart seller, you make a website to showcase and attract customers (users), not because you want to please yourself!!

    Beauty and art aside, you need to understand that it’s the buyers market and that you need to grab attention and sustain it within a matter of seconds. The websites listed in this article do the former but fail miserably to do the latter..

    One exception is Grip Limited. It is both visually appealing and extremely user-friendly.

    0
  22. 1225

    bio-bak is fun

    2

↑ Back to top