HF740: Expert / Usability Review Kristin Burgh Name: Boston College Bookstore - http://www.bkstr.com/Home/10001-46404-1?demoKey=d Figure 1 - Boston College Bookstore Landing Screen Site Structure / Information Architecture Is information logically grouped? Excluding the use of the advanced product search bar, all merchandise is accessible via the underlying menus of the Tier One navigation menu. Both the Tier One navigation menu and its underlying drop-down menus are alphabetized from A-Z. Finally, the reasonable number of Toplevel navigational labels will not overwhelm the user. Figure 2 - Top (Tier One) Navigation Menu This top tier of information (see Figure 2) seems innocuous enough, however, when the user starts to dig into sub-menus, he/she will find categories of merchandise that are redundantly grouped, incorrectly tagged, inappropriately displayed and/or lacking in robust administrative and descriptive metadata. 1 HF740: Expert / Usability Review Kristin Burgh Can I browse for and find what I’m looking for? The site’s recall is superior to its precision in that queried objects can eventually be found, but they are not grouped together in a logical fashion for easy findability. Summary & Action Plan: - Inclusion of Best Practices (such as a “tag cloud”) Map out the hierarchical relationships of all site merchandise to identify better-fitting categorical buckets o Special emphasis to be placed on parent/child/sibling relationships Navigation Can I get where I want to go? Do I know where I am? Can I get back? Are there strong visual cues? The top-tier navigation bar is not necessarily intuitive. For example – the word “Collections” appears to be used as a miscellaneous catchall category, which certainly does not help facilitate search. However, once the user is able to find the desired merchandise, site navigation is actually quite easy. Dynamic “breadcrumbs” at the top of each product page are extremely helpful to the user in being able to navigate back to a previously visited level (or levels). Figure 3 - Breadcrumbs help facilitate navigation 2 HF740: Expert / Usability Review Kristin Burgh Moreover, many of the product pages contain page numbers, so the user knows exactly where s/he is with respect to viewing queried merchandise. Figure 4 - Hyperlinks allow the users to jump back and forth between pages of content Summary & Action Plan: The Tier One navigation bar – and the “Collections” category in particular, have the possibility to send users into the wrong area of search. However, once the user has found what he or she needed, it is easy to navigate back and forth between the tiers of product categories and single-category merchandise. Because the dynamic breadcrumbs and page number hyperlinks are already in play, no additional action is recommended at this time. Labels Do they make sense? The Tier One Navigation Labels are not entirely intuitive in that there is some ambiguity in the label naming convention. In some cases, the navigation menu labels are unnecessarily redundant. For example, the “Apparel” Menu Heading offers a sub-menu item called “Men’s Accessories”, despite the fact that “Accessories” is a separate Tier One Menu Label in its own right. Moreover, these redundant Navigation Menu labels prevent the full range of menu categories from being viewed “at a glance”. The user must make an extra click to see categories unfortunate enough to start with letters at the end of the alphabet. 3 HF740: Expert / Usability Review Kristin Burgh Figure 5 - The Apparel Sub-Menu is too large to be displayed in its entirety Figure 6 - Apparel>Accessories 4 HF740: Expert / Usability Review Kristin Burgh Are they descriptive? The labels used to categorize merchandise are occasionally vague and confusing. For example, one would expect that any category listed in the “Collections” menu would result in a variety of different types of merchandise. In at least one instance – “Collections > St. Patrick’s Day” – only one item, a hooded green sweatshirt, is displayed. Figure 7 - BC's St. Patrick's Day "Collection" - a lone sweatshirt Summary & Action Plan: The labels used for categorization on the BC Bookstore website should be reviewed by prospective users of different personas (Alumni, Current Student, Hockey Fan, etc.) for feedback and tweaked as needed. Terminology Does it speak in the users’ language? Improvements to terminology have the potential to dramatically increase sales through the website. 5 HF740: Expert / Usability Review Kristin Burgh Example 1 – Additional Recommendations Regardless if the user is searching for workout attire, cufflinks or infant accessories, the same set of objects are depicted as things the user “might also like”. These recommended items often bear no resemblance to the queried merchandise. Figure 8 - These 4 items are recommended to each user, regardless of his/her original search Example 2 – Search term “Quilt” When the term “Quilt” was typed into the index search, zero results were returned. Moreover, the site did not suggest alternative keywords, such as “blanket”. Figure 9 - "Quilt" vs. "Blanket" 6 HF740: Expert / Usability Review Kristin Burgh Is terminology consistent? As previously outlined in two of the preceding sections (Labels and Information Architecture), the language used within the site is occasionally redundant and inconsistent. Summary & Action Plan: - Additional Recommendations should be tied to the parent or sibling terms of the requested search terms The list of synonyms should be expanded for greater findability. The list of common misspellings should be reviewed and updated. A search on misspellings of the word “blanket” resulted in 16 results. However, those results yielded everything from blankets to gas grill covers. Content Is the information easy to scan? The Content in any given search results or navigational category page is presented as easy-to-scan rows of photographs with a brief description – each picture containing a brief description and price of the product. Additionally, the stationary panel of filter options makes the act of refining the search an easy one. Figure 10 - Rows of merchandise with captions, Left-hand search filters Read? The Site Navigation Tabs and Labels employ an appropriate use of capitalization (very limited use of ALL CAPS, which are more difficult to read). However, the font appears to be a little small onscreen. Moreover, there is no mechanism for increasing the on-screen font size. The smaller font may present challenges to visually impaired or older website users. 7 HF740: Expert / Usability Review Kristin Burgh Meet the users’ needs? The content display could be improved at the product page level. For example, within the apparel section, a link to a sizing chart would be helpful. Additionally, seeing the object from a number of different angles (front, side, back) would be useful. Figure 11 - Example Product Page Summary & Action Plan While there are many positive attributes about the manner in which the content is displayed on the website, there is certainly room for a few improvements. The site should be reviewed to ensure compliance with standards such as the Americans with Disabilities Act (ADA) Accessibility Guidelines. Finally, the product page template could be compared against well-known retail websites – such as Amazon.com or LLBean.com, to ensure that all industry best practices such as easy access to a clothingsizing chart are made available. Workflow Does a process follow a logical flow? There is not always enough information about a particular product available to facilitate a workflow. For example, upon selecting the ‘Top Sox® Boston College Women's Knee High Socks’, I had to take the steps of selecting my size and color before I received a message that this particular product was on back order. As such, I was unable to add the product to my cart. Are the tasks I do the most easily accessible? Can tasks be segmented by role? 8 HF740: Expert / Usability Review Kristin Burgh At present, there does not seem to be an easy way to see previously viewed merchandise. Moreover, while more research would be needed, BC may wish to consider exploring the ability to customize the user’s shopping experience by role (Student, Alumni, etc.). A sophomore studying biology is less likely to be interested in diploma frames than a recent graduate. An older alumnus probably won’t purchase textbooks. As such, it would make sense to de-emphasize those items that are unlikely to be purchased by a particular user group in favor of those that are. Summary & Action Plan: - Recommend the implementation of role-based filter to facilitate navigation. Example “I am a student” would emphasize and help facilitate the purchase of textbooks, backpacks, dorm room sundries and the like. On the other hand “I am an alumni/a” could result in a workflow that helps that BC grad shop for things like artwork, jewelry, Boston College Alumni license plate frames, etc. - Recommend increased focus on demographics capture (either through account selection or by onsite user selection) Figure 12 - Captured Demographics could be used to create role-based views - Recommend implementation of Best Practices from the following websites: - David’s Bridal - http://www.davidsbridal.com/HomeView - Gilt.com - http://www.davidsbridal.com/Product_Chiffon-Sweetheart-Short-Dress-with-CapSleeves-F15406_Bridal-Party-Bridesmaids-Short-Bridesmaid-Dresses 9 HF740: Expert / Usability Review Kristin Burgh Page Layout Are pages laid out in a manner that lets users easily find what they want? In this example, the home page layout depicts the several features, including the Tier One Navigation bar, offers on textbooks and what one can presume to be popular content (hockey gear, etc.). Figure 13 - BC Bookstore Website Landing Page As mentioned in previous sections of this assessment, the Tier One navigation bar needs to be revised and trapped white space would need to be removed to bring more content “above the fold” – making it more visible to site users/consumers. Is content presented in a hierarchical manner? To some degree, content is presented in a hierarchical manner; however, site navigation would improve with an additional level of classification. For example “Supplies > Dorm Supplies” results in the display of everything from shower caddies to coffee makers. A better approach might be “Supplies > Dorm Supplies> Small Appliances” for the coffee makes and “Supplies > Dorm Supplies > Shower Supplies” for the caddy. Can users easily understand where to go or what to do next? Improved Tier One Navigation labels will help users better understand where to find desired content. 10 HF740: Expert / Usability Review Kristin Burgh Summary & Action Plan - Implement an additional level of navigation as needed Update Tier One Navigation Labels Controls Are controls consistently used and correctly used? The BC Bookstore website appears to leverage a number of widely accepted conventions that appear to function as they should. - Single-clicking on a navigation tab brings up a drop-down menu Clicking the “Search” button next to the advanced index search begins the site search Drop down menus are used to select colors or sizes of select merchandise. They operate as expected when the drop-down arrow to the right is single-clicked. Figure 14 - A Drop-down menu appears when the navigation label is selected An industry standard that is not embedded in the website is the use of blue underlined text to represent hyperlinks. Are they in proximity to the area they control? The controls seem to be in proximity to the areas they control. There do not appear to be any significant usability issues on this front. Summary & Action Plan This area does not appear to need much re-work. 11 HF740: Expert / Usability Review Kristin Burgh Search Is Search global and logically placed? The search on this website is uniformly located in an easy-to-find, intuitive place on the top righthand side of the screen. Figure 15 - BC Bookstore Website Search Bar Are search results relevant and useful? The test searches performed with a sampling of keywords (“football”, “women”, “diploma”, “golf”) yielded very relevant results. In fact, searching consistently provided better results than browsing. Figure 16 - Search results for "Golf" - All very relevant to the game 12 HF740: Expert / Usability Review Kristin Burgh Summary & Action Plan The search feature on the Boston College Bookstore website is well placed, easy to use and yields good results. No changes should be made at this time. Visual Design Does the visual design help organize the page for the user and guide them through the site? Visually speaking, the Boston College Bookstore website meets a number of standards consistent with the average online retailer. - The merchandise is displayed as easy-to-recognize rows of icons (Gestalt) The familiar “shopping cart” mechanism should be well known to most users (existing mental model) The use of menus should help the user navigate the site, as does the “Refine your search” product panel The site employs a good use of color and contrast in color of the maroon main navigation menu boxes and the white text Bonus: The site employs Boston College Color scheme (Maroon & Gold - with accents of white or black) Summary & Action Plan A number of minor improvements would help improve the User Experience - Remove the abundance of trapped white space Reposition the site content so that more of it is “above the fold” Addition of a “home” icon Move the site map and the social media/sharing component to the top of the screen Figure 17 - Site Map and Facebook links should be re-located from the bottom of the screen (current) to the top 13 HF740: Expert / Usability Review Kristin Burgh References: Amazon.com - http://www.amazon.com/clothing-accessories-men-womenkids/b/ref=sd_allcat_apr?ie=UTF8&node=1036592 Bentley University Bookstore http://bentley.bncollege.com/webapp/wcs/stores/servlet/BNCBHomePage?catalogId=10001&storeId=2 1552&langId=-1 Boston College Bookstore – https://www.bkstr.com/Home/10001-46404-1?demoKey=d David’s Bridal - http://www.davidsbridal.com/HomeView Gilt.com - http://www.davidsbridal.com/Product_Chiffon-Sweetheart-Short-Dress-with-Cap-SleevesF15406_Bridal-Party-Bridesmaids-Short-Bridesmaid-Dresses 14