Categories

A sample text widget

Etiam pulvinar consectetur dolor sed malesuada. Ut convallis euismod dolor nec pretium. Nunc ut tristique massa.

Nam sodales mi vitae dolor ullamcorper et vulputate enim accumsan. Morbi orci magna, tincidunt vitae molestie nec, molestie at mi. Nulla nulla lorem, suscipit in posuere in, interdum non magna.

Posts by (1)

Don’t Make Me Think – Usability on the Web

This book is a classic for anyone working with web design. Nowadays the mantra for building great websites is “Content is King!”. Nonetheless a solid design and good usability is essential for any website’s success. If Google’s search engine were not so intuitive and straightforward to use, it would not nearly be as successful. When is a website successful you ask? That really depends on your objective and your target audience. If your website is supposed to sell products for example, an easy purchasing process will determine your success. But what is usability exactly? For many people it’s just another of those web-related buzzwords along with user experience, user journey and click path. In it’s essence, usability is how well something can be used. How easily can something be used (by users) to perform certain tasks and achieve specific goals?

Most likely each one of us has used a website before. We search through Google, we socialize through Facebook and we shop through Amazon and eBay (I know, I know, not everybody, but you get the picture). We probably have favorites websites that have a slick design or a super cool mouse-over functionality that lets you navigate through 12 levels simultaneously. It is important to distinguish between different kinds of website design. On the web, there are conventions – things that have worked several times before and are therefore quickly adopted by users. But who wants to do what everyone else has already done? Innovation in web design is a slippery slope. If you create an interface that is immediately understood by your users and gets the job done even quicker, great! If not, it’s good to stick to some of the known conventions that will make your task designing a website much easier.

For some of these conventions, see here.

An example of a website with great usability is www.amazon.com. The complex hierarchy of the products Amazon offers is packed away into several navigations (horizontal bars at the top, left side area with mouse-over) that somehow still manage to let you find what you’re looking for. In addition, Amazon’s most powerful tool, the search, is prominently placed at the top of every page. An example of a website with a poor usability is http://eil.com/. It’s not just the cluttered design and unflattering use of colors, but also for example that the navigation changes completely when you click on something.

The most important piece of advice I can give when design for a good usability is put yourself in the user’s position and also always relate to your own experiences as a web user. Think about what works well for you, what feels intuitive and right, where would you click to look for something.
Finally, use the comments to share some examples where you have experienced good or bad usability. Can you notice a trend which websites are better or worse at usability (search sites, product sites, corporate sites, communities, etc.)?

