Embed Size (px)
Citation preview
1/59
CSS480 - Project 2 Human Computer Interaction February 18, 2001
Heuristic Website Evaluation: Yale School of Architecture
Ryan Huff (#9638107 - [email protected]) Derek Gerstmann (#9722369 - [email protected]) Francis Charles Jr. (#0050683 - [email protected])
2/59
Table of Contents Table of Contents ...................................................................................2
Summary ................................................................................................3
Related Literature...................................................................................3
Website Description...............................................................................6
Individual Evaluations ............................................................................8
Data Analysis....................................................................................... 21
Identified Problems ............................................................................. 22
Suggestions for Redesign................................................................... 29
References.......................................................................................... 32
Appendix A: Site Map ......................................................................... 33
Appendix B: Screenshots ................................................................... 39
3/59
Summary
Using the principles and guidelines presented by Nielsen and Molich, our group
performed a heuristic evaluation of the website for Yale’s School of Architecture
(http://www.architecture.yale.edu). Each individual in our group inspected the
website’s interface, evaluated the interface’s usability characteristics against a list
of recognized usability principles, and documented the usability issues that they
identified. These independent reviews were then combined and analyzed to
produce a final list of errors each ranked by their associated severity.
Our findings indicate that although the design of the website we reviewed is
aesthetically pleasing, several fundamental navigation problems exist that greatly
restrict the usability of the website as a whole.
Related Literature
The existence of Internet web-based material has rapidly evolved into a common
form of communication. A true testament to the popularity of this medium is the
astounding number of sites found on the “world wide web”. One study conducted
by Steve Lawrence and Lee Giles in 1999 estimated that over 11 million sites
composed of 800 million pages were publicly accessible on the web.
Consequently, the web provides the user with an incredible amount of choice
between possible destinations and accessible alternatives. As a result, a website
must be easy to use in order to attract users. One way to assess a website’s
usability is through heuristic evaluation.
4/59
Developed by Jakob Nielsen and Rolf Molich (Nielsen 1990), heuristic evaluation
is a usability engineering method for determining whether or not a flaw exists in
an interface that could inhibit the usability of a system. (When viewed in the
context of a heuristic website evaluation, the interface is represented by the
webpage, and the user by the person accessing the page.) In order to identify the
largest number of usability problems, this method requires several individuals to
independently evaluate an interface, comparing the interface’s design against a set
of accepted usability metrics, or heuristics.
Our group used the latest revision of Nielsen’s recommended list of heuristics for
our evaluation. These 10 general guidelines are outlined below.
Heuristic Description H1 Visibility of System Status The system should always keep users informed
about what is going on, through appropriate feedback within reasonable time.
H2 Match Between System and the Real World
The system should speak the users' language, with words, phrases and concepts familiar to the user, rather than system-oriented terms. Follow real-world conventions, making information appear in a natural and logical order.
H3 User Control and Freedom Users often choose system functions by mistake and will need a clearly marked "emergency exit" to leave the unwanted state without having to go through an extended dialogue. Support undo and redo.
H4 Consistency and Standards Users should not have to wonder whether different words, situations, or actions mean the same thing. Follow platform conventions.
H5 Error Prevention Even better than good error messages is a careful design which prevents a problem from occurring in the first place.
H6 Recognition Rather than Recall Make objects, actions, and options visible. The user should not have to remember information from one part of the dialogue to another. Instructions for use of the system should be
5/59
visible or easily retrievable whenever appropriate.
H7 Flexibility and Efficiency of Use Accelerators -- unseen by the novice user – may often speed up the interaction for the expert user such that the system can cater to both inexperienced and experienced users. Allow users to tailor frequent actions.
H8 Aesthetic and Minimalist Design Dialogues should not contain information which is irrelevant or rarely needed. Every extra unit of information in a dialogue competes with the relevant units of information and diminishes their relative visibility.
H9 Error Recovery Error messages should be expressed in plain language (no codes), precisely indicate the problem, and constructively suggest a solution.
H10 Help and Documentation Even though it is better if the system can be used without documentation, it may be necessary to provide help and documentation. Any such information should be easy to search, focused on the user's task, list concrete steps to be carried out, and not be too large.
Table 1.0 - Recommended Heuristics (Nielsen 1994)
Nielsen also recommends a rating scale from 0 to 4 to determine the severity of a
problem.
Rating Description
0 No usability problem 1 Cosmetic problem; fix only if extra time is available 2 Minor usability problem; give a low priority to fixing problem 3 Major usability problem; give a high priority to fixing problem 4 Catastrophic; fix before product is released
Table 1.1 - Recommended Severity Ratings (Nielsen 1994)
To complement the recommendations made by Nielsen, our group also referred to
Bruce Tognazzini’s list of basic interface principles. Although not a set of
specific heuristics, Tognazzini’s list outlines fundamental properties for designing
an effective interface and are fairly universal in nature. These specific properties
reveal additional problems that are not apparent under Nielsen’s generic list.
However, due to the length of Tognazzini’s list, it was not practical to use during
6/59
the individual evaluation sessions. Nevertheless, each group member studied
these principles before performing their independent review and applied them to
Nielsen’s guidelines during the evaluation. Tognazzini’s principles are briefly
summarized below.
Principle Description
Anticipation Applications should attempt to anticipate the user’s wants and needs. Autonomy Use status mechanisms to keep users aware and informed. Keep
status information up to date and within easy view Color Blindness Any time you use color to convey information in the interface, you
should also use clear, secondary cues to convey the information to those who won't be experiencing any color coding today.
Consistency Be consistent. It is just important to be visually inconsistent when things must act differently as it is to be visually consistent when things act the same.
Defaults Defaults should be easy to "blow away:" Defaults should be "intelligent" and responsive.
Efficiency of the User Look at the user's productivity, not the computer's. Keep the user occupied.
Explorable Interfaces Give users well-marked roads and landmarks, then let them shift into four-wheel drive. Offer users stable perceptual cues for a sense of "home." Always allow a way out.
Fitts’s Law The time to acquire a target is a function of the distance to and size of the target.
Human-Interface Objects
Human-interface objects can be seen, heard, touched, or otherwise perceived and should be understandable, self-consistent, and stable.
Latency Reduction Reduce the user’s experience of latency. Make it faster Learnability Limit the Trade-Offs Use of Metaphors Choose metaphors well, metaphors that will enable users to instantly
grasp the finest details of the conceptual model. Protect Users’ Work Ensure that users never lose their work due to some sort of error. Readability Text that must be read should have high contrast. Use font sizes that
are large enough to be readable on standard monitors. Visible In terfaces Avoid invisible navigation.
Table 2.0 – Summary of Basic Interface Principles (Tognazzini 1998)
Website Description
In its current state, the Yale School of Architecture’s website is a resource center
for past, current, and prospective students and contains information relating to the
university’s various architecture programs. The site is contextually organized into
7/59
the ten categories: Admissions, Alumni, Archives, Courses, Exhibitions,
Faculty, E-kiosk, Lecture, Links, and Publications.
The Admissions section is geared towards prospective students looking for
general information about the school, and the necessary requirements for
admittance. This section includes a letter to the students from the dean, an
explanation of degree programs, program requirements, information for
international students, and a brief statement about the school’s history. Tuition
and finance information is also available, as well as downloadable applications
and forms for returning students.
Most of the other sections are intended for students currently enrolled in the
school of architecture. These sections include additional information about the
school, courses, and projects in the department, a lecture schedule for fall and
spring, and information on school staff. E-kiosk is one of the categories that is
intended to be a forum for students, which includes student, register, financial aid
postings that display of such things as job listings, housing listings, and other
announcements. An academic calendar and digital media resources are also listed
under this student category.
Additionally, the site provides for services for alumni and other interested parties.
This includes an alumni section that contains news on past students and a
database that provides alumni with an email address and the capability to search
for former students, the ability to access past archives and ftp information, and
exhibition schedules for Fall 2000 and Spring 2001. Finally, the Publication and
8/59
Links sections provide further information and additional sources about the
university, facilities, area, and other related general information.
Individual Evaluations
After reviewing the related material, each group member performed an
independent evaluation of the subject website. Each individual session was
conducted in multiple passes. The first pass of the examination oriented the group
member to the interface, and each subsequent pass focused on specific
components of the interface. During the examination, the group member
compared the elements of the interface to the checklist of recommended heuristics
(Nielsen 1994) and the principles of interface design (Tagnazzini 1998). Once a
problem was identified, the group member documented the usability principle that
was violated, rated the violation by assigning it a severity rating, and described
the context in which the problem was discovered.
Determining an appropriate severity rating proved to be a significant part of the
evaluation. In addition to the rating scale mentioned earlier, group members were
encouraged to consider the following principles recommended by Nielsen for
each problem.
• Frequency – is the problem common or rare? • Impact – how easy is it for users to overcome the problem?
• Persistence – does the problem reoccur?
9/59
The results of the individual evaluation are presented below, separated by the
name of each group member.
• Derek Gerstmann
1. [H5 Error Prevention] (Severity 4) The initial splash page (see figure) does not properly inform the user
whether their browser lacks the necessary plugin (Macromedia Flash) to
view the site. The system actually removes all entry points to the site (see
figure), leaving the user stranded at the splash page with no explanation of
either the error, or proper instructions to correct the mistake.
2. [H1 Visibility of System Status] (Severity 2)
Several pages on the site take a significant amount of time to load
depending on the user’s connection. However, only the main screen
provides a “now loading” status message (see figure). All other pages
initially display an empty black screen (see figure), thus the user has no
indication of whether the page they selected is valid until the associated
graphics have finished loading.
3. [H6 Recognition Rather than Recall] (Severity 3) The system does not adequately describe the 10 active areas on the main
page (see figure). A caption appears on the far right side of the interface
when the user’s cursor is positioned over an active area, but the distance
between the caption and the selected active area increases linearly as the
user moves from the right side of the page to the left. If the user starts on
10/59
the left side of the interface and highlights an active area, the caption can
easily go unnoticed. This forces the user to rely on prior knowledge to
navigate the interface, thus reducing the effectiveness of the system to a
minimum.
4. [H1 Visibility of System Status] (Severity 2) On the main page, when the user selects a menu item by clicking on an
active area, the system progressively draws a line from the left side of the
page to the position of the selected active area before displaying the items
contained in the menu. If the rightmost menu item is selected, this
animation takes approximately 1 second and could be distracting to
experienced users already familiar with the structure of the site.
5. [H7 Flexibility and Efficiency of Use] (Severity 3) The system provides no mechanisms for expert users to quickly navigate
the site. There are neither accelerators, nor “quick” links to specific areas
of the site. All users are forced to go through the same depth of menu
navigation and no bypass functions are provided.
6. [H1 Visibility of System Status] (Severity 3) Throughout the site, the current location is not indicated to the user. The
only sense of position the user has is through the abstract background
images, and the titles of the submenus. Although the background images
correspond to the selected active area on the main page (see figure), the
user must remember which background goes to which section.
11/59
7. [H3 User Control and Freedom] (Severity 4) The system destroys the functionality of the “back” button in the user’s
web browser. Loading a previously visited page no longer works.
Instead, the last “flash” page is displayed, which most likely does not
correspond to the content the user was looking for.
8. [H4 Consistency and Standards] (Severity 3) The system does not allow the user to “bookmark “ the current page for
future visits. The only exception is the splash page, which forces all users
to enter through this page.
9. [H8 Aesthetic and Minimalist Design] (Severity 1) Once a menu item has been selected on the main page, a puzzling caption
is displayed at the bottom of the page. This caption appears to be
composed of the name (truncated to the first two letters) and number of
the selected area, as well as an unknown number, each separated by a
period (see figure). In its current form, this combination of periods, letters
and numerical values makes it fairly difficult for the user to decipher, and
ultimately useless for anything but filling up content space.
10. [H6 Recognition Rather than Recall] (Severity 2) Once the user clicks on an active area on the main page, the name of the
selected menu is displayed below the selected active area (towards the
bottom of the screen) whereas the menu’s contents are listed above the
12/59
active area (towards the top of the screen). This degree of separation can
be quite large if few items are contained in the menu (see figure), making
the association between the menu and it’s contents more difficult for the
user.
11. [H4 Consistency and Standards] (Severity 2) Links to different areas within the site do not follow any of the established
web standards. Links are neither underlined, nor blue in color. The only
indications that a link exists are that both the user’s cursor and the page’s
link change state when the user moves their mouse over an appropriate
area (see figure).
12. [H4 Consistency and Standards] (Severity 2) Text contained in the system is inconsistent. Some areas are all lower
case, and others are normal (see figure). Lower case should be avoided
since it is typically harder for the user to read.
13. [H4 Consistency and Standards] (Severity 2) In some subsections, such as the degree subsection in the admissions
menu, the list of items is mixed with links and expanding submenus. On
the top level both the links and the submenus are represented identically.
14. [H3 Flexibility and Efficiency of Use] (Severity 3) When a link is selected in one of the area subsections and a large amount
of text is displayed in the content window (e.g. admissions > degree
13/59
programs > undergraduate studies), the system does not provide an
efficient means of navigating through the text. The user has to scroll line
by line using the up and down arrows located on the left side of the title
bar. There is no way to advance to the end of the page, or return to the
top.
15. [H3 User Control and Freedom] (Severity 3) When selected from the main page, a menu subsection will appear in a
new, fixed size browser window placed at the upper left of the user’s
screen. This restricts the user from choosing whether or not to browse in a
single window or not and may hide the window from the user’s view.
Additionally, if the user were to close the window containing the main
page and continue browsing in the new window, they would not be able to
return to the main site.
16. [H3 User Control and Freedom] (Severity 2) The system restricts the user from changing the width and size of the
interface. The use of a fixed resolution makes the user unable to resize the
window to fit their display. Specifically, the main page is fixed at a
resolution of 750x450 pixels, making it extremely difficult for any user
with a screen resolution less than 800x600 pixels to view the site.
17. [H3 User Control and Freedom] (Severity 1)
14/59
The system restricts the user from changing the style and size of fonts. If
the user has a larger or smaller display than the interface and wished to use
larger or smaller fonts to adjust the difference in size, they could not do so.
18. [H5 Error Prevention] (Severity 2) Several links do not work. Unlike standard links, these broken links are
not active and could be confusing to the user (see figure).
• Ryan Huff
1. [H2 Match between system and real world] (Severity 3) Many of the labels do not make clear sense and do not having explanation.
Labels that are not understandable to the user may cause confusion and
unintended results. For example, labels on the bottom of the main page
when a category is selected, include two letters, followed by a period and
two numbers, followed by another period and two more numbers.
2. [H10 Help and documentation] (Severity 2)
There is no documentation offered on this site to provide or explain the
features of flash technology. The user may be unaware of some of the
capabilities of this technology.
3. [H2 Match between system and real world] (Severity 3)
The default size of font for the text is so small that many of the words are
difficult to read.
4. [H7 Flexibility and inefficiency of use] (Severity 2)
In order for some users to be able to read the text, they may have to use
the zoom features of Flash technology. The user is not allowed to specify
15/59
the degree in which to zoom in or out of window. In combination with the
small, nonadjustable window size, it is difficult and time consuming to
view the entire window in an enlarged state.
5. [H4 Consistency and standards] (Severity 2)
Many of the grayscale and light design techniques used may be difficult to
view and/or understand without a color monitor or if the user was
colorblind.
6. [H4 Consistency and standards] (Severity 3)
The use of text does not follow any web or grammatical standards. There
are instances of unrecognizable symbols within the text and inconsistent
and erratic use of capitalization and punctuation. For example the words
‘m.arch’ and ‘M.Arch.’ can be found in the text.
7. [H4 Consistency and standards] (Severity 4)
The meaning of some words cannot be determined. For example, under
‘admission requirements’, links ‘m.arch 1’ and ‘m.arch 11’ are listed, but
the links may be intended as ‘m.arch I’ and ‘m.arch II’. It is unknown if
the intention is to list two dates or the number of March.
8. [H4 Consistency and standards] (Severity 3)
Not all links are connected, some link to a new window, some are broken
and do nothing, and others give a message that the site is under
construction.
9. [H4 Consistency and standards] (Severity 2)
16/59
Some links are only active on certain letters of the link, but all letters. For
example, under ‘Admissions’, select the ‘dean’s letter’ link, and only
certain letters of the name ‘Robert A.M. Stern, Dean’ can activate the link.
10. [H4 Consistency and standards] (Severity 1)
The name of the link does not always match the name of the destination.
For example, the link above called ‘dean’s letter’ opens up a window titled
‘dean’s statement’.
11. [H1 Visibility of system status] (Severity 2)
There is inconsistent use of user feedback when the pointer is over a link.
Normally and hand represents that the pointer is over a link, otherwise an
arrow is depicted as the pointer. This methodology is not always followed,
as there are instances when both the representation of a hand and an arrow
are used incorrectly.
12. [H3 User Control and Freedom] (Severity 4)
Not only are there very few marked exits, most of the time you have to
close the window and retrace your steps to return to the previous page or
section.
13. [H3 User Control and Freedom] (Severity 3)
There are no scroll bars or other alternatives for users to quickly navigate
through long text. The user has to use arrow icons to scroll through the
text in single line intervals.
14. [H3 User Control and Freedom] (Severity 3)
17/59
There is not a way for an experienced user to quickly navigate to a desired
location without going through all of the links that a novice user would do.
15. [H10 Help and documentation] (Severity 2)
There is no help or any documentation if a user has questions regarding
the site.
16. [H8 Aesthetic and Minimalist Design] (Severity 1)
Some of the flash movement is distracting and unnecessary, especially in
the middle of the page, and it detracts from the intent of the site.
17. [H3 User Control and Freedom] (Severity 2)
Most selections of a link open a new window rather than changing the
current one. There is no distinguishable path back to previous sections,
pages.
18. [Misc] (Severity 1)
The user is not able to resize the windows. Each page is a fixed size.
19. [Misc] (Severity 1)
Poor contrast of text with white text on dark background.
• Charles Francis
1. [H4 Consistency and standards] (Severity 1)
Some of the pages on the site have formats far removed from the general
design. This may leave users confused about the authenticity of the link.
2. [H4 Consistency and standards] (Severity 2)
18/59
Some of the links have confusing titles. This may cause user error when
searching or accessing site.
3. [H1 Visibility of system status] (Severity 2) Long wait times during page loading. User only notified dur ing loading of
homepage. Lack of notification may incorrectly signal error to user.
4. [H2 Match between system and the real world] (Severity 2) The interface doesn’t conform common interface of similar website. The
unusual interface may create a gulf of execution for novice users.
5. [H10 Help and documentation] (Severity 3) There is no key available to assist the user in assessing and completing
available tasks. This may create a gulf of execution between the user and
website operations.
6. [H6 Recognition rather than recall] (Severity 3) Limited browser capabilities do not allow user to retrace steps. This may
cause user frustration is a particular goal cannot be achieved again.
7. [H7 Flexibility and efficiency of use] (Severity 3) A new browser window is opened after every major mouse-click. This
may uselessly tax user system resources.
8. [H5 Error prevention] (Severity 2)
19/59
Several dead links appear within the site. There are even dead links
pointing back to the home page. This may cause user distrust in the
quality of information.
9. [H3 User control and freedom] (Severity 2) There are several links that are not open. This may cause user distrust in
the quality of information.
10. [H7 Flexibility and efficiency of use] (Severity 2) There are no links to directly access site capabilities. This void inhibits
expert users from using their time more efficiently.
11. [H8 Aesthetic and minimalist design] (Severity 1) Many of the screens contain boxes of information where the size of the
font is too small. This may inhibit the user from getting information
without undue strain.
12. [H3 User control and freedom] (Severity 1) The browser screens cannot be resized. This doesn’t allow the user to
fully augment their display device, and may cause undue navigation
frustration.
13. [H8 Aesthetic and minimalist design] (Severity 1) Text is often displayed in negative contrast (white text on black
background). This may cause undue eyestrain to the user.
20/59
14. [H3 User control and freedom] (Severity 2)
User is not allowed to change authorization in FTP capability. A default
“Anonymous” authorization is given without ability to change it. This
restricts access to controls from appropriate users.
15. [H1 Visibility of system status] (Severity 1) There is no visible change to interface when mouse pointer hovers. This
may cause a gulf of execution, as the user is unclear about functions and
capabilities.
16. [H1 Visibility of system status] (Severity 1) The mouse pointer is often seen as a hand ins tead of an arrow on several
pages. This may cause a gulf of execution, as the user is not sure what
links may be clicked on.
17. [H3 User control and freedom] (Severity 3) The user is unable to use the browsing capabilities of a common website.
Common function icons such as “Back,” “Forward,” and “Refresh” are not
readily available to the user.
18. [H4 Consistency and standards] (Severity 2) Several of the links cause the user to leave the original site. This is done
without warning, nor a disclaimer concerning the viability of these sites.
19. [H9 Error Recovery] (Severity 2)
21/59
There is no available contact information to the administrators of the site.
This may prevent useful feedback from users that suggest improvements.
Data Analysis
The following plot illustrates which group member found which usability
problems for our group heuristic evaluation. Each column (sorted from most
successful to least successful) represents a single group member and each row
(sorted from the hardest to find to the easiest) represents one of the 33 unique
usability problems identified by our group. Every black square identifies that the
evaluator successfully found the usability problem represented by the column.
Hard
22/59
Easy
Unsuccessful Successful
Evaluators
Identified Problems
After examining the individual evaluations and performing our data analysis, we
were able to compile our findings into a complete list of unique errors with
corrected severity ratings. This list of normalized problems is included below.
1. [H4 — Consistency and standards] (Severity 1)
Some of the pages on the site have formats far removed from the general
design. This may leave users confused about the authenticity of the link.
23/59
2. [H4 — Consistency and standards] (Severity 2)
Some of the links have confusing titles. This may cause user error when
searching or accessing site.
3. [H1 — Visibility of system status] (Severity 2)
Long wait times during page loading. User only notified during loading of
homepage. Lack of notification may incorrectly signal error to user.
4. [H2 — Match between system and the real world] (Severity 2)
The interface doesn’t conform common interface of similar website. The
unusual interface may create a gulf of execution for novice users.
5. [H6 Recognition Rather than Recall] (Severity 3)
The system does not adequately describe the 10 active areas on the main
page (see figure). A caption appears on the far right side of the interface
when the user’s cursor is positioned over an active area, but the distance
between the caption and the selected active area increases linearly as the
user moves from the right side of the page to the left. If the user starts on
the left side of the interface and highlights an active area, the caption can
easily go unnoticed. This forces the user to rely on prior knowledge to
navigate the interface, thus reducing the effectiveness of the system to a
minimum.
6. [H6 — Recognition rather than recall] (Severity 3)
Limited browser capabilities do not allow user to retrace steps. This may
cause user frustration is a particular goal cannot be achieved again.
7. [H7 — Flexibility and efficiency of use] (Severity 3)
24/59
A new browser window is opened after every major mouse-click. This
may uselessly tax user system resources.
8. [H5 — Error prevention] (Severity 2)
Several dead links appear within the site. There are even dead links
pointing back to the home page. This may cause user distrust in the
quality of information.
9. [H3 — User control and freedom] (Severity 2)
There are several links that are not open. This may cause user distrust in
the quality of information.
10. [H7 — Flexibility and efficiency of use] (Severity 2)
There are no links to directly access site capabilities. This void inhibits
expert users from using their time more efficiently.
11. [H8 — Aesthetic and minimalist design] (Severity 1)
Many of the screens contain boxes of information where the size of the
font is too small. This may inhibit the user from getting information
without undue strain.
12. [H3 — User control and freedom] (Severity 1)
The browser screens cannot be resized. This doesn’t allow the user to
fully augment their display device, and may cause undue navigation
frustration.
13. [H8 — Aesthetic and minimalist design] (Severity 1)
Text is often displayed in negative contrast (white text on black
background). This may cause undue eyestrain to the user.
25/59
14. [H3 — User control and freedom] (Severity 2)
User is not allowed to change authorization in FTP capability. A default
“Anonymous” authorization is given without ability to change it. This
restricts access to controls from appropriate users.
15. [H1 — Visibility of system status] (Severity 1)
There is no visible change to interface when mouse pointer hovers. This
may cause a gulf of execution, as the user is unclear about functions and
capabilities.
16. [H1 — Visibility of system status] (Severity 1)
The mouse pointer is often seen as a hand instead of an arrow on several
pages. This may cause a gulf of execution, as the user is not sure what
links may be clicked on.
17. [H3 — User control and freedom] (Severity 3)
The user is unable to use the browsing capabilities of a common website.
Common function icons such as “Back,” “Forward,” and “Refresh” are not
readily available to the user.
18. [H4 — Consistency and standards] (Severity 2)
Several of the links cause the user to leave the original site. This is done
without warning, nor a disclaimer concerning the viability of these sites.
19. [H9 — Error Recovery] (Severity 2)
There is no available contact information to the administrators of the site.
This may prevent useful feedback from users that suggest improvements.
20. [H5 Error Prevention] (Severity 4)
26/59
The initial splash page (see figure) does not properly inform the user
whether their browser lacks the necessary plug- in (Macromedia Flash) to
view the site. The system actually removes all entry points to the site (see
figure), leaving the user stranded at the splash page with no explanation of
either the error, or proper instructions to correct the mistake.
21. [H1 Visibility of System Status] (Severity 2)
On the main page, when the user selects a menu item by clicking on an
active area, the system progressively draws a line from the left side of the
page to the position of the selected active area before displaying the items
contained in the menu. If the rightmost menu item is selected, this
animation takes approximately 1 second and could be distracting to
experienced users already familiar with the structure of the site.
22. [H1 Visibility of System Status] (Severity 3)
Throughout the site, the current location is not indicated to the user. The
only sense of position the user has is through the abstract background
images, and the titles of the submenus. Although the background images
correspond to the selected active area on the main page (see figure), the
user must remember which background goes to which section.
23. [H8 Aesthetic and Minimalist Design] (Severity 1)
Once a menu item has been selected on the main page, a puzzling caption
is displayed at the bottom of the page. This caption appears to be
composed of the name (truncated to the first two letters) and number of
the selected area, as well as an unknown number, each separated by a
27/59
period (see figure). In its current form, this combination of periods, letters
and numerical values makes it fairly difficult for the user to decipher, and
ultimately useless for anything but filling up content space.
24. [H4 Consistency and Standards] (Severity 2)
Links to different areas within the site do not follow any of the established
web standards. Links are neither underlined, nor blue in color. The only
indications that a link exists are that both the user’s cursor and the page’s
link change state when the user moves their mouse over an appropriate
area (see figure).
25. [H4 Consistency and Standards] (Severity 2)
Text contained in the system is inconsistent. Some areas are all lower
case, and others are normal (see figure). Lower case should be avoided
since it is typically harder for the user to read.
26. [H4 Consistency and Standards] (Severity 2)
In some subsections, such as the degree subsection in the admissions
menu, the list of items is mixed with links and expanding submenus. On
the top level both the links and the submenus are represented identically.
27. [H3 Flexibility and Efficiency of Use] (Severity 3)
When a link is selected in one of the area subsections and a large amount
of text is displayed in the content window (e.g. admissions > degree
programs > undergraduate studies), the system does not provide an
efficient means of navigating through the text. The user has to scroll line
by line using the up and down arrows located on the left side of the title
28/59
bar. There is no way to advance to the end of the page, or return to the
top.
28. [H10 Help and documentation] (Severity 2)
There is no documentation offered on this site to provide or explain the
features of flash technology. The user may be unaware of some of the
capabilities of this technology.
29. [H7 Flexibility and inefficiency of use] (Severity 2)
In order for some users to be able to read the text, they may have to use
the zoom features of Flash technology. The user is not allowed to specify
the degree in which to zoom in or out of window. In combination with the
small, nonadjustable window size, it is difficult and time consuming to
view the entire window in an enlarged state.
30. [H4 Consistency and standards] (Severity 2)
Many of the grayscale and light design techniques used may be difficult to
view and/or understand without a color monitor or if the user was
colorblind.
31. [H4 Consistency and standards] (Severity 3)
The use of text does not follow any web or grammatical standards. There
are instances of unrecognizable symbols within the text and inconsistent
and erratic use of capitalization and punctuation. For example the words
‘m.arch’ and ‘M.Arch.’ can be found in the text.
32. [H3 User Control and Freedom] (Severity 3)
29/59
There are no scroll bars or other alternatives for users to quickly navigate
through long text. The user has to use arrow icons to scroll through the
text in single line intervals.
33. [H8 Aesthetic and Minimalist Design] (Severity 1)
Some of the flash movement is distracting and unnecessary, especially in
the middle of the page, and it detracts from the intent of the site.
Suggestions for Redesign
Our final list of usability problems could dramatically be reduced and possibly
eliminated through a proper redesign of the interface for the website. To help
promote this development and provide a clearer direction for correcting the errors,
we have included some general suggestions for redesigning the interface. These
suggestions are listed below.
• The use of flash technology should be restricted due it inherently taxing
system resources. The website administrator should consider using an html
packet to efficiently transmit data. If design is a major issue to the owner,
then consider using Java applets, or similar software, to promote portability.
• Format links to open in existing window. This will reduce the load on user
system resources.
• Add navigation bars to text displays allowing expert users to find information
faster. If a navigation bar with quick links to commonly accessed sites were
added, expert users would also reduce navigation time.
30/59
• Update all links. Website administrators should update all links to ensure
viability. This will increase user confidence and help eliminate an imaginary
gulf of execution.
• Provide a disclaimer to user explaining the links to other sites. This can
enhance user respect for the website if the viability of other websites are
disavowed.
• Reduce the animation of the screens. This can reduce user system resources.
• Allow the user to use common browser command icons. Amateur Internet
users may find the website less intimidating if more controls were available to
them.
• Create a search option where user can use keywords to find sites with
common terms.
• Standardize the interface to that of some of the more familiar sites. This is
shown to increase user reliability and confidence of the content.
• Allow browser to follow conventional guidelines for navigation such as
pointer types, screen size, necessary information, content listing, etc.
• Make the interface consistent throughout website. This lets user know they
are still accessing the same site.
31/59
• Include help documentation of the features of flash technology.
• Increase the default size of the flash screen and text.
• Use correct grammar, punctuation, and capitalization standards.
• Differentiate working and non-working links to minimize user confusion.
• Incorporate navigational structures that allow experienced users to move
through the site more quickly and effectively. (Scroll bars, links to home,
links to previous page)
• Manipulate one page instead of opening new windows.
• Change color scheme to improve readability. (constrast)
32/59
References • Lawrence, S. and Giles, L., "Accessibility of information on the web", Nature, Vol.
400, pp. 107-109, 1999. • Nielsen, J., and Molich, R. (1990). Heuristic evaluation of user interfaces, Proc. ACM
CHI'90 Conf. (Seattle, WA, 1-5 April), 249-256. • Nielsen, J. 1992. Finding usability problems through heuristic evaluation.
Proceedings ACM CHI'92 Conference (Monterey, CA, May 3-7), 373-380. • Nielsen, J. (1994). Heuristic evaluation. In Nielsen, J., and Mack, R.L. (Eds.),
Usability Inspection Methods. John Wiley & Sons, New York, NY. • Tognazzini, B. First Principles of Interface Design. 1998. 18 Feb. 2001
< http://www.asktog.com/basics/firstPrinciples.html> • Yale School of Architecture. 2001. 18 Feb. 2001
< http://www.architecture.yale.edu >
33/59
Appendix A: Site Map
The following set of organizational charts outline the structure of the Yale School
of Architecture’s website (http://www.architecture.yale.edu), the subject of our
heuristic evaluation. All figures referenced in the following organizational charts
can be found in Appendix B.
In order to preserve clarity, this site map is not exhaustive and represents only the
upper two levels of depth. In addition, all external links and resource files have
been omitted.
Chart 1.0 – Upper Level - Organization of the Yale School of Architecture’s Website
Main Page(Fig. 2.0)
Splash Page(Fig. 1.0)
Admissions(Fig. 2.1)
Alumni(Fig. 2.2)
Archive(Fig. 2.3)
Courses(Fig 2.4)
Exhibitions(Fig. 2.5)
Faculty(Fig. 2.6)
E-Kiosk(Fig. 2.7)
Lectures(Fig. 2.8)
Links(Fig. 2.9)
Publications(Fig. 2.10)
Deans List
Degree Programs
Requirements
School History
Tuition / Finance
International Students
2001-2002 Application
Returning Student Forms
Alumni News
Alumni Database
Yale Alumni Assoc.
Transcript Request
2000-2001
1999-2000
1998-1999
FTP Site
Fall 2000
Spring 2001
Yale University
Building Project
Fall 2000
Spring 2001
Executive Officers
Faculty Emeritus
YSOA Professors
Visiting Faculty
Affiliated Faculty
Critics and Lecturers
Staff
Faculty News
Student Postings
Registrar Postings
Financial Aid Postings
Academic Calendar
Digital Media
Resources
Fall 2000
Spring 2001
Architecture Facilities
Yale University
New Haven
General
Architectureview
Constructs
Perspecta
Retrospecta
34/59
Chart 1.1 – Admissions Detail - Organization of the Yale School of Architecture’s Website
Chart 1.2 – Alumni Detai - Organization of the Yale School of Architecture’s Websitel
Admissions(Fig. 2.1)
Deans Letter(Fig. 3.0)
Degree Programs(Fig. 4.0)
Requirements(Fig. 5.0)
School History(Fig. 6.0)
Tuition / Finance(Fig. 7.0)
International Students(Fig. 8.0)
2001-2002 Application Returning Student Forms(Fig. 9.0)
Undergraduate Studies
Professional and Graduate Programs
Combined Degree Programs
M. Arch I
M. Arch II
M.E.D.
Tuition / Fees
General Expenses
Student Accounts
Bills
Financial Assistance
Student Employment
Admission Requirements
Financial Aid
International Student Resources
Alumni(Fig. 2.2)
Alumni News(Fig. 10)
Alumni Database Yale Alumni Assoc. Transcript Request(Fig. 11)
2000
1990s
1980s
1970s
1960s
1950s
35/59
Chart 1.3 – Archive Detail - Organization of the Yale School of Architecture’s Website
Chart 1.4 – Courses Detail - Organization of the Yale School of Architecture’s Website
Archive(Fig. 2.4)
2000-2001 1999-2000 1998-1999 FTP Site(Fig. 12)
Courses(Fig 2.4)
Fall 2000(Fig. 13)
Spring 2001(Fig. 14)
Yale University Building Project
Design
Building Technology
Practice and Construction
History and Theory
Visual Studies
Digital Media
Planning and Urban Design
Design
Building Technology
Practice and Construction
History and Theory
Visual Studies
Digital Media
Planning and Urban Design
36/59
Chart 1.5 – Exhibitions Detail - Organization of the Yale School of Architecture’s Website
Chart 1.6 – Faculty Detail - Organization of the Yale School of Architecture’s Website
Exhibitions(Fig. 2.5)
Fall 2000(Fig. 15)
Spring 2001(Fig. 16)
September 6, 2000
October 23, 2000
November 13, 2000
1.08-3.02
1.08-2.09
2.12-4.06
3.19-5.04
4.09-5.04
5.18-6.01
Faculty(Fig. 2.6)
Executive Officers(Fig. 16)
Faculty Emeritus(Fig. 17)
YSOA Professors(Fig. 18)
Visiting Faculty(Fig. 19)
Affiliated Faculty(Fig. 20)
Critics and Lecturers(Fig. 21)
Staff(Fig. 22)
Faculty News
Richard Charles Levin
Alison Fettes Richard
Robert A.M. Stern
John David Jacobson
Alexander Purves
Martin D. Gehner
Walter De Salles Harris Jr.
Herman David John Spiegel
King-Lui Wu
A-C
D-H
J-Z
Fall 2000
Spring 2001
Robert E. Apfel
Karsten Harries
Vincent J. Scully Jr.
A-D
E-L
M-Z
Administrative Staff
Library Staff
37/59
Chart 1.7 – E-Kiosk Detail - Organization of the Yale School of Architecture’s Website
Chart 1.8 – Lectures Detail - Organization of the Yale School of Architecture’s Website
E-Kiosk(Fig. 2.7)
Student Postings(Fig. 23)
Registrar Postings Financial Aid Postings
Academic Calendar(Fig. 24)
Digital Media Resources
Job Listings
Housing Listings
Announcements
Lectures(Fig. 2.8)
Fall 2000(Fig. 25)
Spring 2001(Fig. 26)
September
October
November
January
February
March
April
38/59
Chart 1.9 – Links Detail - Organization of the Yale School of Architecture’s Website
Chart 1.10 – Publications Detail - Organization of the Yale School of Architecture’s Website
Links(Fig. 2.9)
Architecture Facilities(Fig. 27)
Yale University(Fig. 28)
New Haven(Fig. 29)
General(Fig. 30)
Urban Design Workshop
A&A Rooftop Panorama
A&A Digital Media Labs
A&A Design Studio Panorama
A&A Gallery Panorama
University Homepage
Interactive Campus Map
Academic Media & Technology
D.M.C.A.
University Press
Media Services
Center for British Art
University Art Gallery
University Libraries
Research Workstation
Visual Resources Collection
University Arts Database
City of New Haven
New Haven Weather
Off-Campus Housing Info
Yahoo! New Haven Info
Yahoo! New Haven Map
AIA Online
Avery Index
Academic Universe
Sweets Catalogue
Construction Zone
Visualibrary
Yahoo! Architecture Schools
e-Architect
archiNED
FPG
Corbis
USGS
TerraServer
Flash Film Festival
Publications(Fig. 2.10)
Architectureview(Fig. 31)
Constructs Perspecta Retrospecta
39/59
Appendix B: Screenshots
The screenshots contained within this appendix accurately represent the graphical
state of the Yale School of Architecture’s website as it appeared on the date of
evaluation. For a heirarchical overview of how these images relate to each other
with respect to the structure of the website, consult Appendix A.
Figure 1.0 – Splash Page - Yale School of Architecture’s Website
Figure 2.0 – Main Page - Yale School of Architecture’s Website
40/59
Figure 2.1 – Admissions - Main Page - Yale School of Architecture’s Website
Figure 2.2 – Alumni - Main Page - Yale School of Architecture’s Website
41/59
Figure 2.3 – Archive - Main Page - Yale School of Architecture’s Website
Figure 2.4 – Courses - Main Page - Yale School of Architecture’s Website
42/59
Figure 2.5 – Exhibitions - Main Page - Yale School of Architecture’s Website
Figure 2.6 – Faculty - Main Page - Yale School of Architecture’s Website
43/59
Figure 2.7 – E-Kiosk - Main Page - Yale School of Architecture’s Website
Figure 2.8 – Lectures - Main Page - Yale School of Architecture’s Website
44/59
Figure 2.9 – Links - Main Page - Yale School of Architecture’s Website
Figure 2.10 – Publications - Main Page - Yale School of Architecture’s Website
45/59
Figure 3.0 – Deans Statement - Yale School of Architecture’s Website
Figure 4.0 – Degree Programs - Yale School of Architecture’s Website
46/59
Figure 5.0 – Admission Requirements - Yale School of Architecture’s Website
Figure 6.0 – History of the School - Yale School of Architecture’s Website
47/59
Figure 7.0 – Tuition / Finance - Yale School of Architecture’s Website
Figure 8.0 – International Students - Yale School of Architecture’s Website
48/59
Figure 9.0 – Returning Student Forms - Yale School of Architecture’s Website
Figure 10.0 – Alumni News - Yale School of Architecture’s Website
49/59
Figure 11.0 – FTP - Yale School of Architecture’s Website
Figure 12.0 – Transcript - Yale School of Architecture’s Website
50/59
Figure 13.0 – Fall 2000 - Yale School of Architecture’s Website
Figure 14.0 – Spring 2001 - Yale School of Architecture’s Website
51/59
Figure 15.0 – Fall 2000 - Yale School of Architecture’s Website
Figure 16.0 – Executive Officers - Yale School of Architecture’s Website
52/59
Figure 17.0 – Faculty Emeriti - Yale School of Architecture’s Website
Figure 18.0 – YSOA Professors - Yale School of Architecture’s Website
53/59
Figure 19.0 – Visiting Faculty - Yale School of Architecture’s Website
Figure 20.0 – Affiliated Faculty - Yale School of Architecture’s Website
54/59
Figure 21.0 – Critics & Lecturers - Yale School of Architecture’s Website
Figure 22.0 – YSOA Staff - Yale School of Architecture’s Website
55/59
Figure 23.0 – Student Postings - Yale School of Architecture’s Website
Figure 24.0 – Academic Calendar - Yale School of Architecture’s Website
56/59
Figure 25.0 – Fall 2000 - Yale School of Architecture’s Website
Figure 26.0 – Spring 2001 - Yale School of Architecture’s Website
57/59
Figure 27.0 – Architecture Facilities - Yale School of Architecture’s Website
Figure 28.0 – Yale University - Yale School of Architecture’s Website
58/59
Figure 29.0 – New Haven - Yale School of Architecture’s Website
Figure 30.0 – General - Yale School of Architecture’s Website
59/59
Figure 31.0 – Retrospects - Yale School of Architecture’s Website
