Site-seeing : a visual approach to Web usability

193 Pages·2002·36.136 MB·English

by  Luke Wroblewski

Table of Contents

Site-Seeing—A Visual Approach To Web Usability......................................................................1

Preface: Looking At Web Usability................................................................................................4
How to Use this Book............................................................................................................4
The Examples in this Book.....................................................................................................5
Acknowledgements................................................................................................................5

Part I: Think Before You Communicate: The Planning Stages....................................................7

Chapter 1: What Do You Want To Say? Deciding On Content....................................................8
Know What To Say................................................................................................................9
Understand Your Audience..................................................................................................12
What they are looking for.....................................................................................................13
Determining Content............................................................................................................16
Writing It All Down.............................................................................................................17

Chapter 2: You Need A Plan: Preparing For Content.................................................................19
Organizing Your Site...........................................................................................................19
Navigating Your Content.....................................................................................................28
Finding Your Personality.....................................................................................................36
Remembering Your Limitations...........................................................................................39
Scheduling Your Progress....................................................................................................42

Part II: How To Communicate: The Three "Lexicons" Of Web Usability.................................44

Chapter 3: Technically, It's a Lexicon: Technical Considerations..............................................45
Getting Technical.................................................................................................................45
Responding Promptly...........................................................................................................46
Unifying the Web.................................................................................................................49
Following Links...................................................................................................................56
Assembling the Page............................................................................................................66
Being Accessible..................................................................................................................69

Chapter 4: Birds of a Feather Flock Together: Visual Organization Principles.........................71
Speaking Visually................................................................................................................71
Seeing Information...............................................................................................................72
Building a Hierarchy............................................................................................................76
Educating your audience......................................................................................................80

Chapter 5: Who Are You? Get a Personality...............................................................................93
What is Personality?.............................................................................................................93
Why Have a Personality?.....................................................................................................96
How to Get a Personality....................................................................................................101
Part III: Start Communicating: Online, That Is........................................................................118

Chapter 6: Fundamental Particles: The Elements Of Web.......................................................119
Working the Elements........................................................................................................119
Navigation Systems ...........................................................................................................122
Body Text..........................................................................................................................127
Images...............................................................................................................................135
Page Footers......................................................................................................................139
Forms................................................................................................................................143

Chapter 7: Home Is A Cluttered Place, Indeed!........................................................................149
What Belongs at Home?.....................................................................................................149
First Impressions................................................................................................................159
What's Inside?....................................................................................................................161
New Additions...................................................................................................................167

Chapter 8: Beyond the Static Web: Dynamic Content & Web Applications............................171
A Web in Need..................................................................................................................171
Dynamic Designs...............................................................................................................174
Generation PLEX...............................................................................................................179

Conclusion: What's Next............................................................................................................185
Okay, but what is next for the Web?...................................................................................185
What's next for Luke?........................................................................................................187

