NlOR('}.'\;'\' KAUFMANN SERIES IN INTI.-I|{A(I'l'lVl-‘. 'I'F.(IIlN()L(}(iIlflS
`
`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 Cruinp
`Mona Buehler
`Asma Stephan
`Daniel Stone
`Shawn Girsberger
`© 2005 Artist Rights Society (ARS), New
`Yorl<fADAGP, Paris. Courtesy of Superstock,
`inc.
`
`SNP Best—Set Typesetter l_td., Hong 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
`COI'ltElCI 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) 1865 853333. email: permissi'ons@elsev.iexcom.
`iik. You may also complete your request online via the Elsevier liomepage (J1irp://elseuierwom]
`by selecting “Customer Support” and then “Obtaining Permissions."
`
`Library of Congress Control Number:
`
`Library of Congress Cataloging-in—PublicaIion Data
`. [et al.].
`.
`User interface design and evaluation I Debbie Stone .
`p. cm. — [Morgan Kaufmann series in interactive technologies)
`ISBN 0-12—088436»4
`1. User interfaces [Computer systems)
`
`I. Stone. Deborah L. H. Series.
`
`[QAT/‘8.9. U83U835 2005]
`005.4'37—dC22
`
`ISBN: 0-12-088436-4
`
`2004061900
`
`For information on all Morgan Kaufmann publications, visit our website at wwtU.mkp.c0m.
`Printed in the United States of America
`0506070809
`54321
`
`

`
`

`
`

`
`6. Design Issues for use 3
`
`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.
`0 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.
`
`-I 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 GU15. 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 illustrates 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.com/alertboxi'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 Nall (2003) noted:
`
`Guideline: Make pa.ge—i‘.erigth decisions that support the primary use of the Web
`page
`
`

`
`CHAPTER 17 I Designing for the web
`
`COI’*rd%@mClKmg.O. go“ it
`mi]
`_
`,.
`-,_
`.V
`T,
`_»'u=-
`.m»:'r«.~t : " -_»:=‘_r.‘~3’rr,'
`rt?‘
`f_’3.«‘~"_ir.‘- M re‘! 4
`i'.‘xFI;?.«'.r,:'.~"
`Piease lake a moment tn visit our sponsors and recommended
`suppliers and bookmark them all to look at later! Ali links open in
`a new window so you can continue to browse here!
`
`t.l"‘.I0:|U mm
`__ _SIARIER ms!
`
`i
`
`'
`
`I
`
`..,::*-'m'.:.;.
`""!'_'!"!,‘,"-'
`‘
`____..
`conc:riemar<rrrg.org.ur<
`_
`'i‘r'w. lr\t_flrr\!€t.
`"’i #3:’-go:-.rr~': «sr 72:,-r..ri-‘».rr._«::,-,'r_.
`r-‘,:ri»J'-«,=r.crL«:.
`‘ me‘
`crrrrwrri-r im:I—vr,-oin; A Law If!_
`.'»a r.r-
`-
`5
`‘_'
`,_:-5 ‘am at l‘-tllr: “‘i"I1|z'i-7.",
`-
`‘:2 ..;
`-“L.
`,...u.¢.._,.-..
`horn Em nu Exnrmlf-iwiu‘ r.-1.1. r—,
`.rr
`,
`'iiI-
`
`_‘n:‘o—n.m.n
`. Z.
`cr-
`. ‘
`
`1
`
`,‘\
`
`w
`
`- ~
`-
`‘
`nl¢.3"ImI.?iI]
`.m I..
`
`0
`
`Figure 17.16 A home page that needs scrolling. (From www.candIemaking.org.uk, retrieved on
`July 6, 2004.)
`
`;I
`
`See 0 am
`tormore
`informatio
`‘
`‘
`
`See Lynch
`Horton (19
`for more
`information
`Caiculating
`image-safe
`areas.
`
`to maintain
`many differe
`browsers,
`then www.
`thesitewizard
`com/webdesi
`/muitiplebrow
`rs.shtm| say
`
`

`
`

`
`CHAPTER 17
`
`Designing for the web
`
`’§ Visual layout and elements - Microsoft Internet Explorer
`tools
`Heto
`
`T’1)
`
`I‘
`
`'_
`
`Search iffiavontes 9:‘ Media 0
`
`COL‘glC' ersdon'tscro|t' V ®SoarchWel:
`
`3.i:tm.£
`
`-
`
`eras nouexhrlsf 9 GD
`
`” EWSDBOR
`
`lg ‘lWinclow[AutoScioll] L] Autornaticl-'tieName V
`A
`
`— 5-mi-
`l Suppcn-t9¢downIoad5 i My account
`Home 5 Productsfi-services
`Ease of Use > Design > Web guidelines > Duign >
`
`4- Pleuious Mud ->
`
`Visual layout and elements
`
`Design within boundaries of an "imagesafe" area
`
`Anticipate your users‘ screen resolution settings and the size oflheir
`monitors, Use this information to define a dimension for lhe"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
`rrtissnform users, because unless theywidenltre browserwinclow,
`they will read the message as "Forget Me."
`
`Design in a style that will appeal to your audiem:e'stas1es
`
`. gesign wncems
`_
`_
`' Web GU"39""99
`. Admin guidelines
`- OOBE guidelines
`OVID methodology
`- Exptoratoiy Ul design
`- Recommended books
`Journal
`5 DOWHIDBEIS
`r
`_
`Services
`
`i Conference
`Done
`
`Use your audience orolile and strateciv definition to define a visual slvle forvour site which they will find
`. Internet
`
`Figure 17.17 Important information outside the imagesate area. (From IBM Ease of Use Web Design Guidelines, taken
`from http://www-3.ibm.comflbm/easy/eouiextnst/Publish/602 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 www.browsercam.com.
`
`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.
`
`Improving the Download Time
`
`'3 The National t.
`
`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
`
`Figure 17.18 '
`July 5, 2004.)
`
`

`
`

`
`CHAPTER 17 I 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
`
`"3 MCA Chicago - Microsoft Internet Explorer
`View
`Favorites
`Tools
`Help
`‘
`
`$3)3
`
`iii
`
`‘fly “, I Search *Favorites Q3"Modia
`
`C0031?‘ mafmodernart V
`
`asearchwel
`
`mm
`
`sfl http:n'www.mcachicaqo.urg,t
`
`v .69
`
`e
`
`” censnaoxt ES
`
`l\o\findow[ALRo5cIo||] - Aulomalicfile Name v
`
`Dan Peterman
`
`Plastic Economies
`
`Hum Infnrn-union
`
`Elhnbiilonl
`andcelleuion
`
`Pu!‘u-mange Efluuuon Calendar Munhu-ship
`Fupanu cftrenu
`
`Facility Mckslaic
`ileum
`
`Vuseuni oi(.or.te-npo'ary A-:
`
`-
`
`:2!) L35‘. Llmagc Aw.-n,:«_-
`
`. CI-acagc, -ll,-.95 -3:15..
`
`. 3.; gag gfifig
`
`Q httpzffwwwlmcultrV’”ago.oIg,f“ _-
`
`E D Internet
`
`Figure 17.19 Similar web site, much longer download time. (From www.mcachicago.org, retrieved on July 5, 2004.)
`
`

`
`

`
`§ on len Garden: The Beauty In CS8 Design A Mlcrnnnfl Internet Exphrer
`Edit
`lrew Favmites
`File
`Tod;
`r-en:
`
`':
`Gem -
`I
`Seaith
`5';-‘ my:Jfwww.tsszengarde:n.r.omJ'?:ssluie-http V
`
`Favotltes ‘I: Medal (3
`Go
`” @5069“ Q’ Wifi [AluluSc;]— T':§:Ai.ion1aticF-I-lo-l-‘J-sine L
`
`Cu‘ 231$’ V zen garden
`
`V
`
`EJIEIE
`2
`& Searrh Wei
`
`eee°eeaa‘f*g;eeeem
`
`2 accomplished
`A Ilemunstrauun at what
`visually through css-based design.
`
`7“? 34234. C‘! Efl.liB]|‘.9|1|fl.!E!‘|t
`Litterinq a dark and dreary road lay the past relics of bl’DW5EP'5DEC1fl|.‘ tags,
`lf'll:Dn1D3tlblE DOMS, and broken CS5 support‘
`Toclavr we must clear the mind of east practices. web enlightenment has been
`achieved thanks to the tireless efforts of folk like the W3C, waSP and the major
`browser creators.
`The C525 Zen Garden invites you to relax and riiedrtate on the arnsortant lessons of
`the masters. Begin to see with clarity. Learn to use the (vet to be) time-honored
`techniques in new and inrigaraunq fashion. Become one with the web.
`So, what Is. this; a_I_=.o.t_I.t?-
`There IS clearly a need for CSS to be taken seriously by graphic artists‘ The Zen
`Garden aims to excite inspire, ant: encourage participation. To begin. VIEW some of
`the existing designs in the list. Clltkanq on any one WI" load the style sheet into this
`Verv page. The code remains the same, the only thing that has changed Is the
`external .css fsIe.Yes. really‘
`CS5 ailows complete and total control ovr the style of a hypertext decument. The
`nniv wan rhi< ran her. il|IJ<l'r=Ifl=.I1In a wav that net: nsinnle excited I: he
`
`Dnnnluad the
`sample html fiic
`and us file
`
`select EIi"I‘:l
`so-_--sue shine:
`i=r=om the list:
`tCJ Dad .1; net:
`ti-HS page
`Gardenias de F‘er+L:ma
`by Arrrlandci Sosa
`Fneurna
`by Adam Pcilselli
`Birdhouse
`by }u5tm Vllela
`Defiance
`bv James Ehlv
`. Internet
`
`at
`
`2
`
`Seach ‘*Fam:a P:*Media (1
`I
`':
`” @3“'l9“ Q Wndciw|Aulu5crofl _'_' ALlD|'lr1r&iVC»F18N-3T|‘3B
`E PI:tn:flmMNrL€szenqa'da-..(uni'?:ssfie-http v
`60
`
`($0: :1]? 4'
`
`zen gadg-1
`
`zen garden
`
`....-.u._...._...............-_.'
`
`I_:Hu“:'iI1g cl dark and d7'('G|’).'
`i-and lop flu: pnsi relics of
`bi‘t-\-.Isr:l'-spc::\‘>c toga
`
`0 Internet
`
`2.100%
`
`Figure 17.20 Styling with CS8
`la) “No Frontlersl" by Michal Mokrzycki; (bl “Snack Bar" by Jay
`Wiggins Style; (From www.csszengarden.com, visited July 6, 2004.)
`
`

`
`

`
`CHAPTER 17 | Designing for the web
`
`EXERCISE 17.7 (Allow 15 minutes)
`
`Draw the complete home page for tl1e 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.
`
`KO
`
`Trad them!
`SMIAH i-loi-els
`
`To; P{DllDilDimS
`
`E
`
`r~
`
`Lovely Remus i<o+ti booking 5-enice, 5pEC.iELii5i‘S ior
`
`Finding FDDII.-L5 insmall, priircci-eig owned ltoirels ii‘LHtf. Ea5+oiElrgiarid
`Know. iiiuler
`
`__
`
`__
`
`V
`
`I
`
`u
`
`_
`
`number at people
`maximum price
`loccchovt
`9 near +owvL
`o Marla: 0.'H‘r0.C‘HC?L
`0 near si-aiiovi
`
`0 near ai'r{:.9:r'i-
`0 Hear porn‘
`0 mg locmhoh ii'L‘i'lt£
`Ea.5+ 0? England
`
`Elr-ID Dnfl
`
`Figure 17.21 Home page for the Lovely Rooms web site.