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'sGuide. University of Colorado Boulder; Institute of Cognitive Science, 1994.

12