|Home Sitemap Issues About Contact|
New book on Website Optimization Secrets
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.
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.
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).
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.
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 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).
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).
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.
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.
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.
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-2013 Website Optimization, LLC - Try our new conversion rate optimization service, and free website speed test
Last modified: November 09, 2004