Part III. Stay on the Page
Flow
In the book, Flow: The Psychology of Optimal Experience, published by Harper Perennial, Mihaly Csikszentmihalyi describes the state of “optimal experience” as the times when people enter a state of concentration so focused it creates a state of effortless control. Athletes may enter into flow and report the feeling of unself-consciousness as well as rising to the peak of their abilities. Flow, however, can be broken by a sudden awareness of the surroundings or by some interruption that happens to come along.
Unfortunately, users of our web applications rarely experience this level of happiness. In fact, the traditional web experience is punctuated with a page refresh each time the user chooses an action. It’s like watching a play where the curtain comes down between each line of dialogue. The page refresh creates an artificial break in the action—or a break in the user’s flow.
Change Blindness
The break can cause visual consequences as well. I recently took some of my children to the Exploratorium in San Francisco (a wonderful hands-on science museum for all ages). An exhibit that caught my eye was the one demonstrating change blindness.[22] A large screen displayed an image of a store-front typical of those seen in most urban areas, complete with awning, windows, doors—all of a distinctive style. Then suddenly a new updated image of the store-front replaced the original one. The new image had a slight change from the original. However, try as I might I could not detect the change. Why? The transition was punctuated by a very brief (less than a fourth of a second) delay. Showing the original image, going blank, then showing the second image made it really hard to detect the change between the two.
Wikipedia describes change blindness as:
In visual perception, change blindness is the phenomenon where a person viewing a visual scene apparently fails to detect large changes in the scene.[23]
Fortunately the exhibit included a button to press that removed the “page refresh.” When I held down this button, the change was obvious.
Including the page refresh in web applications was not the desire of web designers but rather an artifact of the technology underlying the Web. Each action generated a request for a new page, which included the refresh break. With this limitation, the ability to provide a seamless flow-based experience with continuous visual perception to the user was almost impossible.
However, this is no longer the case. We now have a button we can hold down! With the rise of Ajax, Flash, and other new technologies, it is possible to perform actions and bring back results for those actions while remaining on the same page and disturbing none of the surrounding context.
The principle Stay on the Page gets at the idea of creating a continuous visual perception that enhances flow nirvana. Given the history of the Web, it is important to always ask ourselves, “Can we create this experience in context, within the current page?” Sometimes, though, we may answer these questions with a “No.” That can be OK. It is important to realize that there are times when switching the page makes more sense than staying within the page. We will explore these situations in the next few chapters.
In Chapter 5 through Chapter 8, we look at four ways to keep the user on the page:
- Overlays
Instead of going to a new page, a mini-page can be displayed in a lightweight layer over the page.
- Inlays
Instead of going to a new page, information or actions can be inlaid within the page.
- Virtual Pages
By revealing dynamic content and using animation, we can extend the virtual space of the page.
- Process Flow
Instead of moving from page to page, sometimes we can create a flow within a page itself.