Effective Prototyping for Software Makers (eBook)

Michael Arent, Jonathan Arnowitz, Nevin Berger (Autoren)

eBook Download: EPUB

2010 | 1. Auflage
624 Seiten
Elsevier Science (Verlag)
978-0-08-046896-9 (ISBN)

Infos

Effective Prototyping for Software Makers is a practical, informative resource that will help anyone-whether or not one has artistic talent, access to special tools, or programming ability-to use good prototyping style, methods, and tools to build prototypes and manage for effective prototyping.

This book features a prototyping process with guidelines, templates, and worksheets; overviews and step-by-step guides for nine common prototyping techniques; an introduction with step-by-step guidelines to a variety of prototyping tools that do not require advanced artistic skills; templates and other resources used in the book available on the Web for reuse; clearly-explained concepts and guidelines; and full-color illustrations and examples from a wide variety of prototyping processes, methods, and tools.

This book is an ideal resource for usability professionals and interaction designers; software developers, web application designers, web designers, information architects, information and industrial designers.

* A prototyping process with guidelines, templates, and worksheets;
* Overviews and step-by-step guides for 9 common prototyping techniques;
* An introduction with step-by-step guidelines to a variety of prototyping tools that do not require advanced artistic skills;
* Templates and other resources used in the book available on the Web for reuse;
* Clearly-explained concepts and guidelines;
* Full-color illustrations, and examples from a wide variety of prototyping processes, methods, and tools.
* www.mkp.com/prototyping

Jonathan Arnowitz is a User Experience Architect at Google Inc. and is the co-editor-in-chief of Interactions Magazine. Most recently Jonathan was a User Experience Architect at SAP Labs and was a Senior User Experience Designer at Peoplesoft. He is a member of the SIGCHI extended executive committee, and was a founder of DUX, the first ever joint conference of ACM SIGCHI, ACM SIGGRAPH, AIGA Experience Design Group, and STC.

Inhalt

