Read an Excerpt
EFFECTIVE PROTOTYPING WITH EXCELA Practical Handbook for Developers and Designers
By Nevin Berger Michael Arent Jonathan Arnowitz Fred Sampson
Morgan Kaufmann PublishersCopyright © 2009 Elsevier Inc.
All right reserved.
Chapter OneDEVELOPER'S DILEMMA
In this chapter you will learn
* A case study
* The benefits of using Excel [R] for prototyping
* The productivity and collaboration opportunities
* Our goal in creating this book
If you are eager to dive immediately into Excel prototyping, skip ahead to the "How to create your first Excel prototype" section of Chapter 2, on page 16.
A Case Study
In an unnamed software company, long ago and far away, a developer learned that his product was going to have little access to the company's user interface design resources. This meant that he received no help with the design—only random, ad hoc advice from product stakeholders. The developer was concerned about his product's usability. He did not want to see his efficient coding wasted on a less than optimal user interface design. He heard that some user interface designers had set up a stealth prototyping service to assist developers who needed some unscheduled and unbudgeted help. How such a thing was possible he didn't know or care; he needed their help.
In desperation the developer went to the designers' Friday office hours. He thought he would need a whole day to mock up a prototype based on the functional requirements he had received. He was disappointed to hear that he would have only an hour of the designers' time and could not imagine that he might walk away with anything that resembled a codeable prototype.
At the prototyping office, the two designers explained that they would develop the prototype together; he would get enough direction so that he could do the rest himself. He could not believe it, but what could he do? He did not know any prototyping tools, nor did he have the skills to use such tools.
Much to his surprise, the designers opened Microsoft Excel and used a template file to implement his designs. The file looked like nothing he had ever seen in Excel before. The spreadsheet grid was changed into a layout grid, and the worksheets resembled software window layouts rather than spreadsheets. He learned in the session how, by using only copy and paste commands, the designers could quickly create his basic window layout. In fact, within the hour the two designers finished the work he needed and gave him an Excel file with his designs.
Back at his own office, the developer was satisfied with the results until he realized that there were some functions that had been neglected. At first he thought he had to wait until the next Friday for another appointment with the designers. But when he opened the Excel file and realized that, because he had used Excel before to create spreadsheets, he was very familiar with the software's features. With no more training than that short session with the designers, he started to add the missing functionality.
Within the Excel file he found worksheets with the widgets and buttons he needed and even a worksheet of instructions. He found it easy to copy buttons and to add fields and text. He made a few mistakes, but CTRL-Z always undid them. In fact, he learned, as with normal Excel use, that CTRL-Z undid and CTRL-Y redid multiple steps. This allowed him to make changes, back up, and go forward to compare his changes before committing to them. No one taught him this prototyping technique; he stumbled on it by exploring the skills he had already learned with Excel for creating spreadsheets.
After what he thought of as playing around, he realized that he had put the finishing touches on his prototype and had something to show product management. Without thinking about it, the developer became an Excel prototyper and had produced a good enough prototype of his application screens within an hour.
This book will share with you this developer's experience with the simplicity and ease of Excel prototyping. Having worked in many companies and seen how using Excel as a prototyping tool helped designers, developers, and product managers better express their requirements, we feel that we have the experience with Excel prototyping to empower you as well.
This book is about how to prototype with Excel (or another spreadsheet application with similar functionality).
This book will also touch lightly on the larger topic of prototyping. Although the book does not attempt to completely cover the topic of prototyping, it will discuss prototyping as it relates to prototyping with Excel. For a comprehensive discussion on prototyping, we refer the reader to our first book, Effective Prototyping for Software Makers.
Excel is an amazing prototyping tool. It is amazing because it is the only tool we know that combines these advantages into a single tool:
* Prototyping flexibility
* Efficiency and ease of use
* Professional results
* No special skills required
* Readily available
"Using Excel for prototyping? I don't get it!"
This is a common reaction from people when we first try to describe prototyping with Excel. The concept is far from what you use Excel for in your daily work. For some it is like claiming that their washing machine can mow the lawn. People cannot visualize how it can be done until they see it.
When you look at Excel, you probably just see a spreadsheet; you just can't think outside the table cell. To understand Excel as a prototyping tool, you will have to step out of the mental model that says Excel is only a spreadsheet application. This book will show you how.
As a prototyping tool, Excel is not only easy to use, it is quite flexible for the various methods of prototyping. You can create static screen wireframes, screens with click-through interaction and navigation, and even prototypes that can be optimized for different types of usability testing.
To illustrate what we mean, the following images are prototypes created in Excel. You can experience these prototypes for yourself by visiting the book's Website and downloading each of these examples as native Excel files: www.effectiveprototyping.com/ep_excel/.
An interaction flow diagram in Excel, which might be the most basic visualization of a software concept, is illustrated in Figure 1.1.
A storyboard is a narrative prototype, usually created in the early stages of the software-making process, to articulate business and marketing requirements in the form of a usage scenario or story. These stories narrate the user actions needed to perform tasks as specified by marketplace, customer, and user requirements. These requirements are interpreted into a scenario before the storyboarding process begins. Because requirements drive the storyboarding process, they provide early insight into what users, the software, and the system are meant to do in conjunction with each other. The primary goal of a storyboard is to align the design team's thinking to the goals and behaviors of the software, regardless of the screen design.
Figure 1.2 is an example of a storyboard in which an interactive narrative is shown through text and images. The user interface design embodied in an Excel prototype reflects this narrative as you click from one screen to another, with each screen contained in a worksheet.
A wireframe is a narrative prototype, usually created in the beginning of the design process. The narration is usually derived from a use case or scenario, often the same scenario used in a storyboard. This prototype shows flowcharts, high-level sketches visualizing conceptual assumptions about the product structure and general interaction. The primary goal of this method is to get a design team to agree on basic concepts.
Figure 1.3 shows a rough wireframe of a Website that was created in minutes. This tool allows functional and rough conceptual issues to be separated from the detailed, more precise designs that should come later.
Figure 1.4 shows a medium-fidelity wireframe that evolved from the rough wireframe shown in Figure 1.3. The design of a medium-fidelity wireframe can help establish a visual design direction. It can also show a more evolved concept that includes interaction. As a result, stakeholders get a better idea of the design commitment without your prototyping a finished product.
Figure 1.5 shows a similar design to the previous two figures but with higher visual and content fidelity, to serve as the specification.
A paper prototype is an interactive prototype that consists of a paper mockup of the user interface. The interface represents a fully functional interface that allows you to usability-test a design. The intended audiences are targeted users who test the design and the software makers who use the prototype as a means to implement the software.
Digital Interactive Prototypes
A digital interactive prototype is a digital version of a paper prototype. Interactive prototyping shares the same objectives as paper prototyping; that is, they can both be used to
* Understand task flow and context of use
* Validate assumptions in scenarios, requirements, and user profiles
* Shape task sequencing and interaction design direction
* Evolve prototypes from early rough sketches to the next level of detail
* Validate a visual design direction
Figure 1.6 shows that Excel can also be used to create interactive prototypes of list-driven products such as email clients.
Figure 1.7 shows that Excel can also be used to prototype interactive business software. Notice the drop-down list, which was activated by a user clicking on the menu button.
Excel can also be used to prototype a range of designs, from Windows applications to AJAX-enabled Websites. Figure 1.8 (page 14) shows an example of a Windows application prototyped in Excel.
Efficient and Easy
By using Excel, the user can quickly and easily create user interface prototypes. The results are both quick and professional looking. We know of few other tools that offer this level of quality for a minimum of effort. Nearly all the effort involves using features that you probably already know: cut, copy, paste, cell formatting, and so on.
Regardless of the level of prototyping, Excel's adapted layout grid ensures that you get professional-looking layouts. Field alignment and spatial distribution have never been easier. Applying company colors and graphics can also be automated, allowing you to leverage the work of professional designers in your company to achieve professional-looking results.
No Special Skills Required
Prototyping in Excel requires only the use of basic desktop and Excel functionality. You can create forms, tabs, and tables using simple cell formatting. You can create 3-D borders for buttons or input fields simply by using cell borders. Field length can be changed via drag and drop or copy and paste. The only mental shift required is to stop thinking of the Excel grid as a spreadsheet, instead thinking of it as a graphics layout grid.
If you want your prototyping process to empower your software makers, you need a tool that everyone can use. Excel is a readily available tool; it is frequently included on business computers. For the few of you who don't have Excel, there are alternatives such as OpenOffice, available for free, that put 90 percent of the techniques from this book to use, although some commands will differ.
Still Not Convinced?
As we start to explain the process of prototyping with Excel, you will eventually understand how it is done. The figures in this chapter help, but you might need some quick, hands-on experience, which we cover in the next chapter.
At our tutorials and seminars at PeopleSoft, Ziff Davis Media, Google, and SAP Labs, we encountered the same doubt. After our demonstrations, the results were the same at all these venues: Excel became an important tool in the audience's prototyping toolbox. This is not to say that Excel is the essential tool; Excel does not fulfill all prototyping needs. But for basic wireframes and digital interactive prototypes, Excel is an efficient tool you will not want to be without.
Who Should Consider Using Excel?
This book is for anyone who needs to prototype an interface for desktop software or the Web. It is intended not only for designers but for anyone who is part of the soft-waremaking process. Software makers include the full range of participants, from people with extensive graphics experience to those with little or no graphics background.
Excerpted from EFFECTIVE PROTOTYPING WITH EXCEL by Nevin Berger Michael Arent Jonathan Arnowitz Fred Sampson Copyright © 2009 by Elsevier Inc. . Excerpted by permission of Morgan Kaufmann Publishers. All rights reserved. No part of this excerpt may be reproduced or reprinted without permission in writing from the publisher.
Excerpts are provided by Dial-A-Book Inc. solely for the personal use of visitors to this web site.