Tutorials

This tutorial is based on the presenter's new book: Web Bloopers: 60 Common Web Design Mistakes and How to Avoid Them (Morgan Kaufmann, 2003). The book explains how to avoid common Web design errors, illustrated with examples from actual websites. The tutorial, like the book, organizes bloopers into categories: Content, Task-Support, Navigation, Form, Search, Text & Writing, Link Presentation, and Graphic and Layout. It includes class exercises in which participants spot bloopers in web-pages presented by the instructor.

PARTICIPANT KNOWLEDGE AND EXPERIENCE EXPECTED

The tutorial is intended for Web designers and developers, mainly those who lack several years of experience designing and evaluating websites and Web applications. Others who might benefit from this tutorial are web Q/A engineers, usability testers, and web development managers.

GOALS FOR THE SESSION:

After completing this tutorial, participants will:

• Have seen the most common Web design errors and ways to avoid them.
• Be able to recognize those errors in websites and Web applications.
• Be better designers and customers of websites and online services.

PREVIOUS PUBLICATION OR USE OF THIS MATERIAL

The tutorial is based on the presenter's Web Bloopers book. The common bloopers presented in the tutorial and the ways of avoiding bloopers are all discussed in the book. However, many of the examples shown in the class of bloopers and how to avoid them are more recent than the book; they were collected after the book was finished.

This tutorial is new for UPA. The instructor presented another tutorial, on GUI Bloopers, at UPA 2001 and 2002, but that was based on his previous book. The Web Bloopers tutorial is based on the instructor's new book.

HOW THIS TUTORIAL WILL BE CONDUCTED

The tutorial will be a combination of lecture (supported by many visual examples), quick blooper-spotting quizzes, and blooper-correction exercises.

DETAILED DESCRIPTION OF TUTORIAL

Website and Web-application design and evaluation has become a core activity of CHI practitioners. Many CHI practitioners design or evaluate websites and Web-based applications. Some do it professionally, for their employers and clients. Others — e.g., managers, professors, students — create websites as a way of publicizing and publishing their work or their organization's work.

This tutorial presents common Web design mistakes that negatively impact site usability. The instructor refers to common Web-design mistakes as “bloopers”. The bloopers covered in this tutorial are organized into categories: Content, Task-Support, Navigation, Form, Search, Text & Writing, Link Presentation, and Graphic & Layout. All of the examples of bloopers are from real websites.

In addition to presenting bloopers, the tutorial explains how to avoid each one. It includes class exercises in which participants spot bloopers on pages shown by the instructor.

The tutorial is based on the instructor's new book: Web Bloopers: 60 Common Web Design Mistakes and How to Avoid Them (Morgan Kaufmann, 2003). However, many of the examples presented in the tutorial are more recent than those in the book.

The tutorial notes include (at the end) a Web Blooper checklist, suitable for copying. It is intended for use in evaluating websites and Web-based applications.

SPEAKER

Jeff Johnson

Principal Consultant

UI Wizards, Inc.

Jeff Johnson is President and Principal Consultant at UI Wizards, Inc., a product usability consulting firm. He has worked in the field of Human-Computer Interaction since 1978. After earning B.A. and Ph.D. degrees from Yale and Stanford Universities, he worked as a user-interface designer and implementer, engineer manager, usability tester, and researcher at Cromemco, Xerox, US West, Hewlett-Packard Labs, and Sun Microsystems. He has published numerous articles and book chapters on a variety of topics in Human-Computer Interaction and the impact of technology on society. He frequently gives talks and tutorials at conferences and companies on usability and user-interface design. He is the author of GUI Bloopers: Don'ts and Dos for Software Developers and Web Designers (2000). Johnson also recently authored a sequel book: Web Bloopers: 60 Common Design Mistakes and How to Avoid Them (2003), upon which this tutorial is based.