Prof Jacques Steyn
Contact
See the Notes
In this paper I address the usability of Web documents. There are literally tens of millions of Web pages out there, so I decided to narrow this scope and focus on award winning sites, and to narrow it further down, I focus on South African sites that have received Loerie Awards. At the outset I need to state that my analysis focuses not on the graphic design quality of these sites, but adherence to generally accepted as well as my own criteria of what counts as usability factors.
I will begin by exploring some theoretical issues and then demonstrate the testing of some usability factors of these award winning sites.
To begin with we have to look at a definition of a web page. I propose that a web page (given the status quo of the current Web) is a computer window on data, basically text data enhanced by other media such as graphics. Links make possible the navigation between distributed documents that may geographically be anywhere in the world. The power of the Web lies in its linking functions.
The information of a document is rendered by presenting it typically in visual format, and now also on other rendering devices such Braille devices and speech synthesizers. In this paper I focus on the usability of visual displays, more specifically computer screens. I do not touch on usability issues of the other media devices, nor other visual display devices such as PDAs, cell phones, Web-TV and so forth.
The history of document presentation, first on paper through DTP (Desktop Publishing) and later on standalone and networked computers shows that the presentation of information needs to be of quality. What exactly is meant with quality is debatable. There are different approaches to determine the quality or good design of a web page. The most common focuses on the appearance of the document, without much attention paid to its functionality.
From a more rational point of view, there are two general approaches, one depending on benchmarking, the other on the findings of cognitive ergonomics.
It seems to me, from an informal overview of Web sites that promote the Web itself as well as self-help authoring tips, that no attention is paid to cognitive ergonomics or usability studies. I am talking about popular sites such as Webmonkey, and not about sites such as Jakob Nielsen's Useit.com site.
The problem with benchmarking is that the Web is a new technology, still in its diapers. Benchmarking may be useful in established technologies and industries such as the automotive engineering, furniture design, and so on, but my view is that for the Web benchmarking is very premature. There are not that many good practices to follow.
Misic and Johnson (1999) present a case for using benchmarking as a tool for evaluating university web sites. They compared 45 different sites to find common denominators. This is the democratic way of doing things. But is the majority always right?
Firstly, putting together a web site is often the task of some or other individual who generally speaking has not had formal training in markup languages, hypertext, human factors or usability. How can anything put together by individuals without the necessary experience in usability, information architecture, navigation architecture and so on be used as a benchmark?
Secondly, Misic and Johnson state that metrics can be divided into three categories:
but they nowhere give any justification for these assumptions. I am actually a bit puzzled by why contact information deserves a separate category, as logically it should be a subdivision of content. after all, contact information is just one kind of content.
Any software engineer knows about design constraints forced upon us by the status of technologies. Computer constraints are different from, for example, TV constraints. Many Web design companies were players in the Desktop Publishing (DTP) or TV advertising worlds where the constraints are very different. It is a mistake to design for the Web with a DTP or TV background without taking cognizance of peculiar Web constraints.
Web-based interfaces are a subset of other computer interfaces, but with their peculiar problems and constraints that are not applicable to the standalone or high bandwidth network environment. The implication of this is that allthough general computer usability factors should apply to web sites, there are also factors that will apply specifically to the Web.
The Web is basically a type of very widely distributed WAN (Wide Area Network). The technological constraints on the Web at present are:
Given these constraints on the Web, I maintain that, at least for its present status, web developers should design around the constraints in order to improve usability. This means the following:
These guidelines are very broad and address only some of the main constraints of the Web. Apart from these, design criteria for any good information and hypertext systems should be considered. Before I get to navigation and hypertext, I wish to address some issues about metrics, which is often used for design criteria.
Metrics can roughly be defined as a system of measurements, usually numerical, used as guidelines for design or evaluation.
Recently Bauer and Scharl (Quantitive evaluation of Web site content and structure) in a 2000 edition of Internet Research: Electronic Networking Applications and Policy attempted to describe an automatic evaluation system for web sites and base it on fuzzy neural nets. Their criteria concern items such as the number of documents on a web site, file size, number of images, and number of links and anchors. Such a metric may be useful in counting the number of links, but it still states nothing about the qaulity of those links.
I have a problem with the application of metrics to human behavior. Or perhaps I should rather say with the current philosophy behind such models. Briefly my problems are:
Here is a table comparing the outdated approach on which metric models are based with the paradims that should underlie a newer approach.
| Old paradigm | New paradigm | |
|---|---|---|
| Philosophy of science | Positivism | Constructivism |
| Psychological paradigm | Behaviorism | Cognitivism; Constructivism |
| Mathematical approach | Quantitive | Qualitive |
There is no room in this paper to explain my position in depth, so let me suffice with the following observations.
In the circles of philosophy of science the general paradigm for doing science that dominated Western thinking for about 300 years is called by different names, but mostly goes by the name of Newtonian science, and the specific dominant model was positivism. Major cracks came into this thinking as early as the beginning of the previous century, the most devastating blows dealt by the queen of the sciences, physics. Quantum physics was probably the major force in turning this view upside down. The new view embraces concepts such as uncertainty, indeterminacy, and later in the twentieth century, emerging systems, complex systems, chaotic systems, and similar strange concepts.
The implication of the new view is that the so-called hard or exact sciences are not so exact. Science is created and is one method of story-telling in an attempt to understand the world. If this is true of the natural sciences, it surely must be true of human behavior sciences.
The powerful new mathematics used for describing many of these concepts are qualitative probabilistic mathematics, fractal geometry, catastrophe mathematics, and so on. Note the names of these approaches. The implication of this for measurements of human behavior are quite different from mechanistic mathematical approaches.
Social sciences have always felt inferior in the presence of the success of what was traditionally known as the hard or natural sciences. So social scientists often copy the methodologies of the hard sciences in order to increase their prestige. The problem is that they often use outdated concepts of the hard sciences. And this is exactly what happens in the case of many of the metric models.
Behaviorism as an approach to human behavior began in the 19th century first with Pavlov, and then with the strong behaviorist movement in the first half of the twentieth century. The heyday of behaviorism was around the time of the Second World War, probably as a counterforce to the racist implications of genetics as proposed by the Nazis and similar nationalistic movements -- a shift from nature to nurture. From the late 1950s other models became more popular: constructivist and cognitive models, and later still the post-modern approaches.
In industry business managers want to see quantifiable numbers to keep directors and board members happy. In order to strengthen the case for spending money on human-related issues, human behaviour is quantified and turned into currency.
But this is a tom foolery; a method used to convince accountants. It has no value other than that. Given the post-Newtonian paradigm of science, the only valid approach to a model of metrics would be to acknowledge the complexity and qualitative nature of human behavior. And the only descriptive tools for such behavior would be qualitative mathematics and probability systems.
As mentioned, the power of the Web lies in its linking abilities, which imply that a user should be able to navigate through an information space at ease.
Navigation is a geographic metaphor that refers to moving around in space, and when applied to the context of information to moving around in information or hyper space. If you get lost in a geo-biological forest the first thing to do is to find some landmarks in order to find your position and then determine which direction to take in order to get to the destination.
The success of the Web is due to a number of factors, but one of the most important is probably its hypertext base which makes linking between documents relatively easy. But users need to follow links, and hypertext architecture is absent from the minds of many web developers. Unfortunately, we get hopelessly lost in Web forests as web designers do not take hints from our geological environment, nor from at least a decade of hypertext research.
The Web generation seems to be ignorant of the Hypertext generation. Webbers want to start from scratch and reinvent what Hypertexters have known for the past ten to fifteen years. It is distressing that as long ago as 1987 Conklin wrote about the problem of getting lost in hyperspace. This problem is probably partly due to the assumed difference between hypertext documents and paper documents, which concerns the myth of non-linearity of hypertexts such as the web.
In the early days of hypertext its evangelists had to sell the idea and a catchphrase was that paper is linear, while hypertext is nonlinear. But reading behavior and information presentation are two different matters. Even though a paper publication may be presented linearly, reading it may be just as nonlinear as anything else, and conversely, reading through a set of hypertext documents could also be linear. The linear-nonlinear distinction is thus void of any meaning. This myth has been addressed by scholars such as Whalley (1993), altough he addresses the issue only from the point of associations.
Language, by its nature, is linear in terms of time for spoken language and in terms of space for written language. It thus cannot be the linearity versus non-linearity characteristic that distinguishes between text and hypertext.
Consider your personal library at home as your personal information space. Magazines, newspapers, books, personal documents, invoices, letters and so on may be scattered all over your home. If you are really organized, perhaps your documents are arranged. But access to these documents can be either linear, or nonlinear. No matter how you access them, the important aspect is where to find the appropriate information, and how your documents are linked in your mind. The point of this is that there is a difference between the mental model of an information space, and how the links to the objects within the space are presented. In this context a web page typically represents a mental map of your personal library.
Linking and anchoring different locations in text can be done for both paper and hypertext documents. On paper the cue may be an explicit keyword-page number reference, an index or Table of Contents. The reader navigates through the information space in exactly the same way as a reader of a hypertext document would.
To me the difference between using paperbased documents and hypertext documents is ease of access in terms of energy spent. To follow a paper link the reader has to flick through pages to find the appropriate page, then scan that page to find the segment of text. In a hypertext environment the computer spends that energy finding the referenced location after the link is activated by the user. Hypertext, in theory at least, thus makes reaching linked targets easier and quicker than in paper. In practice though, due to bandwidth and processing constraints, following a hypertext link on the Web often takes longer than following a paper link.
One advantage of the Web over paper documents is that it is a virtual library and does not take up much physical space on one's desk. It is like your personal library being stored on your desktop and it is much quicker to find a reference. At least you do not have to travel physically from room to room to find that darn magazine!
Navigation can be understood in terms of geographical analogies and metaphors. Dillon (1994) puts these concepts in the framework of cognitive schema that provide contexts for interpreting texts. I will base my exposition very loosely on some of his ideas and expand them with my own. Here are some criteria for usability of navigation by hypertext links.
Route knowledge is cognitively simpler, as Dillon points out, but once a user gets lost it is useless. Then a map is needed, or at least a landmark or two. Dillon argues that the location of information in text helps readers to recall information. We thus tend to remember spatially, so consistency of landmark location is essential.
Paper documents have a very long history compared to hypertext and screen-based documents. We are so used to paper documents we tend to forget there is also a steep learning curve in using them. From a very young age we learn to turn pages, to interpret information in 2-dimensional paper space, the use of a Table of Contents and an index. A whole set of conventions for using paper documents have developed over time. There are already a few standard approaches for Web documents, but it will take some time before they become conventions. The biggest obstacle is probably that due to the demands of rapid development and deployment designers do not check previous releases of their own products or good practices of other products. And the most serious lacking feature is usability testing.
The function of information determines its form, architecture and appearance. The problem with the Web is that it could possibly be used for any of the information needs and purposes that man could ever have. It is far too general. Here are a few functions that the Web can be used for. The list here is not exhaustive at all. And, an individual may have different needs at different times, which means that different functions may be relevant at different times for the same user.
My analysis of award winning web sites excludes adventurous, aimless, novel or users with a high level of interest. It is based on the assumption that web sites should also provide relevant information about their main functions, and that given the information explosion, specific information should be available quickly and easliy to a user. After all, quality of service (which also means appropriate information that is easily accessible) is an important market force in the modern business environment.
As mentioned above, available bandwidth and traffic are major constraining factors prohibiting the speedy delivery of web content. Due to bandwidth and modem constraints, a web document does not display immediately when it is requested and the question is, how long are users prepared to wait? To answer that question, we must first look at how users access the Web.
A GVU survey (April 1998) showed that the Web is accessed as follows in terms of modems used by users. I use these dated figures and indicate how long different users will have to wait for two different size documents: 50K and 100K. Even though the data of access profile has surely changed by now, keep in mind that this data is for a highly developed nation and at least gives a general indication that is still useful today.
The estimated times are valid only for perfect Web days which are few and far apart. Any other traffic on the same pipes will obviously slow down this access speed, which means that it almost always takes longer in practice to access pages of these sizes.
| Percentage of users | Estimated time in seconds | |||
|---|---|---|---|---|
| Modem | April 1998 | October 1998 | 50K page | 100K page |
| 14'400 | 4.0% | 1.7% | 28 | 56 |
| 28'800 | 23.1% | 15.4% | 14 | 28 |
| 33'600 | 25.1% | 17.7% | 12 | 24 |
| 56'000 | 18.3% | 31.4% | 8 | 15 |
In the USA the majority of users by April 1998 (ie 48.2%) thus accessed the Web with 28'8K and 33.6K modems. Half the users had to wait just short of 15 seconds for a 50K page, and almost half a minute for a 100K page. By October (see the GVU graph) the situation had changed and about a third of users had to wait only 15 seconds for a 100K page, but another third (33.1%) still had to wait almost half a minute. But this is for the highly technological USA.
The situation in Europe is different, and other parts of the world even worse.
| Percentage of users per country | Estimated time in seconds | ||||
|---|---|---|---|---|---|
| Modem | Europe | Other | USA | 50K page | 100K page |
| 14'400 | 0.9 % | 2.5% | 1.7% | 28 | 56 |
| 28'800 | 11.1% | 17.2% | 15.4% | 14 | 28 |
| 33'600 | 13.8% | 24.6% | 17.7% | 12 | 24 |
| 56'000 | 13.3% | 18.4% | 31.4% | 8 | 15 |
In Europe about a quarter of users (24.9%) have to wait approximately half a minute for a 100K page. In other parts of the world 41.8% have to wait that long. And that is on a perfect day, while you know there is very seldom a perfect day on the Web. Also, international lines are slower than local lines for the simple reason that there is usually more local bandwidth which is less expensive.
It is interesting to note that in Europe about 18% users access the Web by means of 128KB pipes. This is obviously not home access, but office access, and because the line is shared by all employees, relative access time may be slower than from a 56K dial-up modem. It would be interest to redo this kind of research as companies are beginning to introduce web access policies.
According to a survey done by eMarketer.com users are prepared to wait as follows for a page to load.
| Wait in seconds | Percentage of waiters |
|---|---|
| 10 | 16 |
| 20 | 33 |
| 30 | 25 |
| 40 | 2 |
| none of the above | 5 |
This means that only a quarter of the population of Web users are prepared to wait for a 100K page, while a third are prepared waiting for a 50K page.
The conclusion from this is that for quality usability a web document should not be larger than 50K. Keep in mind that this includes all the objects associated with the document: images, external scripts and style sheets, and so on. Only users with quick access facilities or desperate users are prepared to wait for larger documents.
Kemp and Buckner (1999) give a useful summary of aspects that need to be considered in designing hypertext applications. Here some of their ideas are very loosely adopted and adapted and expanded by my own. This list is for the do's of web design, and afterwards I will list some dont's.
In one of his 1996 Alertboxes Jakob Nielsen posted The Top Ten Mistakes of Web Design and in May 1999 The Top Ten New Mistakes of Web Design. Many of the award winning sites commit these mistakes. In addition to Nielsen's list, here are some common mistakes I have experienced on the Web, specifically with regards to the analyzed sites:
Navigation on the Web should be seamless. If not for the lack of bandwidth or differences in appearance, a user should not even be aware of traveling between sites located in Beijing, Brazil or Bobbejaansbaai.
Concerning the quality of a web site I distinguish between the following three issues that need to be considered:
The web is notorious for poor quality of content. This may sort itself out in future, but the magic trick will be to assist users to distinguish between quality and rubbish. Present-day search engines do not provide the required kind of services, although google.com seems to be getting closer to a more functional search engine than most others.
I will now turn my attention to the usability of South African web sites that received Loerie Awards in 1999, which means that most of them have been in existence since 1998. Some of my findings are based on studies done over the past two years and the subjects were mostly student in web authoring courses. The student profile has been diverse, ranging from previously disadvantages students to post graduate Masters-level students. For other findings I kept log of my own experiences and rational conclusions with these web sites.
At the outset I should state explicitly that I do not have any gripes with the quality of graphic design, which generally is excellent, and perhaps deserve Loeries for that. In fact, South African Advertising houses generally do very well with receiving international advertising awards. At the 1999 London International Advertising Awards (LIAA) South African companies did better than American and Australian companies by picking up two of the six top prizes from 17 226 entries from 84 countries. But I can also state with confidence that none of the Loerie awarded sites qualify for any usability award.
If you wonder which sites have received Loerie Awards, do not attempt to find out from the Loerie web site. I haven't had much luck there.
Finding Loerie Award information on the Web was not that easy. The local search engine Ananzi delivered very poor results. I did not try other local sites because they are too slow and the purpose of this paper is not to investigate search engines, but web sites that have received Loerie Awards.
The whole search process took just too long and I decided to give the domain name a chance. So I blindly tried http://www.loerie.org/ for which I received an error message but fortunately the page was redirected to the IP address http://196.35.250.98, which in fact happened to be the address of the Loerie site. The rate of changing URIs on the Web is quicker than that of dictators in South America, so by the time you look this up it might have changed again. The Loerie site is an example of a deceased site as the domain name is no longer at the original URL. See a screencapture of Loerie main page (162KB) as it appeared at the time of writing.
The body of the Loerie Web page begins as follows:
The Loerie Awards are the most prestigious creative advertising awards in the Southern Hemisphere, now in their 22nd year...
There is nothing on this page about who had won Loerie's, so I followed the History link and read:
The Loerie Awards were established in 1978, by the Association of Marketers, to coincide with the advent of commercial television in South Africa. The first ceremony took place in 1979...
The background of this award is thus TV advertisements. TV usability differs considerably from Web usability. The challenge to the TV user is to get a finger on small remote control buttons, and then perhaps to manage the control unit, a box of popcorn and a beer without having to get up from the sofa. Web usability is more complex by many degrees, the major difference probably more strenuous cognitive effort on the part of the Web user. In the TV environment the purpose of advertising relates to warfare with minds, to interfere with thinking patterns and to dominate needs; not with being user-friendly. It is thus no wonder that Web sites that achieved Loerie awards have poor usability. Anyway, to continue with my log: still no information about who had won Loerie's.
So on the Loerie web site I found nothing about award winners of the past few years. I will not bore you with the time I spent trying to find that information. This paper is about the Web so I restricted my searches to the Web -- it would have been much easier to use the phone, but what the heck. I wanted to investigate the usability of the Web. So as last resort I tried the international Google search engine and despite the fact that the Loerie site is listed first, I found historical information about Loerie awards towards the last page. Most of the earlier items link to announcements or serve as brag boxes.
Some historical information I found in a link to a newspaper article in the Electronic Mail & Guardian about the awards. But to find information for the past three years in this newspaper's archives was not a straightforward task. Interestingly enough, the Electronic Mail & Guardian received a Wired Bird Loerie in 1997. Trying to find the relevant Loerie historical information reserves them not a Loerie but an Ostrich award. The information was buried very deep. Without continuing with the suspense, see the complete list of Loerie Awards for 1997, 1998 and 1999.
The Loerie award winning web sites for 1999 were:
I focus on these 1999 award winners as the 2000 awards will be granted only in a few months' time. But before I continue I wish to refer to the original 1997 BMW web site which was an award winner. This site was a disaster from a usability point of view. Graphically speaking and from the point of view of the use of scripts it was really great. You can no longer check that site as BMW in their wisdom eventually changed it. This is fortunate for users, but unfortunate for me because now I can't demonstrate what I mean as there is no public available archive.
When the award winning site was still available, I have had only a few succesful access sessions to it -- not because it was busy, but because it was so heavy. The site's accessibility was poor from a 64KB diginet line, so I do not even want to guess what modem users were experiencing. At that stage I used the site to make clients decide between graphically nice-looking but impractical slow site design and a more plain vanilla approach. Not a single one wanted such a beautiful but slow site.
But let me focus on the 1999 award winners. I will not present a detailed analysis of these sites in terms of the criteria I set above, but will highlight a few points. Again I do need to point out that I am of the opinion that the graphic appearance of most of these sites is excellent. My gripes have to do with usability; nothing else. In general not a single one of these sites meets the requirements I argue for.
The comic strip Madam & Eve's Home Sweet Home page http://www.madameve.co.za/ received a Gold Loerie. See a screencapture (184KB) of the home page. Note the use of a fixed table width that forces one to scroll both horizontally and vertically to see everything on the screen. The W3C's WAI (Web Accessibility Initiative), which strives to make the Web more user friendly, advises against the use of tables to enforce layout. Not all devices can render tables, and speech synthesizers may get confused by not being able to render table-contained information properly.
So let's scroll right to see what the icons mean. After scrolling right, the text headings of some icons disappear behind graphics. See the screen capture (205KB) of this position. Note how the text below the icons in the third line disappear behind the images.
This entire site is Java driven and quite slow because of heavy images. Recall that my guideline for document size is 50K per document, which includes all the objects. Let's calculate the size of the first Madam & Eve page:
| main | 7360 |
| interf.gif | 217257 |
| but1.gif | 3943 |
| but2.gif | 2769 |
| but3.gif | 2735 |
| but4.gif | 2541 |
| but5.gif | 2588 |
| but6.gif | 3431 |
| but7.gif | 3003 |
| but8.gif | 2303 |
| but9.gif | 2511 |
| but10.gif | 2553 |
| but11.gif | 3292 |
| new.gif | 12163 |
| TOTAL | 268'449 |
The first page is larger than 250KB! thus 5.3 times the recommended size for a quick loading document.
Here is the loading time for this page using different modems on a perfect day which only the chosen few have had the fortune to experience, especially in this country:
| Modem | seconds | minutes |
|---|---|---|
| 14'400 | 150 | 2 min 30 sec |
| 28'800 | 75 | 1 min 15 sec |
| 33'600 | 64 | 1 min 4 sec |
| 56'000 | 40 | 40 sec |
That's on a perfect day. On a typical day access time will be longer because of traffic.
Compare the Madam and Eve home page size to that of the Silver Loerie Award winner, the Audi site. Here is the size of the main Audi page.
| filename | size |
|---|---|
| main | 925 |
| top.htm | 4224 |
| topback.gif | 1362 |
| topleft.gif | 94 |
| visionon.gif | 257 |
| modelson.gif | 397 |
| serviceon.gif | 521 |
| factson.gif | 373 |
| newson.gif | 399 |
| blank.gif | 256 |
| main.asp | 6148 |
| base.jpg | 29133 |
| news_pics.gif | 2329 |
| arrow_blank.gif | 60 |
| white_line.gif | 37 |
| worldsite.gif | 875 |
| homebottom.asp | 1762 |
| help.gif | 539 |
| contact_audi.gif | 1043 |
| sitemap.gif | 850 |
| bottom_blank.gif | 388 |
| TOTAL | 51'972 |
The main page is just under 52K (hardly over the recommended 50KB size) yet it has a lot of graphics. See the screencapture (32KB) of the main page, and the Service page (36KB). Note the consistent landmarks at the top of the pages, with color coded beacons.
This site, however, also uses fixed widths which means that a lot of screen estate is not utilized on large screens, whereas for small screens the user will have to scroll, but the designers at least kept in mind smaller screen sizes. The site is very brochure-like and persuasion driven. What may be lacking is a list of Audi outlets. If I want to buy an Audi I won't know where to go or whom to phone. Compare this with the Diner's Club map below and you will see what I mean. Anyway, of all the Loerie Award winning sites the Audi site would come the closest to winning a usability award.
The Diners Club web site (http://www.dinersclub.co.za) was awarded a Silver Loerie. See a screencapture (27KB) the main page of the site.
This site is clean and simple, but forces an unnecessary action from the main page -- the Garden Path syndrome. You have to click the "Enter" graphic to access the site. What for? Why must a user knock to have a door opened in order to access information? Would you like to knock on the door of your local grocery store every time you buy basic foodstuff? Apart from this the site is not really information rich. See the screen captures for the Introduction page (41KB) and General Information (57KB) which includes a geographical map.
The information on these pages is brochure-like and uninformative. Anyway, why would one want to read this introduction -- an introduction to what? The business, the services, options, or what? The use of landmarks at the top of each page is consistent and at least good. The pop-up window with map and contact details is informative, but it cannot be bookmarked. This means that next time one wants to access this information a number of unnecessary steps will have to be followed to get to it again.
The K-TV Interactive web site (http://www.ktv.co.za) received a Silver Loerie, but at the time of the first draft of this paper I had yet to see it. On every single occasion that I have tried to access it, no matter what time of day, the site was unavailable. The domain name seems to exist as it is found, but attempts to contact the host are futile as I kept on getting the HTTP message "(110) Connection timed out". The only reason why I persistently tried to reach the site over the past few weeks was so that I could have something to say about it here -- otherwise I would not have bothered to try so many times. But eventually even I had to give up.
Now, I regard Murphy's Law as more universal than Einstein's famous equation, and in keeping with this, I gave it another try late yesterday afternoon. Voila! To my surprise the site loaded within 10 seconds. At this stage I have no clue whether the present site is the award winning site as there is no metadata at all. So I will have to reserve any further comments. Anyway, I made screencaptures of the main page (143KB) and a submain page (117KB).
Incidentally, this site also received a Special Mention for the 1997 Loeries.
My favorite site to demonstrate poor usability is the Nando`s 98 web site (http://www.nandos.co.za) which received a Silver Loerie.
Whenever I find an opportunity I ask a user to find the Nando's outlet in Rosebank, or Bedfordview, or some or other location. That obviously assumes that such a user would like to know where the nearest outlet is -- perhaps to place an order. We would typically pick up a telephone directory for this kind of information, but as there is such a marketing drive behind the Web I wanted to see whether this kind of search could be done using the Web.
As a tool for finding specific information quickly the Web is presently way behind technologies such as directories for the fax and the phone. Compare finding the Rosebank Nando's phone number on the Web with looking it up in a phone directory or even calling the atrociously slow Telkom information center and you will give up on the Web and rather use the phone in time for the next day's breakfast.
In this section I will lead you through what is involved trying to find this information.
In general the Nando's site is extremely slow site even with a lot of available bandwidth at the University. I have tried at all hours of the day, including weekends, and we run a proxy server which should speed things up.
Note that the present site is the much-improved version, which I will illustrate here. The older site which originally received the award was more cumbersome, slower, and began with a table that looked like a DOS (or Windows) boot window. I guess a typical user's reaction to that might have been: "Oh *$#@! Something went wrong with my computer and it is rebooting!" -- it was my first reaction!
The site was also Java driven to the extent that every new window opened on top of the base window and could therefore not be bookmarked, neither did it allow for making use of the browser's back button. A user was thus held hostage with no escape mechanism provided.
The metaphor used on the Nando's web site is that of a Windows 98 interface. See a screencapture (152KB) of the main page. At least this metaphor is used consistently throughout the site. One wonders why this computer interface metaphor is used for a chicken fast-food outlet, especially as the computer literacy of the target audience (presumably the general public, given the flowery language) is very low. This metaphor could of course be justified by arguing that only users familiar with computers will access this web site, but that does not address any newby behavior at all.
On the main Nando's page, note how the bottom row of icons are blocked by the bottom bar, but the screen is not scrollable so what those bottom icons are for nobody knows. The leftmost icon looks like the top of an American post box, not like a South African one -- note that the URL fragment is co.za. Also, observe the poor alignment of the first row of icons. Are there two icons with the text Peri-Peri Network and News or is it Peri-Peri News Network with one complex icon? It turns out there is only one icon.
Let us follow some links. I will follow the "Exploring the Burger" icon first. See the screencapture (168KB) of the destination page, which will be discussed now.
The Exploring Nando's page mimics the Windows Explorer screen window. The user may get confused about whether she is inside the browser window or operating system window. From here I followed the "Questionmark-magnifying glass" icon with the text "Store search" and reached the next screen (see the screencapture --126KB) with options "Enter Store Name" and "Select Region". I selected South Africa and typed in "Rosebank" in the "Enter Store Name", then with the mouse clicked on "Submit Query". Nothing happened. Nothing happened on entering the "Enter" key either. So I gave up.
Then I tried the "Magnifying glass with question mark" icon, which has the text "Store" next to it. Nothing happened, so I chose "Retail" in the bottom. The resulting page (see the screencapture -- 188KB) is very uninformative and starts with
When you discover Nando's original peri-peri (the ethnic name for the fiery spice some know as chilli) sauces and Nando's peri-peri marinades, you have made the most important discovery in cooking since fire itself...
in typical advertising language. I could observe no suggestions of links, except the email address at the bottom of the page (reached only by scrolling down). Being an experienced user I floated my mouse all over the page to see if there were any hidden links somewhere, and "By Toutatis!", there were two in the image. When I move my mouse next to the main image, something happens. See the screencapture (25KB) -- there are chicken footprints! Chicken was here!
The choices on this page are "Product range" and "Retail International". I followed this second link which resulted in a screen (see the screencapture -- 153KB) with headings "Product range" and when scrolling down a few country names - South Africa, UK, Israel. Remembering that I also saw "Product range" on the previous page, I got sidetracked and paged back with my browser (as the content pages give no navigation at all), and followed the "Product range" link which lead to a page beginning with
The tradition of sharing fiery peri-peri, exotic spices and other delicious flavour combinations with others is not new.
and saying absolutely nothing about a product range. This is very incomprehensible linking and content indeed. I was sidetracked due to my academic curiosity and still did not know where the Rosebank outlet is.
So I used my browser's back button to get back to the very fist page. It got stuck at the query page which refused the browser to go back further. So I had to start all over again by getting the URL from the history of visited sites.
Again at the first page, this time I took time and read attentively through each icon in an attempt to find an intelligible one, so I took a chance with "Outside Catering". Given the track-record of my experience with this site, perhaps "outside" was confused with "outlet", but again it was a wrong choice! The opening page is titled "Nando's Outside Catering" (see the screencapture -- 156KB) and does not concern catering in the open despite this suggestion by both the text (well, that is one reading of it) and the image, but the fact that Nando's offers a catering service at premises other than Nando's outlets. The landmarks at the top of this page are totally uninformative, although admittedly, in this subsection they are at least consistent. The list of choices are:
What does "Platters" mean? What is the difference between "Special Events" and "Special Services"? And at first I read "On site catering" as "Outside catering" so what is it doing here again? It turns out that these links provide information on the following:
Well, no luck here. So I decided to go back and try "Nando's Explorer" again. This time I used the keyboard first (not the mouse) and the search went ahead. There is thus a bug in the script because activating the process with the mouse does not work, while the keyboard does. So much for debugging!
The domain name is nandos.co.za One would assume that by default it concerns the South Africa market. So in the "Select Region" option box, why is South Africa hidden away among zillions of other country names? I don't think I'll wait for a chicken delivery from Uganda. And are these countries "regions"? I find a linguistic problem here.
This time I actually did get some Rosebank information (see the screencapture of the main Rosebank page -- 103KB) and wanted to do a screen capture for this talk. Something went funny with capturing tool and I wanted to redo the capture, but it left a few unwanted pixels on the screen, so I wanted to refresh the page. That took me back right to the main Nando's page! So I had to repeat the process from the Nando's Explorer page and followed the links again. But this is not really the Rosebank page, it is a page consisting of a list with a single list item that needs to be clicked and followed to get to the actual Rosebank page. Here it is at last -- see a screencapture (120KB). So there actually is a Rosebank outlet for Nando's after all.
Now knowing the procedure, I went back to the main page to note each step explicitly.
No wonder I developed metacarpal syndrome because of all the unnecessary mouse clicks.
To find information about Nando's Rosebank branch nine steps need to be followed if you know the procedure, and if you don't... well, good luck! In terms of link depth this is supposed to be a very simple site. It is small with only a few files, and the information content is not complex at all so it should have a very simple hierarchy of relationships.
To conclude my experiences with Nando's let us pause a while analyzing the icons on the Rosebank page. The icons have the following associated text:
| Icon | Text |
|---|---|
| certificate | About |
| world globe | World |
| TV | Advertising |
| American post box | Cluck Up |
| bag with dollar sign | Investors |
| Magnifying glass | Store |
I have the following problems with this navigation presentation.
I am sure you have endured enough chicken. After spending so much wasted energy, let's move on an get some energy pills. The next award winning web site is for Multivitamin DynaJets.
The Multivitamin Dyna Jets web site (http://www.rocheconsumer.co.za/dynajets/index.html) achieved a Silver Loerie award -- see the screencapture (84KB). This is a shockingly large Shockwave page of 172'828 bytes, almost three and a half times the recommended size. I personally get irritated with sites on which announcements for plugins are splashed like this. In terms of screen estate the Shockwave announcement takes up about 25% of the space. I wonder if Roche realizes this -- that they are paying to promote a Macromedia product on their site? Imagine a paper brochure on which 25% of the surface is used for announcing that you need special brandname glasses to read the small print size, otherwise you won't be able to read the brochure. Yet companies are prepared to accept this for the Web.
The Dynajet Berocca first page (see the screencapture -- 130KB) reads like a typical brochure, but serves as an index. Following the link "Click here for the trials and tribulations of the nutritionally challenged" we are lead to a soap opera (see the screencapture -- 123KB). This kind of approach may be entertaining the first time around, but once you have visited it, would you ever want to see a rerun? Well, okay. If you are really that bored...
Some useful information can be found by following the link "What is stress?" (see the screencapture -- 103KB). The low contrast between foreground and background makes this very difficult to read. See how much easier it is to read when there is more contrast and the text is highlighted (see the screencapture -- 120KB).
The Dynajet Kid page (see the screencapture -- 91KB) is huge and takes a long time to load. It is a game. I have not done any user testing on this game, but it looks pretty boring to me, and I am not a game player at all. The target group of Dynajet Kids is the game-generation, and I suspect they will not even consider playing this one -- although I must admit that I have not done any user testing on this one.
The Dynajet Mum page (see the screencapture -- 123KB) contains zero cognitive information. It is an empty page with a few obscure links, and it takes an awful long time to load.
The historical data for the Loerie Award winning web sites I obtained from Arthur Goldstuck's column Webfeet in the Electronic Mail & Guardian. He awards his own "Best corporate use of animation prize" to Radar Boy, who designs web sites. That information you won't pick up from the splash screen of the Radar Boy web site (which is about 263KB; see the screencapture -- 41KB) which contains an animated cow that in my opinion has absolutely nothing to do with web site design or corporates. This is a typical example of Gadget pour L'Gadget. Look Ma, I can do this. I totally disagree with Goldstuck that this is a good example of corporate animation.
The Loerie Awards may be prestigious advertising awards and may work for the TV environment. But the panel that grants these awards seriously lack any consideration for the usability of Web sites. The demands and contraints of the TV and Web media are different. One should not apply criteria that work well in one medium to the Web, which has its own peculiar set of constraints in addition to general computer constraints.
I maintain that usability metrics should be qualitative as quantitive guidelines are mechanistic. From the analysis of the awards winning sites, following the suggested framework for evaluating web usability and avoiding the Web design syndromes appear to be apparent.
This paper was written according to the W3C's Recommendations for HTML 4.x, using CSS 1.0. Your browser may not be able to display all the features properly. At the time of writing this paper, there is not a single browser on the market that complies with these standards.
As Microsoft's Internet Explorer is currently the most used browser in South Africa, note that CSS 1.0 support in IE 5 is worse than in IE 4. For example, IE 4.x renders the background colors of the tables correctly, but IE 5.x ignores them. Also, IE 5 ignores style for the <blockquote> and <address> elements (which Netscape 4.6, incidentally, at least tries to render), so you may find the quotes difficult to read if you use IE 5.
If you use Netscape the appearance of this document may be irritating. That is because Netscape's support for CSS is poor, and also, it does not fill background-colors as blocks. Netscape also makes a real mess of style for lists.
And about the size of this document: the background image used in the presentation on the standalone PC is almost 80KB so I dropped it from this Web document. The text is just under 80KB. I pondered about whether to chop this document into smaller pieces, but decided that you are a Special Interest Group reader who will wait the extra few seconds for the document to load -- thus a rational decision based on a a perceived function. So if you think I do not practice what I preach, just don't shoot the piano player...