_________________________________________________________________

Striking a balance between form and function. Hawking

Striking a balance between form and function.

An analysis of the design of two educational web sites.

Richard Hawking

Manuscript received July 2004; accepted August 2004. © 2004 Richard Hawking

Introduction

The usability of a web site is what ultimately influences the ‘success’ of the site. A badly
designed site may deter many users, and will lead to dissatisfaction for those who do
venture beyond the home page. In order to achieve a high level of usability a designer
must balance:

• The aims, or context, of the site.

• The layout of key elements.
• The navigation structure.
• The use of media elements.
• Compliance with accessibility guidelines.

Usability is particularly important for educational web sites, since the sponsor of the site
will need to justify the decision to choose the Internet as a delivery medium, as opposed
to alternatives such as books, cassettes, face-to-face environments and libraries.

Cost effectiveness is fast becoming a primary influence on educators, and web sites must
prove themselves in terms the number of users and in positive feedback. Commercial
educational sites must make a profit, and poor usability will certainly affect the profitability
of a site.

This paper analyses the usability of two quite different educational web sites:

Discover Te Kohinga Taonga BrainPop

http://discover.natlib.govt.nz/index.shtml http://www.brainpop.com/

A database of resources to support the Producer of short, animated, Flash

music and arts curriculum of schools in movies primarily aimed at U.S.
New Zealand. elementary and middle school students.

Free to users, though there is an option Subscription based site.

to purchase copies of the resources.

The aim of the paper is to provide designers of educational web sites guidance on how to
go about analysing the usability of an existing, or proposed, site. Since the paper
concentrates on usability, rather than an investigation of the educational merits, the
analytical methods presented are equally applicable to any genre of web site.

1
_________________________________________________________________
Striking a balance between form and function. Hawking

Discover Te Kohinga Taonga http://discover.natlib.govt.nz/index.shtml

Context

Discover is a site maintained by The National Library of New Zealand. It provides access
to resources relating to the music and visual arts (Arts / Nga To) curriculum in New
Zealand schools. The resources can be freely accessed via navigation menus, a list of
topics, and a search function.

The site is aimed primarily at New Zealand teachers, for lesson planning and classroom
use, and by students doing assignments. Explanatory notes are provided, and, in the
case of the visual arts, links are provided to facilitate the purchase of copies of the
images. The accompanying notes consist of essays and information to aid citing.

The goal of the site is to enable users to easily access the resources, and then to either
view them on screen, print them, or purchase high quality copies.

Layout of key elements

The layout of the site is predominantly fluid (left to right, top to bottom), which research
[Bernard, 2002; Hunter, 1998] has shown to be the optimal layout in terms of user
preference and performance. Throughout the site, key informational and navigational
elements are located on the upper left side, meeting users’ expectations on an 'active'
level (see Figure 1). Bernard [2002] investigated where users expect certain elements to
appear on a screen, and concluded users actively look for elements where they expect
them to be, because that is where they usually are. His findings revealed that “Users
often miss important pieces of information simply because it is not seen.” This is unlikely
to be the case when visiting the Discover site.

Williams [2000] advocated that users also view a site at the ‘pre-attentive’ level. At this
stage, which lasts less than a second, users subconsciously look for visual patterns,
which reveal how the information is structured. This has the effect of “predisposing the
viewer to interpret a display in a particular way”, and it is possible for a user to assign
meanings to page elements in a way quite contrary to the designer’s intentions.
Therefore, the designer must ensure that the size, colour, position and spatial relationship
of elements are “intentional and purposeful”’. The layout of Discover has been carefully
considered, and it is unlikely that users will be led astray by their ‘pre-attentive’ scan.

Perhaps surprisingly, Bernard [2002] found that “Users may often instinctively ignore the
graphics that are presented on a website.” Users may ignore graphic elements entirely
until their second or third visit, focussing instead on the text. This is particularly true of
banners spanning the top of the page, which users often assume to be advertisements.
Bernard concluded if graphic elements are not to be initially ignored by users, they should
be either very large, or surrounded by empty space. On the Discover home page, a
colourful banner, and the graphic it encloses, are large enough not to be ignored by
users, and makes effective use of space to isolate the graphic from the search box. (see
Figure 1)

The position of the ‘utility’ nodes (‘Search’, ‘Help’, etc) follows guidance by Farkes [2000]
that they are grouped together, and that they are visually separated from other links. In
addition, they are located at the top right of the screen, which is where Bernard [2002]
recommends them to be in order to meet users’ expectations. (see Figure 1)

