www.campusconnections.us Cognitive Walkthrough Evaluation Yale University School of Art Allison Hall LIS 644 - Usability Theory & Practice Pratt SILS 1
Executive Summary Yale University is one of the most revered higher education institutes in the world. As an Ivy League school they are held to certain standards of professionalism and expertise. Yale s website offers extensive information about the university and it serves as a virtual representation of the institution. This report evaluates the usability of the School of Art section of Yale s website. Through a cognitive walkthrough approach it has been determined that first time users to the site would confront navigation, usability, and findability issues. Fortunately, the issues found with the site are simple design fixes that will visually and virtually support Yale s steadfast reputation of holding the bar high. Recommended fixes include: Creating consistent backgrounds, colors, and fonts on each page. Content and images should not be placed arbitrarily. Users need to comfortably read each page and quickly access the information they seek. Using proper spatial alignment to reorganize information on each page. Important information should be presented prominently so that it does not become buried with other second tier content of the page. Restructuring navigation options to group content and create hierarchies. This will help users find information more efficiently. Prominently display Yale University s name or logo at the top of each page. A user should be reassured they are on the correct site. These research supported findings will help create a more intuitive and useful experience for the user. Once these recommendations have been implemented, the site will blend in more cohesively with the rest of Yale s website. A sense of uniformity between all aspects of Yale s site will help maintain its strong reputation and allow users to feel confident using their site. Ultimately, users of the School of Art site will easily find, explore, and enjoy the excellent information available on the site. 2
CONTENTS Executive Summary 2 Introduction 4 Methodology 4 Findings and Recommendations 5 Problem and Solution 1 5 Problem and Solution 2 6-7 Problem and Solution 3 8 Problem and Solution 4 9 Example Solutions 9-10 Conclusion 10 Appendix 11-12 3
Introduction Yale University is widely known as one of the most prestigious Ivy League schools. This historic institution is at the pinnacle of American higher education. With great power comes great responsibility and Yale works hard to maintain their reputation. This report evaluates and discusses an area of the institution that has perhaps been overlooked; Yale s School of Art website. The School of Art site is not uniform with the rest of the website and while unique, this is confusing to first time users of the site. Below are the results and recommendations found in a cognitive walkthrough of Yale s Art School website. Methodology A cognitive walkthrough was performed to carry out a task on Yale s School of Art site. This methodology was modeled after The Cognitive Walkthrough Method: A Practitioner's Guide (Wharton, et al). Each step, which can be found below, was determined a success or a failure based on four questions created by Wharton et al. These questions are: Will the user try to achieve the right effect? Will the user notice if the correct action is available? Will the user associate the correct action with the effect trying to be achieved? If the correct action is being performed, will the user see that progress is being made toward solution of the task? Four usability researchers collaborated to complete each step of the task and examined them as the users of the website. Using the results from each step the researchers were able to create a comprehensive evaluation of the task and provide solutions to some of the site s shortcomings. A detailed summary of each step of the walkthrough defined as a success or failure is described in the appendix of this report. Target User: The target user of Yale s School of Art site is a prospective art student. The user is also a first time visitor to the site. The general age range of users ranges from 17 years old and up assuming that high school students interested in college programs would be some of the most common visitors. With short attention spans or inexperience researching, these users need the information they seek to be obvious and readily available. Task: Find the description of the Mobile Computing Graphic Design class and see if there are any limitations or requirements for enrollment in that class. Action Sequence for Interface: www.yale.edu art.yale.edu 1. (on the Yale homepage) Click Academic Programs 2. Click Schools 3. Click School of Art 4. Click Courses 5. Click Graphic Design 752a: Mobile Computing 6. Find course description and prerequisite/limitation information. 4
Findings and Recommendations Yale s School of Art website is one of a kind from an artistic standpoint. The website is clear that the content is a collaboration of student and staff/faculty contributions which also makes it unique. While these are important qualities, the results of the cognitive walkthrough show that some structural and visual improvements could help the overall functionality of the site. Problem #1: Inconsistent background, colors, fonts, and images. The user has a hard time locating and reading content. This is the current homepage for Yale s School of Art site. One of the most important concerns in visual design for a website is readability. If a user has difficulty reading a page, the design has failed. While it is clear that the designers of this page put a lot of effort into creating it, they definitely overlooked some main usability issues. Repetition and alignment are two basic principles of visual design. Instead of using different fonts, fonts colors, and font sizes, it would make it much easier for the user if these items were similar. It is best to avoid noise and clutter. Instead of arbitrarily placing information on the page, it should be mapped out visually so that a user can make intuitive decisions about how they are to use the site. As a general rule, if there is no clear purpose of, for example, alternating the color of every other letter in a sentence, then it should not be done. Solution #1: Create a more consistent background for each page. This includes colors, fonts, and images. The user should know they are on a page associated with Yale. 5
Problem #2: Course page layout is structured without clear mapping or spatial alignment. Information is buried in the page. This is the mobile computing class homepage. This is the first thing the user sees without scrolling down. While there is a simple white background, it is unclear if the content of the page so far relates to the course. (continued on next page) 6
About 3/4ths down the page the user can find a scrollable course description (pictured above). If the user makes it this far (content not pictured are several images, PDF files, and a youtube video) they then have to read in a separate box and scroll down to find all course information. There are many things happening on the page which distract the user from the information on the page. Reorganizing this page and any other course page similar to this would improve usability, readability, and findability. The creators of the site are clearly excited and put a lot of effort into getting interesting (and what appears to be relevant) items on the page. They were meticulous about small details like gradation in the course description. It is important to be detailed but not without purpose. This site right now looks more like a gallery page or blog instead of a representation of the university s art school. A more structured page would definitely help the user understand the site better as well as find the information they seek. Solution #2: Reorganize each Course page to make sure that the course description and relevant prerequisite information is at the top. Consider a template for each page to create consistency. 7
Problem #3: Navigation has no grouped content or hierarchy. It is important that information on websites is created with clear hierarchies. The navigation bar on the left hand side of the page is listed in alphabetical order (aside from Everything Else and Home ). The current navigation has seventeen main links. It appears to be more of a list than a directory of information. Users need guidance when they get to a page. Navigation and content that is logically grouped together help the user orient themselves so that they can find information. Giving the user too many ungrouped options at once can confuse them. It is recommended that the navigation bar is limited to between five and ten main links. This will help create consistent visual and content organization for the user. It is often better to have a logical hierarchy of information as opposed to a list of categories and subjects. Solution #3: Restructure Navigation bar to create a logical hierarchy for increased usability. 8
Problem #4: No Yale logo and poor visibility of Yale affiliation. Each School of the university proudly and prominently displays Yale s name or logo on the top of their page. This is essential because it gives users feedback that they are on a page associated with the university. It is clear that the School of Art is proud of their originality. Consider creating a variation of the Yale logo to represent as the School of Art s logo. Solution #4: Make the Yale affiliation prominent at the top of every page. Example Solutions Example 1 This is an example of a restructured course page for Mobile Computing. Note that color, font, and stylistic choice have been omitted from this example although it would be acceptable to use what is presented. The example is primarily exemplifying a logical layout of information in an easy to read format. 9
Example 2 This is an example of a complete redesign of the Homepage for the School of Art. Highlighted in this example are several of the recommendations mentioned above. A new navigation bar with a logical hierarchy including drop down options is clearly accessible at the top of the page. The colors used are consistent with Yale s school colors and what is used for other department sites. There are no extraneous background images to distract the user from finding information on the page. The user can easily place themselves on the page with the Yale School of Art name prominently displayed at the top left corner. Current events and important information are proportioned well with other content on the page. There is no need to scroll down for more information about an event. This example is one of many ways the School could create a consistent and attractive website that has great usability. The uniqueness of the School s original design could still be applied to a redesign like this if consistency and visual design principles are kept in mind. Conclusion Yale s School of Art website is rich with information. The contributors and designers of the site have done an excellent job making it unique with the option to learn about art as well as read information about the program. However, the School of Art website is not uniform with the rest of Yale s programs and departments. There needs to be consistency throughout a good website; this is especially important for an institution like Yale that is held in high esteem. Consistency in structure, page layout, font, color, and navigation are all areas in which the website needs to be improved. The School of Art is proud of their work and should have a confident website that reflects their programs, passion, and hard work. A simple but effective and purposeful redesign can keep the School s clear originality intact while also incorporating superb usability. Enhancing the usability of the site will not only benefit users but also reinforce Yale s overall online representation. 10
Appendix This appendix provides a summary of each step of the cognitive walkthrough using Wharton et al s model for proper step-by-step analysis. Step 1: Click Academic Programs - Success This step is located on the homepage of the Yale website. It is intended to bring the user, who is interested in finding more information about a specific academic program, into the correct directory. The given task is easy for the user to complete as Academic Programs is a clickable button on the main navigation bar. Immediate feedback is given as the button changes colors when hovering over it and when clicked it takes the user to the desired page. Step 2: Click Schools - Success This step is very direct and a clear option on the page. A user will know what to do and they will notice the correct action is available right away. The School link changes color when it is hovered over to indicate that it is a link. Once clicked, it brings the user to a new page so immediate positive feedback is give. Step 3: Click School of Art - Success This is also a success. The next step makes senses to users and they are able to find School of Art easily as the schools are listed alphabetically. Again, the link changes color to indicated it is clickable and when the user clicks it they are taken to a new page. Step 4: Click Courses - Failure Based on on visibility alone this step fails. This step brings the user to the School of Art homepage and the user becomes disoriented. The page is not uniform with the rest of Yale s site and the user may feel that they have been redirected to another site completely. This could very easily tempt the user to leave the page. Furthermore, the navigation is listed together quite compactly on the left hand side. The Courses tab seems buried in a list of other main navigation options and is hard to find. Step 5: Click Graphic Design: 752a Mobile Computing - Success (with improvements needed) For the most part this step was a success. The user will definitely try to achieve the right effect and scroll down the page as it is logical to do so. Graphic Design courses happen to be at the top of the course list because they are listed alphabetically. If this was not the case the user might have trouble locating this step due to lack of visibility. Other than that it is very obvious to the user that they are on the right page to find what they re looking for. 11
Step 6: Find the course description and any prerequisite or limitation information - Failure This step did not pass any of the cognitive walkthrough questions successfully. The graphics and colors on the page distract and disorient the user. The main information on the page is located near the bottom. It is likely that the use may not find it or know what to do. There is no feedback or affordances give to the user to indicate they are making progress to find what they re looking for. References Wharton, C., Rieman, J., Lewis, C., Polson, P. The Cognitive Walkthrough Method: A Practitioner's Guide. University of Colorado Boulder; Institute of Cognitive Science, 1994. 12