Bill Scott's BIO

TITLE & COMPANY INFO

  • Bill W. Scott
  • Director, UI Engineering
  • Netflix
  • 100 Winchester Circle
  • Los Gatos, CA 95032
  • http://www.netflix.com

SHORT BIO

Bill Scott has always enjoyed technology (25 years). And he has always enjoyed interacting with people (even longer). It was a natural to blend the two loves together. For a long time he couldn't decide if he was a designer or an engineer. He finally gave up trying to classify himself and just decided to live in both worlds as much as possible. This passion drove him to create one of the first successful Macintosh games (GATO, 1985), build wargaming interfaces for NATO, found and lead UX Design teams (Sabre), write Ajax frameworks (OpenRico) manage user interface engineering organizations (Netflix), publish design pattern libraries (Yahoo!), talk a lot about it (Ajax Evangelist) and even write a book about Designing Web Interfaces (O'Reilly).

LONG BIO

Bill Scott is the Director of User Interface Engineering at Netflix, the world's largest online movie rental service. At Netflix Bill is guiding the UI Engineering team's efforts to continue Netflix's excellence in user experience, improve client performance and refactor the presentation tier to use the latest best practices for both the DHTML layer as well as the Java tier.

Bill is the co-author of the O'Reilly book Designing Web Interfaces: Principles and Patterns for Rich Interaction. The book covers 75+ interaction design patterns, several anti-Patterns organized into six design principles for designing rich interfaces.

In addition, Bill is a frequent speaker at conferences and workshops around the world discussing the nuances of good design and the challenges of great engineering.

