Chapter 9. Website Design

Website DesignThus, one aspect of website design is to identify primary and secondary goals for the site. Theprimary goals may be achieved by directly implementing facilities to meet those goals, for example, byproviding a catalogue of goods and services. The secondary goals may be achieved in more subtle ways,by, for example, choosing colours that suggest stability, excitement, or so on; or by providing subtle,positive messages to the customer concerning the company running the website and the services on offer.Let us pursue these ideas with an example. Say you are in the business of developing software on behalf ofclients, and that you also sell programming language compilers and development environments. Yourclients might choose both the programming language and a specific compiler for it. For instance, one clientmight choose Java, and another might choose C . The second of these clients may or may not havean opinion as to whether Microsoft Visual C should be used in preference to IBM's VisualAge C .You sell both, as well as other C development systems, so you can cope with the choice of either. Youhave decided that the main purpose of your new Web site is to 'sell the services' of your company. How doyou determine the details of this? One method is brainstorming, in which a group of people brieflyconsider all aspects of an idea. Participants in a brainstorming session are expected to contribute todiscussions, to arguments in an unstructured, anarchic, often unruly way. They will often jump from oneidea to another, calling out words, arguing for and against points — sometimes simultaneously. Inbrainstorming the ideas of all the participants are initially given equal weighting, so the most lowlyemployee may argue freely with the most exulted. Brainstorming is usually thought of as a fun way togenerate ideas; it is a very creative process and the outcomes can often be surprising with unexpectedbenefits.As can be seen from the previous exercise, expressing many ideas using brainstorming or a similartechnique, may result in a mixture of ideas concerning the purpose of the site and how to achieve it.Ignore the detail of the 'how' and try to understand what it means. One suggestion of, say, using grey tosuggest reliability may contradict a suggestion of using bright colours to convey excitement and being a'go-getting' company, but that does not matter at this stage. The important information here is that bothaspects of the company are to be conveyed. The question is whether it should be a primary or a secondarygoal.One question concerning primary goals that the brainstorming did not settle is that of what the site isprimarily selling — software development skills or programming language implementations. The soonerthis is answered the better — but it might require debate, and the decision may, to some extent, depend onwhat can be achieved in the time and budget available for site development. For example, it may bedifficult to organise the selling of programming language implementations because the website mighthave to interact with a database of information about stock levels. Another reason for not promoting thatside of the business might be that the company could not cope with too much extra business of thatkind. The irrelevance of distance when selling products might increase sales of compilers andprogramming environments, whereas the need for software developers to meet their clients mightnaturally limit take-up if that side of the company's business was promoted.As well as the website developers knowing what the site's purpose is, they must also know its audience. Withknowledge of your audience, you can tailor both content and presentation to suit their needs and keep Webcustomers returning for more business.Ultimately, knowledge of the business requirements and expected audience is the starting point ofunderstanding the site requirements and design. Knowing these facets provides a foundation for sitedevelopment. Such a foundation must be the basis for the design. It should drive the design. You must notstart with an arbitrary design and force other choices to fit it.9.2.3 Website ArchitectureThe design of a site involves many considerations, not least of which is navigation, a discussion ofwhich occurs later. Other than navigation, the following points need to be considered as well: the structure of the site — how the pages are organised (logically, rather than physically ondisk); the possible paths through the structure — both the paths you might prefer or expect a user tofollow, and the paths you should provide to make the structure truly hypertext; the style — the so-called 'look and feel', that is, the layout of the actual pages; the structure of individual pages — how each page is organised (or how categories of page are4

Website Designorganised).All the above points are related to each, and so it is not possible to prescribe an order in which theyshould be considered. For example, the structure of the site is related to the possible paths through thesite, as will the structure of the individual pages. All should be strongly influenced by the site's purposeand target audience. Now let us consider an abstract view of how a site is organized. Figure 4.2 shows thisstructure. A structure such as Figure 4.2 is sometimes called an information architecture. The structureimplies that users start at the home page, then visit pages A1, A2, and A3; followed by visiting pages B1,etc., through D3. This sequence of page visits, however, may not be the sequence the user chooses toview. Say the page organisation reflected the departments of an office equipment supplier — desks, filingcabinets, pens, paper, computers, fax machines, and the like.Figure 4.2 Website information architectureLet us represent these departments as A, B, C, D as in: A represents the furniture department;B is for electronic (non-computer) equipment, such as fax machines;C is computers and associated items such as, scanners, printers, disk drives, etc; andD is copying services, including the production of brochures, business cards, etc.Clearly, the information architecture is not devised with navigation primarily in mind. Let us brieflyconsider navigation: imagine a scenario in which a user wishes to buy a computer, a combination fax /scanner / printer, and furniture to hold these. From the home page the user might visit C, for computingequipment, then perhaps move between pages C1 and C2 as they decided which computer and fax /scanner / printer they want. Having bought the computer equipment, the user might want to go directly toA1 for a desk, then A3 for a chair, and finally A2 for a monitor stand. The diagram above does notrepresent this scenario or even the possible navigation paths. It only present a 'logical' view of how thepages in the website are related to each other.Now examine a second version of the site structure, with navigation paths added:5