Front Cover 1
Effective Prototyping for Software Makers 6
Copyright Page 7
Dedications 8
Table of Contents 10
Acknowledgments 28
Preface 30
CHAPTER 1 WHY PROTOTYPING? 42
What Is a Prototype? 42
An Historical Perspective of Prototyping 43
Leonardo da Vinci: The Thinking Man’s Inventor 44
Thomas Alva Edison: Inventor Prototyper 45
Henry Dreyfuss: Designer Prototyper 47
The Purpose of Prototyping Software 48
Will the Design Work Properly? 49
Can the Design Be Produced Economically? 50
How Will Users and Other Stakeholders Respond to the Design? 51
Which Approach Can Be Taken to Get From Concept to Product? 53
How Can Prototyping Support Product Design Specification? 54
How Can Prototyping Contribute to Better Product Scheduling and Budget Planning? 54
Summary 55
References 57
CHAPTER 2 THE EFFECTIVE PROTOTYPING PROCESS 60
Phase I: Plan (Chapters 3–5) 60
Step 1: Verify the Requirements (Chapter 3) 61
Step 2: Create a Task/Screen Flow (Chapter 4) 61
Step 3: Specifying Content and Fidelity (Chapter 5) 61
Phase II: Specification (Chapters 6–8) 61
Step 4: Determine the Right Prototyping Characteristics (Chapter 6) 61
Step 5: Choose a Prototyping Method (Chapter 7) 62
Step 6: Choose a Prototyping Tool (Chapter 8) 62
Phase III: Design (Chapters 9 and 10) 62
Step 7: Formulate Design Criteria (Chapter 9) 63
Step 8: Create the Prototype (Chapter 10) 63
Phase IV: Results (Chapters 11–13) 63
Step 9: Review the Prototype (Chapter 11) 63
Step 10: Validate the Design (Chapter 12) 63
Step 11: Implement the Design (Chapter 13) 64
Summary 64
PHASE I PLAN YOUR PROTOTYPE 68
CHAPTER 3 VERIFY PROTOTYPE ASSUMPTIONS AND REQUIREMENTS 70
Prototyping Requirements Are Not Software Requirements 71
Transformation of Assumptions to Requirements 72
Step 1: Gather Requirements 73
Step 2: Inventorize the Requirements 75
Step 3: Prioritize Requirements and Assumptions 77
Requirements and the Big Picture 78
Iteration 1: From Idea to First Visualization 78
Iteration 2: From Quick Wireframe to Wireframe 81
Iteration 3: From Wireframe to Storyboard 82
Iteration 4: From Storyboard to Paper Prototype 83
Iteration 5: From Paper Prototype to Coded Prototype 84
Iteration 6: From Coded Prototype to Software Requirements 85
Summary 87
References 88
CHAPTER 4 DEVELOP TASK FLOWS AND SCENARIOS 90
Task Flow 90
Task Layer Maps 91
Step 1: Create List of Tasks 92
Step 2: Identify Dependencies 93
Step 3: Layer Task Items 96
Step 4: Remove Redundant Dependencies 97
Dependency Diagram 98
Step 1: Prioritize Requirements 99
Step 2: Highlight Key Tasks 99
Step 3: Identify Needs 101
Swim Lane Diagrams 104
Step 1: Identify User Tasks 105
Step 2: Identify User Roles 107
Step 3: Layout User Roles and Task Flows 109
Step 4: Identify and Visualize Interrelationships 110
Usage Scenarios 111
Step 1: Sketch Out Plot 113
Step 2: Choose Cast 114
Step 3: Outline Plot 115
Step 4: Mark Points in Outline 116
Summary 118
References 120
CHAPTER 5 DEFINE PROTOTYPE CONTENT AND FIDELITY 124
Prototype Fidelity 125
Low Fidelity 126
High Fidelity 128
Prototype Content 128
Information Design 130
Techniques to Adjust the Fidelity of Information Design 131
Interaction Design and Navigation Model 132
Techniques to Adjust the Fidelity of Interaction Design and Navigation Model 133
Visual Design 133
Techniques to Adjust the Fidelity of Visual Design 134
Editorial Content 135
Techniques to Adjust the Fidelity of the Editorial Content 136
Brand Expression 136
Increasing Brand Fidelity 137
Decreasing Brand Fidelity 137
System Performance/Behavior 138
Techniques to Adjust the Fidelity of the System Performance/Behavior 139
How to Select the Right Prototype Content Expression 139
Step 1: Define the objective and focus 140
Step 2: Determine emphasis/deemphasis 140
Step 3: Select appropriate fidelity 141
Summary 143
References 144
PHASE II SPECIFICATION OF PROTOTYPING 146
CHAPTER 6 DETERMINE CHARACTERISTICS 148
Introduction 148
Prototype Characteristics 148
Audience: Internal/External 149
Internal Audiences 150
Design Team Members 151
Upper Management 151
Lead Designers 151
Product Managers 151
Marketing and Sales Managers 151
Developers 152
Technical Writers 152
Domain Specialists/Analysts 152
Quality Assurance Engineers 152
External Audiences 152
End Users (Consumers) 153
Customers (Purchasers, Not End Users) 154
Financial Stakeholders 154
Domain Specialists and Analysts 154
Stage: Early/Midterm/Late 154
Early Stage 155
Midterm Stage 155
Late Stage 156
Speed: Rapid/Diligent 157
Rapid Speed 157
Diligent Speed 158
Longevity: Short/Medium/Long 159
Short 159
Medium 160
Long 160
Expression: Conceptual/Experiential 160
Conceptual Expression 160
Experiential Expression 162
Style: Narrative/Interactive 163
Narrative Style 164
Interactive Style 164
Medium: Physical/Digital 165
Physical Medium 166
Digital Medium 167
Step-by-Step Guide to Selecting the Right Characteristics 167
Step 1: Specify Basic Requirements 168
Step 2: Analyze Expression 169
Step 3: Determine Style and Medium 170
Summary 172
References 173
CHAPTER 7 CHOOSE A METHOD 176
Introduction 176
Prototyping Methods 176
Card Sorting 176
What Is Card Sorting? 176
How Does Card Sorting Work? 177
Wireframe Prototyping 177
What Is Wireframe Prototyping? 177
How Do Wireframes Work? 178
Storyboard Prototyping 178
What Is Storyboard Prototyping? 178
How Do Storyboard Prototypes Work? 179
Paper Prototyping 179
What Is Paper Prototyping? 179
How Does Paper Prototyping Work? 179
Digital Prototyping 180
What Is Digital Prototyping? 180
How Does a Digital Prototype Work? 181
Blank Model Prototyping 182
What Is Blank Model Prototyping? 182
How Does a Blank Model Prototype Work? 183
Video Prototyping 183
What Is Video Prototyping? 183
How Does a Video Prototype Work? 184
Wizard-of-Oz Prototyping 184
What Is Wizard-of-Oz Prototyping? 184
How Does a Wizard-of-Oz Prototype Work? 185
Coded Prototyping 185
What Is Coded Prototyping? 185
How Does a Coded Prototype Work? 186
Choosing the Right Prototyping Method for You 186
Summary 190
References 191
CHAPTER 8 CHOOSE A PROTOTYPING TOOL 196
How To Choose the Prototyping Tool 198
Step 1: Select Method 198
Step 2: Map Method to Tools 199
Step 3: List Available Tools 203
Step 4: Determine Timing 205
Step 5: Determine Suitability 206
Step 6: Select Tool 207
Next Step 209
PHASE III DESIGN YOUR PROTOTYPE 214
CHAPTER 9 ESTABLISH THE DESIGN CRITERIA 216
Introduction 216
Visual Design Guidelines 218
Visual Design Guideline 1: Information Flow (Directional) 218
Visual Design Guideline 2: Grid-Based Organization (Organizational) 220
Visual Design Guideline 3: Rhythm and Pattern (Directional) 221
Visual Design Guideline 4: Unity and Variety (Organizational) 222
Visual Design Guideline 5: Typographic Structure (Organizational) 223
Visual Design Guideline 6: Balance (Directional) 226
Visual Design Guideline 7: Logical Grouping (Organizational) 228
User Interface Guidelines 229
User Interface Guideline 1: Progressive Disclosure (Directional) 230
User Interface Guideline 2: Efficiency (Organizational) 232
User Interface Guideline 3: Fitt’s Law (Directional) 232
User Interface Guideline 4: Learnability (Directional) 233
User Interface Guideline 5: Speak the Audience’s Language (Organizational) 233
User Interface Guideline 6: Explicitly Show Required Actions and Fields (Organizational) 234
User Interface Guideline 7: User Interfaces Should Reflect International Sensitivity (Organizational) 235
User Interface Guideline 8: Universal Accessibility (Organizational) 235
User Interface Guideline 9: Users Should Feel in Control (Organizational) 236
User Interface Guideline 10: Minimize User’s Memory Load (Organizational) 236
User Interface Guideline 11: Satisfaction (Organizational) 237
Step-by-Step Guidelines 237
Step 1: Review Guidelines 237
Step 2: Formulate Criteria 238
Step 3: Finish Criteria 238
References 240
CHAPTER 10 CREATE THE DESIGN 244
Introduction 244
Design and Construct Your Prototype 247
Step 1: Determine Highest Priority Screens 248
Step 2: Blockout most Important Regions 249
Step 3: Layout Highest Priority Screen 251
Step 4: Layout Remaining Priority Screens 253
Step 5: Specify Design Rationale 254
Summary 255
PHASE IV RESULTS OF PROTOTYPING 258
CHAPTER 11 REVIEW THE DESIGN: THE INTERNAL REVIEW 260
Step 1: Review your Defined Audience 262
Step 2: Set Goals for Each Version 263
Step 3: Set Expectations for Reviewers 264
Communicate What You Are Doing 264
Step 4: How You’ll Present 266
What Makes a Good Facilitator? 267
Setting an Agenda 267
Step 5: Planning the Next Steps 270
Summary 270
References 271
CHAPTER 12 VALIDATE AND ITERATE THE PROTOTYPE 274
The Strategy of Validating and Ensuring Usability via the Prototype 274
Usability Testing: The Tactics of Validating and Ensuring Usability via the Prototype 275
Evaluating Your Design 276
Iterating Your Design 279
References 279
CHAPTER 13 DEPLOY THE DESIGN 282
Your Prototype Is Ready for Deployment 282
Step 1: Set Expectations for Handoff 283
Step 2: Prototype Distribution Strategies 283
What Are the Most Appropriate Ways to Hand Off Your Prototype? 284
Managing Issues That Arise After Handing Off Your Prototype 285
Step 3: Documenting Prototyping Results 287
The Product Design Guide 287
Summary 288
References 288
CHAPTER 14 CARD SORTING PROTOTYPING 290
Description 290
Characteristics 291
An Overview of What a Card Sorting Prototype Looks Like 292
Types of Card Sorting 293
Information Architecture 293
Navigation Model for Website or Application 294
Menu Structure 294
Terminology Validation 294
Validation of Conceptual and Mental Models 295
Step-by-Step Guide to Card Sorting Prototypes 295
Step 1: Setting the Starting Point 296
Step 2: Designing the Session 297
Step 3: Preparing the Session 298
Step 4: Conducting the Session 300
Step 5: Synthesizing Results 301
Step 6: Preparing for Reuse 303
Example Spreadsheets 308
Next Iteration If You Would Leave This Prototype 309
References 309
Available Card Sorting Software [Courage and Baxter 2004] 310
CHAPTER 15 WIREFRAME PROTOTYPING 312
Description 312
Different Perspectives of a Wireframe 312
Characteristics 313
An Overview of What a Wireframe Prototype Looks Like 315
Different Goals of Wireframes 318
The Meaning of a Requirement 319
A Quick Visualization to Understand Scope, Structure, and Layout 319
An Idea Sandbox to Play Around With Different Product Ideas/Functions/Requirements 319
Make Sure All Members of the Software-Making Team Are on the Same Page 320
A Medium to Begin Documenting Requirements or Issues That Have To Do With Early Designs 320
A Quick Visualization of Task Flow Through an Idea 320
Inform More Diligent Prototyping Methods 320
Who Participates in the Wireframe Creation Process 320
Step-by-Step Guide 321
Step 1: What Is the Source of the Wireframe Content? 322
Step 2: Who Are the Stakeholders? 324
Step 3: What Tool Do I Use? 325
Step 4: How Do I Do It? 327
Step 5: How Do I Evolve It? 330
Leaving Wireframes: The Next Iteration 331
References 331
CHAPTER 16 STORYBOARD PROTOTYPING 334
Description 334
Characteristics 335
An Overview of What a Storyboard Prototype Looks Like 337
Types of Storyboards 338
High-Priority Task Scenarios 338
A Day in the Life of a User 339
A Day in the Life of a Work Group 339
Critical Incidents or Critical Task Situations 339
Sunny Day 340
Who Participates in the Storyboard Creation Process 340
Step-by-Step Guide 341
Step 1: Vision 342
Step 2: Idea Board 344
Step 3: Context 345
Step 4: Background 346
Step 5: Developing the Scenario 347
Step 6: Including Design 349
Step 7: Storyboard Session 350
How the Storyboard Session Works 351
Best-Practices Storyboard Planning 351
How the Storyboard Is Iterated 352
Next Iteration Going Beyond This Prototype 353
References 354
CHAPTER 17 PAPER PROTOTYPING 356
Description 356
Characteristics 357
What Does a Paper Prototype Get You? 358
Overview of What a Paper Prototype Looks Like 362
Step-by-Step Guide to Creating Paper Prototypes 363
Step 1: Create Scenario 364
Step 2: Inventory UI Elements 365
Step 3: Create UI Elements 366
Step 4: Run through scenario 367
Step 5: Internal Review 367
Step-by-Step Guide to Test the Prototype 370
Step 1: Revise Scenario 371
Step 2: Revise Inventory UI Elements 372
Step 3: Create UI Elements 373
Step 4: Pilot Run through Scenario 374
Step 5: Internal Review 375
Step 6: Prepare Kit 376
Step 7: The Prototype Session 377
Step 8: Reiterate 378
Next Iteration After a Paper Prototype 379
References 379
CHAPTER 18 DIGITAL INTERACTIVE PROTOTYPING 382
Description 382
Introduction 382
Characteristics 384
What Does a Digital Prototype Get You? 385
Points in Common with Paper Prototyping 386
Digital Advantages Over Paper Prototyping 387
Disadvantages Over Paper Prototyping 388
Overview of What a Digital Prototype Looks Like 389
Step-by-Step Guide to Create a Digital Prototype 390
Step 1: Create Scenario 391
Step 2: Inventory UI Screens and Tasks 392
Step 3: Create Template 393
Step 4: Create UI Elements 394
Step 5: Link up Created Screens 395
Step 6: Internal Review 396
Next Iteration After a Digital Interactive Prototype 400
References 400
CHAPTER 19 BLANK MODEL PROTOTYPING 402
Description 402
Introduction 402
Characteristics 403
Overview of What a Blank Model Prototype Looks Like 403
Who Participates in the Blank Model Creation Process 404
What Are the Benefits of a Blank Model Prototype? 404
Step-by-Step Guide to Blank Model Prototype Creation 407
Step 1: Plan the Study 408
Step 2: Scenarios 409
Step 3: Supplies 410
Step 4: Preparation 411
Step 5: Study Sessions 412
Step 6: Analysis 413
Step 7: Reiterate 414
The Blank Model Prototype Creation Session 415
Step 1: Opening 416
Step 2: Scenarios 417
Step 3: Verify 418
Step 4: Construction 419
Step 5: Review 420
Step 6: Post-Interview 421
Step 7: Closure 422
Next Iteration After Blank Model Prototyping 424
References 424
CHAPTER 20 VIDEO PROTOTYPING 426
Introduction 426
Visionary Video Prototypes 426
Holistic Video Prototypes 426
What Is a Video Prototype? 427
Who Makes Use of Visionary Video Prototyping? 428
What Are the Benefits of a Visionary Video Prototype? 428
Holistic Video Prototyping 428
Characteristics 429
What a Video Prototype Looks Like 432
Who Participates in the Video Prototype Creation Process? 432
Step-by-Step Guide 433
Step 1: Observation of Users 434
Step 2: Video Brainstorming 435
Step 3: Video Prototyping 437
Step 4: System Evaluation 438
How to Create a Visionary Video Prototype 438
Next Iteration After Video Prototyping 440
References 440
CHAPTER 21 WIZARD-OF-OZ PROTOTYPING 442
Description 442
What Is a Wizard-of-Oz Prototype? 443
Characteristics 444
Overview of What a WoO Prototype Looks Like 445
Who is Involved with Wizard-of-Oz Prototypes 446
What Are the Benefits of a WoO Prototype? 447
Step-by-Step Guide 448
Procedure for a WoO Prototype for a Spoken Natural Language or Agent-Based Interaction 449
Step 1: Plan 449
Step 2: Strategy 450
Step 3: Construct 451
Step 4: Recruit 452
Step 5: Prototype Script 453
Step 6: Pilot 454
Step 7: Usability Testing 455
Variation 1: WoO for Simulating Advanced Handheld or Portable Devices 455
Variation 2: WoO Method to Help Test an Unfinished Design 456
What Content are Included in a Wizard-of-Oz Prototype? 457
Next Iteration after Wizard-of-Oz Prototyping 457
References 458
CHAPTER 22 CODED PROTOTYPING 460
Description 460
What Is a Coded Prototype? 460
Characteristics 461
Overview of What a Coded Prototype Looks Like 463
Types of Coded Prototypes 463
Who Creates Coded Prototypes? 464
What Are the Benefits of a Coded Prototype? 464
What Is the Source for Coded Prototype Content? 465
What Is the Content of a Coded Prototype? 465
Step-by-Step Procedure 466
Step-by-Step Guide to Creating Sales Demos 466
Step 1: Select Scenario 467
Step 2: Inventory UI Elements 468
Step 3: Develop UI Elements 469
Step 4: Run through Scenario 470
Step 5: Internal Review 471
Step-by-Step Guide to Creating High-Fidelity Interactive Coded Prototypes 471
Step 1: Select Scenarios 472
Step 2: Inventory UI Elements 473
Step 3: Develop UI Elements 474
Step 4: Internal Review 475
Step 5: Usability Testing 475
Next Iteration After Coded Prototyping 478
References 478
CHAPTER 23 PROTOTYPING WITH OFFICE SUITE APPLICATIONS 480
Introduction 480
Why Cover Three Office Applications in One Chapter? 480
Similarities and Differences 480
Sophisticated Graphics: Something They’re All Missing 482
Who Would Use Office Suite Applications for Prototyping? 482
Microsoft Word 483
Advantages 483
Disadvantages 483
Appropriate Method 484
Example: Step-by-Step Guide to Building a Wireframe in MS Word 484
Step 1: Prepare Document 485
Step 2: Begin Framework 487
Step 3: Wireframe Design 489
Step 4: Text Documentation 492
Usability Testing 494
Microsoft PowerPoint 494
Advantages 494
Disadvantages 495
Appropriate Method 496
Creating a Storyboard in PowerPoint 496
Scenario 496
Step 1: Set Context 497
Step 2: Enter Scenario 498
Step 3: Add Images 499
Step 4: Add Notes 501
Step 5: Perform Run Through 502
Microsoft Excel 502
Advantages 502
Disadvantages 504
Appropriate Method 504
Creating a Prototype in Excel 505
Step 1: Get Ready 506
Step 2: Create Canvas 507
Step 3: Building a Box with a Header 512
Step 4: Add Text 517
Step 5: Create an Input Field 519
Step 6: Adding Art 521
Step 7: Start on Second Page 522
Testing 524
MS Office Applications 524
References 524
CHAPTER 24. PROTOTYPING WITH VISIO 526
Introduction to Visio as a Prototyping Tool 526
Overview of Effective Prototyping with Visio 526
Ideal Methods for Using Visio 526
Characteristics 526
Target Audience for Visio 528
Useful Prototyping Features in Visio 528
Reuse 528
Advantages and Disadvantages of using Visio for Prototyping 529
Advantages 529
Disadvantages 529
Documenting a Design in Visio 530
Business Scenario 530
Use Case Description 531
Step-by-Step Example 531
Step 1: Getting Started (Set Up Your Environment and Stencils) 531
Step 2: Create the Main Window 532
Step 3: Window Functions (Design Top-Level Menu and Toolbar) 537
Step 4: Design Content Area (Mockup Areas to Display Files on the User’s Computer and Remote FTP Server) 541
Step 5: Reuse 548
Step 6: Mockup Interaction 549
Step 7: Different States 554
State 1: Before Files Are Uploaded 554
State 2: Files Are Currently Being Uploaded 555
State 3: After Files Are Uploaded 556
Presenting and Distributing a Visio Prototype 556
CHAPTER 25. PROTOTYPING WITH ACROBAT 558
Introducing Acrobat 558
Overview of Effective Prototyping with Acrobat 558
Characteristics 558
PDF = Portable Document Format 558
The Flavors of Acrobat 558
Acrobat and Prototyping 560
Prototype Characteristics 561
Prototype Content and Methods 561
Building PDF Prototypes 563
Step 1: Get Ready 564
Step 2: Prepare for Conversion 565
Step 3: Convert to PDF 567
Step 4: Add Links 570
Step 5: Add Forms 577
Adding Radio Buttons 583
Adding Buttons 585
Adding List and Combo Boxes 589
Tips for Adding Forms 594
Step 6: Add Media 598
Step 7: Set global properties 602
Sample Files 605
Putting the Prototype to Work 605
Team Review 606
PDF Prototypes in Usability Testing 606
Next Steps 606
Some Closing Thoughts 608
References 608
GLOSSARY 610
SUBJECT INDEX 616
ABOUT THE AUTHORS 624

