MORGAN KAUFMANN SERIES IN IN'I'IF.RA(I'I'IVI€
`
`'I‘ECIINULUUII'LS
`
`
`
`ASKELADDEN 1528
`
`ASKELADDEN 1528
`
`

`

`Publishing Director
`Publishing Services Manager
`Editorial Coordinator
`Editorial Assistant
`Project Manager
`Cover Design
`Cover Image
`
`Composition
`Technical Illustration
`Copyeditor
`Proofreader
`Indexer
`Interior Printer
`Cover Printer
`
`Diane D. Cerra
`Simon Crump
`Mona Buehler
`Asma Stephan
`Daniel Stone
`Shawn Girsberger
`© 2005 Artist Rights Society (ARS), New
`York/ADAGP, Paris. Courtesy of SuperSLock,
`Inc.
`
`SNP BesteSet Typesetter l_td_, I-Iong Kong
`Dartmouth Publishing
`Karen Carriere
`Phyllis Coyne Proofreading Services
`Gerry Lynn Messner
`RR Donnelly
`Phoenix
`
`Morgan Kaufmann Publishers is an imprint of Elsevier.
`500 Sansome Street, Suite 400. San Francisco. CA 94111
`
`This book is printed on acid-free paper.
`
`© The Open University 2005. Published by Elsevier, Inc. All rights reserved.
`
`Designations used by companies to distinguish their products are often claimed as trademarks
`or registered trademarks. In all instances in which Morgan Kaufmann Publishers is aware of a
`claim, the product names appear in initial capital or all capital letters. Readers, however, should
`contact the appropriate companies for more complete information regarding trademarks and
`registration.
`
`No part of this publication may be reproduced. stored in a retrieval system, or transmitted in
`any form or by any means — electronic, mechanical, photocopying, scanning. or otherwise —
`without prior written permission of the publisher.
`
`Permissions may he sought directly from Elsevier's Science 8: Technology Rights Department in
`Oxford, UK: phone: (+44) 1865 843830, fax: (+44] 1805 853333. email: permissions@elseviercom.
`ark. You may also complete your request online via the Elsevier homepage (htrp://elsem'er:com]
`by seiecting “Customer Support” and then “Obtaining Permissions."
`
`Library of Congress Control Number:
`
`Library of Congress Cataloging-inePublicaIion Data
`. let all
`.
`User interface design and evaluation I Debbie Stone .
`p. cm. — [Morgan Kaufmann series in interactive technologies)
`ISBN 042708843674
`1. User interfaces [Computer systems)
`
`I. Stone. Deborah L.
`
`II. Series.
`
`[QA76.9. U83U835 2005]
`005.4'37—dc22
`
`ISBN: 0712-0884364
`
`2004061900
`
`For information on all Morgan Kaufmann publications, visit our website at www.mkpwm.
`Printed in the United States of America
`0506070809
`5432i
`
`
`
`

`

`3. The importance of Good User Interface Design
`
`User
`interface
`
`Undertying
`hardware, software,
`interaction devices
`
`System output
`
`User input
`
`-
`
`'9 design of
`::1trols, and
`"3 selection of
`"teraction
`:ences for
`‘Zut and
`:.:out, will be
`: scussed
`inner in
`:‘iaoters l2
`"'ough 14,
`
`':J wilt learn
`" are about
`:Jmmand-line
`'tertaces and
`:tner interaction
`ETyles in
`Chapter 11.
`
`Figure 1.2 To the user, the interface is the computer system. (From Constantine and Lockwood,
`1999.)
`
`For example, when you use the controls on the panel of a washing machine, the con-
`trols form the interface between you and the machine — you are not concerned with
`the underlying technology or the software of the washing machine itself. What is
`important to you is that the controls and their settings are intuitive and easy to under-
`stand and use so that you will achieve your goal of laundering clothesfiimiiarly, when
`on surf the Internet. the pages of a web site displayed on your PC’s monitor form
`ihe interface between you and the site. The web page UI may contain controls like
`‘scroll bars, clickable hot spots, or links in the form of text or images. These items are
`all part of the interface.
`
`The Importance of Good User Interface Design
`
`Good user interface design is important because, as we have discussed, computer
`use permeates everyday life. Early computer systems were expensive and were devel—
`oped mainly for particular tasks, like advanced number-crunching; as such, these
`systems were employed only by specialist computer users. Often the systems had
`command-line interfaces, with obscure commands known only by these specialist
`users. Thus, the user had to adapt to the system, and learning how to use the system
`required much effort.
`
`Computing systems, however, are no longer the province of the specialist user. As the
`price of PCs and computer-based technologies has fallen, the ownership of these
`types of goods by nonspecialists has widened. In August 2000, 51% of households in
`the United States had access to one or more home computers. and 42% of house-
`holds had access to the Internet (US. Census Bureau, 2001). In 2002, 54% of house-
`
`holds in the United Kingdom had access to some form of home computer, and 44%
`had access to the Internet (National Statistics. 2004). Therefore. the need for the
`design and development of user interfaces that support the tasks people want to do
`and that can be used easily by a variety of people with varying abilities has become
`
`Part 1
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`

