At the last LA UX Meetup, the LA Times Media Group gave a presentation of how they were using information and news to display visually to their web visitors for a better user experience.

One of the ones that caught my eye was a NCAA Tournament Bracket Map that showed how far each team had to travel if they were to go to the championship. North Carolina having to travel almost 4 times less than any other team is a definite advantage.

Another interesting one in which they said was one of their most popular pages was a Los Angeles County Homicide Map. Information such as gender, race, day of the week, area and cause of death can be sorted, filtered, and searched on. Why it is so popular is anyone’s guess. Perhaps people use it to figure out where not to live. As one person mentioned to me at the table I was at – this was indeed the killer app.

Both show how one can use information in such a way visually that can engage the User, while also very useful.

In The Elements of User Experience, Jesse James Garrett wrote that “users don’t visit Web sites to experience the joy of navigation”. It’s true – they don’t. They just want to get to the information they are looking for, which makes information architecture really important to the User experience. The use of Search is one such way Users try and find what they are looking for. Anyone who has done a search on a website has probably had a not so pleasant experience where they got back a totally different set of results than what they expected or nothing all at. Websites have experimented with various different ways to improving search, whether it is through an Advanced Search, adding filters, or providing additional suggestions.

Google Suggest is one innovative way which assists Users in getting the results they want. If you are not familiar with it, Google Suggest provides frequently searched phrases based on the letters or words in your query as you type and even lists the number of results. This feedback is given pre-search, increasing the chances of a successful search, rather than trying to improve on the results after the search.

Yahoo! has also gotten into the game by adding their own Suggest feature on their homepage. Unlike Google Suggest, the matching letters are also highlighted. Users have the ability to turn the feature on and off as well.

The good folks at Apple have taken things one step further and incorporated pictures in their search. Besides the added benefit of the image, they have also separated the results into different categories and provided a short description. These extra bits of information can make a world of difference to the User in finding what they want. It is clear, organized, and Users have a better idea of what to expect if they use the suggestion.

The Apple website is an example of a good User Experience design. I had not seen this feature on their site before because I never had the need to search, as I could find what I wanted through their simple navigation menu. Sites that have many products for sale could really benefit by incorporating a similar search mechanism. The possibilities are endless. At the same time one must be careful not to diminish the User Experience by over-doing it. In a world where Users are accustomed to searching with Google and expecting correct results, websites can do a great service for their Users by making search as simple as possible, while at the same time aiding and guiding the User to provide results that are accurate and relevant.

If you have ever used Amazon, you certainly have noticed how accurate (and somewhat scary), their recommendations are. Based on your past purchases, ratings, views, searches, and other data, Amazon uses a large data pool of user shopping behavior to offer recommendations by comparing the history of other users and find what patterns resemble yours.

While browsing through the site for some books, I noticed that they present recommendations many different ways. Whether this is just a usability test or intentionally, I’m not sure. The following is a look at some of the various ways Amazon recommends books and the pros and cons of each.

Items you Own

Found in your personalized Amazon section, the list uses your past purchases for their recommendations. The look and feel is similar to Amazon’s site when searching and looking for a product. The difference is the ability to add the product to the cart or your wish list directly and on a full screen, I’m only able to see a little more than 3 recommendations while the normal search shows as much as 5.

Pros:

• Tells you why it is recommended (past purchases)
• Ability to tell Amazon you already own it, are not interested in it, and the ability to rate it
• Able to add to the shopping cart or wish list directly
• Able to sort by All, New Releases, or Coming Soon

Cons:

• Does not say when you can get it by if you order by what time
• Does not say if it is eligible for free shipping
• Only shows 3 recommendations on my maximized browser

Today

Amazon provides a daily sample of recommended items on your personalized page. Recommendations are provided in a horizontal layout where you can flip through pages with left and right arrows. Cloud tags shown below allow you to filter the results. Scrolling over the product produces a small pop-up with product information.

Pros:

