Latest Posts

Posted by Vishal Vaidya on 26th May 2009

Information Architecture for e-Commerce

In the recent times, web has got matured enough from simple text-only or brochure wares, to advanced web applications like e-commerce websites, database driven applications and rich internet applications (RIAs) which gives you “almost-like-desktop” kind of experience using your browser.

This has also lead to the growth of online sales. E-Retailing has grown up a lot since then and has identified several factors of success when it comes to retailing online.  You can visit sites like Amazon, 1800Flowers, Dell, officedepot.com to see how they are doing good business online.

Information Architecture for E-Commerce Applications

To build a successful e-Retailing (e-commerce) experience, it needs to consider several factors like products, website’s visual design, technical architecture, and user-interaction, content, offers, brand value in the market, banner advertisements. They all build a seamless experience for the end-users, which converts website surfers to online shoppers (lead conversion).

In such an environment, Information Architecture plays a vital role, without which a seamless user experience is difficult, leading to lost customers who could have been converted. However the visual design is appealing, technically it is robust, but without thoughtfully developed information architecture, an e-commerce site is about to fail. For example, if the shopping cart design is not done with a process that suits the end-users mental model, they will leave the conversion process midway and the e-commerce site will loose a lead.

Shopping cart design is one of the most crucial parts when it comes to conversions. An effective shopping cart can be designed which matches the user’s mental model and try to apply these insights with core information architecture rules like navigation design, nomenclatures, labeling consistency, along with visual design aspects like consistent screens for enhanced user experience. Using usability testing methods or prototyping tests at initial stages, like Eye-Tracking or Heat-maps or rapid prototyping, you can understand where the users are entering from, where they are making exits, what’s confusing them and what kind of responses they expected from the application?

Being a core part of any e-commerce application, a Shopping Cart needs to be designed effectively. In the absence of an effective shopping cart, the whole application might fail to generate revenue by not converting users into shoppers.

Rules for Effective Shopping Cart Design:

1. Build a clear, clutter-free user interface
Easy to use application interface

2. Avoid multiple windows and pop ups:
No add-on scripts that slows down browsers and confuses end-users

3. Display Product Shipping costs upfront
Clarity in the costs shown increases trust

4. Customer Support to be prominent
Humane touch is embedded and enhances the reliability factor by making users felt that there is someone at the other end.

5. Design effective forms for Shipping and Billing processes with clear labels
Redundant forms which forces end-users to input the same information repeatedly and leaving the site soon.

In the continuing post, we will discuss more about some design strategies that help improve the effectiveness and conversion rates for such websites.

References:
Read more about US Retail E-Commerce at: http://www.emarketer.com/Reports/All/Emarketer_2000492.aspx

US Retail E-Commerce Report at emarketer.com

Posted by Vishal Vaidya on 20th May 2009

Usability Testing : Heat Maps

To understand users & their usage patterns online, we can use a testing tool called “heat maps”. By using heat maps, we can produce visual displays of where end-users are actually clicking and which ones are the popular locations on your website (or a specific page).

Heat maps provide you an insight for “sensitive areas” on your website which you can use to provide better placement to core content or promote product or information you are willing to highlight on your website to increase online sales, etc.

Usability Testing : Heat Maps / Eye Tracking

Heat maps are used to understand the user’s behavior on a web page for which the heat maps have been generated.

The core idea of using a heat map is to analyze/test how a user is interacting with a web site. What links are they clicking on? What kind of page design may work well? What functionality placed at different zones can work better? We can get help from such heat maps to understand some missing factors in our application.

For example, if a button is not getting any or less clicks even though it’s a button, then there is a serious issue of “affordance“, which tells us that the design of the button is not intuitively implying its functionality and use.

The screen shot given below is a heat map overlay for this ‘Usability Factors’ blog homepage (April 2009). The “warmer” areas depict more clicks.

Heat Maps generated for Usability Factors blog homepage

Heat Maps generated for Usability Factors blog homepage

According to Jesper Rønn-Jensen, there is a difference in the results collected by mouse-tracking because it’s skewed by the mouse (or “pointing device” to put it in academic terms). You can read more about at: http://justaddwater.dk/2006/12/21/usability-heatmaps-eyetracking-vs-mousetracking/

For Eye-tracking and heat map tools, please see:
http://crazyegg.com
http://www.punkyduck.com/usability-accessibility/usability-reporting.aspx