Previously, Bill led engineering for Yahoo! Teachers, a web 2.0 community allowing teachers to gather, organize & share web resources and lesson planning. In addition, as an Ajax Evangelist at Yahoo! he focused on spreading the goodness of "rich and sane" Ajax design & development. At Yahoo! Bill was also the Design Pattern curator where he launched the public version of the Yahoo! Design Pattern Library (http://developer.yahoo.com/ypatterns).

Before Yahoo! Bill led User Experience at Sabre Airline Solutions and co-founded Rico (an open source Ajax framework, openrico.org.) For 20 years Bill has bounced back and forth between design and engineering projects, creating products in areas as diverse as video games, widget libraries, war gaming, IDE tools, airline management and Web consumer sites. His musings can be found at http://looksgoodworkswell.com.

PHOTOGRAPHS

You can find photographs at:
http://billwscott.com/share/bio/

A 300 DPI version is at:
http://billwscott.com/share/bio/bill_300dpi.jpg

TALKS

Designing Web Interfaces

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 what they have learned to their own set of problems. The real trick is to apply them in a nuanced manner. Designing for web interfaces is no different. This talk looks at these nuances from over 100 examples from across web to illustrate both what should be emulated (patterns) as well as what should be avoided (anti-patterns) and summarizes them into a set of design principles.

The six design principles explored are:

  • Make it Direct
  • Keep it Lightweight
  • Stay on the Page
  • Provide an Invitation
  • Use Transitions
  • React Immediately

This talk goes hand-in-hand with Bill Scott & Theresa Neil's book, Designing Web Interfaces and will provide you with practical take-aways for designing rich interactions on the web.

Anti-Patterns: Designing for a Poor Web Experience

antipatterns as a tag cloud

Sometimes it is most instructive to look at design patterns in reverse-- as a set of anti-patterns. In this talk, Bill Scott will explore the common mistakes that designers & developers make when attempting to craft a rich web experience. Bill will use counter-examples from consumer facing web sites (both inside & outside of Yahoo!) as well as from enterprise web applications to illustrate the right way to design.

Some of the anti-patterns explored are:

  • meandering way
  • borg idiom
  • tiny targets
  • hover and cover
  • pogo stick navigation
  • novel notions
  • metaphor mismatch
  • double duty
  • linkitus
  • windows aplenty
  • animation gone wild
  • misguided misdirections
  • missed moments
  • one at a time
  • non-symmetrical actions

Prototyping the Rich Web Experience

How do you communicate the design for a rich web experience? Since there is no one tool, designers have used the tools at hand: Photoshop, PowerPoint, Illustrator, Fireworks, ImageReady, Visio, OmniGraffle, and so on. However, prototyping provides the best way to fully understand & test the nuance of detailed interactions. The problem is that it is difficult to find someone who is both good at design & prototyping. In this talk, Bill Scott will first survey the tools & techniques for communicating rich design and then propose a simplified "language" (ProtoScript) for describing complex in-page interactions using a combination of JSON, CSS/XPath Selector Syntax and Plug in Behaviors.

ProtoScript is an freely available simplified scripting approach designed for non-programmers to give them the capability to prototype using specific toolkits without JavaScript programming.

When Designers Get Too Clever: Avoiding the Traps of Bad Design

When the first web sites appeared, pages were filled with horrific elements, such as blinking text, dancing graphics, auto-playing theme music, pattern-filled backgrounds, and who could forget the "skip intro" splash pages. Created by well-meaning designers who wanted to add flair to their designs, it quickly became clear these stylistic elements weren't enhancing the user's experience.

Now, here we are with new interaction tools and, as happens, history is repeating itself. In an attempt to add pizzazz, designers are making serious interaction design mistakes, embedding gratuitous, unnecessary, and often frustrating usage modes into their designs. And, like the web sites of years past, they often reach production without the designers realizing the traps they've fallen into.

For the last few years, Bill Scott has assembled an amazing collection of these grievous design travesties and in this talk he brings them out for your perusal and amusement. Bill shows us where designers committed acts of egregious drag-and-drop, tiny close buttons, and menus that fly across the screen, all in the name of creating delightful experiences.

But, the fun doesn't stop there. Bill has also gleaned important design lessons from each of these examples. We'll see counterexamples that what would've happened, had the designers made different choices. We'll walk away with a ton of ideas on what we can (and shouldn't) do to make the user's experience more effective and delightful.

Designing with Patterns 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.

WORKSHOP OUTLINE

  • 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

EXERCISES

  • It's a Drag. The challenge of designing drag and drop.
  • Button Mayhem. The challenge of designing in-page actions.

PATTERNS

Many patterns are discussed. Here are the main ones:

In Page Editing. Direct Selection. Drag and Drop. Complex Inline Editing. Alternate Edit Path. Symmetry of Interaction. In Page Action. Remembered Collections. Rating an Object. Contextual Tools. Vote to Promote. On Demand Scrolling. In Context Expand. Inline Assistant. Hover Details. Lightweight Popup. Lightbox. In Context Configuration. Accordion. In Context Insight. Inlay. Overlay. Pagination. Carousel. Paged Scrolling. On Demand Scrolling. Seamless Paging. ZUI. Inline Checkout. Inline Assistant. One Page Checkout. Step by Step. Single Page Flow. Page in a Menu. Invitation. Tooltip Invitation. Cursor Invitation. Hover Invitation. Drop Invitation. Tour Invitation. Blank Slots. Blank Slate Invitation. Something Askew Invitation. 1-2-3 Call to Action. Sneak Peek. Question Invitation. Familiar Invitation. Button Invitation. Navigation Invitation. Fade. Self-Healing. Zoom Box. Slide. Animate. Spotlight. Auto Complete. Busy Indicator. Live Previews. Periodic Refresh. Focus+Context. In Place Drill Down. Tickler Menu. You are Here.

ANTI-PATTERNS

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

Anti-Patterns: Non-Symmetrical Interaction. Artificial Construct. Tiny Target. One at a Time. Hover & Cover. Double Duty. Mystery Meat. Stalker. Pogo Stick Navigation. Idiot Boxes. Mouse Trap. Animation Gone Wild. Needless Fanfare. Missed Moments.

MORE INFO

You can find me around the web usually with the profile name billwscott