Comparing Implementations of the ‘Compare’ Feature
The ability to compare products is an increasingly useful tool for online shoppers. However, depending on the implementation of a website’s ‘Compare’ feature, users may not find that tool easy to use. Take, for example, the Compare Models page on the Porsche (www.porsche.com) website shown below.
Prior to selecting any car models Although the text states that users may select up to 3 models for comparison, it does not provide instructions on how to do so. The page layout makes for an unintuitive ‘Compare’ concept, therefore simply looking at the site leaves users somewhat puzzled as to how they conduct the comparison. Upon hovering over a car model name, the label changes appearance from standard text into a clickable hyperlink. Users assume that hyperlinks will take them somewhere else on the site, however, Porsche.com used the hyperlinks as a means of selecting the car models. When a visitor clicks on one of the links it changes color but the graphics at the top never change so it is unclear that they have accomplished anything.
Then the compare button is placed in the lower right corner outside of the visual boundary of the selected models and not highlighted in any way.
After selecting three car models The majority of other car manufacturer sites begin the comparison process by asking the users to pick a specific make and model. They then allow users to select additional automobiles for comparison through the use of clearly labeled drop-down boxes. In the screenshot below from Acura’s comparison feature, note that both the graphics and the drop-downs work together to effectively communicate the intended process flow for selecting car models to compare.
For most retail sites, a solid and traditionally accepted method of allowing users to compare products is by providing a ‘compare’ checkbox beside each listed product, with ‘Compare Selected Items’ buttons provided at both the top and bottom of the product listings table. Using this design typically eliminates the need for instructions on how to use the comparison tool.
HomeDepot.com incorporates good design into their comparison tool, as shown below. If a visitor does not see the ‘compare” checkbox and clicks the ‘Compare Selected Items’ button they get a clear error message asking them to select one or more products to compare.
Katie Eubanks - Senior Usability Analyst Keep Sign Ups Simple As CRM initiatives grow, many sites are adding newsletters, weekly special online circulars, and other vehicles of communication direct to the customer. These typically require a signup procedure of some sort and that signup requires an email address. We have found that many sites tend to complicate this process by giving the registrant too many instructions, too many options, and too many opportunities to abandon or fail in the registration process. We realize that privacy policies are important and that the site may want to offer customization options, but there is no reason to put these at the front of the registration process.
Let’s capture the essential information - email address - first. Then ask for some optional information - maybe name and zip code - second. Then give the registrant the opportunity to create some customization if they choose to do so at the end of the process. Here’s a great example from potterybarn.com. At the bottom of the homepage is the field to sign up for emails from Pottery Barn.
If the registrant enters their email address and clicks ‘SUBMIT’ or presses the Enter key on their keyboard, they receive a pop-up window confirmation that allows them to modify their email preferences and to request a catalog if they wish.
We’d bet that most folks just close the pop-up, but at least they have the opportunity to continue the interaction with Pottery Barn if they wish. If they don’t, Pottery Barn has their email address and the relationship has begun. Some aspects of this feature that could be improved include moving the sign up option above the page fold so it is easily noticed. Also, the site should provide an example email address in the field. Once the field is clicked on, the example email address should highlight or disappear allowing the user to begin entering their own email address. Place the focus on the ‘SUBMIT’ button once the field is clicked in so that pressing the enter key or clicking ‘SUBMIT’ starts the submission process. Stacey Kirkpatrick - Usability Team Leader
Double-byte Language Support
In All Our Survey Services As an item of interest we want to make sure that our subscribers realize that Usability Sciences supports all languages, including those of the Far East that require Unicode, in all our survey services. A number of our customers want to run consistent worldwide online research in the US, Europe, and Asia. We support these efforts by providing survey development, localization, deployment, analysis, and reporting. If you have a need for these kinds of services please give us a call to discuss.