A man walks into a study carrying a book-sized object under his arm. He lays the object on the desk, opening it up to reveal a wide flat panel screen encased in a plastic shell with a camera port and a speaker grill.

Knowledge Navigator Open

After a moment, the screen comes alive with the image of a bow tie wearing avatar reciting the man's schedule and informing him that his mother called to remind him of his father's birthday party. (He's in charge of picking up the cake.)

Knowledge Navigator Desk

The man quickly dismisses the update and quickly settles down to his main priority: preparing this afternoon's lecture on rainfall trends in the Sahara. Requesting the avatar to pull up recent data from several university libraries, he seems to quickly become engrossed in a touchscreen-enabled, interactive visualization of rainfall trends mapped over the African Continent, all displayed on the bright, full-color, high resolution LCD display.

Knowledge Navigator Africa

Demonstrating increasing curiosity in the data, the man asks the avatar to contact a colleague at another university. After a few moments, the avatar informs the man the colleague is on the line and connects the two through a live video chat capability.

Knowledge Navigator Conference Call

It becomes obvious the two colleagues are old friends, but their chatter quickly turns to the subject of comparing research. Turns out the colleague has found similar rainfall patterns over the South American Amazon region. Investigating a simultaneous geo-information visualization of the two regions, the two decide they've hit upon something worth reporting, so much so the colleague requests a copy of the man's data for an upcoming lecture she's giving.

After a quick exchange of thanks, the chat session is disconnected. The man directs the avatar to send the data to the colleague and the avatar informs the man his mother called during the chat to remind him to pick up the cake. This causes the man, seeming still engrossed in his scientific findings, to absently dismiss the avatar, grab his sweater, and leave the study.

The Knowledge Navigator

Notebook-sized computers sporting video cameras, stereo sound, high-resolution LCD displays, video chat, voice command-and-control, and wireless network capabilities are not novel by today's standards. In many ways, the scenario is similar to experiences people regularly have today.

The team at Apple, inspired by the work of Alan Kay's Dynabook project, decided to imagine what computing could be like in 2010. They created this video, a 4-minute enactment, that would demonstrate their vision.

By today's standards, the technology showcasedin the video isn't very impressive. However, by 1987 standards, it could only be imagined. In that period, screens were 640x480 with 256 colors, video and high-quality audio were unheard of, and local-area networks, battery-powered notebooks, and an internet connecting the world were only just beginning to make an appearance in research labs. Tablet computing, wireless technology, and voice commands were still ten years away. Touchscreen interactions are just now coming into serious consideration. (The video's technology was so impressive that within a week Apple had received a purchase order for a unit from an impatient customer.)

What was most impressive about this envisionment wasn't the advanced technology they predicted. Nor was it the seamless experience of the professor, who quickly employed all these tools to focus on his lecture presentation without much distraction.

The most impressive aspect of the envisionment is how it guided Apple's design direction for the subsequent twenty years. In 1991, 4 years after the envisionment's release, Apple produced its first notebook computer, the Powerbook 100. A few years later, they introduced the Newton, predecessor to today's tablet PCs. The Knowledge Navigator has inspired Apple's high-powered desktop computers and today's MacBook Pro, which features the built-in audio and video capabilities sported in the video's device. We can easily see the iPhone as a next step in this same technology vector, sporting multi-touch and high-resolution internet capabilities.

Focusing on the Ideal

Apple, a hardware and software company, could easily have focused their efforts demonstrating their core talents: explaining how they'd build such a device. Yet, such a technological focus would only prove to confuse their message.

Instead, the team at Apple focused the viewer's attention on the professor's experience. How ideal would it be to quickly bring up sophisticated data models, instantaneously connect with a friend, share the same views of the data, have your computer act as your administrator, managing your calendar and taking your messages? In the crude days of PC computing (WordPerfect, Lotus 1-2-3, and Dbase were the top-selling software packages of the day -- none known for their ease-of-use), this vision of an experience was awe-inspiring.

A successful envisionment focuses the viewer on the ideal experience. It clearly points out the difference between the way things are done today and the way they could be in the future. This helps the team know the direction they should take.

Showing Before and After

Apple's video didn't show the current state of technology. That's because among the people expected to view the video, PCs were already an every day part of their lives. The development teams and customers Apple hope to inspire lived with frustrating technology every day.

When creating an envisionment for an experience the viewer may currently be unfamiliar with, it's common to also start with a how-it-is-done-today segment. In this portion of the envisionment, the creators would demonstrate the frustrations found from today's experiences, to give the viewer something to contrast with the how-we'd-like-to-see-it-done ideal version. Envisionments with this before-and-after approach often prove to be successful at guiding teams who don't live the user's day-to-day experiences.

A Compelling Story

To get the viewer engaged in the vision, the Knowledge Navigator team created a compelling scenario, giving the story a sense of reality. Granted, the professor and the avatar was a little overacted. (Did the avatar really need to adjust his bow tie when the pretty colleague's video image arrived?)

Yet, the story was complete with subtle complexities: being last minute in preparing the lecture, the sense of style of the professor's den, the upcoming birthday party, the discovery of new data, the friendship between the colleagues, the indifference to the avatar, and the nagging nature of the mother. These lent an air of realism to the story line -- life is complex and we often have to juggle multiple things at once. How can technology help with that complexity?

These story elements were not accidental. They were all derived from careful research conducted by the Apple team.

Pulling from field study data, teams can create scenarios closely matching the challenges users face. All of us face challenges in our lives and, if we chose them correctly, we'll adopt empathy for the character and their plight.

Time-proven literary devices, such as the road trip (where the hero character embarks on a journey to facilitate a change in their world-view -- in this case, the professor journeys into the library data to realize a new trend), can help the envisionment creators produce a story line that draws in the viewer. Stories don't have to be long (Apple's is only 4.5 minutes), but they do need a setup, a transition, and a conclusion, just like other stories.

In a cell phone envisionment produced by Nokia, called the Nokia 888, the team uses a simple girl-meets-guy story line to demonstrate the features of a wrist-strap style of phone technology.

Nokia 888

Like the avatar in the Knowledge Navigator, the phone plays the role of a minor character, as the heroine decides to accept the attention of a dashing suitor.

Nokia 888

Like the Knowledge Navigator video, Nokia's team has done a good job of showing the complexities of the situation and how the technology plays a role, without it dominating the story.

Nokia 888

The story is what keeps the envisionment from just becoming a list of desired features. It shows the context where the design will live and how the design will improve the experience for the user.

A Simple Presentation Format

Apple chose an expensive production format for their envisionment. It's a professionally produced and directed video. They carefully chose their set, cast the roles of the actors, and added expensive computer-generated graphics. Because of the high-profile nature of this work (it was used to inspire Apple employees, customers, and shareholders, demonstrating what made Apple different from other PC manufacturers of the day), it's not hard to justify the high-end production costs involved.

However, most envisionments do not need such expensive production qualities. Much simpler and less expensive techniques will produce the desired effect of helping the team get on the same page and inspiring them to produce an improved experience.

The Nokia 888 video used a less expensive technique of a single-frame montage. By showing quick still images of the heroine, we use her expressions and body language to replace the dialogue found in the Knowledge Navigator video. It would be easy to make a similar video with a digital camera and low-end movie editing software.

There are many creative techniques for rendering the vision. Using simple stop-motion animation, it would be easy to imagine a vision in the style of Lee Lefever's "In Plain English" videos. Lee created these videos to demonstrate Web 2.0 features simply, but the technique could be adapted simply to demonstrating both the existing scenario and the ideal experience.

Lee Lefever

Lee Lefever

Lee Lefever

We've been fond of using comic strips for demonstrating these thoughts. Using characters not more advanced than stick figures, we've found it easy to represent experiences. Alternatively, you could choose an approach like Yahoo's Kevin Cheng, who draws scenes using something looking like a more traditional comic strip.

When choosing a presentation format, you'll want to choose the technique you'll find easiest to work with. As long as the final product tells the story of user's ideal experience, you'll produce a successful envisionment.

Want to Learn More?

If you find this article interesting, you'll definitely want to attend UIE's Roadshow Secrets Behind Designing Great User Experiences. A full-day workshop, based on 10 years of UIE's extensive research, that will deliver new insights and inspire your team to create the best user experiences.

Send us your thoughts on this article on the UIE Brain Sparks blog.

 Share this article with a friend/colleague.

Join over 25,000 subscribers to UIEtips, our free email newsletter


  • Original articles by Jared Spool delivered to your inbox
  • Podcasts that help to improve your UX skills
  • UX Insights from the brightest minds around
  • Awareness of all things UIE