#3 Flow

The Lens of Flow

Running Out (by zetson)

The mental state in which a person becomes fully immersed in what he or she is doing is called flow. It creates a heightened state of mental focus.

It is important to minimized disruption to flow.

To ensure that you are not unnecessarily breaking the user’s flow ask yourself these questions:

  • If there are screen or page transitions are they natural to the flow?
  • Is every dialog/overlay/communication absolutely necessary?
  • Can the experience be contained in a single page/screen or context?
  • Is there a way to create persistent contexts that travel with the user?
  • Are there minimal ways to communicate state change without switching user context?
  • Does your interface employ inferences to amplify the user’s efforts?

The next to the last question above asks if there are “minimal ways to communicate state change without switching user context”. Yahoo! Photos ran into this problem when dragging photos to an album. After dropping photos onto an album a dialog pops up to confirm this is the action the user intended. Then a second dialog pops up confirming that the photos indeed were added to the album.

From Yahoo! Photos; Idiot boxes break the user’s flow.

Both of these dialogs interrupt the user’s flow (the user was busy organizing) and first asks a stupid question and then confirms obvious results. This is yet another Anti-Pattern I call Idiot Boxes. The idea of the Idiot Box is based on Alan Cooper’s principle: Don’t stop the proceedings with idiocy. If the next to the last lens question had been answered it could have prevented this problem. There are more subtle ways to communicate that the photos were added to the album. For instance, the album could have highlighted on mouse hover. And an indicator next to the album could indicate how many photos are inside, incrementing after the drop. Additional subtle interactions like these would eliminate the need to break flow to state the obvious. By answering the lens question, and taking care of nuance first would prevent the experience from breaking the user’s flow.

Sites that simplify the process of checking out can keep the user in the flow and along the way improve conversions, purchases, etc. An example of this is Whitestone Cheese. The experience is kept to a single page. Users can add cheese to the cart which is visible on the right side. The experience is not interrupted with unnecessary page transitions (note: there are times when page transitions are needed).

Whitestone Cheese Single Page Checkout (by Designing Web Interfaces)

From Whitestone Cheese; Single page checkout maintains flow.

Leave a Comment

Trackback URL