Web App Masters: Designing for Interesting Moments

Lauren Cramer

April 9th, 2010

When we put together the Masters line-up for the Web App Masters Tour, Bill Scott was a “must have” on the docket. Bill is the master when it comes to web app design patterns. If you’re using advanced or “rich” interactions in your web applications, than you’re probably familiar with his book Designing Web Interfaces. Bill also launched the Rico JavaScript library and the first public pattern library at Yahoo!.

Once again, Luke Wroblewski (a master in his own right and also part of the Web App Masters Tour) did an excellent job capturing Bill’s presentation at the first stop of the Web App Masters Tour in San Diego. In previous posts, Luke highlighted Stephen Anderson’s talk on Designing Seductive Business Apps and Hagan Rivers’ talk on Escaping Navigation Hell. You can read other posts from Luke at Lukew.com.

Here are Luke’s notes.

In his Designing for Interesting Moments presentation at the Web App Masters Tour in San Diego, CA, Bill Scott outlined several rich interaction design principles and showed them in action within several Web applications.

  • There are more than 16 different events and 96 interesting moments in a typical drag and drop interaction.
  • Interesting moments are opportunities to engage with the user through reciprocal interactions. They consist of microstates.
  • Principle 1: Input where there’s output. In page editing: pay attention to discoverability (yellow spotlight/invitation, tooltip invitation); use a clear call to action (save/cancel buttons).
    Non-symmetrical interaction anti-pattern: they way you activate something should be the way you deactivate it.
  • Tiny targets anti-pattern: make interactions too subtle –harder to interact with. You should aim to reduce physical effort. Remember Fitt’s Law. Drag and drop doesn’t necessarily make interactions better. Sometimes just selecting something is enough.
  • Artificial construct anti-pattern: creating UI elements to enable interactions that are not required.
  • Principle 2: Require only a light footprint -make things easier for the user to get things done. Be mindful of click weight: number of interaction steps, decisions time, seek time, second guessing, weight time all add up to a measure of how hard something is to accomplish. Always make primary actions visible. Preserve readability by hiding secondary actions until they are needed.
  • You can do more with a click -consider using hover-less interfaces. Clicks are usually more intentional than hovers.
  • Try to strike a balance between readability and interactivity.
  • Principle 3: Invite interactions
  • Hover and cover anti-pattern: don’t overlay content people will want to access with hovers. Change blindness: our brain expects continuous change. Single page changes sometimes leave things unnoticed because the change is too drastic.
  • Principle 4: Maintain flow -overlays can encapsulate alternate workflows without removing context.
  • Idiot boxes anti-pattern: don’t interrupt a user’s flow with pop-up boxes that ask for/provide confirm is there’s a more in-context inlay solution available.
  • Virtual space: consider providing access to a backstage area for actions and content. Use a clear call to action to make the outcomes of interactions clear.
  • Don’t use tours as a band-aid for bad interactions.
  • Blank slate invitations are pre-populated with content and invite people to change the defaults.
  • Hover invitations and state changes can encourage interactions.
  • Principle 5: Show transitions: can help explain interactions through changes in the user interface.
  • Needless fanfare anti-pattern: don’t use animations without purpose. Animation is a supporting actor it should not take center stage.
  • Occam: what can be done with less is done in vain with more.
  • Use the “cut in half” rule of thumb to focus animations on what matters.
  • Moments communicate: speed things up, slow things down.
  • Be reactive. Live feedback can let people know what’s happening and if they are making progress toward their goals.
  • Narrow towards a goal rather than distracting from it.
  • Live previews can prevent errors before they happen.
  • Learn More from Bill Scott

    Jared Spool got together with Bill back in February to discuss his ideas about the nuances of Interesting Moments. The result was a jam-packed podcast interview called Interesting Moments with Bill Scott. You’ll want to give it a listen.

    Bill will also be in Minneapolis, Philadelphia, and Seattle for the Web App Masters Tour presenting on Designing for Interesting Moments. He’s just one of the thirteen Masters. Read all about the Tour at www.UIETour.com.

    Web App Masters TourUntil April 19, you can register for any of the Tour cities for $795 when you use the promotion code TOURBLOG. Learn more about the tour at www.UIETour.com

    Add a Comment