Interaction Design Principles

Dashboard Design Topic: Principles of Interaction Design for Dashboard Designers.

Dashboard designers and builders often back into the disciples of user interface and interaction design through necessity after a few business intelligence projects. Once they get a few dashboard projects under their belt, they realize that there are quite a few subtleties in a dashboard project beyond selecting metrics and applying information visualization best practices. Some come to the realization sooner than others. Those building a custom application with a dashboard tend to need to deal with interaction design issues sooner than those leveraging dashboard software platforms with their built-in user interface layouts and components. Either way, dashboard designers realize that they are building a user interface and need to apply fundamentals and principles that assure user satisfaction and acceptance.

Dashboard Spy readers tend to be a diverse lot with a variety of job functions and backgrounds. Even their learning styles are different. Usually we focus on the visual learners by showing numerous screenshots and image. Today’s post on Interation Design Prinicples is designed to appeal to those listening learners as well by using video content. As you know there is a Dashboard Spy site, Dashboards.TV, that collects video content regarding business intelligence dashboarding resources. From that library of videos comes today lecture on Interaction Design Principles. It’s a great resource that all dashboard designers should review.

From the O”Reilly Webcast, comes this 1 1/2 hour long presentation on the principles of interaction design. It reviews the six design patterns that are critical for designing web interfaces. The video is embedded below, but you may wish to view the high resolution version at youtube. The content is presented by Bill Scott, the director of UI engineering at netflix and follows the book titled Designing Web Interfaces: Principles and Patterns for Rich Interactions

I took the following notes during my viewing of this video:

Designing Web Interfaces:

A design pattern is just an easy way to codify the different user interface idioms and give them a fitting name so that you can easily communicate between the different members of the project team (engineering, design, product, etc).

  1. Make It Direct-Edit content in context with design patterns for In Page Editing, Drag & Drop, and Direct Selection
    • Allow input wherever you have output
    • Shorten the length of interaction
    • Make objects directly actionable
  2. Keep It Lightweight-Reduce the effort required to interact with a site by using In Context Tools to leave a “light footprint”
    • Contextual tools
    • Click weight
    • Seek time
    • Decision time
    • Second guessing
    • Wait time
    • Interaction steps
    • Cost/Benefit tradeoff
  3. Stay on the Page-Keep visitors on a page with overlays, inlays, dynamic content, and in-page flow patterns
    • Inlays
    • In-context configuration
    • In-context insight
    • Parallel content
    • Inlay vs. overlay
    • Rethink paging
    • In-place paging
    • Zoomable user interface (ZUI)
    • Watch out for dual scroll bar issue
    • Use hybrid paging and scrolling
  4. Provide an Invitation-Help visitors discover site features with invitations that cue them to the next level of interaction
    • Static invitation
    • Call to action
    • 1-2-3 messaging
    • Spotlighting or lightbox
    • Provide a peek
  5. Use Transitions – Learn when, why, and how to use animations, cinematic effects, and other transitions
    • Speed up time
    • Slow down interaction
    • Show state change
    • Show relationships between objects
    • Focus attention
    • Keep it sane
    • “Cut in half” rule of thumb
    • Control knob approach
  6. React Immediately-Provide a rich experience by using lively responses such as Live Search, Live Suggest, Live Previews, and more
    • Keep the goal in mind
    • Design for relevancy
    • Keep feedback focused
    • Avoid side noise (peripheral distractions)
    • Use laws of proximity in context feedback
    • Respect feedback bandwidth

If you are interested in the subject of interaction design, be sure to read the excellent book by Bill Scott:

A note about dashboard design and using embedded dashboard products: Companies often realize the impact that KPI reporting via dashboard can offer but don’t have dashboard expertise in house. For them, the use of an embedded dashboard for their enterprise applications makes a lot of sense. The dashboard designers have already thought through and solved the interaction design challenges that dashboards can pose.

Leave a Reply