`

`4. Designing Web Sites
`
`Minimal download time. It is likely that some of the volunteers and some of the
`people that they help will have older computer equipment and possibly dial-up
`access to the lnternet, so speedy download times are important.
`
`Ease of use. If the web site is difficult to use then it won’t be popular, so ease of
`use is very important here.
`
`Relevant to user’s needs. Volunteers tend to be forthcoming with their views on
`things that affect their volunteering, so this is a crucial guideline if you want to
`h
`keep t em happy.
`
`Unique to the online medium. It might be just as easy to create a notice board in
`a local community center. Maybe the group does not really need a web site? Or
`.
`.
`.
`.
`.
`perhaps it would work Just as Well if the group replicates the system it already
`has on its web site? This guideline may not be all that important in this case.
`.
`.
`.
`Net-centric corporate culture. It IS important to remember that the purpose of
`this group is to help other people. not to make money or operate web sites. So
`this guideline doesn’t really apply.
`
`If you are
`designing [3 W913
`stte or we
`service for a
`group. it is well
`‘
`worth reading
`.
`.
`this artlcle
`before you
`begin: "A Group
`ls lts Own Worst
`Enemy“ (Shirky,
`2003).
`
`Designing Web Sites
`
`We are going to look at three specific areas of designing a web site:
`
`0 How the web pages are structured in relation to the tasks the users want to carry
`out and the natural organization of the information
`0 How to tell users where they are
`- How to help users navigate around the site
`
`4.1 Designing the Web Site Structure
`
`You are probably studying this book in a linear manner: you read a bit, try the asso—
`ciated exercises, read the next bit, and so on. An alternative approach would be to
`study the book in a nonlinear manner, jumping around the text.
`
`The concept of nonlinearity has been implemented in many software systems.
`It is usually referred to as hypertext. Hypertext is a network of nodes [often imple-
`mented as separate screens containing text, images, and other screen components)
`that are linked together. The Web is a hypertext system made up of a huge number
`of pages that are linked together in a very complex way. This means that you can
`surf the Web in different ways, visiting sites and then moving on to new ones as you
`wish.
`
`figflifion on
`hypertext see
`Nielsen (1990).
`
`This approach is extremely flexible, but can be confusing for the user. Some web sites
`are made up of hundreds of pages. Such sites may have developed over a number of
`years in a chaotic and unplanned manner. This can make it difficult for users to form
`a mental model of the site structure; hence, it is easy for them to lose track of where
`they are and become disoriented. For this reason, it is important for the site to be
`
`
`337
`Part 3
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`

`

`6. Design Issues for Lie: ~eges
`
`DISCUSSION
`
`We anticipate that the following elements will be on this interior page:
`
`The Lovely Rooms logo. This acts as a link to the home page.
`The tagline of the site.
`Details of the particular hotel. This will take up the majority of the page and
`will look include a photograph of the hotel and a photograph ofa typical room
`at the hotei, with a description of the amenities offered.
`A navigation bar aligned to the navigation bar of the site as a whole.
`Links to the next and previous hotels with availability on the nights chosen.
`This will allow the user to browse through the hotels.
`
`-! Design Issues for Web Pages
`When you are designing web pages, you should remember the principles and guide-
`lines we discussed in earlier chapters, especially Chapters 5 and 9.
`
`There are also a number of additional issues that you need to take into account when
`designing a web page. We discuss some of the more important ones next.
`
`6.1 Widgets on Web Pages
`
`In Chapter 16, we considered the design of GUIs. Web pages are a form of GUI and
`increasingly use a similar range of widgets. The issues we introduced in the section
`on the Lovely Rooms Hotel also need to be considered when you are using widgets
`on web pages.
`
`6.2 Scrolling
`
`The most important content should be visible without scrolling. Web designers talk
`about positioning content above the fold, a term taken from newspaper design.
`Broadsheet newspapers are displayed folded in racks, so the stories above the fold
`are the only ones visible to the potential purchaser. Similarly, the web content above
`the fold has to sell the site to the visitor. There is a risk that readers will miss content
`
`that falls below the fold. Figure 17.16 iilustrates a home page that requires scrolling
`in order to see important information, such as the purpose of the site and the inter-
`nal links. The text does imply that the user needs to scroll down.
`
`the phrase “users don’t scroll" was frequently quoted as a design
`At one time.
`guideline,
`for example,
`in the
`1996 column by Jakob Nielsen located at
`www.useit.comfalertbox/9606.html. However, since then users have become more
`
`adept in using the Web and designers have become more sensitive to the benefits and
`problems of longer web pages. Recent advice has been more user centered. For
`example. Koyani. Bailey, and Nail (2003} noted:
`
`355
`Part 3
`
`Guideline: Make page-length decisions that support the primary use of the Web
`page
`
`m m
`
`..
`
`TI
`
`I‘
`
`II
`
`
`
`

`

`
`
`um» umnmwumm
`
`
`m.mum-(0M
`
`$13?“ MIMI 5 manna:
`'
`-
`s? u
`w.-. w.n.q1lu~h-I.I-.Ik
`weandlewhabfim
`
`“mung-c".
`I'J-EIL .m:m m m.u
`
`S'IARI'ER KITS'I
`""
`
`I. grmm”I“
`m
`
`,
`
`.
`
`w“...
`
`A
`
`..
`
`.
`
`.
`
`cm)
`
`In...“
`
`I.
`
`a...»
`
`W...
`
`?
`
`.
`
`..
`
`
`
`Candi-emaKirIgorg.UIK
`I‘I'II). LIN/mm:
`I’i
`I-(I''I'III-I’i rr WI...IJ. .._~‘.~'.r_ I":rIMARIE.
`The :Ete i-' (IIIrHIIIIr IIII:i—I
`-
`
`;.
`Ion...
`32.
`...._....
`mun"...
`~
`
`2'!
`
`I I
`
`355
`Part 3
`
`——
`
`CHAPTER 17 1 Designing for the web
`
`FOWdiQMOKlflgOrgUK .
`i
`i
`3 ”3.;-
`I
`~
`I:
`.
`.
`.
`I
`It (III—II
`’
`do) M Fm--_'_. v13
`.
`.FI;i. ...I.”
`'
`Piease lake a moment to visit our sponsors and recommended
`a new window so you can continue to browse hero!
`Suppliers and bookmark them all to look at later! Ali links open in
`
`
`
`See Chapt
`for more
`InformatIor
`-
`-
`writing iegi
`text
`
`333.2332;
`for more
`ll’ifOI'iTlaFlCln I
`caiculatlng
`Image-safe
`areas.
`
`.
`The SIte
`www.3listapa
`com often he
`good articles
`
`designing
`
`fleXIble Iayou‘
`
`If you like wa
`to maintain
`many differer
`browsers,
`then www.
`thesitewizard.
`com/webdesi
`/muitipiebrow
`rs.shtm| say
`how to do it
`(visited July 5
`2004).
`
`”..._.- ,
`
`L‘
`Figure 17.16 A home page that needs scrolling. (From www. candlemaking. org.uk retrieved on
`July 6, 2004.)
`
`
`
`