Textauszug

CHAPTER 1 WHY PROTOTYPING?

WHAT IS A PROTOTYPE?

AN HISTORICAL PERSPECTIVE OF PROTOTYPING

THE PURPOSE OF PROTOTYPING

SUMMARY

REFERENCES

For many of us, prototyping is essential to creating successful software and successful user experiences. Prototyping ensures success because of its clear depiction of software requirements: instead of describing requirements it visualizes them. If done correctly, prototyping allows us to experiment in the safety of a form which can be easily changed without much loss of time or wasted effort when compared to re-programming software. Done effectively, prototyping enables us to go beyond just meeting requirements, by enabling experimentation and exploration for the optimal solutions. Done carelessly, prototyping can just as easily create a murky stew of ideas lost in redundant versions, unarticulated assumptions, and competing visions. This book aims to explain what prototyping is, good reasons for prototyping, and how to effectively prototype.

WHAT IS A PROTOTYPE?

pro·to·type n. 1. An original or model after which anything is copied; the pattern of anything to be engraved, or otherwise copied, cast, or the like; a primary form; exemplar; archetype [Webster’s 1913 Dictionary].

pro·to·type n. 1. An original type, form, or instance serving as a basis or standard for later stages. 2. An original, full-scale, and usually working model of a new product or new version of an existing product. 3. An early, typical example [http://www.dictionary.com; accessed January 13, 2004].

The definition of prototype has changed little in more than 90 years. Webster’s 1913 Dictionary and today’s dictionary.com both classify a prototype in roughly the same way: as a model of a final product. Yet the new definition does make a subtle important difference. Unlike Webster’s, the definition from dictionary.com does make a slight change using the word stages-plural-illustrating the iterative nature of prototyping.

This book specifically covers prototyping software as described by Bill Verplank, who suggests that: “ ‘Prototyping’ is externalizing and making concrete a design idea for the purpose of evaluation” [Munoz 1992]. We like Verplank’s definition because prototypes are tangible software representations, which permit the software team to experience a design without needing to program the software.

A prototype is any attempt to realize any aspect of software content. For example, the prototype can be a realization of interaction and navigation from one point in a product to another. A prototype can also be a hierarchical schema of an information design, divorced from both the look and feel of the final software. Other aspects of a prototype include:

Current state of the art

Requirements

Content

The current state of the art is a checkpoint of what the software would be like if it was built with just the currently existing knowledge of the software-making team.

Requirements can refer to business requirements, technical requirements, functional requirements, end-user requirements, or any combination thereof.

Content can be any of the different content types that make the prototype: information design, interaction design, visual design, editorial content, product branding, and system performance.

For the sake of brevity we refer to any human-computer interaction as software throughout this book, regardless of whether it is a product or service, whether desktop software, mobile software, website, web application/service, or other interactive digital product.

AN HISTORICAL PERSPECTIVE OF PROTOTYPING

Software makers are not the first to wrestle with the challenges of inventing and prototyping technology. Historical perspectives help us understand the nature, challenges, and advantages of prototyping. Here we want to briefly explore three prototypers from the past: Leonardo da Vinci, Thomas Edison, and Henry Dreyfuss. Each has made remarkable contributions to design and the process of invention, and each has explored the possibilities of their inventions with prototypes.

Da Vinci left behind prototypes of concepts and ideas (in the form of drawings) that would take centuries to come to fruition. Thomas Edison used exhaustive prototyping as the engine that drove his inventive ideas. And Henry Dreyfuss used prototypes to make industrial products more user-centered and ergonomically sound. These three people illustrate how a prototype serves one primary purpose: the means of moving an idea from the human imagination to a form that other humans can readily see, understand, evaluate, use, and further develop.

FIGURE 1.1 A drawing of an inventive idea by Leonardo da Vinci.

“I have often thought that one of the industrial designer’s most valuable contributions to his client’s product is his ability to visualize. He can sit at a table and listen to executives, engineers, production and advertising men throw off suggestions and quickly incorporate them into a sketch that crystallizes their ideas–or shows their impracticability. His sketch is not, of course, a finished design, but the beginning is likely to be there.” Henry Dreyfuss, 1967

Leonardo da Vinci: The Thinking Man’s Inventor

The drawings of Leonardo da Vinci (1452–1519) are some of the most fascinating examples of prototype usage for exploring innovation. During the late 15th century, da Vinci created detailed sketches of engineering ideas at the request of his patron, the Duke of Milan. These paper prototypes freed da Vinci from the contemporary constraints of what was possible to build. At liberty to push the limits as far as his imagination, da Vinci became one of history’s most profound and prolific inventors.

FIGURE 1.2 Leonardo da Vinci.

Da Vinci’s inventions would not be built for hundreds of years: flying machines, municipal construction, canals, buildings, and designs for advanced weapons.

Da Vinci’s paper prototypes, and the models that others built from them, serve as proofs of concept well in advance of the technology that would eventually enable their development. Its in the same way use of prototypes will serve as the proof of concept that starts software development in the right direction.

Thomas Alva Edison: Inventor Prototyper

Thomas Alva Edison (1847–1931) was one of the most prolific and eminent American inventors. He explored ideas through extensive prototyping both in paper and in physical models. Of 1,368 separate and distinct patents he earned during his lifetime, the most recognized are the phonograph and perfections to the electric light bulb. The bulk of Edison’s work was focused on creating mass-market products. He labored during a time of great industrial transition, with exciting developments in materials and production processes. Creating a prototype became not just as da Vinci used them as a source of innovation, but also as the means to communicate the manufacturing requirements: what parts were needed, what molds needed to be made, what the production costs would be, etc. These prototypes sought to improve life on a mass market level. Other American inventors in Edison’s time, such as Alexander Graham Bell (1847–1922, inventor of the telephone), George Washington Carver (1864–1943, inventor of peanut agricultural sciences and food products), and John Wesley Hyatt (1837–1920, inventor of celluloid, an early thermoplastic), sought to improve daily life by reducing manual labor and introducing luxury items and entertainment to the masses.

FIGURE 1.3 Thomas Alva Edison.

Edison was a focused perfectionist. His models had to work consistently well because they were destined for mass production. “He would sit at one of the lab tables, chew on a wad of tobacco, and make a little drawing of a new component. He’d ponder it, pass it around among his staff, and wander off to read a couple of technical manuals. He would frown. He would spit a sluice of tobacco onto the floor, and commence to cogitate. He played with his stuff with the grace and zest of an artist, or a child. He would build a prototype and experiment with it for hours, days, weeks, months–whatever it took” [ipFrontline.com].

Edison was a tinker who believed in hard work. More scientist than philosopher, Edison’s perseverance and dedication to success earn him the distinction as a model of the prototyping approach, especially rapid prototyping for the creation of the successful design. “To assist him in his invention work, Edison employed a large and diverse staff of more than 200 machinists, scientists, craftsmen, and laborers at peak production. This staff was divided by Edison into as many as 10 to 20 small teams, each working simultaneously for as long as necessary to turn an idea into a perfected finished prototype or model. Edison himself would move from team to team advising and cajoling efforts as necessary. When a particular invention was perfected, Edison quickly patented the device. With such extensive facilities and his large staff, Edison was able to turn out new products on an unprecedented scale and with unprecedented speed” [National Park Service]. Edison’s...

Produkt-Details

• Erscheint lt. Verlag: 19.7.2010
• Sprache: englisch
• Themenwelt: Sachbuch/Ratgeber
• Themenwelt: Informatik ► Office Programme ► Outlook
• Themenwelt: Mathematik / Informatik ► Informatik ► Programmiersprachen / -werkzeuge
• Themenwelt: Informatik ► Software Entwicklung ► User Interfaces (HCI)
• Themenwelt: Technik ► Maschinenbau
• ISBN-10: 0-08-046896-9 / 0080468969
• ISBN-13: 978-0-08-046896-9 / 9780080468969