Overview:
I was recently asked to identify two popular websites - one that I felt had a terrible UI, and another with an amazing UI - and to give my explanations for why. Since it gives you insight into the way I think about User Experience, I've decided to share my answers here.
I was recently asked to identify two popular websites - one that I felt had a terrible UI, and another with an amazing UI - and to give my explanations for why. Since it gives you insight into the way I think about User Experience, I've decided to share my answers here.
Which popular website do you think has a terrible UI and why?
Dictionary.com
A Dictionary and Thesaurus lookup site is such a clearcut and relatively simple tool to create, and yet the business needs of Dictionary.com have clearly overtaken the site, distracting the users from what they're trying to accomplish and making the core tool almost unusable. Yes, you need to design a product that has some viable revenue model, but there are far more clever ways to do this than plastering the pages with advertising and making it hard to find the core features. The core problems with the site boil down to an unclear and confusing informational hierarchy to the pages, manipulating the user to look at ads in their search to find the content they actually came for in a way that is frustrating for the user.
Dictionary.com
A Dictionary and Thesaurus lookup site is such a clearcut and relatively simple tool to create, and yet the business needs of Dictionary.com have clearly overtaken the site, distracting the users from what they're trying to accomplish and making the core tool almost unusable. Yes, you need to design a product that has some viable revenue model, but there are far more clever ways to do this than plastering the pages with advertising and making it hard to find the core features. The core problems with the site boil down to an unclear and confusing informational hierarchy to the pages, manipulating the user to look at ads in their search to find the content they actually came for in a way that is frustrating for the user.
I'm working on the (safe, I think) assumption that the main thing a user wants to do when they arrive at Dictionary.com is to look up a word's definition, synonym, antonym, or similar. While there is a fairly large search bar for that purpose in the header of the homepage, it is an odd location for a core feature and looks too similar to a site-search tool, meaning it's easy to glance past it. The core content / tool for a site belongs in a more featured spot, not buried (even at such a large size) in the header. Instead, there are two prominent ads (banner across the top and a Flash ad in the right column), another line with a self-promotional ad for Writing Dynamo, and some featured stories in the location where you would typically find the "meat" of the site. The left column, with its arguably interesting word-related content, is about the only thing they have done right on this page - it's in a reasonable place, doesn't overpower the main content, is relevant to the site and will probably delight visitors who are "word-nerds" at the very least. For the homepage, I would suggest they take a note from most of the airlines who have finally started making their homepages more usable by de-cluttering them and gearing them toward the most common use cases.
Now, try looking up a word either from the homepage or by arriving from a search result (they rank highly and are featured by Google as a "more info" link when searching for "define X"): Much like the homepage, the thing that the user wants most is the thing that is hidden on the page, though in plain sight. The banner ad pulls focus, being visually heavy, but users are relatively immune to banner ads and may just glance over it, so it's not the worst thing they've done. The place where one would expect the definition (or thesaurus entry, etc.) to appear is in a central column that starts with the word the user wants defined -- aha! I've found the the word! But not the definition. The large, bolded word I've looked up is immediately followed by a block of text ads. Finally! Near the "fold" I see the word repeated (smaller) and followed by its dictionary entry. But I have to look carefully to find it because its visual weight (font weight, size, surrounding whitespace) is so light that it practically disappears on the page. It's so far down that page that, on a smaller sized screen, it requires scrolling to read, and the lack of whitespace between it and the block of text ads above it make it hard to distinguish the two. While there are again some interesting and useful ancillary features like a list of nearby words, synonyms, related words, slang, etc, when you distract the user so much through intrusive advertising and poor layout that they can't easily accomplish what they came to your site to do, they won't stick around long enough to notice those features.
Now, try looking up a word either from the homepage or by arriving from a search result (they rank highly and are featured by Google as a "more info" link when searching for "define X"): Much like the homepage, the thing that the user wants most is the thing that is hidden on the page, though in plain sight. The banner ad pulls focus, being visually heavy, but users are relatively immune to banner ads and may just glance over it, so it's not the worst thing they've done. The place where one would expect the definition (or thesaurus entry, etc.) to appear is in a central column that starts with the word the user wants defined -- aha! I've found the the word! But not the definition. The large, bolded word I've looked up is immediately followed by a block of text ads. Finally! Near the "fold" I see the word repeated (smaller) and followed by its dictionary entry. But I have to look carefully to find it because its visual weight (font weight, size, surrounding whitespace) is so light that it practically disappears on the page. It's so far down that page that, on a smaller sized screen, it requires scrolling to read, and the lack of whitespace between it and the block of text ads above it make it hard to distinguish the two. While there are again some interesting and useful ancillary features like a list of nearby words, synonyms, related words, slang, etc, when you distract the user so much through intrusive advertising and poor layout that they can't easily accomplish what they came to your site to do, they won't stick around long enough to notice those features.
Which popular website do you think has amazing UI and why
Hipmunk.com
I chose this site because I find it to be an ingenious and way of presenting data in a new way that is easy to grasp quickly, if not instantly, and very functionally designed to the key tasks their users are trying to accomplish. But what really put it over the top for me as a choice was hearing that my Dad LOVES Hipmunk! He thinks it's the greatest thing since sliced bread and wanted to know if I'd ever heard about it because I "should absolutely use it too!" Now that's a heck of an endorsement - he's not just using it as his primary tool because it works for him but is also raving about it to others. UX designers talk about making an experience that's delightful to their customers, and this is evidence that they've succeeded.
Now, what specifically have they done right? I'll just go through some of the key screens, starting with the homepage.
The homepage is simple and to the point. People can use Hipmunk to search for flights or hotels. Perhaps the user has been to the site before and done other searches... they can re-run those most recent searches through a quick link on the right, including enough details for them to know the content of the search request, without having to re-enter it. One of my favorite, "small-details" features on this page is that when you select the departure date from the calendar (mouse click) you can then quickly select the return date without having to click into the return date form field or use the keyboard. And if you get the dates wrong, or don't realize what's happening, it toggles between the two so you can easily adjust the date range without having to type anything or click into the date fields. Yes, there are some cases where it won't do what the user quite expects, but in my experience using the site, it has typically done the "right thing." I know I'm not a "typical" user, but I suspect that to be true for many if not most users. User testing would provide better data than just my personal experience.
Hipmunk.com
I chose this site because I find it to be an ingenious and way of presenting data in a new way that is easy to grasp quickly, if not instantly, and very functionally designed to the key tasks their users are trying to accomplish. But what really put it over the top for me as a choice was hearing that my Dad LOVES Hipmunk! He thinks it's the greatest thing since sliced bread and wanted to know if I'd ever heard about it because I "should absolutely use it too!" Now that's a heck of an endorsement - he's not just using it as his primary tool because it works for him but is also raving about it to others. UX designers talk about making an experience that's delightful to their customers, and this is evidence that they've succeeded.
Now, what specifically have they done right? I'll just go through some of the key screens, starting with the homepage.
The homepage is simple and to the point. People can use Hipmunk to search for flights or hotels. Perhaps the user has been to the site before and done other searches... they can re-run those most recent searches through a quick link on the right, including enough details for them to know the content of the search request, without having to re-enter it. One of my favorite, "small-details" features on this page is that when you select the departure date from the calendar (mouse click) you can then quickly select the return date without having to click into the return date form field or use the keyboard. And if you get the dates wrong, or don't realize what's happening, it toggles between the two so you can easily adjust the date range without having to type anything or click into the date fields. Yes, there are some cases where it won't do what the user quite expects, but in my experience using the site, it has typically done the "right thing." I know I'm not a "typical" user, but I suspect that to be true for many if not most users. User testing would provide better data than just my personal experience.
Flight search results.
The search results page for a flight search is a really terrific evolution from the standard flight search results pages on other sites. Instead of a never-ending list of hard-to-compare, text-only data (flight times, airlines, connecting cities, prices, etc. usually just sorted by price), Hipmunk gives you a visually easy-to-compare, graphical representation of the flights and sorts them by a combination of factors that are, presumably, most important to their target users (Agony = price, duration and number of stops). They'll even throw in train options, if available. And if their "Agony" sorting doesn't align with your needs, there are other sort options at your fingertips. You get a chance to choose individual legs of your flight, but can maintain a handle on pricing the whole way through the purchase process. They've really figured out a way to present the data in a way that's not just interesting and novel, but really makes the decision process significantly easier for the end user.
The hotel search results are equally inventive. Allowing the user to visually grasp where their many hotel options are located and to see what types of activities are nearby really empowers the user to make decisions based on their needs and desires. Typically, the hotel research process involves manually comparing information that is often found a click away, on detail pages for hotels, but it's almost never compiled in a way that makes it quick to switch between and easily see the differences between your options. Research has shown that we humans can only hold seven things (plus or minus 2) in working memory at a time[1], grouping things together gives us a shortcut to handle more than that, and fewer things is less of a cognitive load. In the case of travel planning, it often requires considering and even juggling multiple priorities, wishes and desires; the map and overlay representation allows the user to do this more easily by taking some of the information and chunking it into more glance-able pieces. In this way, they can narrow down their search more quickly than sorting through a list of hotel info and trying to keep track of the Yeses, No's and Maybe's. If I know I want a medium-priced hotel in a part of town with great restaurants, but fairly close to the conference I'm attending, I can overlay a heatmap to get a better understanding of the city layout, pick out the blue dots that indicate the price-range I'm interested in, quickly compare the average ratings of my options and then click through to more information about the hotels that meet my needs. I don't have to continually remind myself of where the neighborhoods are that I'm interested in because that information is "saved" visually outside of my brain, displayed as a heatmap.
Hipmunk has bucked the trend and built web *tools* rather than data sites, distinguishing themselves from every other hotel/flight search site out there, which all look about the same. The tools they've built are useful, easy to understand, and have really simplified the research and decision making process for travel planning.
[1] http://en.wikipedia.org/wiki/The_Magical_Number_Seven,_Plus_or_Minus_Two
The hotel search results are equally inventive. Allowing the user to visually grasp where their many hotel options are located and to see what types of activities are nearby really empowers the user to make decisions based on their needs and desires. Typically, the hotel research process involves manually comparing information that is often found a click away, on detail pages for hotels, but it's almost never compiled in a way that makes it quick to switch between and easily see the differences between your options. Research has shown that we humans can only hold seven things (plus or minus 2) in working memory at a time[1], grouping things together gives us a shortcut to handle more than that, and fewer things is less of a cognitive load. In the case of travel planning, it often requires considering and even juggling multiple priorities, wishes and desires; the map and overlay representation allows the user to do this more easily by taking some of the information and chunking it into more glance-able pieces. In this way, they can narrow down their search more quickly than sorting through a list of hotel info and trying to keep track of the Yeses, No's and Maybe's. If I know I want a medium-priced hotel in a part of town with great restaurants, but fairly close to the conference I'm attending, I can overlay a heatmap to get a better understanding of the city layout, pick out the blue dots that indicate the price-range I'm interested in, quickly compare the average ratings of my options and then click through to more information about the hotels that meet my needs. I don't have to continually remind myself of where the neighborhoods are that I'm interested in because that information is "saved" visually outside of my brain, displayed as a heatmap.
Hipmunk has bucked the trend and built web *tools* rather than data sites, distinguishing themselves from every other hotel/flight search site out there, which all look about the same. The tools they've built are useful, easy to understand, and have really simplified the research and decision making process for travel planning.
[1] http://en.wikipedia.org/wiki/The_Magical_Number_Seven,_Plus_or_Minus_Two