`

`6. Design issues for Web Pages
`
`See Chapter 13
`for more
`information on
`writing legible
`text.
`
`Comments: In general, use shorter pages for homepages and nauigation pages. and
`pages that need to be quickly browsed and/or read online. Use longer pages to (i)
`facilitate uninterrupted reading, especially on content pages; (2) match the struc-
`ture ofa paper counterpart; (3) simplify page maintenance (fewer Web page files to
`maintain); and (4) make pages more convenient to download and print.
`
`Scrolling horizontally. across the page, continues to be very unpopular with users as
`it interrupts the flow of reading on every line. Try to ensure that either the text wraps
`to the user's screen size or the line length is less than the anticipated screen size. Also,
`if the line length is more than about 60 characters {eight to twelve words], this will
`affect the legibility of the text.
`
`6.3
`
`Designing for Different Screens and Platforms
`
`In conventional GUIs, it is possible to control the precise appearance of the screen.
`This is not possible for web sites. Therefore, it can be difficult to address fully the
`scrolling issue. For example, the user may be viewing the site using a small screen on
`a handheld computer, which requires scrolling around extensively in order to find
`anything. Similarly. a Visually impaired user may be using much larger type sizes,
`which means that both horizontal and vertical scrolling are almost inevitable.
`
`A partial solution is to ensure that the most important information is at the top-left
`of the screen. it is also useful to anticipate the typical screen size and resolution. This
`will enable you to specify an image-safe area. This is the area of the web page that
`you assume will be visible to most users. Even this is not ideal, as those users with
`
`the appropriate screens may be viewing the page through a window that is smaller
`than the maximum screen size.
`
`The maximum image-safe area will always be smaller than the size of the screen.
`because oftool bars, scroll bars, and other components of the browser window. For
`example, if your users mainly have 640 X 480 pixel screens, then the image-safe area
`will be 595 pixels (width) by 295 pixels (height).
`
`Figure 17.17 shows an example of what can happen if the important information on
`the screen does not fit into the image-safe area. in this case, the message “Forget me
`not!” will be read as “Forget me."
`
`Another approach that is sometimes suggested is to have variants of your site. For
`example, you may have a variant designed to be accessed by users with handheld
`computers or mobile telephones. or a text—only variant aimed at people who prefer
`to avoid the download times associated with graphics or who are using a screen
`reader. Unfortunately. some organizations have failed to maintain their variant
`alongside the main version or put promotions and special offers solely on the
`graphic-laden site, so text—only variants have become somewhat discredited. If you
`do opt for a variant-site policy, then make sure you put as much effort into main
`raining it as the main site — and you may well find that it is less effort to design a
`single site that works flexibly and accessibly.
`
`You should always try your web site out on different browsers and operating systems
`in order to see what it really looks like to your users. A variety ofcommercial services
`will do this for you so that you do not have to maintain dozens of different
`
`See Lynch and
`Horton [1999)
`for more
`information on
`calculating
`image-safe
`areas.
`
`The site
`wwwalistapart.
`com often has
`good articles on
`designing
`flexible layouts.
`
`If you like want
`to maintain
`many different
`browsers,
`then www.
`thesitewizard.
`com/webdesign
`/multlp|ebrowse
`rs.shtml say
`how to do it
`(visited July 5,
`2004).
`
`357
`Part 3
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`

`

`CHAPTER 17
`
`Designing for the web
`
`’3 Visual layout and elements - Microsoft Internet Explorer
`Edit
`View
`Favorites
`Tools
`Heto
`
`E].E]
`?'n
`
`ers don'tscroll‘ v a- Search Wet:
`COL‘glL’ v
`Search if Favorites I!” Media ‘2
`I
`z; 4‘:
`I ,
`9 Back "
`0t] ;!
`{I
`31mm!
`and nou oansfi" -. n: V
`GD
`» Emmott
`lg lWindow [Auto Sol
`. We
`WW...“
`
`Automatic File Name v
`A
`
`a Select a country
`
`Home E Productsasowices l Supportadownloads l My account
`Ease of Use > Design > Web guidelines > Dlslgn >
`
`4- Pievious Next -t
`
`‘
`l Ease of Use
`
`Visual layout and elements
`
`
`
`
`5 Value
`User Engineering
`.
`995'9"
`. Design concepts
`.
`‘
`' Web QUIISEIIHES
`. Admin guidelines
`- OOEIE guidelines
`OVID methodology
`- Exptoraton' Ul design
`- Recommended books
`
`i Journal
`l Downloads
`
`Design within boundaries of an “imagesafe” area
`
`Anticipate your users' screen resolution settings and the size oftheir
`monitors. Use this informationto define a dimension for the"image-
`safe“ area. Allow room for browser elements such as navigation
`buttons and scroll bars. In the illustration to the right, the main title
`"Forget Me Not" does not fit into the image-safe area. This may
`missnform users, because unless theywidentne browserwmdow,
`they will read the message as "Forget Me."
`
`
`
`”3 The National r
`File
`Edit
`View
`
`
`
`_
`_
`_
`Desngn in a style that will appeal to your audience's tastes
`
`Use your audience profile and strateov definition to define a visual style forvour site which they will find
`. Internet
`
`Figure 17.17 Important information outside the image-sate area. (From IBM Ease of Use Web Design Guidelines, taken
`from http://www-3.ibm.com/ibm/easy/eouiextnst/Publish/6OZ on July 6, 2004.)
`
`combinations. These services come and go, but one that was flexibly priced and
`offered free trials in the summer of 2004 was mywbrowsercamcom.
`
`6.4 Using the Screen Area Effectively
`
`How often have you waited for a page to download only to find that it contains mainly
`advertisements. menu bars, and white space? White space can be useful for empha-
`sizing the structure of information, and it is quick to download. However, users are
`interested in the content, so having so little can be frustrating. Ideally the content
`should represent at least 50% of the screen.
`
`As with all aspects of U1. no design is perfect. It is always necessary to make com-
`promises. However, if the user has downloaded the site to access the content, then
`he or she expects to see it, so you need to make it worthwhile.
`
`6.5 Improving the Download Time
`
`Web sites are widely used to disseminate images. animations, sound clips, and video
`clips. Pages also often include lava and other types of code. The inclusion of any of
`
`
`{10mg
`
`Figure 17.18 P
`July 5, 2004.)
`
`358
`F47. 3
`
`
`
`

`

`
` 6. DeSIgn issues for Web Pages
`
`these media will result in a page taking longer to download. Nielsen (2000] recom-
`mends that. to avoid the user’s concentration being interrupted, web pages need to
`download in less than one second. He also recommends 10 seconds as a compro-
`
`mise download time, because this is about as long as a user will wait without getting
`distracted by other thoughts or tasks.
`
`
`
`
`
`
`For modem users, a download time of one second or less rarely happens. but it is a
`realistic target for users who have access from their office, as most offices have much
`faster Internet connections. Thus, the download time of your page depends on the
`users who are accessing it. You should aim to make the download time of your site
`acceptable for your particular users, which may involve making compromises over
`its content. It is interesting to note that many of the most frequently used web sites
`are visually simple and fast to download.
`
`The web site in Figure 17.18 uses white space and small images to convey a strongly
`design-led. artistic impression while keeping the download time short. The one in
`
`
`
` Ettttwmattmtwwxntwaea“Waste - "—" “ " "— ’ “CUB.
`
`7
`File
`Edit
`View
`Favorites
`Tools Heb
`A)
`‘
`‘
`
`GOOgIQ '
`I
`rn Dfrnodernart V & 56rd! Wei
`0 Back '
`‘Ij
`2‘ 9:
`Seach *Favorites 55" Media ‘2
`
`- ” @Snaolt 13Ganewest: a httpdlwww.momat.go.jp!engfish_pageihde> v {Window [AutoScml] _j intimate File Name L
`
`
`
`
`t.
`i H r-
`
`t.
`.N \"I IL'M‘I "\
`
`:-
`"3'.
`t'g
`t"
`I M I,‘ “11' L ‘.‘. O F: M L'\|":F‘ 1-1“.
`
`t’
`
`
`
`
`
`
`
`
`
`
`
`359
`Part 3
`
`
`
`
`
`
`
`
`
`
`
` [AP'ANEsE
`
`
`
`
`
`('UN '[
`
`Ii NT 5
`
`
`
`Int rod union
`
`
`Art h-lliu’um (Main Building)
`
`
`
`
`
`
`Linllm'lion (Au His-015m. CnJhG‘sllrnJ
`
`
`
`lnl'urnuticm
`
`. Hi
`
`“.
`
`u'. --.l E!” III“ it'd-.1 -n \rl Trilv
`
`
`
`
`
`
`
`Figure 17.13 A website With a lWiite space. [From WW.Wmt.gojl
`July 5, 2004.)
`
`. Internet
`,
`,
`.
`
`ishkpage/indeLethl, retrieved on
`
`

`

`CHAPTER 17 | Designing for the web
`
`Figure 17.19 is apparently similar in its design, but it takes much longer to download
`due to the presence of a flash animation and larger images.
`
`When including larger files such as images, flash animations, or sound, you need to
`ask yourself: Is the benefit worth the extra download time? if not, it might be better
`to make them smaller or remove them altogether. It may be that the aesthetic effect
`you want justifies the extra time. Or it may be that the user experience is much better.
`For example. sound will clearly enhance a site that sells CD5. as it will allow poten-
`tial purchasers to listen to clips from the CD they are thinking of buying. However,
`having a continuous backing track to a site that provides information about a local
`tourist destination is unnecessary and irritating. It is often best to make the down-
`load of sound optional. Many users keep the sound switched off; ifyou use sound on
`
`
` QIEI
`"'3 MCA Chicago - Microsoft Internet Explorer
`File
`Edit
`View
`Favorites
`Tools
`Help
`7'))
`
`
`‘2] 6, I Search *Fmrites a‘Modia ‘2-
`It
`I
`GBack '
`'«J '4'
`» fl http:flwww.mcachicaqo.orgf
`v .59
`” @Snaoxt ES
`thowlAuloSctoll] . Automaticfile Name v
`
`
`
`Googlev mafmodern art V QSNrch Wei
`
` -’
`
`Dan Peterman
`
`"
`
`Plastic Economies
`
`
`
`
`
`
`
`Nauru
`
`lnfnrmllion
`
`txhibiticn:
`andtellcslion
`
`Ful‘umulte
`
`Education Calendar Membership
`FII'IIIIII
`IfErenu
`
`Fuilfly MCASlale
`Ilenni
`
`
`
`350
`Part 3
`
`Museum o‘Lonle'npo'ary An:
`
`-
`
`_-2u Last (hug: Avcwu - Ci'acagc. 'I mo 5 bot-II
`
`- 3|; aSu 266v
`
`
`
`
`
`g] httpzflwwwmcadicagmorg!“ —
`0 Internet
`
`Figure 17.19 Similar web site. much longer download time. (From www.mcachicago.org, retrieved on July 5, 2004.)
`
`
`
`

`

`6. Design issues for Web Pages
`
`your site, it is therefore a good idea to flag this visually, so that the user can opt to
`switch on the speakers.
`
`If you need to include media that may take some time to download, it is courteous
`to warn your users, preferably telling them how long the download might take. Your
`visitor can then make an informed decision about whether to select the link.
`
`As web site managers hope to get repeat visitors. it makes sense to ensure that pages
`are built up on the screen so that header and navigation information is displayed
`first. The repeat visitor will then be able to select the required option without needing
`to wait for the graphics to download. This is also helpful for people using screen
`readers, as the text will be read before the images are in place.
`
`6.6
`
`Using Style Sheets
`
`It is important for your site to have a consistent visual appearance. One way of
`achieving this is to use a style sheet. Style sheets also allow you to change the appear—
`ance of the whole site with relative ease. Thus, if you decide that the typeface used
`for titles should be changed, you simply alter the style sheet rather than changing
`every title by hand. A style sheet helps create the visual identity for a site. Style sheets
`are widely used in books, magazines, and newspapers. How do you know if you are
`reading the Washington Post newspaper? Probably because it looks like the Post,
`rather than like USA Today or the Wall Sri'eetjottrnal.
`
`The web site www.csszengarden.com has many designs that all appear different but
`are in fact the same content presented with differing style sheets. In Figure 17.20, we
`have chosen four examples.
`
`A thoughtfully designed implementation of style sheets has great benefit for some
`users, especially people with impaired vision, if the design allows the user to over—
`ride the style sheet with one that is more suitable for their needs. You will undo all
`your careful work in creating your style sheet if you then apply styles directly within
`the HTML markup.
`
`6.7
`
`Designing for Accessibility
`
`The Web can provide tremendous benefits, but only if it can be accessed. Designing
`for accessibility has two parts: working within the appropriate guidelines for accesn
`sibility and ensuring that your design process includes users with disabilities. The
`World Wide Web Consortium’s Web Accessibility Initiative describes how to decide
`whether your web site conforms to their Web Accessibility Content Guidelines at
`www.w3.orngAlteval/Overviewhtml, and a big selection of tools that help you to
`do it is listed at www.w3.org/WAIfER/existingtoolshtml.
`
`Generally, going back over an existing web site to amend it to conform to appropri-
`ate guidelines is a tedious and errorsprone approach. Writing it to conform to the
`guidelines in the first place is much more likely to succeed.
`
`361
`Part 3
`
`
`
`

`

`'3 on zen Garden: The Beauty In CSS Design . Mlcrmnfl Internet Exphrer
`File
`Edit
`View
`Favmites
`Tod; Heb
`
`l
`i
`'
`Seam
`: '.
`l
`Back '
`__1 hm:r.lfwww.tsszmgarden.tomf?tsshie-http V
`
`Fawkes
`'30
`
`‘"Media
`
`1
`
`(
`
`(30-
`
`U
`'v zen arden
`
`V
`
`Seafleel
`
`" Emmott .@ widowiiximécmn VI'AuornaticFileNamo
`
`v
`
`e accomplished
`A demonstration 0! link a
`visuaily through css—hased design.
`
`flue Read. to. Enlightenment,
`Litterino a dark and drear‘r road lay the past relics of browserspeafit tags,
`incompatible DOMs, and broken CSS support.
`Todav. we must clear the mind of east practices. Web enlightenment has been
`achieved thanks to the tireless efforts of folk “(E the W3C, WaSP and the major
`browser creators.
`
`!
`5
`
`The css Zen Garden invrtes you to relax and medrtate on the irnoortant lessons of
`the masters. Begin to see with clarity. Learn to use the (vet to be) time-honored
`techniques In new and rnrigoratlni; fashion. Become one with the web.
`So, what Is, this, :93an
`There IS clearly a need for CSS to be taken seriously by graphic amsts. The Zen
`Garden aims to excite. inspire, and encourage pamczpatlon. To begin. VIEW some of
`the existing designs In the list. Clickan on any one wull load the style sheet into this
`verv page. The code remalns the same. the only thing that has changed is the
`external .css waves. reailv.
`CBS allows complete and total control our the style of a hypertext document. The
`nniv wan this can he. illustrated in a wav that nets nennle excited I: he
`
`Dnnnluad the
`
`sample html fiic
`and (55 file
`
`SBIEC: aria
`FFOTII‘:
`SEW mt
`ta man ithefico
`this page
`Gardenias tie F'er‘rume
`by Amanda Sosa
`Pneuma
`by Adam Polselli
`Birdhouse
`by )ustm Vileia
`Defiance
`bv James Ehlv
`. Internet
`
`“
`
`v $5:an
`bugle» 20.19356“
`Scotch *Favorltes Wm {'1
`I
`2 .1
`x
`g Mn:flwm.sszmqaden.tmficssfie-bttp V
`60
`” mam-9n Q WndmlAuuSerol]
`_'_‘ AmomathiieNarm 1;A
`
`
`
`the beaut of :55 desmem
`
`
`
`
`
`
`2311
`
`garden
`
`Select a Design:
`
`362
`Part 3
`
`run..._.................-_.'
`
`Lil-twins} cl dark and dreary
`r and lay the post relics of
`b I‘Cil‘,‘€fil'-5PCCI f IC +0.95.
`
`0 hurl-ct
`Figure 17.20 Styling with CSS (a) “No Frontiersl" by Michal Mokrzycki; (b) “Snack Bar" by Jay
`Wiggins Style; (From www.csszengarden.com, visited July 6, 2004.)
`
`

`

`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`2'1 can in Garden: The Beauty In (35 Des
`file
`Edit
`View
`Favtlites
`rods Heb
`
`fgn ercrntofl lntarnet Explorer
`
`
`
`Favorites
`Search
`2‘
`dflack .
`.I)Me-dia G
`(J
`xi
`‘ =mgardan
`v $522.3:th
`Ems-wit
`E: httpJ.I’vanvmsszengudmxfimf’csfile‘fli2‘ V Q] Go
`
`
`:3 Miami, 555?] "y ‘Afimaircilieriariem-H
`
`n
`
`A nrmnnlm (H mm
`in: n urn-0mm-
`um lam. Mun Am
`mum r 1mm Cks‘
`‘I“ l ““11 I“! "ll lfll'
`
`m I uun mm mm um.
`
`The Road to Enlightenment
`Littering a dn k
`-
`'
`"1. PIS! '1'.
`, incompatible DOMS,
`support.
`
`Today, We must c
`practic
`
`to the tireless
`nfforts of folk lika the W3C, WiSP and
`tilt major browser creators.
`
`,
`Sefect a DeSIgn
`
`lvARHEmASDEl-‘ERIUME
`int-hm m
`
`'
`
`‘
`
`.
`
`qn invites you to relax
`._
`_
`ortant lessons
`
`f
`
`[1
`
`_
`.
`..,
`y. Learn to use the
`timp-honorod tachni us in n
`n
`'invugoratln. fashion.
`ec-omo on.
`
`a as: Zen Garden: The Beauly in CSS Dulgn 7 Minimal! lnlarnal Explorer
`File
`Edit
`Vaew
`Favorites
`Tools Heh
`
`.IJ‘rdedia
`
`{-3
`
`V 6‘chth
`' gangs-tan
`3]
`C.
`” 015ml! m @anvTfiwo 5cm}: "1| :Xii'engi'c' HEM»; :j
`
`n
`
`
`
`
`the W3C, WaSP
`
`J Exk ‘
`
`,_:.
`
`Favorites
`Search
`.
`E: Hmrlwmiuszengardmimmune-020‘ V it] Go
`
`l dill" 1
`s .ue-V [mm The
`r~ bad H mm 1hr?
`
`:1”;
`H”
`
`
`paga.
`
`/
`i
`‘I
`I
`
`ittering a dark and dreary road lay the past relicsofbrowser-specific
`tags, incomparibleDOMs, and broken CSS'supp-ort.
`oday, We must ciear the mind ofpasz practices. Web en!
`been achieved thanks to the tireless efforts of folk like
`and the major browner creators.
`
`ightenmem has
`
`3G3
`Pari 3
`
`
`
`
`9 Immet
`
`
`
`Figure 17.20—ic} “TechnOhm” by Josh Ambrutis (d) "Friendly Beaches" by Sophie G. (From
`wwwcsszengardencom, visited July 6, 2004.)
`
`
`

`

`CHAPTER 17 | Designing for the web
`
`EXERCISE 17.7 (Allow 15 minutes)
`
`Draw the complete home page for the Lovely Rooms Hotel booking service based
`on the decisions you have made in response to the previous exercises. Justify
`your design in terms of the following points:
`
`0 The HOME—RUN principles.
`0 Scrolling.
`0 The use of white space.
`- The download time.
`
`- The page layout, the use of color, sound, images, animation, and video (some
`of these may not be used].
`
`DISCUSSION
`
`There is a variety of possible designs; ours is illustrated in Figure 17.21.Your
`design is probably quite different, but this is acceptable so long as you can justify
`your design according to the guidelines and principles we have explained.
`
`
`Lately Roms iurbzi booking SEWiCE, speefaiisis For
`
`
`Top Promotions
`b _
`
`a
`
`
`
`
`Filming I'DDIULS [itemail, Prim-Eli, owned iw'iele irLi-iua Eaei-oiEngland
`L’OVEIH
`
`
`Know. tinder
`R0
`
`
`
`Trad ii-Ioml
`
`w
`
` iota-how.
`number oi people
`
`minim Price
`
`
`
`
`
`364
`Part 3
`
`one til-In
`
`Figure 17.21 Home page for the Lovely Rooms web site.
`
`
`
`
`
`
`
`a near +m
`
`a
`aitraciionfi
`a “swig a-l-i-raci—icvt
`0 near si-aiiovt -fi
`0 near airpm‘i- “a
`o Ham per-i
`ori- a
`o 5ng lOCCL‘i'iDl'L iit+ie
`
`Ea5+ 0? England
`
`
`
`
`
`
`
`
`See Chapti
`for more
`information
`writing legil
`text.
`
`

`

`6. Design issues for Web Pages
`
`
`
`The background color is white, with black text, which provides maximum con-
`trast. The links are dark blue and underlined. The top promotions are grouped
`down the left-hand side, and there is a link to browse other promotions not
`visible. There is a short description of the site’s purpose, and the words "Room
`Finder" are in dark blue and in a larger typeface to clearly indicate the purpose
`of the site. The navigation aid containing the arrival and departure dates is light
`blue to make it stand out. A map has been included near the "location” area to
`show where East of England is.
`
`The home page contains all the usual elements of a home page: the company
`logo (“Lovely Rooms”)
`in a loopy, swirly font
`in the top-left corner. The
`company’s tagline, (“Traditional Small Hotels"], is under the logo. The name of
`the site ("Room Finder”) is across the top. All ofthese. with a short description
`of the site's purpose, establish the identity of the site.
`
`The ”Top Promotions” section is regularly updated Each promotion is described
`
`as succinctlyaspossibleinthreelinesorless. Thedescriptioncontainskeyinfor-
`
`mation, such as the location. As the space is limited for the available promotions,
`there is a link that will allow visitors to browse them all.
`
`Sound, video, and animation have not been included as they would increase the
`download time without adding significant value to the site.White space emphasizes
`the structure of the information by separating the different sections of the page.
`The compact nature of the screen should mean that scrolling is unnecessary on
`most screens. To check this, it would be neceSsary to ensure that the whole
`screen is within the image~safe area.
`
`This web site represents an appropriate use of the online medium as it provides
`rapid and up-to—date access to rooms in a specific area, in a way that would be
`difficult to achieve using conventional approaches.
`
`l
`
`
`
`
`
`
`
`
`
`
`l
`
`
`
`
`
`
`
`
`
`
`
`
`
`
`Keep text to a minimum. You should probably include only about 50% of the
`
`text you would include in print form.
`
`
`Writing the Content of Web Pages
`Even ugly, hard—to-navigate web sites may still be successful if they have good enough
`content. When you go to see an action film, you may enjoy the explosions and other
`special effects but, if there is no plot, it soon gets boring. The same applies to web
`sites: even though they may look impressive, if there is no content of interest to the
`users, then they will not revisit the site.
`
`It is common for web sites to contain a lot of text. This is partly because text is easy
`to handle and partly because English-speaking countries tend to be text-based soci-
`eties. Good writing is good writing irrespective of the medium, but frequently we find
`that moving text to the Web brings its deficiencies into sharp focus.
`The followi