OptimizationWeek.com Website performance news and views™

New book on Website Optimization Secrets

Free Newsletter

Enter email:

Flowing with Yann Arthus-Bertrand

According to some studies, nearly half of us have experienced flow on the Web at some point (Novak, Hoffman, and Yung 2000). Where are all of these flow-inducing sites? Recently I had the good fortune to talk to Yann Arthus-Bertrand, author of the Earth from Above series of books, and he directed me to his web site at YannArthusBertrand.org. Fourty-five minutes later I tore myself away from the screen, having spent all of that time exploring his Flash-based site, completely immersed.

Having worked on the Web since 1993, few sites engross the author. But this Flash-based site captures you and takes you to another place; above planet earth. Your spirit soars as you travel with Yann above our blue planet, with stunning aerial photographs presented in Flash. To see how the designers created flow on the Web, we review this fast-loading and immersive site.

The Bottom Line from the Higher Ups

Essentially, the site utilizes efficient Flash techniques, linear feedback and countdown timers, transitions, and optimized thumbnails to present Yann's photographs. But it does more than that, it immerses you in an interactive experience. Through the subtle use of feedback, transitions, and caching the site feels faster than it actually is. Even at narrowband speeds, Yann's site seems responsive. At broadband speeds it positively flies.

A Virtual Flythrough of Earth from Above

The opening screen of Yann's home page at YannArthusBertrand.org lets you choose one of three languages (see Figure 1).

Click on "Welcome" for the English version and up pops a new window, complete with feedback in the form of a percent-done countdown timer (see Figure 2).

Provide Feedback for Longer Tasks

One of the cardinal rules in good user-interface design is to provide effective feedback for longer delays. Meyers (1985) found that users prefer percent-done progress indicators for longer delays. These can take the form of linear progress bars or countdown timers. According to Dellaert and Kahn (1999), users prefer countdown feedback to duration feedback.

Giving users predictive feedback about the delay reduces uncertainty and stress by allowing experienced users to estimate completion times and plan their next tasks more effectively. Yann's programming team used a clear percent-done countdown timer to give the user reliable feedback about the delay. We'll see this countdown timer code used repeatedly throughout the site.

Wow 'em Up Front

A stunning aerial first appears, then a nine-square grid overlays this image which fades into the background. The grid structure remains throughout the site, neatly fitting "above the fold" into a standard 800 x 600 pixel monitor. It's all Flash and images now, with responsive rollovers. After clicking on the "Photographs" area Figure 3 appears.

The "Photographs" page fades into view, complete with menus. The grid structure remains, just the subject changes.

Earth from Above

Earth from Above is our goal here, and we click on this link. The following screen appears, and we click on "North America" (see Figure 4).

Look closely at Figure 4 under the "Chargement" text. See that thin linear progress bar filling up as the images load? This, plus the dancing arrow keeps you occupied while the North America page appears (see Figure 5).

Code Recycling for Efficient Feedback

Note that the same countdown timer is used on each image (see the bottom of Figure 5). This gives the user reliable feedback on the delay, reducing stress and keeping anticipation high. Clicking on the fall color shot reveals a larger version of the image replacing the four rectangles in the upper right part of the screen (see Figure 6).

Next Stop: Flow State

It all feels seamless. Images appear, disappear, and fade in an out. Click on a picture and you are transported to another place, all from the comfort of your keyboard. It seems like there is no limit to this aerial world. This feeling of depth, the limited stimulus field (the non-scrolling window), the immediate feedback and responsiveness, and the sense of control all contribute to what Csikszentmihalyi calls the flow state (Csikszentmihalyi 1975). People who enter a flow state have an altered sense of time, a loss of self-consciousness, and an autotelic or self-rewarding activity. People in flow tend to be more playful and exploratory, and presumably are willing to buy more of your products and services (King 2003).

The site also lets you go "backstage" to get an idea of how the photographs are produced, with images of Yann and his team in action, along with equipment notes (see Figure 7).

If all of this floats your fancy, you can explore the "Practical Info" section to get information about the world tour where you can see these images in person. The tour will stop in New York this summer.

Conclusion

Creating flow on the Web is a difficult task. Designers that provide effective feedback for longer tasks, and keep you engaged in a playful way can craft a compelling experience. To achieve a flow state a user's trips through cyberspace must feel seamless and responsive. Yann Arthus-Bertrand accomplishes this goal with stunning aerials set in an efficient Flash presentation. The only thing missing is the Vivaldi soundtrack.

References

Arthus-Bertrand, A., Earth from Above: 366 Days (New York: Harry N. Abrams, 2003). Sequel to his Earth from Above: Revised and Expanded Edition, this book shows the earth from an aerial perspective. See the companion site reviewed here and also The Earth from the Air for the UK version and exhibition.

Csikszentmihalyi, M., Beyond Boredom and Anxiety: Experiencing Flow in Work and Play (1975; reprint, with a Preface by Mihaly Csikszentmihalyi, San Francisco: Jossey-Bass, 2000).

Dellaert, B. G. C. and B. E. Kahn, "How Tolerable Is Delay? Consumers' Evaluations of Internet Web Sites after Waiting," Journal of Interactive Marketing 13, no. 1 (1999): 41-54. Found that countdown feedback nearly negates the negative effects of waiting for the web for retrospective evaluations.

King, A., "Flow in Web Design," in Speed Up Your Site: Web Site Optimization (http://www.speedupyoursite.com), Indianapolis: New Riders Publishing, 2003. Fast, well-designed sites with linear feedback for longer waits can actually create a flow state in users.

King, A., "Multimedia: Use Image Stabilization," from Speed Tweak of the Week (Web Site Optimization, LLC: Ann Arbor, Michigan, 2004). Image stabilization creates sharper pictures by damping vibration to avoid motion blur. Gyroscopic stabilizers steady cameras for sharper photographs and videos. Shows Yann Arthus-Bertrand in action.

Meyers, B. A., "The Importance of Percent-Done Progress Indicators for Computer-Human Interfaces," in Proceedings of the ACM Conference on Human Factors in Computing Systems (New York: ACM Press, 1985), 11-17.

Novak, T. P., Hoffman, D. L., and Y. Yung, "Measuring the Customer Experience in Online Environments: A Structural Modeling Approach," Marketing Science 19, no. 1 (2000): 22-42. Found that 47 percent of users had experienced flow on a specific web site.

Scheirer, J., Fernandez R., Klein J., and R. W. Picard, "Frustrating the User on Purpose: A Step Toward Building an Affective Computer," Interacting with Computers 14, no. 2 (2002): 93-118. Using galvanic skin response and blood volume pressure, Scheirer found that random delays can be a cause of frustration with computers.

About the Author

Andy King is the founder of five developer-related sites, and the author of Speed Up Your Site: Web Site Optimization (http://www.speedupyoursite.com) from New Riders Publishing. He publishes the monthly Bandwidth Report, the weekly Optimization Week, the weekly Speed Tweak of the Week, and the WebReference Update. He enjoys aerial photography and viewing the earth from above.

Disclaimer

Any trademark or tradenames used in this article are owned exclusively by their owners and they do not endorse or sponsor this site. Optimization Week and the author are not affilliated with Yann Arthus-Bertrand in any form, and we do not endorse his company. All opinions expressed herein are based on information that we believe to be reasonably accurate at the time of publication. If you find any errors or misstatements of fact please contact us.

Copyright © 2003-2020 Website Optimization, LLC - Try our new conversion rate optimization service, and free website speed test Local Dumpster Rental | Sleep Supplment
Last modified: November 09, 2004