A Heuristic Evaluation of the St. Thomas Undergraduate Website
Brent Larsen
Writ4501
1

The heuristic evaluation developed by Jakob Nielsen involves “ten general principles for user interface design” (Nielsen). These principles are designed as a form of discount usability used to test the interface design of websites, software, etc.

Visibility of System Status

Visibility of system status simply means that the website should offer the user some kind of visible feedback that the website is actually responding to the user (Nielsen). The St. Thomas undergraduate website successfully follows this principle by using some features to tell the user that the website is responding to their actions. Things like rollover text, rollover navigation tabs, and a changing background image.

Figure 1 - Background image change
(Source: http://www.stthomas.edu/admissions/undergraduate/)

The background images on the page change every few seconds (see figure 1). This allows the user to see that the page is still working properly, but beyond the page, this also allows the user to see if their computer or browser is still working properly. If the picture changes, then everything is working fine. If it stays one image for too long, then there might be something wrong with the website, their computer, or web browser.
Most of the navigable links have a roll over text color of white (see figure 2), allowing the user to see that the text is a link. The tabs at the top also use this same rollover color, but when one is clicked to view that certain page’s content, that rollover color stays.

Figure 2 - Rollover text color
(Source:
http://www.stthomas.edu/admissio ns/undergraduate/) Brent Larsen
Writ4501
2

Besides the browser’s particular feedback, showing the full link at the bottom or showing the progress of loading a page, the website itself doesn’t show any feedback or loading progress from page to page. But the website loads quickly from page to page, allowing the user to judge for him or herself if the page or their computer is in proper working order.

Match between System and the Real World

This next principle simply says that the website should match expectations by using their language and following a logical order (Nielsen). And the St. Thomas website follows this principle successfully by using words that their audience would know.
The website uses terms that would be familiar to their target audience, young high school students and their parents. Since it is based around the American culture, the words chosen for the website are those that a college student, or a prospective student, would be looking for and would recognize. For example, the “Majors & Academics” tab uses the “major” which is a term familiar to American college students (see figure 3). This term might not be the same that is used in Great Britain, for instance, so if a prospective British student was looking at the site, they might not know that major means the area of study.

Figure 3 - Majors & Academics tab
(Source:
http://www.stthomas.edu/admissions
/undergraduate/)

Figure 4 - List of links on the bottom of the page
(Source: http://www.stthomas.edu/admissions/undergraduate/)

The website also has the same link-heavy structure that is common among a lot of university websites
(see figure 4). University websites have a lot of information to keep and update, so users might expect the site to have a lot of links to separate the information, making it easier to find and distinguish from vast amount of other information the site would contain.

User Control and Freedom

The user control and freedom principle simply says that a website should off the user a way out of the current page and back to where they came from, possibly a homepage link (Nielsen). The St. Thomas website is somewhat successful in using this principle, but it could use some improvement in this area.

Brent Larsen
Writ4501
3
The website uses a simple tab navigation style of interface. This makes it easy to navigate through the content without getting too lost in the information. But upon first glance, there appears to be no homepage link that would bring the user back to the undergraduate website.
Figure 5 shows the homepage link as the white “Undergraduate Admissions” label. This link is made a different color than the other links, giving the user no visual way of knowing it is a link at all. It also doesn’t have a rollover color change like all of the other links on the page.
The only way the user would know that
Figure 5 - Homepage link the Undergraduate label is a link is to
(Source: http://www.stthomas.edu/admissions/undergraduate/) notice the cursor changing when the user mouses over the text, and a novice computer user might not notice this or know that when the cursor changes it means that it a link.

Consistency and Standards

The consistency and standards principle says that the website should use words and labels as the user expects them to be used and have the actions do the same thing across the site. The website should also follow the conventions that people expect from a website (Nielsen). A link, for example, should take the user to the information they expect from that link’s label. The St. Thomas website is successful in staying consistent across the website.
When the “Why UST” link is clicked, it brings the user to a page that gives them information as to why they should go to St. Thomas. At this link a black box and simple icons are used to present information to the user. The simple icons allow the user to simply see what that particular bit of information says.

Figure 6 - Simple labels
(Source: http://www.stthomas.edu/admissions/undergraduate/whyust/)

The website uses labels that the user would expect, shown in Figure 6. For example, the “Majors &
Academics” tab brings the user to list of majors and minors St. Thomas offers, as the user expects. The
“Tuition and Financial Aid” tab brings the user to the cost of attending St. Thomas. These labels not only bring the user to the information they expect, but they use the same, or very similar, link labels that university websites use for that information.

Error Prevention

The error prevention principle simply says that the website’s designers should work to eliminate user errors (Nielsen). This might be through simple design, good instructions, or confirmation messages. The users should not cause errors, and steps should be taken to prevent them from being able to cause an error or problem. The St. Thomas website successfully follows this principle by using a simple, intuitive design. Brent Larsen
Writ4501
4

Figure 7 - The main homepage's link system
(Source: http://www.stthomas.edu/admissions/undergraduate/)

The websites simple design, shown in Figure 7, prevents many of the users’ errors. Most of the website is made up of links that are, for the most part, easily navigated back from. These links are clearly labeled, and the quick links are given a clear, brief description of what information the user can expect from that page. There are no confirmation prompts for the user, though. The only place where an error can occur is in the contact forms, and errors here are prevent with simple error messages. Error messages are discussed in the “Help Users Recognize, Diagnose, and Recover from Errors” section below.

Recognition Rather than Recall

The recognition rather than recall principle says the website should be designed so that the user doesn’t have to remember a lot of information (Nielsen). The information should also be put in a visible way.
The St. Thomas website also follows this principle successfully. The St. Thomas website follows this principle by using simple icons next to short pieces of information. The icons, like those shown in Figure 8, are easily recognizable and easily associated with the label for that particular piece of information. The “St. Thomas
Values” heading has a pair of shaking hands next to it, allowing the user to see and relate the information to what the text is about. The text itself is very short and
Figure 8 - Simple Icons relate to information
(Source:
concise. This conciseness, along with the simple icons, http://www.stthomas.edu/admissions/undergraduate makes the information really easy to remember.
/whyust/)

Flexibility and Efficiency of Use

The flexibility and efficiency of use principle says that the website should be designed so that an inexperienced user can operate it and an expert user is given short cuts or accelerators to quickly

Brent Larsen
Writ4501
5 navigate the website (Nielsen). The St. Thomas website is successful in incorporating this principle by using a search bar and a site map of links on the bottom of the page.
At the top right of the St. Thomas website, there is a set of link with a search bar at the end. This search bar, shown in Figure 9, allows the expert user to quickly access the information he or she needs without having to navigate through the structure of links provided. But at the same time, it is small enough and out of the way of the novice user,
Figure 9 - Search bar so they would be less likely to be tempted to
(Source: http://www.stthomas.edu/admissions/undergraduate/) use this feature. The website also gives the expert user, or at least an expert user of a university style website, the feature of a site map, laid out in the form of links, at the bottom of the page (see Figure 4). This allows the expert user to go right to any section within a link without having to navigate through the website.

Aesthetic and Minimalist Design

The aesthetic and minimalist design principle simply states that the website should not contain unnecessary information (Nielsen). The information should be kept as concise as possible and should be free of irrelevant information. The design of the site should be clean and not be busy with information.
The St. Thomas website follows this principle wonderfully. The text is kept short and the site is clear things that clog up its visual space.
The text throughout the website is kept short and to the point. It doesn’t bombard the user with information that does not pertain to that link or section. It is kept concise. The quick links, these can be seen in the middle of Figure 1, use a quick sentence or two to tell the user what the link is about. Once a user is inside one of these links, there are
Figure 10 - Request a visit page text
(Source:
further links that have another quick http://www.stthomas.edu/admissions/undergraduate/visit/schedule/) sentence or two—this can be seen in the text in Figure 8. But even the main text inside one of these links is kept to a short paragraph or two.
Figure 10 shows the text inside of the Visit link. The text for this link is kept short, only giving the user the pertinent information they would need to schedule a visit on the campus. This concise style of writing is used all across the website, keeping the user from reading a lot of unnecessary information that they did not want or need to read.

Help Users Recognize, Diagnose, and Recover from Errors

The help users recognize, diagnose, and recover from errors principle simply says the website’s designer should give the user simple, easy to understand error messages so they can correct what they did wrong
(Nielsen). The St. Thomas website follows this principle nicely by providing error messages where they are needed.
There aren’t many places an error message is needed, but there are some forms that users have to fill out. These forms provide good error messages to the users so they know what they did wrong. In Figure

Brent Larsen
Writ4501
6

11 below, the form was very incorrectly filled out. In this form, all of the fields are required to be filled out before submitting to the website, and if they are left blank or incorrectly filled out, the error message tells them so right by the text box for that field.
Most fields give a simple error message of
“This field is required,” but the email and phone number fields give a more specific error message: “Please enter a valid email address” and “Please enter a valid phone number. The only way these two messages could be more specific would be to provide an example format, something like “Please
Figure 11 - Error messages
(Source:
enter a valid phone number, example http://www.stthomas.edu/admissions/undergraduate/contact/) (555)321-1234.” The user would also be benefitted by being told what is required and what is not required. A popular way of doing this is by saying “* Required” and then place the asterisk by the label of each required field. This would eliminate some of the initial problems users might have.

Help and Documentation

The help and documentation principle simply states that documents or instructions be offered the user if they should need them (Nielsen). The St. Thomas website partially follows this principle by offering the user a form to request information or have their questions answered because the website’s simple design mostly negates the need for help documentation. The website’s easy to navigate interface makes the need for any help documentation to exist unnecessary. They do, however, offer a simple form to request further information (shown in
Figure 12) the site may not have or the user simply may not be able to find. This form would help users who may not be able to navigate the website to simply request the information they need. And since these users would more than likely be novice computer users, this form, like the contact form shown in Figure 11, also provides the user with simple error messages if they fail to fill in a field correctly.
Figure 12 - Request information form
(Source:
http://www.stthomas.edu/admissions/undergraduate/contact
/requestinfo/)

Brent Larsen
Writ4501
7

Conclusion

The designers of the St. Thomas undergraduate website have followed most of Jakob Nielsen’s heuristic evaluation principles nicely. The simple, graphic-based design of the website follows many of the principles put forth by Nielsen. The design alone helps follow the visibility of system status, error prevention, consistency and standards, recognition and recall, flexibility and efficiency of use, and aesthetic and minimalist design principles. The design helps to conform to all of these principles by being intuitive to even the novice web user. The simple, concise text and labels conform to the Match between System and the Real World, recognition and recall, and aesthetic and minimalist design principles. By using these clear labels and concise text, the website is easy for users to navigate because they know what to expect and can better remember the concise information they have already read.
There are some minor problems though. By adding a rollover color to the “Undergraduate Admissions” page label, it would make it clearer that the text is a link to the homepage. Changing this, or simply adding a homepage link, would help follow Nielsen’s user control and freedom principle. But this is only a minor problem, one of a few minor problems that I have found in my evaluation. These can be simply corrected, and the websites current help features will help the users along their path of finding the information they need by the simple error messages the various help forms provide. The website has a great start and my evaluation was only able to uncover a few minor problems.

Brent Larsen
Writ4501
8

Works Cited
Background Image Change. Digital image. University of St.Thomas Undergratduate Admissions.
University of St. Thomas. Web. 7 Oct. 2011.
<http://www.stthomas.edu/admissions/undergraduate/>.
Error Messages. Digital image. University of St.Thomas Undergratduate Admissions. University of St. Thomas. Web. 7 Oct. 2011.
<http://www.stthomas.edu/admissions/undergraduate/contact>.
Homepage Link. Digital image. University of St.Thomas Undergratduate Admissions. Web. 7
Oct. 2011. <http://www.stthomas.edu/admissions/undergraduate/>.
List of Links on the Bottom of the Page. Digital image. University of St.Thomas Undergratduate
Admissions. Web. 7 Oct. 2011. <http://www.stthomas.edu/admissions/undergraduate/>.
The Main Homepage's Link System. Digital image. University of St.Thomas Undergratduate
Admissions. University of St. Thomas. Web. 7 Oct. 2011.
<http://www.stthomas.edu/admissions/undergraduate/>.
Majors & Academics Tab. Digital image. University of St.Thomas Undergratduate Admissions.
Web. 7 Oct. 2011. <http://www.stthomas.edu/admissions/undergraduate/>.
Nielsen, Jakob. "10 Heuristics for User Interface Design." Useit.com: Jakob Nielsen on Usability and Web Design. 2005. Web. 07 Oct. 2011.
<http://www.useit.com/papers/heuristic/heuristic_list.html>.
Request a Visit Page Text. Digital image. University of St.Thomas Undergratduate Admissions.
University of St. Thomas. Web. 7 Oct. 2011.
<http://www.stthomas.edu/admissions/undergraduate/visit/schedule>.
Request Information Form. Digital image. University of St.Thomas Undergratduate Admissions.
University of St. Thomas. Web. 7 Oct. 2011.
<http://www.stthomas.edu/admissions/undergraduate/contact/requestinfo>.
Rollover Text Color. Digital image. University of St.Thomas Undergratduate Admissions. Web. 7
Oct. 2011. <http://www.stthomas.edu/admissions/undergraduate/>.
Search Bar. Digital image. University of St.Thomas Undergratduate Admissions. University of
St. Thomas. Web. 7 Oct. 2011. <http://www.stthomas.edu/admissions/undergraduate/>.
Simple Icons Relate to Information. Digital image. University of St.Thomas Undergratduate
Admissions. University of St. Thomas. Web. 7 Oct. 2011.
<http://www.stthomas.edu/admissions/undergraduate/whyust>.
Simple Lables. Digital image. University of St.Thomas Undergratduate Admissions. University of St. Thomas. Web. 7 Oct. 2011.
<http://www.stthomas.edu/admissions/undergraduate/whyust>.