697 comments to Don’t Make Me Think – Usability on the Web

  • vtj205

    I read this book a couple of years ago, when I started working as a web designer/front end web developer. Since my background is in graphic design I had a tendency to focus more on the appearance of the site rather then the usability. This book was a good reminder of what I need to make sure I do/don’t do in order to develop a user friendly website.

    A well-designed menu is a very important feature in developing a user friendly website. Here are some examples of what I believe is good and bad usability.

    Good:
    1) http://www.paypal.com (Having submenus below only 3 main menus and separating the “Personal” accounts from the “Business”, helps keep the site less cluttered. This makes it very easy to navigate).

    2) http://www.roku.com (keeping the major menu buttons in the header and the less important ones in the footer is a good user experience technique).

    Bad:
    1) http://www.qcresource.com (the navigation needs to be redesigned. You can’t even see all of the submenus when you hover over “Lab Essentials”. Also the site is not very visually appealing)

    2) http://www.vlsc.com (The major issue with this site is also with the menu. The designer could have probably combined some of the pages together. I doubt the user will ever scroll all the way down to see all the 50+ navigation options.)

    A couple of years ago, I redesigned the site of a coffee farm. The old site was very outdated with horrible user interface. In the old site, each image link opened in a separate tab, the submenus were hidden below the banner, the language selection was only available on the home page and barely visible, many links were broken, and I can go on and on. Below is a link to the old site and my redesign of it.

    Old Version: http://www.sarpa.com.br/old_site
    Redesigned Version: http://www.sarpa.com.br

  • Alexandra "Diracles"

    In terms of usability for websites we must remember the common human errors that we have on a day to day basis outside of the internet. An average person has the opportunity to meet many new people each week because of their job or living in a well populated urban center. Photographic memory aside, we have a hierarchy of things which stick with us and a hoard of details which we either dont pick up on or was not of interest to us enough to keep at the forefront of our conscious thoughts. Meeting new people one tends to remember them more distinctly based on how many times they have seen the person, how significant they are to their daily routine, and any other stand out details that their new encounter may contain. With websites we need constant repetition, inherent meaning in the items or information we are searching for, and a slew of stand out details to solidify the particular experience into our memories.

  • sjb521

    In my opinion some of the worst website usability is found on restaurant websites. This also speaks to the “content is king” idea, which I think can’t be so easily dismissed. If someone’s motivation to do something is high enough, they’ll give it a shot. I have a fairly strong desire to try new restaurants, so I’ll deal with a certain amount of bad usability if I feel it’ll be worth it.

    That “certain amount of bad usability” isn’t a whole lot though. Many restaurant websites seem intent on hiding their content (by which I mean the menu, the hours, the phone number etc.) behind long Flash intros, image galleries of their dining area and slideshows of their “story.” They are ignorant of the fact that so many of their potential customers are probably coming from a mobile device where Flash is either awful or nonexistent and phone numbers that aren’t in HTML text can’t be tapped on for instant dialing. I know it’s wrong to assume that everyone uses the internet the same way I do, but I know how many restaurants I have not patronized simply because their website was a mess, and I wonder if anyone else has similar experiences.

    (Please excuse the gross generalizations I made in this comment. Obviously not all restaurant websites are bad. One of my favorite restaurants in my previous habitat of Boulder, CO, was called Zoe Ma Ma, and they have what I consider to be the best restaurant website of all time – http://www.zoemama.com/ – simple, small, fast. The phone number, address, hours and even a bit of the menu are right there without even having to scroll. And the food is great too!)

  • Maria Paula

    Flash is definitely death for web. So I think maybe theses annoying intros will come to an end (unless they start making it with html5…)
    Regarding usability, each time more, web designers will have to think in two different scenarios: mobile and desktop. If you work on a really cool site and forget to check how it is going to work in a mobile phone, then you have a problem.

    I really hate completing forms (and I think everybody does). Chrome has implemented an auto-complete function, but even though it is useful, I think it is strange that my computer can have such personal data saved in the browser. Every time it auto-completes I get happy because I don’t have to do it anymore but I feel uncomfortable too.

    Amazon was very clever creating the 1-click shopping. They record your method of payment once and with a single button you can make a order. In this way, they can make people shop faster and without annoyances.

  • Alexandra

    Thanks for the comments everybody. I can definitely relate to what you are saying, especially about restaurant websites being so bad. When I can’t find a number OR a menu I often wonder what those sites are there for… On the other hand I actually do feel like some websites manage to pull off the large stage (i.e. large amount of space is taken up by a gallery with photos or similar) homepage, but these then usually also have prominent clear links to what the user really needs.
    There is a lot of wisdom in the advice to stick to convention when designing a website, and I completely agree with your example Allie. Our actions online ARE similar to what we do in the real world and having continuity and repetition helps us learn, be it algebra or maneuvering a website. Interestingly enough, I wonder how people in data visualization think about this. (Note: I’m a fan of awesome data visualization). Of course designer who focus on data will say they are trying to make large data amounts more accessible and easily understandable, but I have talked to several academics, researchers and analysts that say that at the end of day they need downloadable data in a well structured spreadsheet and not the 3D HTML5 website that you navigate by joystick. I guess it again boils down to the question of who is the target group and who are you designing for? Attractive and comprehensible data for the public or accessible and functional data for the analysts that use the data?

  • Nancy

    Thinking about experience design. I agree with all your suggestions of good websites that enable you to do what you want to do as fast, as easily as possible.

    But–what if you want to ‘deliver’ an experience on line that feels like an experience.I don’t mean watching a movie ( a pale substitute for being immersed in a theater…but it serves)..
    Museum websites often try to mimic their halls… but you’d have to be an idiot to think that clicking into a hall is the same as going into a hall. Or a gallery? Or a theatrical experience?
    Any one know of any?

  • Sergio "quote" Majluf "end quote"

    Hi Alexandra, what do you think about the book’s validity today?

    When it was written and published, not only the web was very different; “we the users” quotes intended in the same way as Krug refers to the user – “The actual Average User is kept in a hermetically sealed vault at the International Bureau of Standards in Geneva[…]” – are really different.

    I agree with you in that the relevant part is (and always has been) who we are designing for. However, and although this is one of my favorites books on web usability, the conventions part has changed over the last few years. There were no real touchscreen interaction conventions pre-iPhone, and that didn’t prevent people from easily learn to use it. What do you think?

  • Sonia "Li"

    Yes usability in terms of restaurant websites are quite important, but I think these days an “image” of what the restaurant would be also plays a key role in their “fancy” flash websites. One can argue that they can use a different way to convey the same idea, but I also think that it is very important to know how to market a business, in this case, a restaurant. I am in no way a connoisseur in restaurants, nor do I go to a restaurant that often, but I do understand marketing and branding a little bit, as someone coming from a fine arts background and having been self studying how a business can market itself towards certain types of people.

    When I do feel like going to a restaurant and looking up places to eat, I tend to not want to go to places that do not have nice graphics on their website. In fact, I tend to not go to places that do not have a website at all. As a consumer, I do a lot of research. I also avoid places that look seem like certain types of places that I would not want to spend my money at. The website is a business card in itself; it is disposable because everyone has a business card these days, but to make it stand out is an art form. This website is a restaurant I frequent at, and I like how it is very clear on the first page with links of menus. I also like how un-fussy it is, just like the restaurant itself.

  • Patricia

    I think that, as many of you pointed out, there are some things that translate well into a website from our actual physical lives. If you think about it, the objects that we use everyday dictate (or should dictate) the way we use them by how they are designed. In the same way, I think that the best websites are the ones that eliminate the amount of clicks a user has to make to reach the end product. The start up page should be visually interesting, yet easy to navigate. Take, for example, Google. Google is the only site in the world, in my opinion, whose web design should be allowed to be so simplistic. Why? because they are a search engine- all you need to access them is to search for something.

    The old version of bit.ly used to look a lot like the Google website, until they recently changed it. But my point is, like the first person who commented on this (there is no name)- I love the example of Roku Streaming Player and Paypal as website that showcase good usability. They both provide a great visible menu, that is not overwhelming.

    I think another important condition to consider in order to create website that have good usability is to never assume that your user knows more than they do and never forget that users have a million buttons to click on, a million sites to go to— why should they click on yours?

  • Alexandra

    Sergio, to answer your question (I apologize for the delay in response): I do not think this book is outdated (yet). I do agree with you that there are users nowadays that almost exclusively use the web via a tablet (and therefore touchscreen) and this should have the consequence that many conventions are not valid anymore.
    But…
    a) the majority (and as far as I know this is still a large majority) uses keyboard and mouse to interact with the web.
    b) conventions with reference to layout and visual concentration (ie. where does a user look first, what is visually most prominent for a user) does not varying that much depending on whether a touch screen is used or not.

    The book mainly concentrates on conventions like these and I therefore do not think it is outdated. There are, on the other hand, enough assumptions made in the book that are based on user behavior as it was “back then”. With more and more people using varying interfaces to access and use the web, conventions based on these will be changing. Actually, let me correct myself: ARE changing. In my experience this applies to the general approach taken in designing websites and plays into Nancy’s comment of “designing the experience”. For example, the term ‘browsing’ has received a whole new meaning in the age of tablets and touch screens. We are currently at a point where design for the web is being redefined. Unfortunately I don’t have any examples for amazing experience design online but as Nancy mentioned, especially websites from events or art institutions are currently exploring this field. One example that I personally think tackles this divide between information and experience quite well are online car configurators and showrooms. (check out some of the German automotive manufacturers (Audi, Porsche, Mercedes, BMW) for example).

  • Ben Kauffman

    The John Peel Archive (famous BBC DJ, discovered many UK punk and rock bands) is a great example of a website that tries to mimic a real place, and does so successfully.

    http://thespace.org/items/s000004u

  • Alexandra

    Awesome example Ben!
    Thanks for sharing.

  • Fang-Yu

    I read this book before, and thanks so much you shares your experience. I agree “Content is King”. Gorgeous things can only catch users for a while, content can keep user forever. You let me thinks about ” Responsive Web Design”. I believe that nowadays the web designers need to pay more attention on flexible / fluid layouts to let it adapts to almost any screen. Because there are many horrible different resolutions in mobile and phone. It is tough. How to meet the needs of all users ? That is a big topic.

    Related link

  • Yuliya Parshina

    Thank you so much for these helpful tips! (Vanessa???) It helps summarize usability issues and successes I experienced but couldn’t put into words

  • Yuliya Parshina

    As someone who gets easily flustered over long lists and poor organization, I really appreciate good, clean web design (and get unreasonably angry at overwhelming websites with flashy pictures). During my brief affair with interactive art ten years ago (before I abandoned it for 3D animation) I began to learn web design with Flash. Around then, most cutting-edge developers were making experimental interfaces that forced the user to roll-over a bunch of abstract objects in order to find a basic nav bar. The market seemed saturated with these “exploratory” experiences that required a seven minute investment to get to a body of text. By then, one forgot why they were clicking around in the first place.

    The simplification revolution is a truest blessing to happen to the web. I am so grateful the fancy exploration trend did not grow in popularity. Otherwise, I’d have to quit the interwebs for good!

  • jyp323

    This post is very interesting. Thank you. I am not very familiar with web stuffs, so I may not carry a web-designer’s point of view. So, the reading and comments about the web design layouts are very new to me. Since I am at ITP, I hope to learn more about web design, and yes, we should definitely create more user-flexible dynamic web. People have become so accustomed to interactive and dynamic virtual place at web. Layouts of websites change so quickly. Indeed, we are living with changing and revolutionary technology. Web takes big parts there. We all should definitely embed innovative technology in our design when we are making web projects.

  • Jay

    To stir the pot..

    Not mentioned in this conversation is type – or solid typography. More and more, that the websites I’m most likely to spend time on are the ones with well spaced, well chosen typefaces. With the slow trickle of high-resolution screens, its time for type online to rival type in print.

    this website, for instance. does not lend itself to an immersive reading experience….. But! there are sites that do:

    A sense of what could be
    The Svbtle Network

    However, looking at websites for inspiration re: type is boring. Instead. Dig up some old, rare books, or find some hiding in the city.

    from the Special Collections of the PPL

    Another subject I’ve been thinking about RE: UI is a strict, sparse approach to content. for example. we’ve got an array of design-approaches for watching/finding movies. Netflix, Hulu, iTunes, Vudu, and so on. All present basically the same thing. Horizontally oriented pseudo-shelves (to varying degrees). Some sites depart from this and fail horribly (TED talks and PBS Video Online come to mind)

    But, to me, the most _useful_ site, back when I had netflix, was
    Instantwatcher

    at work, more often than not, I found myself lobbying for design that looks and works like the link above… almost anti-design.. If content is king, than Peter Norvig is Louis the XIV.

    And as far as immersive websites go… AML pointed me towards the NFB’s interactive department.. with projects like insomnia… that offer a strong synthesis of content, presentation, and context (up, alone, in front of the computer, late at night).