USABILITY REPORT FOR HARTNELL COLLEGE'S WEB SITE
Shared by: ThePaulAnderson
USABILITY REPORT FOR HARTNELL COLLEGE’S WEB SITE TEAM 3 (M3K): MARC CAJOLET, MARIA GARCIA, MARTHA KAM, & KATELYN THOMPSON FEBRUARY 26, 2008 Hartnell Site Analysis 1 EXECUTIVE SUMMARY Hartnell College is a two-year community college that offers classes for students seeking to enter a four-year college, improve skills to obtain better employment, and for adult continuing education. Therefore the goals of the school’s web site are: To satisfy the initial inquiries that a prospective student considering enrollment at the college may have Provide a means to register and attend courses, either on campus or online Appeal to minority students, especially Spanish speaking residents Convey a sense of college campus, academic programs and student culture Provide online information access to primary programs and departments: Academics, admissions, athletics, jobs, library, students, faculty/staff and alumni As higher education costs continue to increase, colleges increasingly are competing for the same students. Hartnell must appeal all of these constituents. For many students interested in learning more about Hartnell, the college’s web site will be their first exposure to the college. The Hartnell web site is successful at conveying a brand through its use of color and the school logo. Unfortunately, while the homepage is clearly making an attempt to distinguish itself from other similar college sites by creating a dynamic navigation system on its homepage, ultimately the navigation creates a confusing user experience. The constantly shifting links and ambiguous naming schemes make it difficult to find information on the site. One of the stated goals of the college is to “increase opportunities to develop and improve abilities to read, to listen with understanding and to communicate effectively.” The general structure of the homepage should inspire confidence that the college is capable of teaching those skills. Unfortunately, due to the confusing structure of the homepage and the dual navigation systems that exist on the site (the shifting homepage navigation on the homepage and the footer navigation that appears only on secondary pages), the user is left with concern that the college is indeed capable of teaching such skills. In order to improve the user experience of this site, the m3k team recommends that Hartnell perform a comprehensive redesign of its web site. This redesign should include an initial step of a card sort with typical users (current students, prospective students, faculty, and staff) in order to clarify the navigation naming scheme. We believe that the college is not far from having a successful division of categories based on its secondary page navigation footer and that the card sort could be based off of that scheme. We then believe that the navigation for the site’s homepage should be redesigned to match more conventional web site navigation systems. After completing the card sort, the site should undergo a visual redesign in order to present the new information architecture in an effective way. Hartnell Site Analysis 2 METHODOLOGY In order to analyze the Hartnell web site, m3k used a heuristic review. A heuristic review consists of applying certain proven rules of thumb developed over years of web design experience to the analysis of a given web site. Studies have shown that heuristic reviews are a reliable way of gauging the usability of an interface, when performed by several reviewers, as was the case in this review (Nielsen & Molich, 1990). In the subsequent analysis we used the persona of a high school junior coming to the Hartnell web site to find out more about attending Hartnell. Although this junior had learned of Hartnell from their high school guidance counselor, they did not know much about the school. We applied the following basic heuristics (derived from Nielsen, 2005) looking at each of three areas, visual clarity (i.e., the graphical appeal and legibility), explicitness (i.e., ability to perform tasks), and informative feedback (i.e., does the site provide the user with appropriate cues): Does the site keep the user informed of his/her current location on the site and what exactly is happening? Does the site use metaphors and affordances in concordance with the user’s experience? Is it easy for the user to backtrack after making a mistake or going to the wrong part of the site? Does the site use consistent terminology? Does the site prevent the user from making mistakes? These heuristics were used as guides and the detailed heuristics that were applied are shown in the tables in Appendix 1. TEAM EXPERIENCE The m3k team has extensive experience in usability testing, web design, and heuristic reviews. The following team members performed the analysis on the Hartnell web site: Marc Cajolet - Marc currently manages the user experience team at an enterprise software vendor, where he recently completed a two year project to update the flagship product suite with a fresh new UI to reflect the company’s modernized brand image. Previously, Marc worked as an interaction designer at a startup in the 3D modeling industry where he sought to revolutionize the way 3D graphics are combined with digitally recorded camera images to create special effects for the movie industry. Marc has 20 years of hands on user experience work in the software industry since graduating with a Bachelor of Science in Computer Graphics from the University of Massachusetts, Amherst. Hartnell Site Analysis 3 Maria Garcia - Maria is currently a usability engineer at a small start-up company where she conducts usability tests and heuristic reviews of mobile phone products. Prior to that position, Maria has been the web administrator for the Dana-Farber/Harvard Cancer Center and a Research Associate at the Sloan School of Management. Maria is currently pursuing a Master of Science in Human Factors in Information Design at Bentley College and she holds a Bachelor of Arts in Biology from Harvard University. Martha Kam - Martha is a Research Associate at Bentley’s Design and Usability Center where she conducts extensive usability tests and heuristic reviews. She has also fulfilled Bentley’s Testing and Assessment Programs course, which enriched her knowledge on various usability and evaluation methods. Prior to entering Bentley, Martha worked at a global business process outsourcing corporation for five years. Martha is currently pursuing a Master of Science in Human Factors in Information Design at Bentley College and she holds a Bachelor of Arts in Psychology from Boston University. Katelyn Thompson - Katelyn is a Research Associate at Bentley's Design and Usability Center. In her time there, she has conducted usability tests, heuristic reviews, and field research. In addition, Katelyn has interned with MassMutual Financial Group in their User-eXperience Services group where she conducted usability tests, card sorts, and field research to create personas and scenarios. She is pursuing a Master of Science in Human Factors and Information Design at Bentley College. Katelyn holds a Bachelor of Arts in Web Design and Liberal Studies, having completed courses in Web design and visual communication. ANALYSIS The m3k team analyzed the Hartnell web site on its visual clarity, explicitness, and informative feedback. The following analyses explain how the site performs in each of these areas and how it could be improved to align better with the college’s strategic goals. For the detailed review of the site, please see Appendix 1. VISUAL CLARITY ASSESSMENT The Hartnell College web site experiences issues with visual clarity mostly on its home page. The main issues seem to be related to the delivery of the navigational options from the primary page. Web sites achieve visual clarity by organizing content in a way that is easily accessible, effectively communicating content, and ensuring optimal readability. Cluttered home page The most prominent concern with Hartnell’s home page is its clutter factor and complexity level that accompany the shifting navigation. Upon initial loading of Hartnell’s web site, the navigation randomly assigns a topic to preview to the user by exposing an image and related Hartnell Site Analysis 4 text to the topic. Without moving the mouse, the user is unaware of the shifting navigation options that display hidden information. The default image initially seems out of place, causing a break in content flow and more confusion among the left-justified vertically aligned topics (See Fig. 1A) and the right-justified subtopics (See Fig. 1B). The alignment heavily affects the navigation of the site because it does not follow the traditional mental models of navigation appearing strictly across the top of the page horizontally or on the left of the page vertically. Hartnell’s navigation appears in a stacked row formation with a good amount of distance between topics and their related subtopics (See Fig. 1C). This distance forces the user to pan across to draw the relation between the links. Right-justifying subtopics also create a massive clutter of links that are hard to decipher. Figure 1. Hartnell College Homepage The navigation is not grouped in a clear fashion The organization of Hartnell’s home page does not lend itself to clear grouping of content. The navigation is not instantly clear until the user places the mouse over several rows to understand the shifting pattern. Grouping occurs automatically by proximity and alignment. However, the shifting motion causes breaks and uncertainty in the grouping of the content. The only clear group on the college’s home page is the News and Events section that is clearly framed and organized. This is unfortunate given the colleges’ goals—though it is important that a first time prospective student be aware of Hartnell’s news and events, it is unfortunate that he or she would find it more difficult to learn more about enrolling at the college. Hartnell Site Analysis 5 By grouping content in a static and logical form, users will be able to access more information in an easier to read format. It will also serve to express Hartnell’s goal of teaching clear communciation skills. Secondary page navigation is dynamic The secondary pages of Hartnell’s web site follow the basic conventions of web design, whereby the navigation appears on the vertical left of the page (See Fig. 2). The content on each page is also broken down much better relative to the home page. However, the navigation on the left does not have an apparent logical order. Pages where navigation options are few are less problematic than pages that contain lengthier paths such as the Student Services page. Grouping of related content should be maximized to avoid a laundry list of related links. Navigation would also be better supported if other topics were accessible from the user’s current location in the deeper pages of the site, rather than returning to the home page. Improving the navigational features of a web site will aid users in finding the information they need more quickly. Figure 2. Hartnell College Secondary Page Motion creates challenges in readability The readability of Hartnell’s web site generally had no problems. Again, the issues lie with the home page design and the moving menus. Readability is difficult when motion is involved. The all-caps used for the subtopics links is also difficult to read. Color choices for the web site were overall balanced and did not contribute to further problems. From the perspective of a Hartnell Site Analysis 6 high school junior, general information would be manageable to find, but more specific information may pose a challenge. EXPLICITNESS The Hartnell web site suffers from an unclear and inconsistent naming scheme for some of its key content areas. The main areas of concern are as follows: Confusion with concurrent enrollment Hartnell offers what’s called a “concurrent enrollment” program for students in grades K-12. Because this program is offered mainly for high school students, it presents a lot of confusion when presenting choices of how to proceed within the site. One example of this is the “Picture Yourself at Hartnell” page which offers the user seven options to proceed, including “I have never attended Hartnell before” and “I am a High School student”. These options can be confusing for a high school junior or senior looking at the college as an option after graduation. One way to solve this would be to create a separate section for concurrent students, that can be accessed right off the homepage and have a slightly different look than the main Hartnell page. Concurrent students have very different needs and motivations than students looking to go to Hartnell for post-graduate work. Drop-down section of home page is unconventional Hartnell’s homepage has nine sections that expand and contract depending on where the mouse is hovering. This can be very confusing to the user; it is unclear initially how to expand and contract the sections, either by hovering or by clicking. In addition, the text is so small that the mouse will often move off of the expanded tab while trying to click on a link. By eliminating the movement within the menu, it will allow users to navigate through the site faster. A new design will allow users to see the site’s navigation immediately and will make their decision on which section to explore easier. Inconsistent navigation throughout site The navigation in the site is constantly changing, although there are established navigation schemes throughout the site. The initial scheme that users see is the tabbed sections on the homepage, such as “Becoming a Student” and “Happening at Hartnell”. Once you have navigated through the homepage to subpages, there are two separate, but sometimes overlapping navigation schemes: the breadcrumbs and the footer navigation. Also on these subpages are “Related Links/Documents” which are static depending on what page the user is on. It is confusing for the user to have these four conflicting navigation schemes because it makes it difficult to jump between “sections”. In order to access a front-page section from a subcategory page, the user would have to click on “Home” and choose that section again. Also, the foot navigation is not present on the homepage. Hartnell Site Analysis 7 By reorganizing the information on the site into one set of categories, it will create a consistent navigation scheme throughout the site. This will allow users to quickly learn how the site is organized and will help them find pertinent and related content. INFORMATIVE FEEDBACK ASSESSMENT Well-designed web sites provide the user with visual cues and feedback about the task which they are performing and should be written in accordance with the audience they serve. The Hartnell web site is successful on several counts in this area: Colors are used effectively for branding The site’s primarily purpose is for browsing and information discovery. The colors assigned to all of the pages are themed in the schools brand image of maroon, gold and black. The color palette is used to consistently present sense of quality and integrity. The only case where the colors could interfere with the primary task of navigation are on the visited links which are shown in light grey. This could be difficult in low contrast situations. They often appear on a dark gray background, which is not optimal. The site’s language is clear and approachable The site consistently defines acronyms on their first usage. These tend to be standard academic terms related to accreditation and financial aid where they are commonly used. The site generally avoids the use of abbreviations. As an added benefit, some of the pages are presented in English and in Spanish. The site’s approachable to the casual reader, and prospective student. Jargon is generally not used. Anyone with a vested interest in discovering information about the school would be able to understand the content once they’ve found it. Generally the icons and symbols are part of the visual design, and not part of the information architecture. Because of this there is little interference between the visual design and information content, which creates a tasteful but satisfying experience. The use of graphic content is generally reserved for photographs, which are used effectively to portray the persona of the college, campus, and student body. This imagery is an important part of representing the college. Layout on secondary pages is strong, but the home page needs improvement With the exception of the home page, general conventions for good layout are followed. Navigation and process control (e.g. the financial aid application process) are clearly presented on the left side margin, with plenty of white space for clarity. There are only a few special printer friendly pages (e.g. academic calendar, student schedule). The site is optimized for online viewing, not print. Hartnell Site Analysis 8 Search is implemented via Google, which provides a good set of criteria matches when searching for common terms, without returning every page as a possible ‘hit’! Changes to navigation or style generally would not have any negative effect on the effectiveness of the search engine. Only the home page has any unusual or specialized behavior beyond standard hyperlink navigation. Only the home page has a significant amount of visual clutter, with an unusual horizontal layering of sectional menus. To compound this, any mouse motion which is a natural part of page exploration triggers rollover events. This takes over the user experience by flashing up panels associated with the rollover category. This is very distracting at first, because it is unexpected. I believe you could equate this with tabbed college catalog, but it is unusual for the web. Control actions are compatible with those used in other systems, with the exception of the home page. The site very consistently displays bread crumbs for all pages, at primary, secondary and tertiary page depths. The site wide navigation can also be accessed via the footer on the page, which has links to each of the major sub-sites. The common tasks for registration, financial aid, and course selection can be followed once you’ve reached the top level page. RECOMMENDATIONS & NEXT STEPS Through our analysis we found three main recommendations for improving the site to better communicate and achieve the school’s strategy. The first recommendation is to improve the site’s navigation. Currently, there are three different navigation schemes on the site; these need to be condensed into one scheme to be used throughout the site. This one scheme would be used on the home page, the left hand navigation of the subpages, on the footer of each subpage, and in the breadcrumbs on each page. The second recommendation is to redesign the front page to eliminate the clutter. This would help to give the user guidance as to where to go upon landing on the page. The third recommendation is to clearly target the subsections of the site for each audience. High school students looking to attend Hartnell upon graduation would no longer be confused by the concurrent education section. The next step in the site redesign would be to conduct a card sort analysis with appropriate user groups in order to properly name the new navigation links. As the basis for the card sort, we would recommend starting with a closed card sort using the headings that are currently used in the footer navigation that only appear on secondary pages. The footer navigation has simple, concise categories that serve as a much clearer structure than the categories that currently appear on the homepage. Currently, the navigation on the homepage serves more as a distraction from the presentation of information than as an aid to it. Creating a more traditional, simple navigation would allow the user to focus on the content of the site as opposed to concentrating on how one is supposed to navigate from section to section. Hartnell Site Analysis 9 A redesign of the homepage would also allow the college to focus its message and marketing to the outside world. The homepage as it stands is trying to be all things to all groups at once. A simplified, organized home page would ideally route visitors to the section most appropriate to their needs and the more specialized content for that user group could then be displayed on those pages. This would free up the home page space to highlight important new announcements or college news and events. Highlighting such news and events would in turn excite new and prospective students about the college and serve as a key recruiting function. The m3k team believes that performing further usability studies and implementing a new design on the Hartnell web site would result in improved student, staff, and community satisfaction with the college. We also believe that these improvements would result in higher enrollment rates of prospective students. Hartnell Site Analysis 10 APPENDIX 1 – DETAILED REVIEW VISUAL CLARITY Questions Always Most of Some of Never N/A Details the Time the Time 1. Is each screen clearly X The home page contains multiple stacked titles which identified with an causes confusion. It is unclear whether I should click on informative title or Becoming a Student or The Student Experience to find description? out more about the school. 2. Is important information X The home page contains a lot of motion which distracts highlighted on the screen? the eyes from where they should be focused. The (e.g., cursor position, welcome page communicates well that a choice must be instructions, errors) made. However, the options are not exclusively clear. The steps for registration are well laid out in a table. 3. When the user enters X n/a information on the screen, is it clear: (a) where the info should be entered; (b) in what format it should be entered? 4. Does information appear X The home page is organized against the typical mental to be organized logically on models of a website where the titles are organized the screen? (e.g., menus vertically and the subtopics are organized horizontally organized by probable beneath. Secondary and tertiary pages however are sequence of selection, or fairly logical with navigation appearing on the left alphabetically) vertically. 5. Are different types of X The home page is cluttered and confusing with shifting information clearly menu topics and subtopics that have varying alignment. separated from each other The rows are close in proximity and a clear distinction is on the screen? (e.g., hard to draw. The News and Events are the only clearly columns of alphanumerics separated topics. The secondary and tertiary pages left-justified, columns of clearly separate the navigation from the content. The integers right-justified, etc.) table format for registration instructions clearly separate the necessary steps to register. 6. Where a large amount of X The home page relies solely on horizontal separation and information is displayed on does not use enough open space to clearly separate one screen, is it clearly information into logical sections. The only clear section separated into sections on on the home page is the News and Events box. The the screen? secondary and tertiary pages, however, follow a traditional layout with title page at top, navigation on left aligned vertically, and content/information occupying the remainder of the page. The sections are also clearly distinguished by color, where the title is in blue, the navigation is in brown and the content on a white background. 7. Are bright or light colors X Hartnell uses grey text on its secondary pages to indicate displayed on a dark that a link has been visited, which can be tough to read background, and vice versa? against a brown background. Furthermore, grey can be misconstrued as an inactive link. 8. Does the use of color help X Color is useful in the secondary pages to create sections, Hartnell Site Analysis 11 to make the displays clear? but color is not effectively used to categorize information on the home page. 9. Where color is used, will X Colors that are used generally do not cause strain or all aspects of the display be illegibility to colorblind individuals. Grey text, however, easy to see if the user is for visited links can be difficult to read. color blind? 10.Is the information on the X The home page is cluttered and contains hidden and screen easy to see and read? shifting tabs that make readability difficult. The subtopic links are also in all-caps adding to the difficulty. The secondary pages conversely are organized in a way that allows for easy reading with balanced contrast between background and text. Information is also better organized than the homepage, with ample white space. 11.Do screens appear X The home page is the most prominent page that suffers uncluttered? from clutter – most of which occurs in the shifting navigation. 12.Are schematic and X There are not many pictorial display on Hartnell’s pictorial displays (e.g. figures website. Most images appear on the homepage to and diagrams) clearly drawn represent each topic that can be chosen. The areas of and annotated? the background image that are clickable are not well- defined. 13.Is it easy to find the X The home page is tough to navigate and serves as the required information on the main portal to various topics for Hartnell. The user screen? should be able to navigate to other areas without having to return to the home page each time. EXPLICITNESS ANALYSIS: Questions Always Most of Some of Never N/A Details the Time the Time 1. Is it clear what stage the X This page lists 8 steps that need to be followed in order system has reached in a to enroll. However, there are links for each step that task? take you to a different part of the site where you lose track of the stepped process. 2. Is it clear what the user X Throughout the site you are presented with a list of links, needs to do in order to which you must select one to move forward. One complete a task? example is the “Picture Yourself at Hartnell” page which makes you choose an option to continue. These options can be confusing such as: “I have never attended Hartnell before” and “I am transferring from another college” 3. Where the user is X Again, this is present throughout the site. One problem presented with a list of throughout the site is that they offer concurrent options (e.g., in a menu), is it education classes for students in grades K-12. This gets clear what each option confusing with high school seniors who may be taking means? classes during high school or other high school seniors who may be looking to take classes the following year. Going back to the “Picture Yourself at Hartnell” page, you find that this is a problem with the link “I am a high school student”. 4. Is it clear what part of the X There are small breadcrumbs at the top of the page. A Hartnell Site Analysis 12 system the user is in? lot of the links off the homepage take you to external pages, such as “Online classes” which takes you to eCampus. 5. Is it clear what the X Although the top left image has a box around it when different parts of the system you initially hover over it (probably IE error), this image is do? not a link home. The “drop down” menus on the homepage are confusing, and it is not sure if the user should click on the bar or hover over it to “active” a certain section. 6. Is it clear how, where, and X When you select that you are a concurrent student, the why changes in one part of system does not retain this information throughout the the system affect other parts rest of the site. of the system? 7. Is it clear why the system X Some of the sections of the homepage are partitioned off is organized and structured into what you’re planning to do: donate, work, become a as it is? student. However, others are unclear, such as Happening at Hartnell. 8. Is it clear why a series of X Many of the links from one page in a certain section take screens is sequenced as they you to another section all together. On the secondary are? pages, the links of the left hand side are simply “related” links, not necessarily links in the same section as the page the user is on. 9. Is the structure of the X The fact that links jump around through the different system obvious to the user? sections of the web site is very confusing. By clicking on three links, the user could have navigated so far away from their original location that they wouldn’t be able to get back. 10.Is the system well- X It is hard to know the structure of the site. Although organized from the user’s the homepage is separated into the different sections, point of view? once the user drills down into the subsections, that structure is lost. 11.Where an interface X The only major metaphor that’s used is the “home” link metaphor is used (e.g., the at the top right of all the pages. desk-top metaphor in office applications), is this made explicit? 12.Where a metaphor is X n/a employed, and is only applicable to certain parts of the system, is this made explicit? 13.In general, is it clear what X It is very confusing where the user goes within the the system is doing? system when they click, as the IA of the site is constantly changing. INFORMATIVE FEEDBACK Questions Always Most of Some of Never N/A Details the Time the Time 1. Are colors assigned according x This site is primarily for browsing and information to conventional associations discovery. The colors assigned are themed in the where these are important? schools brand. The visited links are light grey, this Hartnell Site Analysis 13 (e.g., red = alarm, stop) could be difficult in low contrast situations. They often appear on a dark gray background. 2. Where abbreviations, X The site consistently defines acronyms in their first acronyms, codes and other usage. These tend to be ‘standard’ terms, related alphanumeric information are accreditation and financial aid where they are displayed: (a) are they easy to commonly used. The site generally avoids use of recognize? (b) do they follow abbreviations. conventions where these exist? 3. Where icons, symbols, X Generally the icons and symbols are part of the graphical representations and visual design, and not part of the information other pictorial information are architecture. The use of graphics is generally displayed: (a) are they easy to reserved for photographs, which are used recognize and understand? (b) effectively to portray the persona of the college, do they follow conventions campus, and student body. where these exist? 4. Where jargon and X Jargon is generally not used. The site is terminology are used within the approachable to the casual reader, and prospective system, is it familiar to the user? student. 5. Are established conventions X With the exception of the home page, general followed for the format in which conventions for layout are followed. Navigation and particular types of information process control (e.g. the financial aid application are displayed? (e.g., layout of process) are clearly presented on the left side dates and data) margin, with plenty of white space for clarity. 6. Is information presented and X n/a analyzed in the units with which the users normally work? (e.g., batches, kilos, dollars) 7. Is the format of displayed X n/a information compatible with the form in which it is entered into the system? 8. Is the format and sequence in X There are only a few special printer friendly pages which information is printed (e.g. academic calendar, student schedule). The site compatible with the way it is is optimized for online viewing, not print. displayed on the screen? 9. Where the user makes an X Only the home page has any rollover behavior. This input movement in a particular motion, with is part of natural page exporation, direction (e.g., using a direction takes over the experience by flashing up panels key, mouse, or joystick), is the associated with the rollover. This is very distracting corresponding movement on at first, because it is unexpected.. the screen in the same direction? 10. Are control actions X Yes, with the exception of the home page. The site compatible with those used in very consistently displays bread crumbs for all other systems with which the pages, and most depths. The site wide navigation user may need to interact? can also be access via the footer on the page, which has links to each of the major sub-sites. 11.Is information presented in a X Generally the tasks for registration, financial aid, way, which fits the user’s view and course selection can be followed once you’ve of the task? reached the top level page. 12.Are graphical displays X The home page, and many of the top level pages compatible with the user’s view use photograph to enhance the sense of Hartnell Site Analysis 14 of what they are representing? community, and important part of understand what a college is made up of. 13.Does the organization and X Top down discovery and exploration are generally structure of the system fit the easy to follow. user’s perception of the task? 14.Does the sequence of X The sequence is predictable, and often supported activities required to complete a by page navigation task follow what the user would expect? 15.Does the system work in the X Only the home page has surprising behavior. way the user thinks it should work? Hartnell Site Analysis 15 REFERENCES Nielsen, J., & Molich, R. (1990). Heuristic evaluation of user interfaces. Proceedings of CHI ’90, 241-256. Nielsen, J. (2005). Heuristics for user interface design. Retrieved February 24, 2008, from http://www.useit.com/papers/heuristic/heuristic_list.html.