Paula Selvidge, Ph.D., VP of Products and User Experience, PerfectForms1
Summary. Visitors to a website can form first impressions in as little as 50 milliseconds, so creating a visually appealing home page is imperative (Lingaard et al., 2006). Through the ‘halo effect’ those initial judgments impact perceptions of usability, credibility, and ultimately influence purchasing decisions. Calls to action are options on a web page which lead users to do what designers want them to do on a web page (e.g., click on a button to buy an item).
This article presents a review of the Oprahstore.com website. Key usability issues are identified which may impact users’ first impressions and response to calls to action.
Figure 1. Oprahstore.com home page.
Home Page and Navigation
It is important to have key calls to action in the areas where they are most likely to be discovered. Since this is a store, you want users to shop and BUY, but the call to action in the most important location or ‘hottest’ real estate ‘calls’ users to sign up for a newsletter (upper left corner). Another key call to action in an important location is the video tour of the store. This is a much more effective call to action in terms of location and description. Unfortunately, the video is covering a tour of the physical store and may not be as relevant to the online store. Oprah should be featured in the video, not just the audio, and more time should be focused on the online store. Videos are very effective and powerful calls to action so new promotional videos should be created frequently on the new products introduced on the site. It is also recommended that the navigation controls on the video be adequate in size and saliency. The controls on the Oprah store video are very small and difficult to notice.
The prominent graphic on this page is the ‘No Phone Zone’ message. If the goal of this graphic is to sell the associated products, the image should have more emphasis on the items for purchase associated with the message and possibly incorporate images of the items.
When you have a personality and positive brand as well-established as Oprah, it is recommended that her image be incorporated into the prominent graphics on the site, preferably associating her directly with the promotional product. The image of Oprah in the upper left is too small. Photographs of people on sites have been found to engender trust and convey credibility so this site should take full advantage of Oprah’s celebrity status (Riegelsberger, Sasse and McCarthy, 2003).
The primary navigation options on the home page (left side) should be more prominent. While their location is good, (Kalbach and Bosenick, 2003; Kingsburg and Andre, 2004) more color should be added to draw attention to them (either with category headers and/or a box around the options). The use of color and bold typeface can be very effective in drawing attention and conveying meaning, e.g., red for urgent items or errors (Joseph, Knott and Grier, 2002). On the home page there is a mix of colors in the navigation options (on the left) competing for the user’s attention (red, pink, purple, black bold font). The colors are not clear in their meaning and do not focus users effectively. Both pink and purple are used to draw attention to items for Mother’s Day in the same list. On a positive note, the site does use breadcrumb navigation (provides a path of subsequent pages the user has visited) which is good for efficient navigation (Spool et al., 1997).
The organization of the navigation items in the list is not clear. Users expect options to be grouped logically.
Show Apparel & Accessories is located under the Oprah Winfrey Show header, but items from this category are mixed throughout all the categories in the site. Also, this page does not include all the Oprah show branded items. It is fine to include duplicate navigation to match users’ different mental models but if there is a section specifically calling out ‘Show Apparel’ then all the items should be located there. The items can be duplicated under other appropriate categories (e.g., Show Apparel for Women would be duplicated under Women’s Clothing).
Users would expect Women’s Clothing, Men’s Clothing, and Baby Clothing to be grouped together under Departments since they are all clothing items. Other categories, like Accessories & Souvenirs, African Crafts and Home Décor should be grouped since they are physical items. Optimally, groupings should be tested with target users through card sorting to ensure the site categories match the mental model of the users. This allows them to find information where they expect it.
It is expected that the target age demographic for the site includes older adults. Consideration should be given to this in deciding what font size to use to maximize readability. Research suggests using between 11 and 14 pt font size and 10 to 12 point font is optimal reading (Bailey, 2001; Bernard and Mills, 2000).
The shopping bag link and graphic are very small and not prominent on the page (upper right). The shopping bag provides feedback on the number of items in the bag; however, it would be better if they included a short list of the items in the bag and the subtotal on the far right (similar to Amazon.com).
Figure 2. Oprahstore.com shopping cart page.
The navigation options/actions are inconsistent. The button font sizes, colors and background effects differ throughout the site which can affect performance (Adamson and Wallace, 1997; Adkisson, 2002; Badre, 2002). The navigation option on the Shopping Bag page is labeled ‘Update Cart’ when they have called it a ‘Shopping Bag’ or an “O Bag” previously. While this seems minor, inconsistent terminology can cause user confusion.
The option to ‘Remove’ the item from the bag is a different font color and a link under the item. This is more difficult to find and is inconsistent with the way other actions are displayed (use of buttons for other actions). Some sites make options that are not desirable and less noticeable which frustrates users.
The commands for the same action (e.g., Continue Shopping) differ, even on the same page (Shopping Bag). A link is used at the bottom of the page and a green button is used at the top of the page. Additionally, Continue Shopping at the bottom of the page is not very noticeable. Both links should use the green button, not only for the consistency but aesthetically it is more pleasing. To ensure users can quickly locate navigation options and understand actions, consistency is critical.
The contrast is too low on the button background (grey button on white background) so they are not as noticeable as they could be.
A search option should be located on each page so it is always easily accessible (Spool et al., 1997).
Figure 3. Oprahstore.com billing page.
The expander options that are used to lead the user through the 5-step checkout process are nice in that they save real estate and do not force the user to go to multiple pages, however they can be challenging for more novice users who may not understand that they must complete the steps in sequence and instead try to skip around. It is recommended that a disabled "look" be employed for steps that are not available to the user.
Error feedback was inconsistent. When signing in, the site used an orange indicator at the top of the section in a location far from the error so users may have more difficulty understanding the problem. However, in other sections, they use an orange message indicator right next to the field that has the error. Showing the message near the problem field is preferred. Additionally, the site should use a consistent method (color, message) of displaying errors.
It is great that the site offers contact information and customer service links in the bottom footer of every page. They may want to consider using ‘Help’ instead of the customer service link label, just because it is typically recognized more quickly. Another good feature is the ability to reach a customer service agent by phone rather than only by email. Online chat is also an effective help feature that could be added.
The wish list and suggestions for additional purchases are nice features. It is recommended that the ‘suggestions’ list be tailored based on the users’ prior purchases (this was not tested).
During the purchase process, the icon at the top of the page reinforcing safety and security is a good practice since users have concerns with sharing financial information and purchasing online.
The Section 508 guidelines recommend that every control is accessible without a mouse, so users can navigate the entire page using a keyboard. This was problematic in certain areas of the site (e.g., expanders in shopping bag for signup, billing info, etc).
Also related to accessibility is the presence of a high-quality search feature. The Search did not always seem to work effectively on Oprahstore.com. A search for “Shipping”, for example, yielded no results. Other searches brought up recommended and matching products but the search term was no longer visible. It is usually good practice to show the search term so users can view what they typed and possibly refine it.
1 Paula Selvidge, PhD is an alumni of Wichita State University and SURL, 2003. Currently, she is the VP of Products and User Experience, PerfectForms and can be contacted at email@example.com, 760.585.1884.
2 This review was conducted on the Oprahstore.com site during the week of April 26th, 2010. Site changes may have occurred since this time.
Adamson, P. & Wallace, F. (1997). A comparison between consistent and inconsistent graphical user interfaces. Jacksonville: University of Northern Florida, Department of Computer and Information Sciences.
Adkisson, H. (2002). Identifying de-facto standards for e-commerce websites. Proceedings of the IEEE International Professional Communication Conference, (pp. 22-45) Portland, OR.
Badre, A. (2002). Shaping web usability: interaction design in context. Boston, MA: Addison Wesley Professional.
Bailey, R.W. (2001). Reading from Small Point Sizes. User Interface Update-2001.
Bernard, M. & Mills, M. (2000). So, what size and type of font should I use on my website? Usability News, 2.2. Retrieved from http://usabilitynews.org/so-what-size-and-type-of-font-should-i-use-on-my-website/
Kalbach, J. & Bosenick. T. (2003). Web page layout: A comparison between left and right-justified navigation menus. Journal of Digital Information, 4(1). Retrieved from http://journals.tdl.org/jodi/article/view/94/93.
Kingsburg, J. & Andre, A. (2004). A comparison of three-level web menus: Navigation structures. Proceedings of the Human Factors and Ergonomics Society Annual Meeting. New Orleans, LA.
Lindgaard G., Fernandes G. J., Dudek C. & Brown, J. (2006). "Attention web designers: You have 50 milliseconds to make a good first impression!" Behaviour and Information Technology, 25, 115 – 126.
Riegelsberger, J., Sasse, M., & McCarthy, J.D. (2003). Shiny happy people building trust? photos on e-commerce websites and consumer trust. Proceedings of the ACM SIGCHI 2003 conference on Human Factors in computing systems (pp. 121-128), Ft Lauderdale, FL.
Spool, J., Scanlon, T., Schroeder, W., Snyder, C., & DeAngelo, T. (1997). Web site usability: A designer’s guide. North Andover, MA: User Interface Engineering.