Information Design for Product Display on e-Commerce Websites

Designers often get biased to widely used interaction design patterns on Web. It makes it difficult for them to find a completely different way of looking at how people would like to deal with information dissection, manipulation, and retrieval on Web.

Many times there is too much of information, too much data, or too many options and choices to make sense of. Users can easily become frustrated or disengage if they can’t find a connection with what is presented to them. One such example is e-commerce websites serving millions of products across thousands of categories.

Most e-commerce websites serve product information in a list or in a grid view. Facet search panel on left comprising either check boxes or links, with bracketed number of products inside each category, is another universal pattern used for product retrieval and filtering. For example, a website selling digital cameras, printers, or flat panel television sets will allow users to filter assortments by technical information such as megapixels, aspect ratio, screen size, FPS, make, model, and more. Most of these facets are not useful for people to make buying decisions anymore.

Few websites show number of reviews to prove product popularity in the market without caring for how long the product has been there on the shelf. Comparing product features is not desirable either because it just rearranges the technical information in a big table where each product is a column and users are forced to scan the information row-by-row to understand which product is better over others. And as mentioned before, technical information does not anyway affect people's choice of product.

BE HUMANE

When people buy items of such kind as mentioned above, beyond the technical information they are interested in the purpose and use of such products. Let's take an example of an office purchase manager searching for a large flat panel television to be used in a conference room with a seating capacity of 10 people for presentations and Internet video calls. Internally, it can be mapped to technical information such as resolution 1024x768, low priced, and Internet ready, and more. Similarly, let's look at a man who wants to buy a digital camera to capture his son’s Tennis game. Suitable camera can be internally mapped to technical information such as high FPS, bigger aperture, and in-built filter, and more. In both examples, the important point is that people want to buy stuff that is aligned to their needs. They find it very difficult to map their needs to the technical search/filter/compare criteria provided by websites.

A designer should experiment with visual/information graphic facets that will allow people to filter and compare products on their practical and emotional needs instead of technical information alone. A very simple visual representation of information can help people make better decisions, and understand something that's really complex, and connect them emotionally.

POPULARITY

A product’s social popularity on the Web has become very important. Buying decisions have started to get influenced by people's online reviews of a product. It is time that e-commerce websites graduate from traditional popularity display patterns. Merely showing information such as "number of people recommendations," "number of people liked or disliked" or "number of reviews" is not good enough anymore.

Interface designers need to start experimenting with ideas that can generate popularity based on people’s reaction in a particular context, time, and specific need. For example, one could use data visualization, like pie charts, scatter plots, and relationship circles to compare two point-and-shoot cameras and display one being more popular than the other among amateur photographers for taking home pictures and not so popular among professional or wildlife photographers along with comparative results achieved. Such generic visualization patterns will add depth to the user interface and eventually make it more useful for buyers to make right decisions.

Read More

Uniform Resource Locators (URL’s)

Most of us usually concentrate on the bigger picture that solves usability related issues. Sometimes, we also need to concentrate on the small little details that help in navigation. While designing, 80% of the issues lie in navigation and who would have thought that users can find URL’s confusing.

1. URL’s are not just clicked, but understood.
   
2. Most users need simplicity to know their path ahead.
   
3. Trust is built when details are closely monitored.
   
4. Abbreviations are not recognized universally. But ironically, not all of us know what “URL” stands for.
   

Two types of URL’s come to mind:

1. Shortcuts that you would like people to remember e.g. www.bbc.com/weather or art.ebay.co.uk
   
2. URL’s that can be extrapolated e.g. if I know that all usability definitions are stored as http://en.wikipedia.org/wiki/Usability, I can find Interaction at http://en.wikipedia.org/wiki/Interaction
   

The first pointer is much simpler to achieve. It is a simple configuration on the server which tells the server where to go when someone asks for, let’s say, www.url.com/abc. The latter is tricky. The factors that hinder this are:

• Nobody captured it as a requirement.
  
• A technical limitation e.g. the Content Management Server does not allow such a URL e.g. http://www.postoffice.co.uk/portal/po/jump1?catId=19300207&mediaId=26800661
  
• It’s an application that does not follow logical structures e.g. you should not/ can’t reach the page 3 of a checkout process.
  
• The structure of the application mimics the directories in which different solutions are compiled. And hence, you see things like MCMSWebApp or http://viv.ebay.co.uk/ws/eBayISAPI.dll?EbayTime in the URL – something that can be completely avoided on day 1, but is an expensive change later.
  
• Information can be accessible from multiple paths and can sit in multiple categories. Despite all the flak that Microsoft gets, it’s one of the companies whose products (like Content Management Server or SharePoint) emphasize on it. As an example (not the best ones), if you look at Jet Airways www.jetairways.com, all pages reflect the directory structure e.g. http://www.jetairways.com/Cultures/en-US/United+Kingdom/Products+and+Services/In+flight+Services
  
• Another example includes http://news.bbc.co.uk/1/hi/world/south_asia/default.stm
  

The Bigger Gain
We might not realize the relevance of simplifying URL’s as it just requires clicking. But most users step into it or click on it only once they know what lies ahead. If users don’t understand URL’s, they are not going to tread into it deeper. This means that we have lost a prospect or even an existing customer. This just goes to say that the 80/20 rule holds true in this case: http://en.wikipedia.org/wiki/Pareto_principle.

Here is an article on this topic: http://uxmatters.com/MT/archives/000240.php

Read More

Dash to the finish

And the groups are!

Read More

Sorting continues

Almost done with the open card sort.

Read More

Card Sorting at MindTree Bangalore

Danny held a session on Information Architecture for the benefit of the juntaa. This session also had a card sorting exercise. We thought we try our live-reporting skills on the net. So here are the picture. Its just been 5 minutes into the activity! More coming...

Read More

Learning about Information Architecture

One of the most asked questions in discussion groups is about good references/ study material on Information Architecture, Usability etc. Here is a living list of such references:

Information Architecture:

1. IA Institute: http://iainstitute.org/en/learn/
2. Boxes and Arrows: http://www.boxesandarrows.com/ - they also have a newsletter which you can subscribe to.

Read More