Website DesignFigure 4.3 Website information architecture with navigation pathsIn this second version of the information architecture, explicit navigation paths have been given, each ofwhich is a two-way path. This is based on the assumption that a user of the site would need to movebackwards and forwards between 'sub-departments'. Notice that no navigation has been included betweendepartments, between A and B, C, or D. This is an arbitrary decision, which in reality would be madeknowing the site's purpose and audience. Navigation planning will be discussed further later in thischapter.Having come up with a plausible information structure, the structure of the individual pages need to bedesigned — this is called the Web page architecture, and another design effort is required for this. Thisshould be done before settling on the layout and style. For example, Figure 4.4 shows two possible pagearchitectures for displaying the same information, namely a page of book or report style.Figure 4.4 Page architecture for displaying a book or report styleThese structures can be implemented in different ways, inasmuch as the fonts, colours, button styles, etc.could be varied for each. These are important facets of style, usually decided by graphic designers. Softwaredevelopers should be primarily interested in the structure of the page elements. When these have beendecided, the graphic designer's 'look and feel' can be achieved using HTML, JavaScript, and so on.Figure 4.5 shows instances of the above page architectures. Both have the same content, but differentlayouts and styles. The HTML facilities required by each is quite different. For example, it may beconvenient to use tables to implement the first layout and frames for the second (although neither havebeen implemented with either tables or frames). Design is all about making choices, as can be seen here.6

Website DesignFigure 4.5 Websites showing different layouts9.2.4 Navigation PlanningAs observed in Chapter 1, the provision of navigation aids in hypertext documents is very important.Navigation aids prevent users from losing their place. When reading a book, people start at a particular pageand read the subsequent pages in order. Perusing a catalogue might not be as linear an activity, but thepage numbers, table of contents and the index provide the means to navigate backwards and forwards,and to jump to arbitrary pages. Hypertext documents do not follow this fashion for two reasons: the reader can arrive at any page, via a hyperlink; and a reader can read or interact with the pages in any order.One technique for designing the navigation paths is to storyboard the tasks that the users mightundertake when visiting the site. Storyboarding is a technique taken from cinematography: the story isdeveloped by roughly sketching each scene — as well as the actions in each scene — on a board, andplacing each image in the desired sequence. For Web site development each page does not need to besketch out, but each scenario does need to be documented and analysed.Ideally, a storyboard should be developed for all the pages in a complex website so that style can becompared with function. As with all these design activities, the storyboard may have to change — butit is easier to change a storyboard than the final product, and a storyboard acts as a good starting point towebsite design.Navigational aids are an important ingredient for successful website design. Browsers themselves have avariety of navigation aids including Bookmarks (Favourites) and History lists, while the JavaScriptlanguage has facilities to access these. A website designer can make use of these facilities, but the pagearchitecture should provide the navigation aids that are considered necessary.Overcoming the 'Lost In Hyperspace' problem is a difficult problem to solve. It occurs when a userfollows a series of links and discovers that they do not know where they are in a site or how to retrace theirsteps to a previous page. There has been much research into this phenomenon, but this appears to havebeen ignored by Web designers.The 'Lost in Hyperspace' problem can be prevented, or lessened, by applying three rules: in general everypage inyour website should include: where you are; where you have been; and where you can go For example,the Middlesex University academic home page, shown below implemented two of these rules. It showswhere the user is by the down pointing double-headed arrow ( ) beside the word Academic. The otherwords on that navigation bar (preceded by the symbol) show what the designers see as major7