• Can rollover to get more information if you are interested, including why it was recommended
• Can filter results by selecting a category in the cloud tag
• Able to add to the shopping cart or wish list directly
• Shows up to 5 products and can easily view other pages

Cons:

• Only shows a sample and not all recommendations (although there is a link to it)
• Have to rollover to get information

Customers with Similar Searches Purchased

This is one of the newer ones that I had not seen before. Products are shown in perspective where one can rotate the products with the closest ones appearing larger. Products can be selected wheather it is in the back or front, even if it is slightly covered by another product. A reflection of the products gives the feature a “Web 2.0″ look and feel.

Pros:

• Able to see and select many products in a small section
• Visually pleasing and provides a fun interaction experience

Cons:

• No product information

Recommended for You

This is found on Amazon’s front page. Directly below it is a “More to Explore” section which gives recommendations based on something you looked at previously. You may also find other similar looking sections based on your browsing history or what customers buy after viewing a certain item.

Pros:

• Able to find out why it was recommended
• Shows percentage of Users who buy a product you viewed and the percentage they buy an alternative

Cons:

• Does not show any product details per section
• Only shows 3 products

Selected for You

This is currently found on Amazon’s front page, towards the bottom of the screen. They only show you one product and a short description but on the side are 4 other “ideas”, including the currently selected one. Clicking on any of the other 3 recommendations will change the picture and description.

Pros:

• Very little screen real estate used
• Interactive interaction experience

Cons:

• Does not say why it is recommended
• Very little detail such as price and rating
• Requires as much as two clicks to get to product detail page

Final Word
With so many ways to recommend products, which one is the best? Only Amazon knows by looking at log data and analyzing customer behavior. Each method has different pros and cons. I personally like the Today’s Recommendation section because it provides me with more choices, options, and detailed information when I want it, although I have never used it before today. In a limited space, I enjoyed Amazon’s “Customers with Similar Searches Purchased”, although more for fun, instead of interest in purchasing. Surprisingly, the one I find myself clicking the most is the one where they give percentages of what other customers purchase based on past behavior. Instead of giving different variations of recommendations, Amazon should improve their algorithm to show their recommendations based on what type the User uses the most.

As a sports fan that plays fantasy sports and likes to look up stats, I have always wanted an easier way to look up information and stats about my favorite players (as well as the ones on my fantasy team). A site like ESPN or even the league’s site has the information I’m looking for but requires a lot of searching and clicking to find it.

Yahoo! Sports Shortcuts has made it pretty simple by integrating it into their search. By just searching the name of the player, a stats summary of the player and additional links for more detailed stats is made available as well as their Fantasy Ranking. Currently it is only works for Baseball and Football but will likley be available for Basketball and Hockey when their seasons start.

With more and more people shopping online, it would be beneficial for companies to make the checkout experience as smooth as possible. No one wants to lose a sale because of a bad user experience after the customer has already decided he is going to purchase something.

One of the most frustrating tasks I have experienced during the checkout process is when entering credit card information and it asks for the expiration date. The majority of sites provide a drop down box where you can simply select the month and date. The problem is the information in these boxes.

All the credit cards I have ever had display the date as numbers:

But on some sites, the drop down only displays the name of the Month:

This is particular frustrating to me because I have to then figure out what month my number is. This may not be too difficult if your expiration date is an easy to remember month number (such as 1, 12, or the month of your birthday) but in my case, it is a month in the middle of the year which I don’t tend to associate quickly. Yes, I still get by and am able to proceed, but that extra effort could easily be avoided. Why cause the customer to pause and have to think about it?

Some sites just list the number which is simple, effective, and easy to understand:

But what if you had a credit card that just had the month name? As mentioned earlier, I’ve never seen one like this but if that is the case then the above example would lead to the same User frustration while the first case (name only) would be the simple one.

My favorite solution is to just list both the name and number:

I can still quickly select the correct month no matter what format my credit card expiration date is.