2
_________________________________________________________________
Striking a balance between form and function. Hawking

Figure 1 Key informational and navigational elements are located on the upper left side.
‘Utility’ nodes are grouped together, and located at the top right of the screen. The banner,
and the ‘Discover’ graphic, are large enough not be ignored be users.

Space has been shown by Williams [2000] and Bernard [2002] to be an important
element in web design, as it facilitates the isolation of page elements and the grouping, or
‘chunking’ of related links. However, it can be argued that the Discover site uses space
too judiciously. With the screen set at the most common resolution, 800 x 600 [Bernard,
2002], users are required to scroll in order to read each page in its entirety. Scrolling is to
be expected on content-heavy pages, but not on relatively simple pages like the ‘Sitemap’
on the Discover site. On the main index pages for the ‘Music’ and ‘Visual Arts’ sections of
the archive, as illustrated in Figure 2, users may not notice some of the links to the
subcategories, as they are located off the bottom of the screen, and the amount of space
surrounding each link means there are no “visual design clues” [Farkes, 2000] to act as
an incentive to scroll to the bottom of the page.

The location of all key page elements is consistent throughout the site. This ‘uniformity’
creates predictability, making it much easier for users to navigate and use the site.
Williams [2001] saw the connection between this ‘ease of use’ and the demands on
users’ short-term memory:

“If the same or similar elements are treated in similar ways, logical or functional
relationships are easier to process because they are conveyed and reinforced at
a perceptual level, greatly decreasing the burden on short-term memory.”

Clearly on a site as deep as Discover it is imperative that users instinctively know where
to locate the most important page elements, otherwise frustration might lead to anger,
and the user simply giving up.

This continuity also affords users the confidence that they have not unwittingly strayed
from Discover onto another web site, a not uncommon occurrence on the Internet. Farkes
[2000] outlined one more reason to maintain consistency in the location of all the key
elements. They provide clear identification of the site, and the most important
navigational paths, to users who arrive at the site deep in the hierarchy, perhaps via a
search engine or from a link on another site.

3
_________________________________________________________________
Striking a balance between form and function. Hawking

Figure 2 Users may miss other sub-categories further down the page, as there are
no visual clues indicating that the user needs to scroll.

Navigational structure

The site is essentially a catalogue of items, so the design of the navigational structure will
greatly influence its usability. The hierarchy strikes a good balance between breadth and
depth. Although it does not exactly match suggested designs [Bernard, 2002] for 'deep'
sites, it does have a clearly structured hierarchy. Compromise between breadth and
depth is considered to be good practice as long as the site clearly reveals its structure
[Farkes, 2000].

It is imperative that sites with a deep hierarchy, like Discover, aid navigation with the
provision of a sitemap or index. The site has both, with the index accessible from a
'Browse topics' link. In conjunction they do effectively reveal the site structure, though at
first glance it may seem the sitemap is too small to be effective. Bernard [2002] and
Farkes [2000] advise that site maps should be avoided if too rudimentary or small. This
might imply that the Discover sitemap is ineffective, as it does not include the actual
content of the site, only the key informational and support pages. These pages are very
important, though, and their structure is clearly shown on the site map. It would aid clarity
if the 'Browse topics' link was renamed as an Index, and moved into the ‘utility’ node
section.

A vertically cascading alphabetical menu (see Figure 3) is activated when the content
sections of the site are accessed. This is supplemented by a vertical menu bar on the left
of the screen, populated by a 'breadcrumb' menu, which expands vertically. Though
intended to provide shortcut links, as recommended by Farkes [2000], to other nodes on
the same level, or deeper, in the hierarchy, it does not achieve its goals very effectively.
Users tend not to use breadcrumb navigation [Bernard, 2002], and the vertical, rather
than horizontal, arrangement used here impedes its usability. This clearly does not follow
the findings of Salvendy [2002], that when browsing is a priority, as in the case of
Discover, a high “apparent usability” is important. What Salvendy means by this is that
the “visual impression of the interface” must inspire confidence in the user, otherwise
certain dissatisfaction with a navigational menu might be induced before a user has
actually used it. Though the vertically cascading navigation menu on the Discover site

4
_________________________________________________________________
Striking a balance between form and function. Hawking

does work, it does not achieve a high level of user satisfaction.

Figure 3 The vertically expanding breadcrumb menu does

not achieve a high level of user satisfaction.