For more information on Eye-Tracking, please see:
http://www.useit.com/eyetracking/
Download White Paper (PDF)
http://www.webusability.co.uk/wp-content/uploads/2009/02/eye-tracking-white-paper1.pdf

Please provide your insights on this! Thanks.

Posted by Vishal Vaidya on 23rd April 2009

Usability for Online Banking Applications

Imagine: “a user lands up on a bank’s website where he is not able to find the desired product or services as quickly as he expected? “. For example, someone who wants to apply for a credit card online is not able to see a link which “clearly” identifies itself as a link to Credit card section! What would he do next? He may simply close the page or may check competitor’s website!

23% of the consumers who applied online for a financial product would not have opened the account at all if there wasn’t an online application.“  Forrester Research, March 17, 2008

Bad usability can cost you a lot!

Usability for Online Banking Applications

If your bank’s website or an e-banking application does not match the user’s mental model, he will get frustrate and may stop using the application or reduce the usage by using alternative channels to do the same transaction which will increase other costs for the banks, like customer support phone calls, branch-based support & more, which ultimately leads to a bad ROI for the banking website or application. This lost business could account for a big amount for the bank.

Research shows that 50% of prospective customers registering for online banking leave the website before signing up, mostly due to several issues like difficult navigation, problems faced in completing online forms, security concerns and also understanding content and feedback / error messages.

Users like those sites which matches their mental model to maximum possible extent. Such sites, especially Banking website, needs to concentrate more on usability rather the visual pleasure, as these are meant to do business, not to entertain the end-user with funny videos.

Banking websites generally have 3 core areas in which they need to concentrate a lot:

1. Static Information Page / Brochure-ware (Type of Accounts, how to open a savings account, features, etc.)

2. Online Applications for Banking services (Apply for a Savings Account Online, Apply for Credit Cards online, etc.)

3. Transactional Applications (applications like e-Transfers, Online Bill Payments, etc.)

We will discuss some of these issues which end-users faces while using either of these application areas.

Issues in banking applications’ user experience:

1. Improper, inconsistent navigation design (that makes users’ life difficult while using the website.

2. Visual designs & elements used improperly, that has no visual connect with its own parent or sub sections.

3. People like to search! Websites with bad search engines built-in create a bad user experience for the users.

4. Usage of technical jargon / heavy usage of banking terms with no explanations makes users’ life tough.

5. Badly designed forms (design in terms of usability and accessibility). Also, a feedback and error message which doesn’t look like error messages makes it difficult for the user to identify ‘what happened now’.

6. Users may prefer to save the form which they filled in to complete it later. Incapability to provide such assistance to the user may result in to the lost customer. Also, steps not clearly indicated keeps user unaware of how much is still left and may simply close the browser before he proceeds to the next page.

7. Bad transaction flows (that includes unnecessary steps or information that’s really not required or is of no use for bank to capitalize on).

8. Accessibility issues for people for visual / cognitive impairments.

In the next post, we will discuss more about how we can help ourselves by helping end-users. I would request you to submit your obeservations and comments on the same.

Posted by Vishal Vaidya on 15th April 2009

Interesting Mobile websites to see!

I have been through several websites which were designed to suit mobile devices or specifically designed for mobile devices or some particular mobile devices for which they must be quite sure of the end-user / TG,  (for e.g. iPhone).

Below given are some of these websites which I liked. I would recommend you to check them out to understand how we can deliver the best-of-the-class rich user experience even on mobile devices. They still may not be perfect & we need to learn from it. I would like to hear from you if you have not liked something specific to any one of these and why.


Google

Google’s web services
http://m.google.com

http://m.google.com

http://m.google.com


Yahoo!
Mobile edition for search, news, mail and more
http://m.yahoo.com/

http://m.yahoo.com

http://m.yahoo.com


eBay

http://iphone.ebay.com (designed to suit best for Apple iPhone)

http://iphone.ebay.com

http://iphone.ebay.com


Amazon.com

World’s leading online retailer’s mobile website
http://www.amazon.com

http://www.amazon.com

http://www.amazon.com


ESPN

News, updates and scores from ESPN & is optimized for iPhone.
http://m.espn.com

http://m.espn.com

http://m.espn.com


BBC NEWS

Largest broadcasting corporation in the world
http://www.bbc.co.uk/mobile

http://www.bbc.co.uk/mobile

http://www.bbc.co.uk/mobile


New York Public Library

http://m.nypl.org

http://m.nypl.org

http://m.nypl.org

If you have seen some mobile edition websites and good enough as a reference, please submit those URLs.

Switch to our mobile site