The art of prototyping

XIII.1 January + February 2006
Page: 14
Digital Citation

The Excel Story

Nevin Berger

back to top 

It is not very often that we are introduced to a new tool to use in prototyping that does not involve having to purchase or learn a new application but merely relearn one we already know. However I was introduced to such a tool for which I was able to develop a new and useful way of creating compelling and interactive prototypes.

Excel was first presented to me as a software prototyping tool while I was working at PeopleSoft as a senior interaction designer in the User Experience group. I was assigned to an ongoing project that was already well into the early stages of design. While getting up to speed, I was given some printouts of prototypes of the current state of the design to review. In graphically representing the PeopleSoft user interface, the look of the prototypes was clean and accurate, even if they were a bit rough around the edges. But keeping in mind that this was the early stage of the design process, the prototypes fulfilled their purpose. While reviewing them I could not figure out what program they had been built in. When I asked for the original prototypes, I was sent an Excel file. This caught me off guard; I had always thought of Excel as the preferred program of accountants and managers working on budgets, not a program from which to build prototypes. I did not know how to use Excel very well and had no time to learn with the accelerated development schedule for this project. I was left to review the prototypes made by the lead developer, penciling in recommendations to the group. I did notice that no matter how quickly the changes were sent in, new corrected prototypes were quickly turned around and delivered to me. I have always prided myself on being able to quickly turn around changes, so I was impressed with the agility and speed with which these prototypes were generated. I made a mental note to find out more about prototyping in Excel when I had the chance.

The early iterative design phase of the project was nearing its end, where most of the pages had been sketched out. It then became my job to convert them to Dreamweaver, as was our process at the time. I gathered up the latest printouts of the prototypes and spent about two weeks rebuilding them in Dreamweaver. When I had finished, I sent them to the lead developer for review. I received a very courteous note back that thanked me for the attractive prototypes, but in the time that it had taken me to build them, many of the designs had evolved and my prototypes were moot at this point. I groaned thinking about how much work it was going to take to update them and maintain the Dreamweaver files. I compared the new Dreamweaver prototypes with the current Excel prototypes and realized that there wasn't much benefit in continuing to use Dreamweaver. So I decided to abandon my Dreamweaver endeavors, and I merely proofed the Excel prototypes that were still being turned around on a daily basis.

Soon after my involvement with the project ended, I decided to find out more about using Excel for prototyping. The lead developer of the project had come up with the idea of using Excel as a simple way to visualize his ideas and present them to his group. He gave me a 15-minute explanation on how he used it. I can only explain that as he talked to me and I saw how really simple it was, it was like a light going on in my head, and I just instantly "got it."

back to top  Developing a System

After my initial introduction to Excel prototyping, I quickly realized that many of the features could support not just a robust prototyping tool, but a total prototyping environment. The grid makes alignment of art and text a snap; the tabbed pages can easily house a large number of designs. Using the hypertext feature as a means to mimic linking between pages gives an interactive feel. The idea of a complete prototyping environment becomes possible with all the pages in one interface inside the application. Everything that a person needs to create a prototype for a given site would be included. I then went about building one for PeopleSoft that I called the Excel template. First there were the graphics. I knew that I couldn't capture all the graphics that PeopleSoft supported, but in my experience there I found that ten percent of the graphics are used 95 percent of the time. I dedicated a worksheet page to become the image library. By simply copying and pasting graphics from established pages or art folders I was able to quickly gather enough images to cover my needs for the most common pages generated. For some graphics—like logos and headers that are common to all pages—I captured them wholesale, cut the parts I needed, and saved them.

I also created worksheets with common buttons. Some were merely captured graphics, but others were made by coloring and adding borders and text to table cells. I also created pages containing the different configurations of tabs that were used in PeopleSoft applications. I then created the base page that could house the element that I had put in the template. It had the colors, grid dimensions, and type specifications that were part of the PeopleSoft design guidelines. From this base page I could build any standard PeopleSoft page. What made the creation of the pages so simple was the "lowly" copy and paste feature. With the grid in the background, art, text—even whole pages—can be copied then pasted into other pages with pinpoint accuracy. So with all the elements I needed to build pages I could quickly assemble anything I needed.

back to top  The Test Case

