Last week at the Design Matters meeting in Osaka, web guru, Sean Schertell, gave a wonderful one-hour presentation on intuitive web design. Sean, co-founder of DataFly.Net WebServers, told me that was his first time to give a talk in front of a large group. The presentation had the appropriate content and was delivered with clarity, good pace, clear examples, and good humor. The visuals served to illustrate his points and clarify his examples.

What made the presentation itself so smooth was that Sean had clearly planned ahead and did a lot of work to design slides that logically progressed through a story, a story that he was telling. It was very clear that Sean was not narrating slides. Instead, as Sean made his points, appropriate visuals and animation supported — but never dominated — his talk.

To illustrate examples of the degrees of frustration people may feel when navigating a website, Sean did something interesting: Instead of leaving the slideware and navigating on the web live (which would require him to look at the computer while the audience looked at the screen) he simply showed previously recorded video captures of his mousing around the pre-selected websites. This allowed Sean to maintain his connection with the audience as he explained what he was doing while navigating. Of course, he was not actually navigating live, but he did such a great job of synchronizing his talk with the visuals that it almost seemed that the mouse was reading his mind. The "movies" of the website navigation were created with Snapz Pro X screen capture, an extremely useful utility. Check out the demos of Snapz Pro X.

Since Sean inserted video captures and stayed within the slideware (Keynote in this case), he was also able, then, to construct an animation of a sort of "irritation scale" which appeared on the left of the screen. The longer the navigation took, the more yellow dots appeared in the scale to demonstrate the increased level of user frustration.

In slideware, you can easily have a movie playing while a series of animations take place on screen simultaneously. All Sean had to do was set the yellow dots (single objects) of the scale to appear at the appropriate time using the "Start Animation Automatically xx seconds after previous event" option, depending on the slideware you use.

Sean made it look easy. But just as professional musicians or athletes make their efforts look "easy" through careful preparation, Sean's presentation appeared so smooth because he put quite a bit of thought and planning into it before the actual presentation day. And for the audience, the technological techniques used were essentially invisible allowing them to simply follow the "digital story" before them. Below are a few sample slides from Sean's talk.

The slide on the left (click for larger view) features a screen capture QT movie of a 30-second "mouse around" on the Honda website. The increased frustration the navigator feels is illustrated by the growing number of yellow dots over time to the left. The slide on the right displays a video screen capture of the Toyota site, which proved to be a less frustrating navigating experience.

Above you can see how to set animations in both Keynote (left) and PowerPoint (right).

In many cases, it is better to demonstrate software by actually going into the actual application, of course. But there are times when you just want to illustrate a quick feature or two — or maybe briefly show how to use the shopping cart on your company's website — as part of a larger presentation. In those cases, it may be better to pre-record those web/software demos and insert them into your slideware. It will look the same to the audience and will allow you to keep your eyes on the audience, connect, and tell your story.