Website Designnavigational steps to other topics. By contrast, under the 'Academic' heading there are nine links, fromStudying at Middlesex University through to ‘What's New’. The user has left the mouse pointer overInternational Students, which has been highlighted by a rectangle outline. (You will study how to achievesuch an effect a later chapter).Figure 4.6 Middlesex University academic homepage9.2.5 Designing for Hyper-ReadingAs mentioned above, books are presented in a linear fashion while hypertext documents can be read nonlinearly. The ordering of hypertext documents within a site is a related issue: visitors to a Web page maystart in the 'middle', read through to the 'end' and finish at the 'beginning'. Within a single Web page, thetop to bottom (and left to right) nature of the text may dominate, but if a user arrives at page somewhereother than at the document's top, there may be no order apparent to the reader. A Web designer must besensitive to these many possible readings of a Web page, just as they should be ensitive to the navigationalpossibilities in an information architecture. The implicit ordering of a page architecture must beconsidered. Dynamically changing content (such as animations or JavaScript- produced content) willinfluence the order a user reads a page. This is something that does not happen in books.Clearly, people adopt different reading manners between reading Web pages and books. In their 1997study, Jakob Neilsen and John Morkes discovered that 79% of people merely scanned the text of a Webpage. They found that only 16% read every word. Other work has found that less than 20% of readersscroll beyond the information that is visible. From these findings it could be concluded that Web pagesshould: contain 'scannable' text, in which keywords are highlighted to aid quick perusal; employ meaningful sub-headings; use bulleted lists to provide a quick summary of the main ideas; use only one idea per paragraph, concentrating on the introductory words of the paragraph; use the 'inverted pyramid' style of writing, where the document begins with the conclusion; use half or less of the word count of conventional writing; and ensure that all the information is visible on the screen without scrolling.Such guidance should be used were needed, but should not be relied on slavishly. It is important toremember the intention behind the above suggestions. For example, from the third point, do notremember it as a statement to only 'use bulleted lists', but remember that the bulleted lists are meant tosummarise information explained fully on the page. A study by Nielsen and Morkes emphasised the needfor Web designers to instill in users a sense of the site's credibility, as well as a trust in the content provider:if readers do not believe what they read in any section of a page, they may skip the rest of the page.Credibility and trust are important to businesses wanting to establish commerce on the Net.8

Website DesignActivity 1: Bad WebsitesVisit the following websites: www.websitesthatsuck.com .com [http://www.worstoftheweb.com ]Write down your view of these sites. Choose three of their featured websites and, for each chosen site,identify one aspect of its design that you find particularly poor. Try to find four or five examples of badWeb design and discuss them with colleagues on-line or in tutorial.See Discussion on Activity 1 at the end of this chapterActivity 2: Top Ten MistakesGo to Jakob Nielsen's useit.com website and read his original 1996 p-ten-mistakes-in-web-design/] on what to avoid whendesigningaWebsite.Then follow the link to his revised (1999) -web-design-mistakes-of-1999/] and read it. Also have alook at some of the newer top-10 lists that can be found at the bottom of that page.Take note of the main mistakes he lists and the extent to which he has changed his view. What aboutthe other lists? Are there any inconsistency? Write down what you think of the current advice found onthese lists.Activity 3: Design iolated-homepage-guidelines/]. Can you find an example ofcommon websites that violates these guidelines? Also discuss whether or not you agree with the ranking.Take note of the main mistakes he lists and the extent to which he has changed his view. What aboutthe other lists? Are there any inconsistency? Write down what you think of the current advice found onthese lists.ReviewDo Review Questions 1, 2, 3, 4 and 59.2.6 Estimating Download TimesHypertext research has shown that a user needs to be able to move between pages in less than a second forthe site to have maximum effectiveness. Even with the increased use of fast modems, most pages remainpainfully slow to download.Factors in page download speed that are to a large extent beyond your control include: the throughput of the server;the server's connection to the Internet;the performance of the Internet itself;the user's connection to the Internet; andthe rendering speed of the user's browser, computer processor and graphics hardware.As far as possible, decisions that affect Web page speed should take this information into account. Forexample, if the website is to be used within a company as an intranet, or with limited access for registeredcustomers as an extranet (see Unit 13), then the configuration of the users' computer systems should becompletely known.The main factor under a Web designer's

Website Design . 1 . Chapter 9. Website Design . This course does not cover graphic design, but will mention some of the computer graphics technologies involved. The examines elements of HCI as it applies to the Web inchapter . generate ideas; it is a very creative process and the outcomes can often be surprising with unexpected benefits.