Farkes [2000] points out that, even at the deepest levels, users should have meaningful
navigational options to all levels of the hierarchy. However, at the deepest level of the
hierarchy, when the actual visual and audio resources are accessed, the Discover
navigation system breaks down (see Figure 4). The vertical menu disappears and, apart
from the main navigational links, users are left with only a horizontal ‘breadcrumb’ menu
at the extreme top of the page, which is likely to be ignored. Studies by Lida, Hull and
Pilcher [2002, cited in Bernard, 2002] found that users rarely use breadcrumb navigation,
and that those that do gain little benefit from doing so, compared to users who rely on the
browser Back button.

Figure 4 At the deepest level of the hierarchy the only navigational options are a
horizontal breadcrumb menu, and an ‘Exit’ link.

5
_________________________________________________________________
Striking a balance between form and function. Hawking

At the resource level an 'Exit' link is also available, but its actual path (back to the home
page) is not labelled. This goes against widespread recommendations that the
destination of a link is made clear. Users are likely to become quickly disorientated, and
frustrated, if a link takes them to an unexpected page within the site hierarchy.

Use of media elements

Discover makes effective use of media elements. The quality of the images is high
enough to guarantee high definition on-screen images or prints. The quality of the audio
clips is likely to be high enough for effective use in a classroom.

Compliance with accessibility guidelines

The site does not comply with accessibility guidelines [Corcoran, 2002; Bernard, 2002;
Kaplan-Leiserson, 2001; Farkes, 2000; Williams, 2001] in the following areas:

Images. The HTML code of most images lack alternative textual descriptions and image
dimensions.

Multimedia. Complete transcripts of the audio content are not provided, though this is
possibly due to copyright reasons.

Verification . Though the CSS does validate [CSS validator], a check [Bobby] of the HTML
revealed that the site fails to comply with 'Priority 1' advice. The lack of a DOCTYPE
might lead to display problems in some browsers [Alistapart].

Page download times. Load speeds, at 28.8K, measured at between 16.22 and 46.74
seconds [Net Mechanic], considerably exceeding recommended load times. No warnings
about long load times are given.

Adaptive technology. The site is likely to cause frustration among users using screen
readers (tested using IBM Home Page Reader [IBM]), as the main content is read after
the navigation links. However, visitors to the site are likely to be sighted.

Colours, fonts, text. The use of colour, fonts, text sizes and background colours do appear
to comply with accessibility guidelines, and are unlikely to pose any problems for visitors.

Conclusion

It is fair to say that Discover does achieve its goals, and strikes a fair balance between
form and function. There are issues with the navigation structure, load times and
accessibility, but the projected users are likely to repeat visitors, and will be able to come
to terms with the shortcomings in the navigation system. They are also likely to access
the site using broadband connections [Computerworld NZ]. However, if the issues
addressed in this analysis were resolved, users would be able to use the site more
efficiently.

The site is also successful aesthetically. Clearly a lot of thought has gone into its design,
and the interface is surprisingly clean and sophisticated, considering the site is basically
an archive of digitised assets aimed at New Zealand schoolteachers and students. Were
it to be widely promoted by the New Zealand government, as a resource for academics, it
would also be successful. However, since the visitors to the site would be ‘new’ they
would be less tolerant of the small issues with the interface and the long page download
times.

6
_________________________________________________________________
Striking a balance between form and function. Hawking

BrainPop http://www.brainpop.com/

Context

BrainPop is a producer of short, animated, educational Flash movies. The assets it

produces are available for viewing on a subscription-based site, primarily aimed at U.S.
elementary and middle school students, though also used by approximately %15 of high
schools. BrainPop has an impressive user base, with %15 of U.S. school districts signed
up, as well as thousands of family subscribers.

The movies cover a wide variety of topics relating to the U.S. K-12 education system. In
addition to the movies, there are activity sheets, cartoon strips and lesson plans, which
users can download and print.

The aim of the site is to provide a resource for teachers to use to enhance traditional
classroom learning, and for children to access at home. Though aimed at children, the
site claims to have a “visual style that is accessible, educational and entertaining for both
children and adults.”

The site has won numerous awards, both for its use of Flash animations, and for its
educational content.

Since both children and adults will access the site, its design must be suitable for both
audiences, this paper will analyse its balance between form and function from the
perspective of adult users. The decision to analyse the site through ‘adult eyes’ was
taken for two reasons. The site will be initially accessed by teachers looking for ways to
enhance traditional classroom teaching methods, and by parents involved in home
schooling of their children. therefore it shouldn’t deter them by being too childish or
difficult to navigate.

