Front Matter
Preface

The web has democratized design—both the process of design and the attendant responsibilities. Knowingly or not, we have been engaging in design throughout our lives, but without such broad implications. When we choose whether to wear brown shoes or black, the effect of our choice is limited to the people we encounter throughout the day. When we design a Web site, we design for everyone. Our choices affect anyone who tries to use our site.

Making decisions—that is the task of the designer. Good decisions have a basis: a purpose to uphold and best practices for achieving that purpose. For example, the purpose of type is to be read, and best practices provide conventions for setting type size for optimal readability. The purpose of a light switch is to control illumination, and best practices dictate how to design a light switch for optimal usability.

The purpose of a Web site is... well... that depends. The Web is dynamic and its purpose evolves as the technology grows and changes. Defining purpose depends on whether we are talking about functionality—what makes the Web work; interface—how users interact with the Web; or content—what users do with the Web. Defining best practices depends greatly on how we define our users—are we talking about “typical” users, cell phone users, blind users, adult users, Google?

Given the complexity of the tool, its dynamic nature, and the diversity of its users, what do we use as a basis for making design decisions when designing Web sites? This book will attempt to answer that question, and will provide guidelines for making design decisions that work for the greatest number of users.

The origins of this book

I’ve been doing print and interface design since the beginning of my professional career and without the benefit of a design education, I have relied on the knowledge of experts to guide me: Robert Bringhurst, Patrick Lynch, Donald Norman, Ben Shneiderman, and Edward Tufte, just to name a few. This approach has served reasonably well in areas where design is established, such as graphic and interface design. However, Web design was just new when I began designing Web sites, and I had no seasoned experts to turn to for guidance in that arena. Instead, I muddled along, trying to make sense of the medium and develop an appropriate design approach. These approaches and methods have passed through several phases leading up to the methods I employ today and that I advocate in this book.

Graphic design

In the early days of the Web, when users were “surfers” skimming along the surface of the Web, Web design was about looking good. Designers went to great lengths to design sites that were eye-catching and that incorporated established design methods. Unfortunately, the medium provided few tools for graphic design, which meant a large part of my efforts went to devising methods for controlling design and layout.

Information design

Once users became more goal-oriented, information design gained importance. Too often, Web users could not find what they were looking for. In response, designers began to pay more attention to the information structure of their sites. Information architecture became part of my practice, with a focus on solid organization, clear and effective navigation, and self-explanatory labels. I started developing content inventories and site diagrams to build sound site structure, and employed user research methods, such as card sorting and user testing, to design intuitive navigation.

User-centered design (a.k.a usability or user experience)

A major paradigm shift occurred with the introduction of “users” into the Web design process. Designers began consulting users early and often for insights that would inform the decision-making process. Until this time, I felt my role as a designer was to make decisions about the design of my pages on behalf of the user, based on what I knew about graphic, interface, and information design. Once I started working with users, I found I could derive design decisions by observing user behavior and feedback. At this point, user research and usability testing began to inform many of my design decisions.

Web accessibility

When the Web community began discussing Web access for people with disabilities, some of the fundamental attributes of Web pages came into focus—attributes that had been either neglected or suppressed because they interfered with visual design. The most basic of these is flexibility—Web pages adapt to the needs and preferences of users. In understanding the breadth of diversity among Web users, I came to appreciate that flexibility was a good thing rather than something to be overcome. I stopped trying to impose design and began optimizing my pages for graceful transformation.

Web standards

About the same time, and perhaps not coincidentally, the Web design community began demanding support for Web standards. In order to design consistent pages in an inconsistent environment, Web designers had adopted complex and sometimes unorthodox methods for implementing designs that would render consistently across browsers with poor support for standards. These methods often worked at cross-purposes with accessibility and universal access—for example, favoring images over text because image-based designs provided a measure of consistency. The call for Web standards brought about better browser support for good coding practices.

By focusing on Web accessibility and Web standards, I gained a better understanding of the purpose and fundamental character of Web sites. Rather than work at odds, I started to work with the constructs, and the constraints, of the medium.

Universal design

In the physical world, access is often achieved using a universal design approach, where accessibility features are integrated into a design. Common examples include curb cuts, access ramps, and elevators. But universal design principles can be applied to appliances, devices, Web sites, even instruction—such as education programs designed to work for all kinds of learners. The basic premise behind universal design is to provide for diversity through design rather than accommodation—for example, rather than providing handicapped access via a separate entry, one would integrate ramped access into the main entrance.

As a Web designer concerned with accessibility, I was attracted to the concept of providing a single point of access that would work for all users. I liked the idea of incorporating access requirements into my designs rather than considering them as an afterthought. By adopting a universal design approach, I could make access a deliberate part of my Web design process. I would address access requirements within the overall design of a Web page with the goal of optimizing page designs to work for all users. Access by design became my modus operandi.

However, the term universal design conjures images from the physical world, such as access ramps, curb cuts, and kitchen gadgets, more so than Web pages. So while I adopted a universal design approach, I had difficulty advocating the method because the term universal design has not found its way into the general discourse of Web design.

Universal usability

I was well into writing this book when I discovered that Ben Shneiderman was advocating a design concept that addressed universal design specifically for communications and information technologies. Shneiderman has long been a leader in user-centered interface design. His seminal book, Designing the User Interface, first published in 1986, is required reading for fledgling computer scientists worldwide. He has been one of the most prominent advocates of the “human” in human-computer interaction.

