Design and Constraints, Ease and Comfort

Photo of Eames Molded Plywood Chair
Eames Molded Plywood Chair, Courtesy of Herman Miller

I’m reading Graham Pullin’s book, Design Meets Disability. He starts out with a quote from Charles Eames: “design depends largely on constraints.” Charles and Ray Eames designed, among other things, the iconic molded plywood chairs manufactured by Herman Miller.

I love this quote. Much of the work of a web design professional seems to be about explaining and demonstrating the constraints of digital environment. There’s something about the plasticity of digital that leads to an “anything is possible” mentality. After all, in software development most everything is a simple a matter of programming. And though this expression is intended to be ironic, in many ways it is true. Much is possible, given the necessary time and knowledge. But just because something is possible doesn’t mean it’s appropriate, given the constraints of the environment.

Many factors constrain the form of a chair: its materials, variability in human form and function, its physical and cultural context. These are broadly understood by designers and consumers. For the most part, even the most innovative designs produce chairs we can sit on.

The factors that constrain digital designs are less well understood, in part because they are in a constant state of flux. Also, digital design is a new profession, unregulated and un-credentialed, and lacks a shared vocabulary and common understanding of the requirements of a safe, stable, and accessible environment. The resulting disorder produces unnecessary constraints, one of the more vexing of which is variability.

I am currently working on an HTML email, nesting tables just like old times, and am dismayed by the variation in rendering across clients and platforms. When software developers do not adhere to constraints, such as the need for consistent rendering, web designers end up spending much, if not most, of their time creating designs that will survive variable platforms.

So I should qualify my endorsement of constraints by saying I enjoy working with real constraints, like a limited font selection and variable window widths. I don’t enjoy wasting time dealing with inconsistent rendering.

The discipline of design is in observing and working with constraints to produce an experience that people can settle into and enjoy, with ease and comfort. The sooner we can bring discipline and respect for constraints to the digital environment, the better.

Universal Design for Web Accessibility

I’m just gearing up to start work on a new book. The book is called Universal Design for Web Accessibility. Whitney Quesenbery is my co-author, and Rosenfeld Media is the publisher. I am honored and grateful to work with Whitney, and to have the confidence of Lou Rosenfeld and the readers who reviewed our proposal. This will be an important book and I am eager to get started.

In many ways I have been working on this book since my first presentation on web accessibility in 2001, 10 years ago. I had been hearing talk of how the design of website elements could create barriers on the web, similar to staired entryways and revolving doors on buildings. I had been building websites guided by concerns other than accessibility. This was at a time when designers like me, who were concerned with layout and typography, used the rudimentary technologies available to coax (or hack) out well-designed sites. The code beneath the designs was not pretty, but the websites were. I was proud of my resourcefulness and my designs – until I learned more about accessibility.

I accepted the invitation to present on accessibility primarily as a push to learn more on the topic. I learned how people with disabilities use the web. I learned how web technologies, when used according to standards and guidelines, open up access to a world of opportunities. And in the process of learning about web accessibility I grew into my role as a designer. By understanding the impact of my decisions, I assumed responsibility for my work that goes much more than screen deep.

Since then I have been looking for ways to provide attractive designs that transform elegantly for different users in different contexts. I have found the universal design principles that guide the best accessible designs in the built environment to be a useful framework for designing digital access. I have also looked to architects and builders to understand how the profession has taken on responsibility for access requirements.

Whitney and I have high hopes for this book. The user experience profession will be asked to absorb responsibility for accessibility compliance. We want our book to provide solutions that are both practical and inspiring. And we want to establish a universal design framework for web development that will give rise to accessible design solutions.

Please help us by participating in the creation of the book. Our book website will be very active during development, and we will follow a reader-centered authoring process. Tell us what you need, respond to our requests for feedback, send us inspiring examples. Let us learn from you!

Putting Lipstick on a Pig

Closeup photo of a pig, Courtsey of Brent Moore, Flickr.com
Courtesy of Brent Moore, Flickr.com

I recently took a trip that involved multiple hotel stays. One of the hotels reminded me of a certain type of internet experience. The hotel described itself as a luxury hotel, and indeed it had the amenities of luxury—the plush white robes waiting in the closet, the thick towels, the Gilchrist & Soames toiletries. However, only one burner of the kitchen stove was functional, the television played only snow, and the pillows were without pillowcases. And the fundamental structure of the building itself was flimsy and old.

Having committed to the hotel, both financially and logistically, I tried to make it work. I made my coffee using the one working burner. I watched movies on my laptop. I found pillowcases. And I tried not to look too closely at the stains, dirt, and cracked paint.

This worked for about four days, at which time I cancelled the remaining three days of my reservation and left. Satisficing ultimately wore me down, to where I dreaded returning to my room—plush robes notwithstanding.

As a web designer, sometimes my job is to dress up poorly conceived and architected websites and web applications—also known as putting lipstick on a pig. Perhaps this self-awareness is part of what made my hotel experience so uncomfortable. It was like I was living inside one of my less glamorous projects—a bit like Being John Malkovich, but without the humor.

If the basic framework is a pig, lipstick does not a luxury experience make. My guess is that this hotel has a high bounce rate, with visitors checking in, staying a few nights, leaving or leaving early, and never returning. They would be better served spending their luxury dollars on providing a solid baseline of service and cleanliness, and making their facilities fully functional. Who wears bathrobes, anyway?

The same holds true for web experiences. A clean interface that supports basic usability and functionality wins out every time over a luxurious yet buggy design (fortunately, there were no bugs).