Layout of key elements

The home page (see Figure 5) has a rather unconventional layout, bearing little similarity
to research-based optimal designs [Bernard, 2002; Hunter, 1998]. Utility and navigation
links are spread out across the page, and the layout fails to meet users’ expectations on
either an ‘active’ Bernard [2002], or ‘pre-attentive’ Williams [2000] level. The logo is
placed in the optimal position, at top left, but utility nodes are positioned vertically down
the left and right of the screen and are likely to be ignored by users.

Graphics have been used too judiciously, to the extent that they fail to grab attention and
in fact serve only to disorient the user. Static and active graphic elements are used
extensively, resulting in confusion of colour and movement that may well deter some first-
time users.

Layout is not consistent throughout the site, with users having to ‘learn’ the new layout at
each level of the hierarchy. Again, this may deter users from spending more time in the
site, and it certainly slows down the navigation process. Users arriving at the site deep in
the hierarchy via search engines or links from other sites will have no idea how a page
relates to other pages or navigation nodes, and after experimenting by trying one or two
links are likely to click on the ‘BrainPop’ logo and go to the home page.

The home page only requires scrolling at certain screen resolutions, but all the other
pages require scrolling to a greater or lesser extent. Generally there are no “visual design
clues” [Farkes, 2000] to encourage scrolling, with the result that some users might miss
key navigational elements located at the bottom of the screen.

7
_________________________________________________________________
Striking a balance between form and function. Hawking

Figure 5 An unconventional layout mixes navigational and utility nodes.

Navigational structure

The navigational structure is very inconsistent. On the home page utility nodes are
arranged vertically; on utility pages themselves they are arranged horizontally across the
top of the screen; deeper in the hierarchy they disappear entirely, and are replaced by a
series of small icons located at the top left of the screen. It is not obvious if these
duplicate the other utility nodes, or if they have a different function. Links to the main
sections are arranged vertically on the home page, and are hidden off-screen at the
bottom of other pages.

By including brightly coloured graphics and ‘active’ elements on the navigation buttons
the designers have further impeded the navigation process. Images take precedence
over text, and in some cases the name of the button is almost unintelligible (see
Figure 6).

Figure 6 Over use of graphics, lack of contrast in colours and poor

text handling make the names of some buttons unintelligible.

A drop-down menu with alphabetically arranged links to all the educational movies on the
site is located at the top right of the screen on every page, which works far more
efficiently than the other navigation options.

Some links open a page in a new browser window, others open in the same window.
There is no indication how a link will behave, and users may experience frustration trying
to use the back-button to navigate if a page opens in a new window. Opening a new
window can be advisable when an anchor is a link to an external site, but in the case of

8
_________________________________________________________________
Striking a balance between form and function. Hawking

BrainPop all links are internal and the need for opening pages in a new window is
questionable.

The designers of the site appear to have recognised how difficult it is to use by proving
several links to ‘How to use this site’ resources. These resources do provide users with
the information they need in order to navigate the site and use it effectively, but the need
to include them clearly indicates the failure of the navigation system.

Use of media elements

The home page contains ten different active media elements, in the form of animated
navigation buttons, advertisements and testimonials (see Figure 7). It is a prime example
of how:

“... the use of movement on web sites to attract user’s attention may reduce
usability significantly and prevent the user from getting the task done.”
[Petersen & Nielsen, 2002]

Petersen & Nielsen [2002] formulated a list of “six principles for applying movements on
web sites”, and the BrainPop home page does not follow any of the principles.

___________________________________ ________________________________
Six Principles for Applying Movement BrainPop
___________________________________ ________________________________

1. Use soft and harmonious movements. Movement is big, forceful, hectic and
aggressive.

2. Start movement in the periphery of user’s Movement does usually start at the periphery
vision. of each element, but certainly not at the
periphery of user’s vision.

3. Important information should be presented For the most part the movement does not
one second after movement starts, or convey any information at all, but when it
immediately after movement. does, in the form of testimonials and internal
‘infomercials’, the principle is not followed.

4. Avoid too many sequences. Each movement is repeated on a continuous

loop.

5. Use short movement sequences. Each movement is repeated on a continuous

loop.

6. Avoid competing movements on the Ten different movements compete for the
same page. user’s attention.
_______________________________________ ____________________________________

The educational Flash movies on the site are well designed and work well. Sound and
vision are well integrated, and the movies integrate into the page layout without any
issues. Transcripts of the movies are not available, which might detract from their
educational value.

