Arnowitz / Arent / Berger Effective Prototyping for Software Makers

1. Auflage 2010
ISBN: 978-0-08-046896-9
Verlag: Elsevier Science & Techn.
Format: EPUB
Kopierschutz: 6 - ePub Watermark

E-Book, Englisch, 624 Seiten

Reihe: Morgan Kaufmann

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.

Autoren/Hrsg.

Arnowitz, Jonathan

Arent, Michael

Berger, Nevin

Inhaltsverzeichnis

1;Front Cover;1
2;Effective Prototyping for Software Makers;6
3;Copyright Page;7
4;Dedications;8
5;Table of Contents;10
6;Acknowledgments;28
7;Preface;30
8;CHAPTER 1 WHY PROTOTYPING?;42
8.1;What Is a Prototype?;42
8.2;An Historical Perspective of Prototyping;43
8.2.1;Leonardo da Vinci: The Thinking Man’s Inventor;44
8.2.2;Thomas Alva Edison: Inventor Prototyper;45
8.2.3;Henry Dreyfuss: Designer Prototyper;47
8.3;The Purpose of Prototyping Software;48
8.3.1;Will the Design Work Properly?;49
8.3.2;Can the Design Be Produced Economically?;50
8.3.3;How Will Users and Other Stakeholders Respond to the Design?;51
8.3.4;Which Approach Can Be Taken to Get From Concept to Product?;53
8.3.5;How Can Prototyping Support Product Design Specification?;54
8.3.6;How Can Prototyping Contribute to Better Product Scheduling and Budget Planning?;54
8.4;Summary;55
8.5;References;57
9;CHAPTER 2 THE EFFECTIVE PROTOTYPING PROCESS;60
9.1;Phase I: Plan (Chapters 3–5);60
9.1.1;Step 1: Verify the Requirements (Chapter 3);61
9.1.2;Step 2: Create a Task/Screen Flow (Chapter 4);61
9.1.3;Step 3: Specifying Content and Fidelity (Chapter 5);61
9.2;Phase II: Specification (Chapters 6–8);61
9.2.1;Step 4: Determine the Right Prototyping Characteristics (Chapter 6);61
9.2.2;Step 5: Choose a Prototyping Method (Chapter 7);62
9.2.3;Step 6: Choose a Prototyping Tool (Chapter 8);62
9.3;Phase III: Design (Chapters 9 and 10);62
9.3.1;Step 7: Formulate Design Criteria (Chapter 9);63
9.3.2;Step 8: Create the Prototype (Chapter 10);63
9.4;Phase IV: Results (Chapters 11–13);63
9.4.1;Step 9: Review the Prototype (Chapter 11);63
9.4.2;Step 10: Validate the Design (Chapter 12);63
9.4.3;Step 11: Implement the Design (Chapter 13);64
9.5;Summary;64
10;PHASE I PLAN YOUR PROTOTYPE;68
10.1;CHAPTER 3 VERIFY PROTOTYPE ASSUMPTIONS AND REQUIREMENTS;70
10.1.1;Prototyping Requirements Are Not Software Requirements;71
10.1.2;Transformation of Assumptions to Requirements;72
10.1.2.1;Step 1: Gather Requirements;73
10.1.2.2;Step 2: Inventorize the Requirements;75
10.1.2.3;Step 3: Prioritize Requirements and Assumptions;77
10.1.3;Requirements and the Big Picture;78
10.1.4;Iteration 1: From Idea to First Visualization;78
10.1.5;Iteration 2: From Quick Wireframe to Wireframe;81
10.1.6;Iteration 3: From Wireframe to Storyboard;82
10.1.7;Iteration 4: From Storyboard to Paper Prototype;83
10.1.8;Iteration 5: From Paper Prototype to Coded Prototype;84
10.1.9;Iteration 6: From Coded Prototype to Software Requirements;85
10.1.10;Summary;87
10.1.11;References;88
10.2;CHAPTER 4 DEVELOP TASK FLOWS AND SCENARIOS;90
10.2.1;Task Flow;90
10.2.1.1;Task Layer Maps;91
10.2.1.2;Step 1: Create List of Tasks;92
10.2.1.3;Step 2: Identify Dependencies;93
10.2.1.4;Step 3: Layer Task Items;96
10.2.1.5;Step 4: Remove Redundant Dependencies;97
10.2.2;Dependency Diagram;98
10.2.2.1;Step 1: Prioritize Requirements;99
10.2.2.2;Step 2: Highlight Key Tasks;99
10.2.2.3;Step 3: Identify Needs;101
10.2.3;Swim Lane Diagrams;104
10.2.3.1;Step 1: Identify User Tasks;105
10.2.3.2;Step 2: Identify User Roles;107
10.2.3.3;Step 3: Layout User Roles and Task Flows;109
10.2.3.4;Step 4: Identify and Visualize Interrelationships;110
10.2.4;Usage Scenarios;111
10.2.4.1;Step 1: Sketch Out Plot;113
10.2.4.2;Step 2: Choose Cast;114
10.2.4.3;Step 3: Outline Plot;115
10.2.4.4;Step 4: Mark Points in Outline;116
10.2.5;Summary;118
10.2.6;References;120
10.3;CHAPTER 5 DEFINE PROTOTYPE CONTENT AND FIDELITY;124
10.3.1;Prototype Fidelity;125
10.3.1.1;Low Fidelity;126
10.3.1.2;High Fidelity;128
10.3.2;Prototype Content;128
10.3.2.1;Information Design;130
10.3.2.2;Techniques to Adjust the Fidelity of Information Design;131
10.3.3;Interaction Design and Navigation Model;132
10.3.3.1;Techniques to Adjust the Fidelity of Interaction Design and Navigation Model;133
10.3.4;Visual Design;133
10.3.4.1;Techniques to Adjust the Fidelity of Visual Design;134
10.3.5;Editorial Content;135
10.3.5.1;Techniques to Adjust the Fidelity of the Editorial Content;136
10.3.6;Brand Expression;136
10.3.6.1;Increasing Brand Fidelity;137
10.3.6.2;Decreasing Brand Fidelity;137
10.3.7;System Performance/Behavior;138
10.3.7.1;Techniques to Adjust the Fidelity of the System Performance/Behavior;139
10.3.8;How to Select the Right Prototype Content Expression;139
10.3.8.1;Step 1: Define the objective and focus;140
10.3.8.2;Step 2: Determine emphasis/deemphasis;140
10.3.8.3;Step 3: Select appropriate fidelity;141
10.3.9;Summary;143
10.3.10;References;144
11;PHASE II SPECIFICATION OF PROTOTYPING;146
11.1;CHAPTER 6 DETERMINE CHARACTERISTICS;148
11.1.1;Introduction;148
11.1.2;Prototype Characteristics;148
11.1.3;Audience: Internal/External;149
11.1.3.1;Internal Audiences;150
11.1.3.2;Design Team Members;151
11.1.3.3;Upper Management;151
11.1.3.4;Lead Designers;151
11.1.3.5;Product Managers;151
11.1.3.6;Marketing and Sales Managers;151
11.1.3.7;Developers;152
11.1.3.8;Technical Writers;152
11.1.3.9;Domain Specialists/Analysts;152
11.1.3.10;Quality Assurance Engineers;152
11.1.3.11;External Audiences;152
11.1.3.12;End Users (Consumers);153
11.1.3.13;Customers (Purchasers, Not End Users);154
11.1.3.14;Financial Stakeholders;154
11.1.3.15;Domain Specialists and Analysts;154
11.1.4;Stage: Early/Midterm/Late;154
11.1.4.1;Early Stage;155
11.1.4.2;Midterm Stage;155
11.1.4.3;Late Stage;156
11.1.5;Speed: Rapid/Diligent;157
11.1.5.1;Rapid Speed;157
11.1.5.2;Diligent Speed;158
11.1.6;Longevity: Short/Medium/Long;159
11.1.6.1;Short;159
11.1.6.2;Medium;160
11.1.6.3;Long;160
11.1.7;Expression: Conceptual/Experiential;160
11.1.7.1;Conceptual Expression;160
11.1.7.2;Experiential Expression;162
11.1.8;Style: Narrative/Interactive;163
11.1.8.1;Narrative Style;164
11.1.8.2;Interactive Style;164
11.1.9;Medium: Physical/Digital;165
11.1.9.1;Physical Medium;166
11.1.9.2;Digital Medium;167
11.1.10;Step-by-Step Guide to Selecting the Right Characteristics;167
11.1.10.1;Step 1: Specify Basic Requirements;168
11.1.10.2;Step 2: Analyze Expression;169
11.1.10.3;Step 3: Determine Style and Medium;170
11.1.11;Summary;172
11.1.12;References;173
11.2;CHAPTER 7 CHOOSE A METHOD;176
11.2.1;Introduction;176
11.2.2;Prototyping Methods;176
11.2.3;Card Sorting;176
11.2.3.1;What Is Card Sorting?;176
11.2.3.2;How Does Card Sorting Work?;177
11.2.4;Wireframe Prototyping;177
11.2.4.1;What Is Wireframe Prototyping?;177
11.2.4.2;How Do Wireframes Work?;178
11.2.5;Storyboard Prototyping;178
11.2.5.1;What Is Storyboard Prototyping?;178
11.2.5.2;How Do Storyboard Prototypes Work?;179
11.2.6;Paper Prototyping;179
11.2.6.1;What Is Paper Prototyping?;179
11.2.6.2;How Does Paper Prototyping Work?;179
11.2.7;Digital Prototyping;180
11.2.7.1;What Is Digital Prototyping?;180
11.2.7.2;How Does a Digital Prototype Work?;181
11.2.8;Blank Model Prototyping;182
11.2.8.1;What Is Blank Model Prototyping?;182
11.2.8.2;How Does a Blank Model Prototype Work?;183
11.2.9;Video Prototyping;183
11.2.9.1;What Is Video Prototyping?;183
11.2.9.2;How Does a Video Prototype Work?;184
11.2.10;Wizard-of-Oz Prototyping;184
11.2.10.1;What Is Wizard-of-Oz Prototyping?;184
11.2.10.2;How Does a Wizard-of-Oz Prototype Work?;185
11.2.11;Coded Prototyping;185
11.2.11.1;What Is Coded Prototyping?;185
11.2.11.2;How Does a Coded Prototype Work?;186
11.2.12;Choosing the Right Prototyping Method for You;186
11.2.13;Summary;190
11.2.14;References;191
11.3;CHAPTER 8 CHOOSE A PROTOTYPING TOOL;196
11.3.1;How To Choose the Prototyping Tool;198
11.3.1.1;Step 1: Select Method;198
11.3.1.2;Step 2: Map Method to Tools;199
11.3.1.3;Step 3: List Available Tools;203
11.3.1.4;Step 4: Determine Timing;205
11.3.1.5;Step 5: Determine Suitability;206
11.3.1.6;Step 6: Select Tool;207
11.3.2;Next Step;209
12;PHASE III DESIGN YOUR PROTOTYPE;214
12.1;CHAPTER 9 ESTABLISH THE DESIGN CRITERIA;216
12.1.1;Introduction;216
12.1.2;Visual Design Guidelines;218
12.1.2.1;Visual Design Guideline 1: Information Flow (Directional);218
12.1.2.2;Visual Design Guideline 2: Grid-Based Organization (Organizational);220
12.1.2.3;Visual Design Guideline 3: Rhythm and Pattern (Directional);221
12.1.2.4;Visual Design Guideline 4: Unity and Variety (Organizational);222
12.1.2.5;Visual Design Guideline 5: Typographic Structure (Organizational);223
12.1.3;Visual Design Guideline 6: Balance (Directional);226
12.1.3.1;Visual Design Guideline 7: Logical Grouping (Organizational);228
12.1.4;User Interface Guidelines;229
12.1.4.1;User Interface Guideline 1: Progressive Disclosure (Directional);230
12.1.4.2;User Interface Guideline 2: Efficiency (Organizational);232
12.1.4.3;User Interface Guideline 3: Fitt’s Law (Directional);232
12.1.4.4;User Interface Guideline 4: Learnability (Directional);233
12.1.4.5;User Interface Guideline 5: Speak the Audience’s Language (Organizational);233
12.1.4.6;User Interface Guideline 6: Explicitly Show Required Actions and Fields (Organizational);234
12.1.4.7;User Interface Guideline 7: User Interfaces Should Reflect International Sensitivity (Organizational);235
12.1.4.8;User Interface Guideline 8: Universal Accessibility (Organizational);235
12.1.4.9;User Interface Guideline 9: Users Should Feel in Control (Organizational);236
12.1.4.10;User Interface Guideline 10: Minimize User’s Memory Load (Organizational);236
12.1.4.11;User Interface Guideline 11: Satisfaction (Organizational);237
12.1.5;Step-by-Step Guidelines;237
12.1.5.1;Step 1: Review Guidelines;237
12.1.5.2;Step 2: Formulate Criteria;238
12.1.5.3;Step 3: Finish Criteria;238
12.1.6;References;240
12.2;CHAPTER 10 CREATE THE DESIGN;244
12.2.1;Introduction;244
12.2.2;Design and Construct Your Prototype;247
12.2.2.1;Step 1: Determine Highest Priority Screens;248
12.2.2.2;Step 2: Blockout most Important Regions;249
12.2.2.3;Step 3: Layout Highest Priority Screen;251
12.2.2.4;Step 4: Layout Remaining Priority Screens;253
12.2.2.5;Step 5: Specify Design Rationale;254
12.2.3;Summary;255
13;PHASE IV RESULTS OF PROTOTYPING;258
13.1;CHAPTER 11 REVIEW THE DESIGN: THE INTERNAL REVIEW;260
13.1.1;Step 1: Review your Defined Audience;262
13.1.2;Step 2: Set Goals for Each Version;263
13.1.3;Step 3: Set Expectations for Reviewers;264
13.1.4;Communicate What You Are Doing;264
13.1.5;Step 4: How You’ll Present;266
13.1.6;What Makes a Good Facilitator?;267
13.1.7;Setting an Agenda;267
13.1.8;Step 5: Planning the Next Steps;270
13.1.9;Summary;270
13.1.10;References;271
13.2;CHAPTER 12 VALIDATE AND ITERATE THE PROTOTYPE;274
13.2.1;The Strategy of Validating and Ensuring Usability via the Prototype;274
13.2.2;Usability Testing: The Tactics of Validating and Ensuring Usability via the Prototype;275
13.2.3;Evaluating Your Design;276
13.2.4;Iterating Your Design;279
13.2.5;References;279
13.3;CHAPTER 13 DEPLOY THE DESIGN;282
13.3.1;Your Prototype Is Ready for Deployment;282
13.3.1.1;Step 1: Set Expectations for Handoff;283
13.3.1.2;Step 2: Prototype Distribution Strategies;283
13.3.1.3;What Are the Most Appropriate Ways to Hand Off Your Prototype?;284
13.3.1.4;Managing Issues That Arise After Handing Off Your Prototype;285
13.3.1.5;Step 3: Documenting Prototyping Results;287
13.3.2;The Product Design Guide;287
13.3.3;Summary;288
13.3.4;References;288
13.4;CHAPTER 14 CARD SORTING PROTOTYPING;290
13.4.1;Description;290
13.4.2;Characteristics;291
13.4.3;An Overview of What a Card Sorting Prototype Looks Like;292
13.4.4;Types of Card Sorting;293
13.4.4.1;Information Architecture;293
13.4.4.2;Navigation Model for Website or Application;294
13.4.4.3;Menu Structure;294
13.4.4.4;Terminology Validation;294
13.4.4.5;Validation of Conceptual and Mental Models;295
13.4.5;Step-by-Step Guide to Card Sorting Prototypes;295
13.4.5.1;Step 1: Setting the Starting Point;296
13.4.5.2;Step 2: Designing the Session;297
13.4.5.3;Step 3: Preparing the Session;298
13.4.5.4;Step 4: Conducting the Session;300
13.4.5.5;Step 5: Synthesizing Results;301
13.4.5.6;Step 6: Preparing for Reuse;303
13.4.6;Example Spreadsheets;308
13.4.7;Next Iteration If You Would Leave This Prototype;309
13.4.8;References;309
13.4.8.1;Available Card Sorting Software [Courage and Baxter 2004];310
13.5;CHAPTER 15 WIREFRAME PROTOTYPING;312
13.5.1;Description;312
13.5.1.1;Different Perspectives of a Wireframe;312
13.5.2;Characteristics;313
13.5.3;An Overview of What a Wireframe Prototype Looks Like;315
13.5.4;Different Goals of Wireframes;318
13.5.4.1;The Meaning of a Requirement;319
13.5.4.2;A Quick Visualization to Understand Scope, Structure, and Layout;319
13.5.4.3;An Idea Sandbox to Play Around With Different Product Ideas/Functions/Requirements;319
13.5.4.4;Make Sure All Members of the Software-Making Team Are on the Same Page;320
13.5.4.5;A Medium to Begin Documenting Requirements or Issues That Have To Do With Early Designs;320
13.5.4.6;A Quick Visualization of Task Flow Through an Idea;320
13.5.4.7;Inform More Diligent Prototyping Methods;320
13.5.5;Who Participates in the Wireframe Creation Process;320
13.5.6;Step-by-Step Guide;321
13.5.6.1;Step 1: What Is the Source of the Wireframe Content?;322
13.5.6.2;Step 2: Who Are the Stakeholders?;324
13.5.6.3;Step 3: What Tool Do I Use?;325
13.5.6.4;Step 4: How Do I Do It?;327
13.5.6.5;Step 5: How Do I Evolve It?;330
13.5.7;Leaving Wireframes: The Next Iteration;331
13.5.8;References;331
13.6;CHAPTER 16 STORYBOARD PROTOTYPING;334
13.6.1;Description;334
13.6.2;Characteristics;335
13.6.3;An Overview of What a Storyboard Prototype Looks Like;337
13.6.4;Types of Storyboards;338
13.6.4.1;High-Priority Task Scenarios;338
13.6.4.2;A Day in the Life of a User;339
13.6.4.3;A Day in the Life of a Work Group;339
13.6.4.4;Critical Incidents or Critical Task Situations;339
13.6.4.5;Sunny Day;340
13.6.4.6;Who Participates in the Storyboard Creation Process;340
13.6.5;Step-by-Step Guide;341
13.6.5.1;Step 1: Vision;342
13.6.5.2;Step 2: Idea Board;344
13.6.5.3;Step 3: Context;345
13.6.5.4;Step 4: Background;346
13.6.5.5;Step 5: Developing the Scenario;347
13.6.5.6;Step 6: Including Design;349
13.6.5.7;Step 7: Storyboard Session;350
13.6.6;How the Storyboard Session Works;351
13.6.6.1;Best-Practices Storyboard Planning;351
13.6.6.2;How the Storyboard Is Iterated;352
13.6.7;Next Iteration Going Beyond This Prototype;353
13.6.8;References;354
13.7;CHAPTER 17 PAPER PROTOTYPING;356
13.7.1;Description;356
13.7.2;Characteristics;357
13.7.3;What Does a Paper Prototype Get You?;358
13.7.4;Overview of What a Paper Prototype Looks Like;362
13.7.5;Step-by-Step Guide to Creating Paper Prototypes;363
13.7.5.1;Step 1: Create Scenario;364
13.7.5.2;Step 2: Inventory UI Elements;365
13.7.5.3;Step 3: Create UI Elements;366
13.7.5.4;Step 4: Run through scenario;367
13.7.5.5;Step 5: Internal Review;367
13.7.6;Step-by-Step Guide to Test the Prototype;370
13.7.6.1;Step 1: Revise Scenario;371
13.7.6.2;Step 2: Revise Inventory UI Elements;372
13.7.6.3;Step 3: Create UI Elements;373
13.7.6.4;Step 4: Pilot Run through Scenario;374
13.7.6.5;Step 5: Internal Review;375
13.7.6.6;Step 6: Prepare Kit;376
13.7.6.7;Step 7: The Prototype Session;377
13.7.6.8;Step 8: Reiterate;378
13.7.7;Next Iteration After a Paper Prototype;379
13.7.8;References;379
13.8;CHAPTER 18 DIGITAL INTERACTIVE PROTOTYPING;382
13.8.1;Description;382
13.8.1.1;Introduction;382
13.8.2;Characteristics;384
13.8.3;What Does a Digital Prototype Get You?;385
13.8.3.1;Points in Common with Paper Prototyping;386
13.8.3.2;Digital Advantages Over Paper Prototyping;387
13.8.3.3;Disadvantages Over Paper Prototyping;388
13.8.3.4;Overview of What a Digital Prototype Looks Like;389
13.8.4;Step-by-Step Guide to Create a Digital Prototype;390
13.8.4.1;Step 1: Create Scenario;391
13.8.4.2;Step 2: Inventory UI Screens and Tasks;392
13.8.4.3;Step 3: Create Template;393
13.8.4.4;Step 4: Create UI Elements;394
13.8.4.5;Step 5: Link up Created Screens;395
13.8.4.6;Step 6: Internal Review;396
13.8.5;Next Iteration After a Digital Interactive Prototype;400
13.8.6;References;400
13.9;CHAPTER 19 BLANK MODEL PROTOTYPING;402
13.9.1;Description;402
13.9.1.1;Introduction;402
13.9.2;Characteristics;403
13.9.2.1;Overview of What a Blank Model Prototype Looks Like;403
13.9.2.2;Who Participates in the Blank Model Creation Process;404
13.9.2.3;What Are the Benefits of a Blank Model Prototype?;404
13.9.3;Step-by-Step Guide to Blank Model Prototype Creation;407
13.9.3.1;Step 1: Plan the Study;408
13.9.3.2;Step 2: Scenarios;409
13.9.3.3;Step 3: Supplies;410
13.9.3.4;Step 4: Preparation;411
13.9.3.5;Step 5: Study Sessions;412
13.9.3.6;Step 6: Analysis;413
13.9.3.7;Step 7: Reiterate;414
13.9.3.8;The Blank Model Prototype Creation Session;415
13.9.3.9;Step 1: Opening;416
13.9.3.10;Step 2: Scenarios;417
13.9.3.11;Step 3: Verify;418
13.9.3.12;Step 4: Construction;419
13.9.3.13;Step 5: Review;420
13.9.3.14;Step 6: Post-Interview;421
13.9.3.15;Step 7: Closure;422
13.9.4;Next Iteration After Blank Model Prototyping;424
13.9.5;References;424
13.10;CHAPTER 20 VIDEO PROTOTYPING;426
13.10.1;Introduction;426
13.10.1.1;Visionary Video Prototypes;426
13.10.1.2;Holistic Video Prototypes;426
13.10.2;What Is a Video Prototype?;427
13.10.2.1;Who Makes Use of Visionary Video Prototyping?;428
13.10.2.2;What Are the Benefits of a Visionary Video Prototype?;428
13.10.3;Holistic Video Prototyping;428
13.10.3.1;Characteristics;429
13.10.4;What a Video Prototype Looks Like;432
13.10.4.1;Who Participates in the Video Prototype Creation Process?;432
13.10.5;Step-by-Step Guide;433
13.10.5.1;Step 1: Observation of Users;434
13.10.5.2;Step 2: Video Brainstorming;435
13.10.5.3;Step 3: Video Prototyping;437
13.10.5.4;Step 4: System Evaluation;438
13.10.6;How to Create a Visionary Video Prototype;438
13.10.7;Next Iteration After Video Prototyping;440
13.10.8;References;440
13.11;CHAPTER 21 WIZARD-OF-OZ PROTOTYPING;442
13.11.1;Description;442
13.11.2;What Is a Wizard-of-Oz Prototype?;443
13.11.2.1;Characteristics;444
13.11.2.2;Overview of What a WoO Prototype Looks Like;445
13.11.2.3;Who is Involved with Wizard-of-Oz Prototypes;446
13.11.2.4;What Are the Benefits of a WoO Prototype?;447
13.11.3;Step-by-Step Guide;448
13.11.3.1;Procedure for a WoO Prototype for a Spoken Natural Language or Agent-Based Interaction;449
13.11.3.2;Step 1: Plan;449
13.11.3.3;Step 2: Strategy;450
13.11.3.4;Step 3: Construct;451
13.11.3.5;Step 4: Recruit;452
13.11.3.6;Step 5: Prototype Script;453
13.11.3.7;Step 6: Pilot;454
13.11.3.8;Step 7: Usability Testing;455
13.11.3.9;Variation 1: WoO for Simulating Advanced Handheld or Portable Devices;455
13.11.3.10;Variation 2: WoO Method to Help Test an Unfinished Design;456
13.11.4;What Content are Included in a Wizard-of-Oz Prototype?;457
13.11.5;Next Iteration after Wizard-of-Oz Prototyping;457
13.11.6;References;458
13.12;CHAPTER 22 CODED PROTOTYPING;460
13.12.1;Description;460
13.12.1.1;What Is a Coded Prototype?;460
13.12.2;Characteristics;461
13.12.2.1;Overview of What a Coded Prototype Looks Like;463
13.12.3;Types of Coded Prototypes;463
13.12.3.1;Who Creates Coded Prototypes?;464
13.12.3.2;What Are the Benefits of a Coded Prototype?;464
13.12.3.3;What Is the Source for Coded Prototype Content?;465
13.12.3.4;What Is the Content of a Coded Prototype?;465
13.12.4;Step-by-Step Procedure;466
13.12.4.1;Step-by-Step Guide to Creating Sales Demos;466
13.12.4.2;Step 1: Select Scenario;467
13.12.4.3;Step 2: Inventory UI Elements;468
13.12.4.4;Step 3: Develop UI Elements;469
13.12.4.5;Step 4: Run through Scenario;470
13.12.4.6;Step 5: Internal Review;471
13.12.4.7;Step-by-Step Guide to Creating High-Fidelity Interactive Coded Prototypes;471
13.12.4.8;Step 1: Select Scenarios;472
13.12.4.9;Step 2: Inventory UI Elements;473
13.12.4.10;Step 3: Develop UI Elements;474
13.12.4.11;Step 4: Internal Review;475
13.12.4.12;Step 5: Usability Testing;475
13.12.5;Next Iteration After Coded Prototyping;478
13.12.6;References;478
13.13;CHAPTER 23 PROTOTYPING WITH OFFICE SUITE APPLICATIONS;480
13.13.1;Introduction;480
13.13.2;Why Cover Three Office Applications in One Chapter?;480
13.13.2.1;Similarities and Differences;480
13.13.2.2;Sophisticated Graphics: Something They’re All Missing;482
13.13.3;Who Would Use Office Suite Applications for Prototyping?;482
13.13.4;Microsoft Word;483
13.13.4.1;Advantages;483
13.13.4.2;Disadvantages;483
13.13.4.3;Appropriate Method;484
13.13.4.4;Example: Step-by-Step Guide to Building a Wireframe in MS Word;484
13.13.4.5;Step 1: Prepare Document;485
13.13.4.6;Step 2: Begin Framework;487
13.13.4.7;Step 3: Wireframe Design;489
13.13.4.8;Step 4: Text Documentation;492
13.13.4.9;Usability Testing;494
13.13.5;Microsoft PowerPoint;494
13.13.5.1;Advantages;494
13.13.5.2;Disadvantages;495
13.13.5.3;Appropriate Method;496
13.13.5.4;Creating a Storyboard in PowerPoint;496
13.13.5.5;Scenario;496
13.13.5.6;Step 1: Set Context;497
13.13.5.7;Step 2: Enter Scenario;498
13.13.5.8;Step 3: Add Images;499
13.13.5.9;Step 4: Add Notes;501
13.13.5.10;Step 5: Perform Run Through;502
13.13.6;Microsoft Excel;502
13.13.6.1;Advantages;502
13.13.6.2;Disadvantages;504
13.13.6.3;Appropriate Method;504
13.13.6.4;Creating a Prototype in Excel;505
13.13.6.5;Step 1: Get Ready;506
13.13.6.6;Step 2: Create Canvas;507
13.13.6.7;Step 3: Building a Box with a Header;512
13.13.6.8;Step 4: Add Text;517
13.13.6.9;Step 5: Create an Input Field;519
13.13.6.10;Step 6: Adding Art;521
13.13.6.11;Step 7: Start on Second Page;522
13.13.6.12;Testing;524
13.13.7;MS Office Applications;524
13.13.8;References;524
13.14;CHAPTER 24. PROTOTYPING WITH VISIO;526
13.14.1;Introduction to Visio as a Prototyping Tool;526
13.14.2;Overview of Effective Prototyping with Visio;526
13.14.2.1;Ideal Methods for Using Visio;526
13.14.3;Characteristics;526
13.14.3.1;Target Audience for Visio;528
13.14.4;Useful Prototyping Features in Visio;528
13.14.4.1;Reuse;528
13.14.5;Advantages and Disadvantages of using Visio for Prototyping;529
13.14.5.1;Advantages;529
13.14.5.2;Disadvantages;529
13.14.6;Documenting a Design in Visio;530
13.14.7;Business Scenario;530
13.14.7.1;Use Case Description;531
13.14.7.2;Step-by-Step Example;531
13.14.7.3;Step 1: Getting Started (Set Up Your Environment and Stencils);531
13.14.7.4;Step 2: Create the Main Window;532
13.14.7.5;Step 3: Window Functions (Design Top-Level Menu and Toolbar);537
13.14.7.6;Step 4: Design Content Area (Mockup Areas to Display Files on the User’s Computer and Remote FTP Server);541
13.14.7.7;Step 5: Reuse;548
13.14.7.8;Step 6: Mockup Interaction;549
13.14.7.9;Step 7: Different States;554
13.14.7.10;State 1: Before Files Are Uploaded;554
13.14.7.11;State 2: Files Are Currently Being Uploaded;555
13.14.7.12;State 3: After Files Are Uploaded;556
13.14.8;Presenting and Distributing a Visio Prototype;556
13.15;CHAPTER 25. PROTOTYPING WITH ACROBAT;558
13.15.1;Introducing Acrobat;558
13.15.2;Overview of Effective Prototyping with Acrobat;558
13.15.2.1;Characteristics;558
13.15.2.2;PDF = Portable Document Format;558
13.15.2.3;The Flavors of Acrobat;558
13.15.3;Acrobat and Prototyping;560
13.15.3.1;Prototype Characteristics;561
13.15.3.2;Prototype Content and Methods;561
13.15.4;Building PDF Prototypes;563
13.15.4.1;Step 1: Get Ready;564
13.15.4.2;Step 2: Prepare for Conversion;565
13.15.4.3;Step 3: Convert to PDF;567
13.15.4.4;Step 4: Add Links;570
13.15.4.5;Step 5: Add Forms;577
13.15.4.6;Adding Radio Buttons;583
13.15.4.7;Adding Buttons;585
13.15.4.8;Adding List and Combo Boxes;589
13.15.4.9;Tips for Adding Forms;594
13.15.4.10;Step 6: Add Media;598
13.15.4.11;Step 7: Set global properties;602
13.15.4.12;Sample Files;605
13.15.5;Putting the Prototype to Work;605
13.15.5.1;Team Review;606
13.15.5.2;PDF Prototypes in Usability Testing;606
13.15.6;Next Steps;606
13.15.7;Some Closing Thoughts;608
13.15.8;References;608
14;GLOSSARY;610
15;SUBJECT INDEX;616
16;ABOUT THE AUTHORS;624

Leseproben

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...