The experience served as a good reminder. For interaction design, I need to focus on the essentials and do them extremely well, and resist the urge (or the push from clients) to reach for the lipstick until I’m sure it’s not for a pig.

Google (in)accessibility videos from the National Federation of the Blind

The National Federation of the Blind (NFB) recently raised the possibility of civil rights violations arising from the use of Google Apps for Education, and asked the Department of Justice, Civil Rights Division to investigate. In their March 15, 2011 press release, Adoption of Google Apps Program Discriminates Against the Blind, they claim that both New York University (NYU) and Northwestern University, along with several Oregon public schools, have committed civil rights violations by utilizing these applications that have “significant accessibility barriers for blind people” to deliver email, calendaring, and collaboration tools to their students and faculty.

In following the story I discovered that NFB has devoted resources to preparing (captioned) videos demonstrating the types of barriers encountered by screen reader users in using these tools. As a long-time advocate of accessibility, who has tried countless methods for raising awareness about nonvisual access to webpages, this video collection is a goldmine. The videos illustrate both the challenges of nonvisual access, but also the ease of solving these challenges using good coding and design practices. The issues demonstrated using Google as an example are transferable (unfortunately) to many—maybe even most—web-based applications. Developers should view and learn from these videos, and avoid making the same mistakes.

I have long admired NFB for their work in ensuring equal access for nonvisual users. To admiration I now add my gratitude for providing exceptional content that can be used for education and awareness-raising by accessibility advocates, and to make real the barriers as well as the solutions for the people who code the pages.

Thank you, NFB!

Web Emergency Plan

Screenshot of Dartmouth Emergency Information homepage

In light of events affecting campuses in past years, including Hurricane Katrina and the tragedy at Virginia Tech, many colleges and universities have developed protocols for managing emergency situations. The web is a key component in emergency management as a tool for notification, instruction, and communication. As a masterful worrier and contingency planner, I was only too happy to lead the project to develop a plan for using the web in an emergency.

Dartmouth’s Web Emergency Plan has several components, including:

  • An emergency banner that displays over most official College websites
  • An emergency website that displays current status information, and that would be used extensively during an emergency
  • An off-site emergency website that would be activated if Dartmouth was offline
  • An alternate homepage layout for use in the wake of an emergency

In designing these elements, we focused on ease of activation, flexibility, and lightweight design. In an emergency we knew we would need to act quickly and flexibly, as we could not predict in advance what would be needed. We would also receive a good deal of web traffic and needed to minimize demands on our infrastructure.

The campus has done a number of tests and trial runs and our protocols have executed according to plan. It’s a solid and robust plan—just what a worrier needs. While I hope its use remains purely in test mode, the Web Emergency Plan could make an enormous difference should Dartmouth ever need to put it into effect.

Web design articles for Peachpit

Screenshot of Peachpit article page

Peachpit is one of the most well known publishers in the design and technology industry. In particular, their New Riders imprint is the stomping group for the field’s most prominent experts, through the “Voices That Matter” series. I have had the honor and privilege of publishing a book, Access by Design, and many articles under the Peachpit masthead.

My most extensive series of articles has been for Peachpit’s Web Design Reference Guide. Alongside web gurus such as Andy Clarke, Robert Hoekman, Jr., Molly Holzschlag, and Dave Shea, I published 20 articles for readers interested in learning best practices for web design. For the most part, my articles focus on usability and accessibility concerns, including usable forms, flexible layouts, and data tables.

More recently I published two articles with Peachpit on user-directed design: one on making the case for user research and a second describing the components of a project charter.

Dartmouth Hitchcock Medical Center

Screenshot of DHMC Quality Reports page

I have consulted on a number of projects for the Dartmouth Hitchcock Medical Center, or DHMC. These projects have been great learning experiences for me. Unlike many organizations, DHMC is committed to user-centered design. I was given support for user research, both with resources and timelines. And most importantly, when it came time to make design decisions, user research was the guide.

The most interesting and challenging project that I did for DHMC was the design and usability for their Quality Reports feature. Quality Reports offers comparative data on how DMHC measures up across a variety of diseases, procedures, and cost comparisons. In 2003, DHMC was just beginning to plan for a rollout of this new and innovative feature. They wanted to provide the information in the best, most useful format possible. That’s where I came in—and where user-centered design played a key role.

The team at DHMC had several different elements in mind for presenting the reports: checkmarks indicating how DHMC was measuring against their quality goals; the data itself, and the comparison data; and explanations of the measures, so that readers would understand the significance of, for example, “aspirin at arrival.”

Screenshot of Quality Reports detail page

I developed several different functional mock-ups of the reports, each one combining the elements in different ways. I then did user testing to determine which approach resonated best with DHMC patients, looking for things like:

  • Did people react to the information/visual density of the interface?
  • Did they read the narrative text?
  • Did they like having the comparative data?
  • Did they like the checkmarks?

The most impactful thing we learned was that the scorecard approach, with only checkmarks, was too simplistic. Testing participants preferred access to the data and comprehensive descriptive information. Also, in examining quality reports, participants wanted to learn more generally about the conditions measured.

The interface for Quality Reports is a scorecard of sorts, but with data rather than checkmarks. Each measure includes a brief description, and is linked to a more complete description and data graph. Also, patients can access health information about conditions from the Quality Reports pages.

As of this writing, the designs I created for DHMC, including the home page, are still in use.

Follow

Get every new post delivered to your Inbox.