Bibliography: Further Readings.................................................................................................188
Color Theory.....................................................................................................................188
Experience Design.............................................................................................................188
Information Architecture....................................................................................................188
Information Design............................................................................................................188
Interface Design.................................................................................................................188
Navigation.........................................................................................................................189
Psychology & Human Factors............................................................................................189
Typography.......................................................................................................................189
Web Applications ..............................................................................................................190
Web Programming.............................................................................................................190
Web Design.......................................................................................................................190
World Wide Web History...................................................................................................190
Web Usability....................................................................................................................190
Site-Seeing - A Visual Approach To Web Usability
Site-Seeing—A Visual Approach To Web
Usability
Luke Wroblewski
With contributions by Nan Goggin and Jennifer Gunji
Copyright © 2002 Hungry Minds, Inc.
All rights reserved. No part of this book, including interior design, cover design, and icons, may be
reproduced or transmitted in any form, by any means (electronic, photocopying, recording, or otherwise)
without the prior written permission of the publisher.
Published by Hungry Minds, Inc.
909 Third Avenue
New York, NY 10022
Library of Congress Control Number: 2002103280
ISBN: 0-7645-3674-5
Credits
Outline Contributors: Nan Goggin & Jennifer Gunji
Book Design: Jennifer Gunji
Book Layout: Jennifer "The Goonj" Gunji, Ryan "Raza" Ruel, & Jeff "Wiggy" Wegesin
Permissions: Luke Wroblewski
Editor: Kelly Ewing
Technical Editor: Kyle D. Bowen
Acquisitions Editor: Tom Heine
Editorial Manager: Rev Mengle
Indexer: Johnna Van Hoose
Cover Design: Anthony Bunyan
Cover Photo: ©Alexander Walter/Getty Images
Senior Vice President, Technical Publishing: Richard Swadley
Vice President and Publisher: Barry Pruett
Production Coordinator: Nancee Reeves
Publisher: Wiley
Production: 1K/RS/QW/QS/IN
Distributed in the United States by Hungry Minds, Inc.
Distributed by CDG Books Canada Inc. for Canada; by Transworld Publishers Limited in the United
Kingdom; by IDG Norge Books for Norway; by IDG Sweden Books for Sweden; by IDG Books
Australia Publishing Corporation Pty. Ltd. for Australia and New Zealand; by TransQuest Publishers Pte
Ltd. for Singapore, Malaysia, Thailand, Indonesia, and Hong Kong; by Gotop Information Inc. for
Taiwan; by ICG Muse, Inc. for Japan; by Intersoft for South Africa; by Eyrolles for France; by
International Thomson Publishing for Germany, Austria, and Switzerland; by Distribuidora Cuspide for
Argentina; by LR International for Brazil; by Galileo Libros for Chile; by Ediciones
1
Site-Seeing - A Visual Approach To Web Usability
ZETA S.C.R. Ltda. for Peru; by WS Computer Publishing Corporation, Inc., for the Philippines; by
Contemporanea de Ediciones for Venezuela; by Express Computer Distributors for the Caribbean and
West Indies; by Micronesia Media Distributor, Inc. for Micronesia; by Chips Computadoras S.A. de C.V.
for Mexico; by Editorial Norma de Panama S.A. for Panama; by American Bookshops for Finland.
For general information on Hungry Minds' products and services, please contact our Customer Care
department within the U.S. at 800-762-2974, outside the U.S. at 317-572-3993 or fax [phone].
For sales inquiries and reseller information, including discounts, premium and bulk quantity sales, and
foreign-language translations, please contact our Customer Care department at 800-434-3422, fax 317-
572-4002 or write to Hungry Minds, Inc., Attn: Customer Care Department, 10475 Crosspoint Boulevard,
Indianapolis, IN 46256.
For information on licensing foreign or domestic rights, please contact our Sub-Rights Customer Care
department at 212-884-5000.
For information on using Hungry Minds' products and services in the classroom or for ordering
examination copies, please contact our Educational Sales department at 800-434-2086 or fax 317-572-
4005.
For press review copies, author interviews, or other publicity information, please contact our Public
Relations department at 317-572-3168 or fax [phone].
For authorization to photocopy items for corporate, personal, or educational use, please contact Copyright
Clearance Center, 222 Rosewood Drive, Danvers, MA 01923, or fax [phone].
LIMIT OF LIABILITY/DISCLAIMER OF WARRANTY: THE PUBLISHER AND AUTHOR HAVE
USED THEIR BEST EFFORTS IN PREPARING THIS BOOK. THE PUBLISHER AND AUTHOR
MAKE NO REPRESENTATIONS OR WARRANTIES WITH RESPECT TO THE ACCURACY OR
COMPLETENESS OF THE CONTENTS OF THIS BOOK AND SPECIFICALLY DISCLAIM ANY
IMPLIED WARRANTIES OF MERCHANTABILITY OR FITNESS FOR A PARTICULAR
PURPOSE. THERE ARE NO WARRANTIES WHICH EXTEND BEYOND THE DESCRIPTIONS
CONTAINED IN THIS PARAGRAPH. NO WARRANTY MAY BE CREATED OR EXTENDED BY
SALES REPRESENTATIVES OR WRITTEN SALES MATERIALS. THE ACCURACY AND
COMPLETENESS OF THE INFORMATION PROVIDED HEREIN AND THE OPINIONS STATED
HEREIN ARE NOT GUARANTEED OR WARRANTED TO PRODUCE ANY PARTICULAR
RESULTS, AND THE ADVICE AND STRATEGIES CONTAINED HEREIN MAY NOT BE
SUITABLE FOR EVERY INDIVIDUAL. NEITHER THE PUBLISHER NOR AUTHOR SHALL BE
LIABLE FOR ANY LOSS OF PROFIT OR ANY OTHER COMMERCIAL DAMAGES, INCLUDING
BUT NOT LIMITED TO SPECIAL, INCIDENTAL, CONSEQUENTIAL, OR OTHER DAMAGES.
Trademarks: Hungry Minds and the Hungry Minds logo are trademarks or registered trademarks of
Hungry Minds, Inc. All other trademarks are the property of their respective owners. Hungry Minds, Inc.,
is not associated with any product or vendor mentioned in this book.
2
Site-Seeing - A Visual Approach To Web Usability
Author Bio
Luke Wroblewski currently heads the interface and new media design efforts at the National Center for
Supercomputing Applications (NCSA), birthplace of the first readily available graphical Web browser,
NCSA Mosaic. At NCSA, he has designed interface solutions for Hewlett-Packard, IBM, and Kellogg's,
codeveloped the Open Portal Interface Environment (OPIE), and worked on numerous other Web
interface design projects.
Luke is also the founder and creative director of LukeW Interface Designs (www.lukew.com) and has
taught Sequential Design in Web Technologies and New Media courses at the University of Illinois.
Luke's research on Web-based application interface designs has been published and presented at national
and international conferences.
As an interface designer, Luke studies the theory that explains how people communicate, comprehend,
collaborate, and create. His aim is to unify visual communication principles with disciplines that have
traditionally not given visual design sufficient emphasis. Luke's work underscores a mutual understanding
of visual and functional principles that stems from his interdisciplinary education: graphic design, human
factors, and computer science.
3
Site-Seeing - A Visual Approach To Web Usability
Preface: Looking At Web Usability
Although Web usability is receiving lots of attention (possibly even more following the recent dot-com
downturn), the focus remains mostly on "technical" guidelines. Web usability experts stress the
disadvantages of frames and too many images on Web pages. They recommend cutting down on
unnecessary words and writing in the nonlinear style of the Web (all valuable advice, of course). But less
frequently do they highlight the importance of the visual presentation aspects of Web pages.
The Web is a communication medium that does most of its talking visually. What you see on a Web page
tells you what you might find within the site, how to get to it, why it might interest you, and more - not to
mention the instinctive emotional response (to the visual presentation) that shapes your Web experience
from start to finish.
As a result, Web usability issues are communication issues, and easy-to-use sites are sites that
communicate effectively (and quickly) with their audience.
In an effort to make you a better Web communicator, I have attempted to write a book that provides you
with design considerations from each of the three areas that contribute to a superior Web user experience:
technical (how the site is built), structural (how it is organized), and visual (how it appears to your
audience). However, the focus is on the visual, which communicates quickly, intuitively, and
convincingly. The visual presentation of a Web site does much more than make a Web site "pretty." It
organizes information in a manner indicative of its function, it engages and directs your audience, it
creates distinct and appropriate personalities, it provides emotional impact and attachment, and more (see
Introduction).
How to Use this Book
Note that I purposefully use the words "design considerations" throughout this book. Though you might
have been led to believe otherwise, there are few "rules" in Web design. Each site's unique goals and
audience set the guidelines to which you should adhere (see Chapter 1).
The design considerations presented here are just that: points and possible solutions to consider when
deciding what's best for your site design. You don't have to adhere to every consideration I present in
every site you design. In fact, I recommend you don't.
Instead, I hope by learning about each consideration and why it is important in Web design, you become
versed in the unique language of the Web. When it comes time to communicate to your audience, you can
make use of your new vocabulary to craft eloquent and informative narratives that engage and educate. In
other words, the knowledge of Web design considerations presented in this book should empower you to
create original yet appropriate solutions.
That said, I would like to emphasize that any one person's views on what makes a Web site successful are
naturally biased. After all, we all have our own likes and dislikes (even online). But we are not designing
sites for ourselves (well, sometimes we are), but rather for our end users. Therefore, you need to make use
of user testing throughout the Web design process. Repeatedly test your Web solutions on your target
audience (or simply on outsiders) to confirm that you are making the right design decisions.
These tests don't have to be (and shouldn't be) long or expensive. Even a few quick questions here and
there is often enough to discover problematic areas. Trust me, you will often be surprised by the issues
these tests uncover, and the payoff will be evident rather quickly.
4
Site-Seeing - A Visual Approach To Web Usability
This methodology is not unique to Web design. Automobile manufacturers, mapmakers, book designers,
and just about everyone involved in a design-oriented process follow a similar progression. For example,
automobile designers need to make sure that the cars they design are usable (they meet the constraints of
the road system and skills of users), comfortable (adequate room, for example), and have enough
personality to distinguish them from the throngs of other cars available elsewhere.
As a result, they have lots of design considerations that need to be adequately addressed in whatever
solution they decide upon. How can I make this car's silhouette feel faster? Is this odometer readable at
night? Being aware of these considerations does not limit their ability to design cars. Rather, it empowers
them to come up with unique solutions, which are then tested and tested again to ensure that they are
effective and appropriate.
It's exactly this process that I prescribe to you for designing Web pages.
The Examples in this Book
The Web sites you will find featured in these pages are gathered from all walks of Web life: from mega-
corporation home pages to individual designer's personal projects, from educational resources to pure
entertainment sites. This diversity is intentional and hopefully makes it clear that each site ultimately calls
for a unique solution (and applications of the design considerations outlined in this book).
Although the majority of the examples within these pages are of sites beyond my control, I have also
included several that I have designed and developed. (Thanks to everyone that participated in and made
these projects happen.) In most cases, I chose these examples because I was very familiar with the goals,
process, and audience of the project. Therefore, I felt better qualified to justify the design decisions that
were made.
I don't claim that these (nor any other examples) in this book are flawless. All have room for
improvement . However, they do serve to illustrate certain points within this book. After all, a book
focusing on visual communication techniques needs lots of visual examples, right?
Acknowledgements
Thanking everyone involved in this project is bound to be an imperfect process. If I forget to mention
anyone, please feel free to torment me for it.
First and foremost, I wish to thank Nan Goggin and Jennifer Gunji for their inspiration, insight, and time.
The original content and ideas for this book are largely a result of our collaborative efforts and the
contributions of Joseph Squier and Robb Springfield. I would like to especially thank Nan for bringing
the project to Jennifer and me in the first place and shaping the direction this book would ultimately take.
Her experience as an artist, designer, and design educator was invaluable to me when determining the
focus of this book, and her assistance throughout my graduate education not only shaped my views on
design, but also my growth as an individual. Thanks again, Nan.
My sincere thanks and admiration also go to the design team of this book led by Jennifer Gunji who was
greatly helped by Nan Goggin, Ryan Ruel, and Jeff Wegesin. Her layouts and ideas breathe life into this
book and fill it with a unique energy that is both exciting and elegant. I have nothing but the highest
regard for her design skills and am honored that she was willing to participate on this project (which
wasn't always fun and games).
5
Site-Seeing - A Visual Approach To Web Usability
I would also like to acknowledge all of the designers, usability experts, writers, and researchers from all
disciplines that influenced my ideas and approach to Web design. In particular, the faculty at the
University of Illinois at Urbana-Champaign: Esa Rantanen (Human Factors), Michael Twidale (Library
and Information Sciences), Andreas Veneris and David Padua (Computer Science), and Robb Springfield
and Joseph Squier (Art & Design). Special thanks go to Colleen Bushell (Graphic Design) for her
guidance and assistance all the way from my undergraduate education to the present. Also, thanks to
Donald Norman, Jakob Nielsen, Bruce Tognazzini, and Edward Tufte, whose talks and ideas often
informed and provided lots of great examples.
Finally, sincere thanks to John Melchi and the rest of the staff at the National Center for Supercomputing
Applications (NCSA) for dealing with my sometimes irregular hours as I wrote this book., as well as the
original team that developed NCSA Mosaic (the world's first widely distributed graphical Web browser),
which let the world finally "see" the Web. Thanks also to Tom Heine and Kelly Ewing at Wiley & Sons
for their continual support and assistance throughout this project and Vernon Area Public Library in
Lincolnshire, IL, and Grainger Engineering Library in Champaign, IL, for providing me with quiet places
where I could stare at the laptop screen. And last but most certainly not least, to my family and friends
who not only put up with my continual absences and frustrations, but provided encouragement at all
times.
Thanks and Enjoy,
Luke Wroblewski, April 2002
6
Site-Seeing - A Visual Approach To Web Usability
Part I: Think Before You Communicate:
The Planning Stages

Introduction: Learning to Speak Web
Chapter 1: What Do You Want To Say? Deciding On Content
Chapter 2: You Need A Plan: Preparing For Content

The Web is a means to communicate, and whenever you're communicating, you need to know what
you're saying, to whom, and how. Answering these questions up front will provide you with a roadmap to
follow throughout the Web design process. If you make a wrong turn, you can always check your map
and get back on course.
7