9
_________________________________________________________________
Striking a balance between form and function. Hawking

Figure 7 Ten different active media elements on the home page result
in sensory overload.

Compliance with accessibility guidelines

The site does not comply with accessibility guidelines [Corcoran, 2002; Bernard, 2002;
Kaplan-Leiserson, 2001; Farkes, 2000; Williams, 2001] in the following areas:

Images. The HTML code of most images lack alternative textual descriptions and image
dimensions.

Multimedia. Complete transcripts of the audio content are not provided.

Verification . A check [Bobby] of the HTML revealed that the site fails to comply with
'Priority 1' and ‘Priority 2’ advice for multiple reasons. Considering BrainPop is an
educational site, sanctioned by the U.S. school system, the failure to comply with
accessibility guidelines on so many counts is surprising. The lack of a DOCTYPE might
lead to display problems in some browsers [Alistapart]. The site does not validate as
HTML 4.01 Transitional [w3.org] for multiple reasons.

Page download times. Due to the heavy use of graphics and Flash elements download
times are very long. No warnings about long load times are given.

Adaptive technology. A test using Window Eyes [Window Eyes] showed the site is likely
to be impossible to navigate for users using screen readers and other adaptive
technology, as the HTML files fail to comply to accessibility guidelines.

Colours, fonts, text. The use of colour, fonts, text sizes and background colours do not
comply with accessibility guidelines.

Conclusion

Though the BrainPop site is extremely popular, it is likely that the design and navigation

10
_________________________________________________________________
Striking a balance between form and function. Hawking

issues outlined in this paper are causing some users to exit before fully investigating the
educational assets it has to offer. Since it is a subscription-based site, this is an indication
that the design is not very successful.

The failure to comply with accessibility guidelines on so many counts reveals that the
designers were unaware of the guidelines, or chose to ignore them. This is likely to have
repercussions in the future, as regulations regarding accessibility for sites sponsored or
sanctioned by the U.S. government are becoming more stringent.

_______________________________________________________________________

References

Alistapart, via http://www.alistapart.com/articles/doctype/ (Accessed 10 December, 2003)

Bernard, M. (2002). 'Optimal Web Design',

via http://psychology.wichita.edu/optimalweb/print.htm (Accessed 15 November 2003)
Software Usability Research Laboratory, department of Psychology, Wichita State
University.

Bobby, via http://bobby.watchfire.com/bobby/html/en/index.jsp (Accessed 26 June, 2004)

Corcoran, C.K. & Corcoran, D.S. (2002). 'Accessible web sites: Why they are important
and where to begin', About Campus, vol. 7, issue 4, March, pp. 21-24.

Computerworld New Zealand, via

http://www.idg.net.nz/webhome.nsf/nl/CA8CE595FDB5B648CC256BC20012996A
(Accessed 10 December, 2003).

CSS Validator, via http://jigsaw.w3.org/css-validator/validator-uri.html (Accessed 5

December, 2003)

Discover, via http://discover.natlib.govt.nz/index.shtml (Accessed 28 November, 2003)

Farkas, D. & Farkas, J. (2000). 'Guideline for designing web navigation', Technical
Communication, vol. 47, no. 3, August, p. 31, 18p.

Hunter, L. (1998). 'Text nouveau: Visible structure in text presentation', Computer

Assisted Language Learning, vol. 11, issue 4, October.

IBM, via http://www-3.ibm.com/able/solution_offerings/hpr.html (Accessed 26 June, 2004)

Kaplan-Leiseren, E. (2001). 'The tremendous issues of technology', T+D, vol. 55, issue
11, November, p. 27, 10p.

Net Mechanic, via http://www.netmechanic.com/toolbox/power_user.htm (Accessed 10

December, 2003)

Petersen, H. & Nielsen, J. (2002) 'The eye of the user: the influence of movement on
users visual attention'. Digital Creativity, Vol. 7, issue 4, June, p. 355, 13p.

Salvendy, G. (2002). 'The contribution of apparent and inherent usability to a user's

satisfaction in a searching and browsing task on the Web', Ergonomics, vol. 45, issue 6,
15th May, p. 415, 10p.

11
_________________________________________________________________
Striking a balance between form and function. Hawking

w3.org, via http://validator.w3.org/ (Accessed 26 June, 2004)

Williams, T.R. (2000), 'Guidelines for designing and evaluating the display of information
on the web', Technical Communication, vol. 47, no. 3, Aug.

Window Eyes, via http://www.gwmicro.com/ (Accessed 26 June, 2004)

12