WebVisions 2009 - Workshop & Talk

Excited to be heading to Portland for the upcoming WebVisions 2009 conference. I was fortunate to attend & participate on a panel at WebVisions in 2006. I found it to be a no-hype, practical conference with good speakers and excellent attendees. And of course Portland is a wonderful city.

Designing with Patterns Workshop
I will be giving a 3 hour workshop on Wednesday afternoon (May 20) starting at 2pm. Here is the planned agenda:

• Pattern Overview
• Survey of Pattern Libraries
• Design Principles
• Principle One: Make it Direct
• Exercise: It's a Drag
• Present Solutions
• Principle Two: Keep it Lightweight
• Principle Three: Stay on the Page
• Principle Four: Provide an Invitation
• Principle Five: Use Transitions
• Principle Six: React Immediately
• Exercise 2: Button Mayhem
• Present Solutions
• Q & A

Here is a description of the workshop.

In every field of design one of the first things students must do is learn from the work of others. They study and break down real-world examples in order to understand the underlying principles and patterns that make for successful design. Then they are able to apply these learnings to their own set of problems. Designing for web interfaces is no different. We are constantly searching for inspiration and practical guidance in solving the problems we face as designers each day. One approach to curating and applying solutions is through the idea of design patterns. Design patterns define a solution in the context of a real world problem.

In this workshop, Bill Scott will discuss the rationale behind patterns, present a number of excellent pattern libraries for your consideration (20+), and then dive deep into 100+ examples from around the web that illustrate good interaction techniques (design patterns) as well as the not so good (anti-patterns) all organized as a set of six design principles. The main idea of the workshop is to expose you to lots and lots of real world examples and discuss the nuances and best practices that can be distilled from the them. In addition there will be time for two group exercises -- both actual problems that are currently being worked on at Netflix.

Many patterns are discussed. Here are the main ones:



You can learn from the bad examples as well. Along the way, anti-patterns are pointed out. The anti-patterns discussed are:



I will also be presenting Bringing Design to Life which explores what designers should know about interface engineering and ways for engineering & design to work in synch to bring design to production.

Designing Web Interfaces Book Site and Flickr Companion Site Live

I am happy to announce that the two companion sites to my book are now live.

designingwebinterfaces.com is the companion book site as well as the book's blog site. Look for some exciting articles on the blog in the next few weeks.

The companion Flickr site should also be helpful as it provides all of the book's figures under a generous Creative Commons license.

Update: Designing Web Interfaces Book Available for Pre-Order

In an earlier post I mentioned our upcoming O'Reilly book, Designing Web Interfaces that I coauthored with Theresa Neil. The good news is we are getting very close to publish date -- December 2008 or January 2009. It is now live on Amazon and available for pre-order.

You can read about the contents of the book here and here.

The book is a partial outgrowth of various talks I have given over the last few years: Designing for Ajax, Designing Web Interfaces: Principles and Patterns for Rich Interaction and When Designers Get Too Clever: Anti-Patterns.

(By the way, the bird on the cover is the Guianan Cock-of-the-Rock and the image is from Johnson's Natural History. Yeah, I feel like strutting ;-)

The work on the Yahoo! Design Pattern Library also helped frame of lot of the ideas presented in the book (there are 75+ patterns discussed).

Additionally the work that Theresa & I did at Sabre Airline Solutions in documenting design patterns, performing heuristic evaluations on two dozen complex airline products as well as actively designing new solutions for the suite of products brought a lot of the principles to light while writing this book.

Two other items I am very excited about.

Companion Flickr Site
First, following the example of Luke Wroblewski (who also wrote the Forward to the book) we will be making all of the figures and illustrations (over 500 images) available on the companion Flickr site. In addition since many of the images are keyframes that illustrate steps in an interaction, I will be making the original screencast movie available on the flickr site as well. You can see an example of this for All the Web's Live Search (Yahoo! experiment that is no longer available). Like Luke, we will make all this material available via Creative Commons. You will be free to use it in your presentations, etc. We only require attribution back to our book.

Companion Book Site
Additionally, Theresa & I will be posting and keeping up to date a companion book site, DesigningWebInterfaces. We will be posting new examples, new patterns, new anti-patterns as well as links to other great pattern sites or books. Note, that it is just a "parked" page at the moment. Look for the site to be live around the book publish date. Stay tuned here for the go-live announcement.

Upcoming O'Reilly Book - Designing Web Interfaces: Principles and Patterns for Rich Interactions

Update: Designing Web Interfaces: Principles and Patterns for Rich Interactions is now available on Amazon for pre-order. Planned release is December/January timeframe.

Since about February Theresa Neil & I have been actively writing a new book for O'Reilly.

This is part of a group of books O'Reilly is publishing around Design. Designing Interfaces is an excellent book on Design Patterns by Jenifer Tidwell. Designing Gestural Interfaces will be coming out soon by Dan Saffer. Jenifer's book did an amazing job of cataloging desktop and web design patterns. Dan's book focuses on all of the new and upcoming interactions around gesture based interfaces.

Designing Web Interfaces: Principles and Patterns for Rich Interactions focuses strictly on a set of six principles for designing Web applications to be highly interactive.

The six principles are:

1. Make it Direct
2. Keep it Lightweight
3. Stay on the Page
4. Provide an Invitation
5. Use Transitions
6. Be Reactive

The principles are illustrated by a series of design patterns called out in various chapters shown here in a table of contents.

Principle One: Make it Direct

• Chapter 1. In Page Editing
• Chapter 2. Drag and Drop
• Chapter 3. Direct Selection

Principle Two: Keep it Lightweight

• Chapter 4. In-Context Tools

Principle Three: Stay on the Page

• Chapter 5. Overlays
• Chapter 6. Inlays
• Chapter 7. Virtual Pages
• Chapter 8. Workflow

Principle Four: Provide an Invitation

• Chapter 9. Static Invitations
• Chapter 10. Interactive Invitations

Principle Five: Use Transitions

• Chapter 11. Transition Patterns
• Chapter 12. Purpose of Transitions

Principle Six: React Immediately

• Chapter 13. Lookup
• Chapter 14. Status

Appendix: Design Patterns

I have finished the first draft of the book and am now working my way back through the book. Hopefully it will start technical reviews in a couple of weeks. No definite word on when the book will be on the bookshelf -- but I will update as we nail down that date.

I am also setting up a companion site, http://designingwebinterfaces.com. Currently this is just parked with a generic placeholder.