In his most recent book, Leonardo’s Laptop, Shneiderman defines universal usability as “enabling all citizens to succeed using communication and information technology in their tasks.” For Shneiderman, citizens include users with “new or old computers, fast or slow network connections, and small or large screens, ... young and old, novice and expert, able and disabled, ... those yearning for literacy, overcoming insecurities, and coping with varied limitations.” This broad and encompassing view of the user resonated with my universal design approach. I felt the Web could support this type of universality. I also liked his focus on usability over accessibility. As an interface designer, Shneiderman understands that access to content and functions is the basis of universality, but that access alone is not enough. Many Web sites that meet the standards and guidelines for accessibility are not usable. Having found a way to describe the design approach I had been seeking, I adopted the label universal usability as both a design methodology and the focus for this book.

The focus of this book

To achieve universal usability, Shneiderman identifies three challenges for designers: “to support a wide range of technologies, to accommodate diverse users, and to help users bridge the gap between what they know and what they need to know.” In order to apply these general challenges specifically to Web design, we need to consider the layers of Web site design: function, interface, and content.

• Function: The things we design take their form from their functions. A coffee mug must have the right shape, capacity, and material to contain and dispense hot liquid. Part of designing for function is identifying the restrictions inherent in whatever we are designing: A coffee mug cannot leak and must be well insulated so the user does not get burned. On the Web, the functional layer consists of the technical underpinnings that make a Web site work. When a Web site is functional, its content is accessible and its interactive components function properly.
• Interface: Well-designed objects are self-explanatory. One look at a coffee mug and we know it’s for holding and drinking liquid. We know how to work it by the way it’s shaped: The hollow is for filling, the lip is for drinking, the handle is for grasping. Having access to a Web site and its functions does not necessarily make it usable. A usable Web site tells the user what it’s for and how it works. It offers an interface that clearly conveys purpose and provides self-explanatory controls.
• Content: If function and interface are the means, then content is the end. In many areas of design, the designer is not responsible for content. For example, it is the user who decides what kind of coffee goes inside the coffee mug. In the Web domain, content can be countless different things—information, entertainment, a conversation, a transaction. A Web designer is responsible for what goes in the cup, and whether it’s instant or brewed is reflected on the design of the site.

In this book, we primarily address universal usability at the functional layer, focusing on the challenges of designing pages that are accessible and usable on different devices by diverse users. We concentrate on the functional layer because, without it, the other layers are irrelevant. An intuitive interface and informative content are useless if the basic functions of a site don’t work. Like a car that doesn’t start, a Web site that does not function is of no value to the user.

Conventions and terms used in this book

This book is organized around best-practice guidelines for universal usability. It begins with an introduction that lays the foundation for universal usability, and the remainder of the book is divided into chapters that address concerns as they relate to different elements of Web pages. Each chapter begins with an overview and is followed by guidelines. The guidelines are broken into sections: first, basic principles covering the broad concerns associated with the element, and then more specific concerns relating to particular aspects of the element, such as markup, size, and color. Each guideline is summarized in a section marked “In a nutshell.” Sections and guidelines are numbered for orientation and easy reference, and the Appendix contains a quick reference to all the guidelines and nutshells.

Before we begin, let’s take a moment to define the terms used in this book.

Design

Design is a problematic label to assign to the process of making Web sites. The term feels too big—too much an assessment of worth. We think that things that are “designed” must look good. But design is, simply, the process of making decisions about how things are made—their size, shape, materials, and so on. There are many design fields—engineering, graphic design, industrial design, architecture—and many things created—safety pins, billboards, armchairs, towns. Although we often think of design purely in terms of its aesthetic aspects, design is what gives form to all aspects of our creations. Whenever we make a choice about how a thing is made—how it looks, how it operates, how it is put together—we are engaging in the process of design.

In this book, when we talk about design we are talking about the process of making the decisions that give form to a Web site.

Designers

The term designers is also difficult. We think of designers as well-clad people who make decisions about the buildings that we live in, the clothing that we wear, and the devices that we use. We may not feel qualified to think of ourselves as designers. However, any time a person makes something, the process involves some degree of design. Consequently, at some point in time, we are all designers, whether of sand castles, soup, or sonograms.

In this book, when we refer to designers we are not talking only about people who are educated in a design discipline. Professional designers design Web sites, but so do countless other people—educators, entrepreneurs, musicians, gamers, medical professionals, shopkeepers, architects, and so on. If design is the process of making choices about how things are made, then Web designers are people who make Web sites.

Users

Another source of conflict is in defining the audience. We design for “people,” and when we design well, people become “users.” When we refer to “people,” we are not talking about your average José and Joséfa—we mean all people. Given the diversity of human needs, it may seem unrealistic to discuss design in such broad and inclusive terms. How could all people use a single Web site? We forget that we are designing Web sites, not T-shirts, and that, on the Web, one size can fit all.

Some people avoid the label users when referring to people who use Web sites. In this book we favor the label because it emphasizes the role of the designer. We build Web sites so people can use them. When we make a Web site that is usable, people become “users.”

So, we have established that, as makers of Web sites, we are designers engaged in the process of design. We are interested in humanizing the Web by designing Web sites that people, in all their diversity, can use. To build sites that are universally usable, we must base our designs on a framework of solid functionality. Let’s begin.