The Future of Web Accessibility: A Multi-Voice Choir

Back in May of 2011 I wrote an article about a new book project, Universal Design for Web Accessibility. Since then my co-author, Whitney Quesenbery, and I have been plugging away, stealing writing time in between moves, job changes, elections, violent weather, and the many other disruptions that come with living a full life. Continue reading “The Future of Web Accessibility: A Multi-Voice Choir”

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.Continue reading “Design and Constraints, Ease and Comfort”

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. Continue reading “Putting Lipstick on a Pig”

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.

Arts at Dartmouth

Screenshot from Arts at Dartmouth

The Arts at Dartmouth website is an effort to provide a consolidated view of arts-related activities and opportunities at Dartmouth. The site is aimed at prospective students who are interested in incorporating the arts into their college experience. But the site also serves current students and the Upper Valley community who are interested in participating in the current arts activities at the College.

Collaboration is a key component of a cross-disciplinary project such as Arts at Dartmouth. Five academic departments, the Hood Museum, and the Hopkins Center for the Arts comprise the primary stakeholders, along with Admissions and the Office of the Provost. I was project leader, and in order to move the project forward, we formed a working group to do the work of the site, a management team to help with decision-making, and had regular sessions with the stakeholder group to touch base and get feedback.

Another important tool in the development process was the project charter. With many differing interests among the stakeholders, the project charter served as our touchstone throughout the site development process. In particular, revisiting our defined goals, target audience, and measures of success helped keep us focused and avoid scope creep:

Goals and Themes

  • Demonstrate the value that Dartmouth places on the arts
  • Demonstrate the distinctiveness of the arts at Dartmouth
  • Demonstrate the influence and value of the arts on overall quality of life

Target Audience

  • Prospective students (and their parents and families)—accepted students in particular
  • Current students
  • Dartmouth and Upper Valley community

Measures of Success

  • Increase in matriculation of students who are highly talented in the arts
  • Increase in the number of arts majors/minors
  • Increase in the number of students enrolling in arts courses, especially those who enroll during their first year
  • Increase in student participation in/attendance at arts-related activities
  • Increase in overall attendance at arts-related activities

In the end, the biggest challenge to developing and maintaining the Arts site is content. Each of the stakeholder departments has its own website, and expecting them to engage in content development for an additional website was not realistic. We developed a minimal collection of static content—testimonials, photos, descriptive text, and videos—as part of the site development process. Then we embedded feeds from other sources—Flickr, YouTube, calendars and news—to provide an ongoing content source, giving a more dynamic and current feel to the site.

The architecture for this “portal to the arts” is fairly straightforward. Each department and center has its own page, with text and imagery designed to express its energy and focus. The overall visual design is colorful and vivid, based on a color palette derived from the site’s primary visual element—a segment of an oil painting created by a student in Studio Art. The layout is flexible, adapting gracefully to different window widths.

Screenshot from Arts at Dartmouth

The Arts at Dartmouth website is an ongoing project. We continue to add to the site, refine our approach, and measure progress toward our success metrics.