Lynch - Web style guide, 4th edition.

Web Style Guide

4th edition

Foundations of User Experience Design

4th edition

Patrick J. Lynch

Sarah Horton

Foreword by Ethan Marcotte

First edition 1999. Fourth edition 2016. Earlier editions were published as Web Style Guide: Basic Design Principles for Creating Web Sites.

Copyright 1999, 2001, 2008, 2016 by Yale University.

All rights reserved.

This book may not be reproduced, in whole or in part, including illustrations, in any form (beyond that copying permitted by Sections 107 and 108 of the U.S. Copyright Law and except by reviewers for the public press), without written permission from the publishers.

Yale University Press books may be purchased in quantity for educational, business, or promotional use. For information, please e-mail (U.K. office).

Interior designed by Sarah Horton.

Illustrations by Patrick J. Lynch.

Set in Goudy and Myriad type by Sarah Horton.

Printed in China by World Print.

Library of Congress Control Number: 2015952373

ISBN 978-0-300-21165-8 (paper : alk. paper)

A catalogue record for this book is available from the British Library.

This paper meets the requirements of ANSI/NISO Z39.48-1992 (Permanence of Paper).

10 9 8 7 6 5 4 3 2 1

For Susan, Alex, Devorah, and Tyler

PL

For my son (sun), Nico

SH

M y favorite high school English teacher had this little ritual: in the early days of autumn, at the start of each of his classes, hed lean against the chalkboard at the front of the room, his chalk-covered hands stuffed in his pockets. And as he stood there, hed start telling a story about the syllabus before usthe authors whose works wed be reading throughout the year, the themes wed explore, the discussions wed have.

Toward the end of the introduction, hed remind us that while wed be spending an entire year together, one class wasnt quite enough time to explore a topic fully. Instead, hed say, this course is like a tour through a foreign country. Well spend the next few months exploring this new territory, and discussing some wonderful books together. Like all tours, however, well only have a little time togetherbut if Ive done my job right, Ill have shown you just enough sights so that when youre ready, youll come back. And youll have seen enough landmarks so that you can find your own way, and perhaps explore a bit further.

Now Ill tell you a little secret: this isnt a book youre reading. Its a map.

The web is a sprawling, strange place, filled with disciplines and languages aplenty. And truthfully, it can be a daunting place to explore. But thankfully, you hold a copy of Web Style Guide. Drawn up by Patrick Lynch and Sarah Hortontwo talented educators and writers, yes, but also cartographersthis is a chart of the webs borders. Patrick and Sarah understand the intricacies of page layout, how to scope a design project, the fundamentals of web typography, and so much more.

Whether youre a new traveler or a well-seasoned one, Web Style Guide will provide you with a path through your next project, and introduce you to ideas, concepts, and landmarks youll want to revisit.

So lets start exploring.

Ethan Marcotte

U ser experience is an overarching consideration that involves a wide range of activities by anyone who makes decisions and takes actions that affect how people experience a web site. Every person on the web development team has a role to play. On many sites, users are active contributors, which means that they also influence whether a web site offers an enjoyable and accessible user experience. And providing a good user experience is a critical factor in the success of any enterprise. Nothing is better for building a loyal following than providing a good experience, where people are successful in accessing and using content and features that they value.

When we posted the first version of Web Style Guide on the web in 1993, user experience wasnt a thing. The web offered only rudimentary design options and basic interaction through hyperlinks. Our guidance focused on basic best practices within the constrained available options: how to title a page to support scanning in a list of bookmarks, how to structure text to accommodate the reading habits of online readers. Over time and with subsequent editions, we were able to offer guidance on more attributes, such as page design and graphic design, as web technologies became more powerful and robust. Our early editions focused on the craft of web design, teaching how to use the available tools and materials to best effect. These editions had lots of code examples and coverage of technical concerns, like image and video compression algorithms, because building a web site meant knowing how to trick a rudimentary hypertext markup language into performing feats of graphic design, and how to deliver data-intensive images and media to people on slow modems. There was much more science than art in the early web.

Things have changed, and so has Web Style Guide. Now, more than twenty years later, the technology platform is more mature. Users are more demandingless willing to compromiseand they expect to encounter accessible and usable sites. Organizations are realizing the importance of design and are adopting a more strategic approach to designing and delivering quality experiences.

This fourth edition of Web Style Guide reflects a more serious and mature environmentone focused on users, not technology. It has fewer code samples. Knowledge of HTML and CSS is no longer required to be an effective web professional (although knowing whats happening under the hood remains a distinct advantage). A new strategy chapter acknowledges that good user experience and effective design require vision and understanding. The next chapter, on research, demonstrates that understanding cannot happen in a team meeting room, on a whiteboard, but requires engagement with peoplein all their diversitywho will use the site. And throughout the book there is a strong emphasis on quality content and interaction for meeting users needs and preferences. Previous editions bore the subtitle Basic Design Principles for Creating Web Sites. The fourth edition subtitle is Foundations of User Experience Design.

FIGURE 1 Building on Jesse James Garrets planes of user experience, the foundations of user experience design encompass the activities and attributes that make up accessible and enjoyable user experiences.

With a shift in focus to user experience design, we mapped our chapters to the five planes of user experience described by Jesse James Garret in his book The Elements of User Experience. His classic diagram (which you can find at wsg4.link/ux-elements ) is both an exposition of the dimensions of user experience design and a road map for user experience in the design and development process.

The process of mapping the long-standing and new chapters of Web Style Guide was revealing. We have over time given more attention to providing guidance for activities at the base of the frameworkthe strategy and scope planes. Good user experiences require clear purpose and a close understanding of user needs and preferences, and successful projects require planning. And we have added a new and critically important plane, which we call Substance. The Substance plane is at the top of the framework, and includes text, images, and video. The past years have seen a growing understanding that content is king, and no amount of eye candy or fancy widgets can have more impact than content that appeals to users.