I had taken my Excel template and was showing it to different groups within PeopleSoft trying to show how it worked. There had been interest from developers who were already experts in Excel that saw it as a way for them to visualize their design ideas without having to use HTML (which they hated) and Microsoft Paint (which they found difficult to use). Some members of the user experience group quickly saw the use for this new approach and adapted it to their work. But many were a bit put off by the fact that it was Excel and didn't open up to the new idea. I had been using Excel in my own work when I was drafted into the "Dream Team." It was a project that one both wants to be on and dreads at the same time. It was a major redesign of an existing project on an extremely tight deadline. The directive came from on high, so it would have a great degree of visibility, leaving little room for error. I was called into a meeting early in the project, where we discussed some ideas that needed to get prototyped and turned around quickly: It was late Thursday afternoon, and the prototypes needed to be delivered by Monday. The developers were on the hot seat. There was a general moaning over the loss of a weekend, but the real concern was that it simply could not be done. I then offered the use of the Excel template as a means to get the job done on time. There was interest in what I had to offer, and so an hour meeting was set up for 8 a.m. the next morning. I prepared my usual one-hour demonstration to the developers, many of whom doubted that I could help them but were compelled to come by the boss's presence. About halfway through the demonstration, the meeting seemed to be breaking up. The vice president of engineering stayed and we talked. What had happened was that they "got it." No more explanation was needed, and they were ready to start using Excel. I was asked where they could get a hold of the template. I was soon assigned to another project, but the vice president of engineering made sure to stop by and thank me, letting me know that with the Excel tool they were able to make that deadline.

back to top  References

Mackay, Wendy E. et al, Video Artifacts for Design: Bridging the Gap Between Abstraction and Detail, Proceedings of DIS `00, Brooklyn, NY: ACM, 2000

back to top  Author

Nevin Berger
Ziff Davis Media

About the Author:

Nevin Berger is currently the design director at Ziff Davis Media in the Internet group. His varied experience includes working for PeopleSoft,, World, and ZDNet. This year he was a co-leader in a lecture series sponsored by Human Factors International that took place in India (Mumbai and Bangalore)—Effective Prototyping: Cheap and Fast Tools for Creating Product Visualizations. Berger has a Masters of Fine Arts degree from Stanford University.

back to top  Sidebar: It's All About the Template

The cornerstone of the success of Excel as an effective prototyping application is the development of the template. It takes Excel beyond being a simple graphical solution to becoming a complete solution for creating prototypes, supporting font styles and graphics, and general design standards within a design team or company. The key to the template is the workbook feature of Excel, where individual tabbed pages within the workbook contain different elements needed for prototype production. When the prototype is being built with the template, everything needed to complete the designs is in the workbook along with the designs themselves.

Some of the pages included in the template for PeopleSoft are the Image Library, Tabs Curved page, and what I called a Basic page. The Image Library (Figure 1) is a collection of the most often used images/graphics from the PeopleSoft application pages. It doesn't include all the images that are used at PeopleSoft——only the most common. The image library becomes an easy way to access graphics needed to build most prototypes.

Another page from the template is the Tabs Curved page (Figure 2). It has standard examples of how tabs are used across PeopleSoft pages. The tabs are only partially made up of graphics; the body of each tab is a colored table cell. In this way the text can be typed into each tab. It is a simple matter of taking the tab row that is appropriate for the page being designed and copying and pasting it into that page.

A third page that was an important part of the template was the Basic page (Figure 3). It was built as a starting point for most of the pages to be built. It contained a graphic header, which would be common to all pages, and the page itself had an invisible grid background that supported the design grid and page proportions found in the style guidelines. From fonts to how numbers are expressed is integral to how this page is built, so that anyone working on a design starting with this page will be using the correct styles. The page uses common elements found in many PeopleSoft applications that can be used as a starting point or deleted if the designer wants to start with a blank page.

Using all the different template pages, a designer could put together very convincing and effective prototypes (Figure 4). Having all the elements accessible within template made updating and adding new pages quick and easy.

F1-1Figure 1. The image library

F1-2Figure 2. Tabs Curved page

F1-3Figure 3. The Basic page

F1-4Figure 4. The prototype

back to top 

©2006 ACM  1072-5220/06/0100  $5.00

Permission to make digital or hard copies of all or part of this work for personal or classroom use is granted without fee provided that copies are not made or distributed for profit or commercial advantage and that copies bear this notice and the full citation on the first page. To copy otherwise, to republish, to post on servers or to redistribute to lists, requires prior specific permission and/or a fee.

The Digital Library is published by the Association for Computing Machinery. Copyright © 2006 ACM, Inc.

Post Comment

No Comments Found