Writing for Multimedia and the Web, Third Edition: A Practical Guide to Content Development for Interactive Media [3 ed.] 0240808223, 9780240808222, 9780080474861

Citation preview

This Page Intentionally Left Blank

Writing for Multimedia and the Web

Garrand’s Writing for Multimedia and the Web is the best textbook I’ve found for examining the theory and practice of multimedia writing. The text is straightforward, and the case studies and tools facilitate student achievement. I’ve tried several other texts for my Writing for Multimedia course, but I always return to Garrand. His book sets the standard in the field. —Michael Huntsberger, Ph.D., University of Oregon Writing for Multimedia and the Web is really working well for a college course I teach titled, “Writing and Interactive Design.” I have used the text for more than 5 years and it is the best book overall that I have seen that is a good balance of application and theory. —Ken Loge, Oregon Research Institute. Applied Computer Simulations Lab Writing for Multimedia and the Web is a book for rank beginners and experienced professionals alike, for the neophyte student or the traditional media writers who want to expand their skills. Teachers will find it invaluable as a text and scholars will appreciate the way Garrand integrates theory with application. How can he accomplish so much for such a varied audience? With a smart balance of interviews, explanation, and examples. The novice can work his way through from the beginning, where Garrand, patiently supplies a succinct overview of the field, replete with definitions and an easy to understand description of where the media writer fits into this dizzying process. The veteran writer, on the other hand, will enjoy the first hand accounts and insights about approaches and processes from the numerous writers that Garrand interviewed for his book. Tim Garrand’s Writing for Multimedia and the Web continues to be the “must have” book for any writer, aspiring or otherwise, student or teacher interested in this burgeoning field. —Dr. Gregg Bachman, Chair, Department of Communication, The University of Tampa

Writing for Multimedia and the Web A Practical Guide to Content Development for Interactive Media THIRD EDITION Timothy Garrand

AMSTERDAM • BOSTON • HEIDELBERG • LONDON NEW YORK • OXFORD • PARIS • SAN DIEGO SAN FRANCISCO • SINGAPORE • SYDNEY • TOKYO Focal Press is an imprint of Elsevier

Acquisitions Editor: Project Manager: Assistant Editor: Marketing Manager: Cover Design:

Amy Jollymore Dawnmarie Simpson Doug Shultz Christine Degon Veroulis Cate Barr

Focal Press is an imprint of Elsevier 30 Corporate Drive, Suite 400, Burlington, MA 01803, USA Linacre House, Jordan Hill, Oxford OX2 8DP, UK Copyright © 2006, Elsevier Inc. All rights reserved. No part of this publication may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, electronic, mechanical, photocopying, recording, or otherwise, without the prior written permission of the publisher. Permissions may be sought directly from Elsevier’s Science & Technology Rights Department in Oxford, UK: phone: (+44) 1865 843830, fax: (+44) 1865 853333, e-mail: [email protected]. You may also complete your request online via the Elsevier home page (http://elsevier.com), by selecting “Support & Contact” then “Copyright and Permission” and then “Obtaining Permissions.” Recognizing the importance of preserving what has been written, Elsevier prints its books on acid-free paper whenever possible. Library of Congress Cataloging-in-Publication Data Garrand, Timothy Paul. Writing for multimedia and the Web/Timothy Garrand.– 3rd ed. p. cm. Includes bibliographical references and index. ISBN-13: 978-0-240-80822-2 (pbk. : alk. paper) ISBN-10: 0-240-80822-3 (pbk. : alk. paper) 1. Interactive multimedia–Authorship. 2. World Wide Web. I. Title. QA76.76.I59G37 2006 006.7’8–dc22 2006008399 British Library Cataloguing-in-Publication Data A catalogue record for this book is available from the British Library. ISBN 13: 978-0-240-80822-2 ISBN 10: 0-240-80822-3 For information on all Focal Press publications visit our website at www.books.elsevier.com 06 07 08 09 10 11

10 9 8 7 6 5 4 3 2 1

Printed in the United States of America

To my wife Anne and daughter Danielle, for all the weekends and vacations I had to hide away to work on the book. Thank you for your support.

This Page Intentionally Left Blank

To Teachers

In addition to being a popular book with professional writers, this book has also been successful in the classroom. One teacher who uses the book wrote: I have used the text in my class for more than 5 years and it is the best book overall that I have seen that is a good balance of application and theory. Ken Loge, Oregon Research Institute

Courses Using This Book This book has been used for several types of courses including: • Writing for the web and multimedia • Interactive design • Interactive media production courses, as the content component paired with a more technical text • Interactive media studies, providing a solid overview of many types of interactive media

Teaching Manual To see sample syllabi, assignments, and other tips for using the book and CD-ROM in the classroom, instructors can access the free electronic teaching guide that accompanies this book by visiting: http://textbooks.elsevier.com Once on the web site, register as an instructor, then request access to the media technology subject area or search by author name or book title. Instructors may also call (781) 313-4700 and ask for the textbook sales representative for Focal Press. For more general questions, you can call the general customer service number at (800) 545-2522.

vii

viii

To Teachers

Other Resources See the book’s web site, http://www.interwrite.com/book, for additional information and updates. There are also complete case studies on the CD-ROM that are not in the book as well as extensive additional material supporting the book chapters. If you have any questions or suggestions, please feel free to contact the author at [email protected].

To Users of the 2nd Edition Book Some of the older but still valid case study chapters have been removed from the book and placed on the book’s attached CD-ROM. Look at the CD-ROM’s Chapters menu in the Case Studies: CD-ROM Only section. If you have a favorite older case study, you can still use it in your classes by having the students view it or print it out from the CD-ROM.

Writing for Multimedia and the Web The Book at a Glance Part I -- Interactive Media and the Writer

Ch. 1 Interactivity and The Writer

Ch. 2 Writing for Many Media

Ch. 3 Interactive Writer Skills

Ch. 4 The Produc– tion Team

Ch. 5 Writing Formats

Chapter 6 Key Points from Part I

Part II -- Writing Info. Multimedia and Web Sites Ch. 7 Goals for Info. Multimedia and Web Ch. 8 Info. Multimedia and Web Architecture Ch. 9 Intro. to Info. Case Studies

Ch. 10 Marketing Web Site

Ch. 11 Corporate Web Site

Ch. 12 Web Feature Story

Ch. 13 E-Learning Lessons

Ch. 14 Museum Kiosks

Ch. 15 Training Program

Chapter 16 Key Points from Part II

Part III -- Writing Interactive Narrative Ch. 17 Interactive versus Linear Narrative Ch. 18 Elements of Interactive Narrative Ch. 19 Intro. to Narrative Case Studies

Ch. 20 Puzzle Based Games

Ch. 21 Story in Sports Sim

Ch. 22 Parallel Stories

Ch. 23 Worlds Narrative

Chapter 25 Key Points from Part III

Part IV -- Interactive Writing Careers Chapter 26 Becoming an Interactive Writer

Ch. 24 Narrative in Info. Program

Book Contents

Acknowledgments Introduction

Interactive Media and the Writer

1

Interactivity and the Writer Chapter Overview Write It All! Defining Interactive Multimedia and the Interactive Writer Defining a Few Terms Types of Interactive Multimedia The Role of the Interactive Writer Interactivity Versus Control Potential Interactivity Limits to Interactivity Thinking Interactively Thinking of All the Possibilities Viewer Input Knowing the User Linking Immediate or Direct Links: An Action Indirect Links: A Reaction Intelligent Links or Delayed Links: A Delayed Reaction High-Level Design and Information Architecture

xxxi xxxiii

PART I 3

3 3 4 4 5 6 6 6 6 7 7 7 8 9 9 9 11 12

xi

xii

Book Contents

Structure as an Interactive Device Interface Design Map or Sitemap Metaphors Input Devices Interactive Devices Icons Menus and Other Text Props Characters Challenge of the Interactive Device Conclusion References

2

12 12 14 15 16 17 17 17 19 19 20 20 20

Writing for Many Media

23

Chapter Overview The Skills of the Interactive Writer Text Clear, Concise, and Personal Web Writing Tips from Usability Experts Who Edits Interactive Media Text? Web Text Writing Example Blog Writing Example and Writing Tips Audio E-Learning Narration Example Narrative Audio-Only Example Video Informational Program Video Example Computer Game Video Example Conclusion References

23 23 24 24 25 28 30 31 32 33 33 35 37 38 41 41

3

High-Level Design, Management, and Technical Skills Useful to the Interactive Writer

43

Chapter Overview High-Level Design, Content, and Project Management Information and Interactive Architecture High-Level Narrative Design

43 43 43 45

xiii

Book Contents

Project Management Content Expertise Content Strategy Web Site Marketing: Writing for Search Engines Technical Skills Flowcharting Other Organizational Tools WYSIWYG HTML Editors Conclusion References

4

46 46 46 47 47 47 52 54 54 55

The Multimedia and Web Site Production Team

57

Chapter Overview The Writer The Content Strategist The Instructional Designer The Information Architect or Interactive Architect The Interface Designer The Game Designer The Usability Expert The Subject Matter Expert The Business Strategist The Art Director/Creative Director/Graphic Artist The Animator The Project Manager The Video/Audio Director/Developer The Photographer/Videographer The Voice Talent and Actors The Programmer/Coder The Product Manager Conclusion References

57 58 58 58 58 59 59 59 60 60 60 60 61 61 61 61 62 62 62 62

5

Script and Proposal Formatting

63

Chapter Overview Scripting Software Preliminary Documents: Outlines, Proposals, and Design Documents

63 63 64

xiv

Book Contents

Outlines Treatments Proposals and Design Documents Storyboards, Scripts, and Final Documents Linear Screenplay Format Single-Column, Simple If-Then Interactive Format Single-Column, Complex If-Then Interactive Format Single-Column, Screen-Based Informational Script with Element Labels Single-Column, Screen-Based Informational Script Written in a Database Double-Column Format Three Column Format with Narration and Text Transcript Six Column Format with Live Host, Interactive Media, and Audience Interactivity Conclusion References

64 67 68 69 69 71 73 75 76 77 79 80 80 80

6

Key Points from Part I: Interactive Media and the Writer

85

Multimedia Defined (Chapter 1) Thinking Interactively (Chapter 1) Linking (Chapter 1) High-Level Design and Information Architecture (Chapter 1) Interactive Devices (Chapter 1) Writing for Many Media (Chapter 2) High-Level Design and Management Skills (Chapter 3) Flowcharting and Other Organizational Tools (Chapter 3) Writing as Part of the Production Team (Chapter 4) Script Formatting (Chapter 5)

85 85 85 86 86 86 86 87 87 87

Writing Informational Multimedia and Web Sites

P A R T II

7

Defining and Achieving Goals for Informational Multimedia and Web Sites

91

Chapter Overview Informational Multimedia and Web Sites Defined Defining the Goal: Business Context, Data, and Users

91 91 92

xv

Book Contents

Example of Defining the Goal

97

Techniques to Achieve Common Informational Goals

98

Goal #1: To Persuade Goal #2: To Entertain

99 99

Goal #3: To Enable Transactions

100

Goal #4: To Create a Sense of Community

100

Goal #5: To Inform

100

Goal #6: To Teach

104

Multimedia Games as Teaching Tools

106

Conclusion

107

References

107

8

Informational Multimedia and Web Architecture

109

Chapter Overview

109

Linear Structure

109

Linear Structure with Scene or Section Branching

110

Hierarchical Branching

111

Single-Level Linking

113

Parallel Path or Multipath Architecture

113

Dynamically-Generated Database Driven Web Sites

114

Passive Versus Active Information Delivery: Getting Beyond Click-and-Read with Simulations, Worlds, and Role Playing

115

Passive Information Delivery

115

Active Information Delivery

116

Approaches to Getting Beyond Click-and-Read

116

Other Approaches to Active Information Delivery

120

Active Information Delivery as Part of Larger Passive Information Delivery Program Benefits of Active Information Delivery: Learning to Learn Teaching Toolmakers with Interactivity: Playing as If

121 121 122

Conclusion

122

References

123

9

Introduction to the Informational Multimedia and Web Site Case Studies

125

Description of Case Studies

125

Approach to Case Studies

126

xvi

Book Contents

10

Case Study—Writing a Marketing Web Site from Proposal to Documentation: Prudential Verani Realty

127

Scope of This Chapter

127

Program Description and Background

128

Program Description

128

Production Background

128

Planning the Prudential Verani Realty Web Site

129

Scoping a Project: Goals, Tools, and Price

130

The Proposal for the Prudential Verani Web Site

131

Scope of Work/Revision Plan

133

Gathering and Grouping Site Material

136

Flowchart/Sitemap

136

Outline

137

Writing the Web Site

141

Online Writing Style Tips

141

Search Engines and Keywords

142

The Home Page

143

Main Section Menu/Introduction Pages

153

Static Print Content Pages

156

Graphical Content

158

Interactive, Personalized Content

158

After the Site Is Finished

161

Maintenance Instructions

161

Outstanding Issues

161

Conclusion

161

References

161

11

Case Study—Corporate Web Site: T. Rowe Price

163

Program Description and Background

163

Program Description

163

T. Rowe Price and the Commercial Web Site

164

Production Background

165

Preproduction Process Meeting the Challenges of Writing and Developing the T. Rowe Price Web Site

166 167

User Centric Design and Audience Segmentation

167

Customization

169

Navigation

170

xvii

Book Contents

Information Grouping

173

Managing Content on a Content Site

173

Conclusion: Response to the Project

173

References

173

12

Case Study—Research Portal Web Site and the Online Feature Story: Britannica.com and the Harlem Renaissance

175

Program Description and Background

175

Program Description

175

The Web Site Portal and Britannica.Com (Encyclopaedia Britannica Online)

177

Production Background for the Harlem Renaissance

178

Preproduction Development Process for the Harlem Renaissance Spotlight

178

Challenges Writing and Developing the Harlem Renaissance

179

Meeting the Challenges

179

Creating an Immersive Experience

179

Navigation: Multiple Approaches to Content

183

Other Site Elements

184

Conclusion: Response to the Project

185

References

185

13

Case Study—E-Learning: Interactive Math and Statistics Lessons

187

Program Description and Background

187

Program Description

187

Production Background

190

Goals and Challenges Writing the Interactive Math and Statistics Lessons

191

Goals

191

Challenges

192

Writing the Interactive Math and Statistics Lessons: Meeting the Production Challenges

192

Software and Technical Skills

192

Developing a Script Format

193

Writing the Interactive Math and Statistics Lessons: Meeting the Content Challenges Understanding the Requirements for This Project

200 200

Reducing and Structuring Content for Interactive Media

202

Explain and Visualize Concepts in an Engaging Way

204

Conclusion: Response to the Project

208

References

208

xviii

Book Contents

14

Case Study—Museum Kiosk: The Nauticus Shipbuilding Company

209

Program Description and Background

209

Program Description

209

Multimedia in Museums

211

Production Background

211

Writing and Developing The Nauticus Shipbuilding Company

212

The Development Process

212

Development Challenges

213

Meeting the Challenges

214

The Proposal

214

High-Level Design Document

214

The Final Script

223

Conclusion: Response to the Project

236

Reference

236

15

Case Study—Training: Vital Signs

237

Program Description and Background

237

Interactive Media Training Programs

238

Production Background

241

Program Development

242

The Instructional Designer

242

Goals and Challenges Writing and Developing Vital Signs

243

Challenges

243

Writer and Instructional Designer’s Goals

243

Meeting the Challenges and Achieving the Goals

245

Overall Design

245

Registration, Pretest, and Humorous Introduction

246

Overview

248

Basic Terms

249

Detailed Instruction

251

Practice

251

Case Study Experience

254

Posttest

258

Conclusion: Response to the Project

259

References

259

xix

Book Contents

16

Key Points from Part II: How to Write Nonnarrative Informational Multimedia

261

Gathering Information Defining the Goal: Business Context, Data, and Users (Chapter 7) Techniques to Achieve Common Informational Goals (Chapter 7) Discovering an Approach Content Web Site (Chapter 11) Web Site Feature Story (Chapter 12) E-Learning (Chapter 13) Simulation (Chapter 14) Database Training (Chapter 15) Online Advertising Architecture (Chapter 8) Writing the Program (Chapters 10 and 14) Mechanics of Writing (Part I)

261 261 262 262 262 263 263 263 263 264 264 264 264 265

Writing Interactive Narrative

17

P A R T III

Interactive Multimedia Narrative and Linear Narrative

269

Chapter Overview Narrative and Interactive Narrative Defined Interactive Narratives Versus Simulations and Worlds Computer Games and Video Games: Defining Terms Interactive Multimedia Narratives Interactive Multimedia Narratives Genres The Current State of Interactive Narrative and Computer Games Classical Linear Narrative Elements Defined Character Structure Exposition or Setup Conflict Climax Resolution Scenes and Sequences Jeopardy

269 269 270 271 272 272 273 274 274 275 275 276 276 276 277 277

xx

Book Contents

Point of View Pace Conclusion References

18

277 278 278 278

The Elements of Interactive Multimedia Narrative

281

Chapter Overview Linear Versus Interactive Narrative Character and the Role of the Player Player Control Impact of Player Options Character Setup and Relationships Architecture: Structure and Navigation Linear Structure Linear Structure with Scene Branching Hierarchical Branching Parallel Path Stories Linked Worlds—-String of Pearls Architecture Variable State Environment and Types of Links Future or Experimental Structures Exposition or Setup Guaranteeing that Essential Exposition Is Seen Demonstrating How the Program Works Plot Points Scenes Pace and Time Player Creates the Pace Multimedia Pace = Miniseries Pace Manipulating Time to Affect Pace Dialogue and Other Sound Conclusion References

281 281 282 282 284 286 286 286 287 288 289 290 291 292 292 293 294 294 295 295 296 296 296 297 297 297

19

Introduction to the Narrative Multimedia Case Studies

299

Description of Case Studies Approach to Case Studies How to Get Copies of the Games

299 300 300

xxi

Book Contents

20

Case Study—Adapting Classic Books to a Computer Game for the Female Audience: Nancy Drew: The Secret of the Old Clock

301

Program Description and Background

301

Program Description

301

Production Background

302

Goals and Challenges of Writing Nancy Drew: The Secret of the Old Clock

303

Goals

303

Challenges

304

Meeting the Challenge of Adapting a 1930s Book to a 21st Century Computer Game: The Process of Writing The Secret of the Old Clock

304

Criteria for Choosing a Book for a Nancy Drew Game

304

Choosing the Book and Product Concept

305

Defining Characters and Narrative: Initial Design Outline

306

Structuring the Interactivity: The Project Flowchart

308

Writing the Dialogue: Animated Characters and off Camera Scripts

315

The Critical Path: Step-by-Step Outline

324

Adapting a 1930s Novel to a Computer Game Conclusion

328

Meeting the Challenge of Developing a Computer Game for a Broad Female Audience

328

Considerations for a Female Audience

329

Reaching a Broad Audience Age Range

329

Meeting the Challenge of Completing All of the Tasks Described Above and Still Staying on Budget and Schedule

330

Conclusion: Response to the Project

332

References

332

21

Case Study—Adding Story to a Simulation: Amped 3

333

Program Description and Background

333

Program Description

333

Production Background

334

Goals and Challenges Writing Amped 3

335

Goals

335

Challenges

335

Writing Amped 3: Meeting the Challenges Meeting the Challenge of Determining the Right Story for This Game

336 336

Meeting the Challenge of Integrating Story into a Sports Simulation

346

Adding Interactivity and Randomness to Linear Story

352

xxii

Book Contents

Conclusion: Response to the Project

354

References

355

22

Case Study—Parallel Stories Narrative: The Pandora Directive

357

Program Description and Background

357

Program Description

357

Production Background

358

Goals and Challenges Writing The Pandora Directive

359

Goals

359

Challenges

359

Writing The Pandora Directive: Meeting the Challenges

359

Developing a Complex Interactive Story and Characters

359

Creating Smooth and Realistic Interactivity

363

Making a Complex Story and Interactivity Work Together in an Engaging and Coherent Fashion

373

The Pandora Directive Narrative Walkthrough

376

Conclusion: Response to the Project

379

References

379

23

Case Study—Worlds Narrative: Dust: A Tale of the Wired West

381

Program Description and Background

381

Program Description

381

Dust: A Tale of the Wired West and the Adventure Game

383

Production Background

383

Goals and Challenges Writing Dust: A Tale of the Wired West

383

Goals

383

Challenges

383

Writing Dust: A Tale of the Wired West: Meeting the Challenges

384

Creating an Inhabitable, Believable World

384

Giving the User the Opportunity to Explore This World

386

Interactive Dialogue

387

Developing a Story Within This Highly Interactive World

393

xxiii

Book Contents

Conclusion: Response to the Program References

24

395 395

Case Study—Immersive Exhibit: The New England Economic Adventure

397

Program Description and Background Program Description Use of Stories to Present Information Popularity of Immersive Exhibits/Experiences Production Background Goals and Challenges Writing The New England Economic Adventure Goals Challenges Writing The New England Economic Adventure: Meeting the Challenges Defining Presentation, Basic Content, and Narrative: The Initial Treatment Refining the Content and Presentation: The Script Treatment and Script Development: The Prototype Conclusion: Response to the Project References

397 397 400 400 401 402 402 402 403 403 408 413 422 422

25

Key Points from Part III: How to Write Interactive Narrative

423

A Story with Interactive Potential Strong Linear Narrative (Chapter 17) Classical Structure (Chapter 17) Characters The Player (Chapter 18) Character Interactivity (Chapters 23, 24) Architecture: Structure and Navigation (Chapter 18) Linear with Scene Branching (Chapter 18) Puzzle-Based Narrative (Chapter 20) Hierarchical Branching (Chapter 18) Parallel Structure (Chapters 18, 22) String of Pearls (Chapters 18, 23) Immersive Exhibit/Experiences (Chapter 24) Information Based Narratives (Chapter 24) Storytelling Devices (Chapters 18, 23) Mechanics of Scriptwriting (Part 1)

423 424 424 424 424 424 425 425 425 425 426 426 426 426 427 427

xxiv

Book Contents

Interactive Writing Careers

26

P A R T IV

Conclusion: Becoming a Professional Interactive Writer

431

Types of Jobs The Challenges Creative Challenges Technical Challenges Productivity and Organizational Challenges Meeting the Challenges Getting the Skills Creating Your Portfolio Networking Getting the Job Employment Web Sites New Media Job Recruiters Marketing Original Articles and Projects Good Luck

431 432 432 433 433 433 433 435 436 437 437 438 438 440

Appendix: Writer and Designer Biographies and Company Descriptions Glossary Index

441 447 469

CD-ROM Contents

How to: The Author’s Tips on Getting the Most from This CD-ROM • • • •

How to use this CD-ROM Highlights of the CD-ROM Link to the Writing for Multimedia and the Web web site How to contact the author

Chapters: Script Samples, Screen Shots, Game Demos, Articles, and Videos Arranged by Chapter Chapter 10 Case Study–—Writing a Marketing Web site from Proposal to Documentation: Prudential Verani Realty • Color screen shots of web pages • Complete interactive outline • Complete production sitemap

Chapter 11 Case Study–—Corporate Web Site: T. Rowe Price • Types of web sites defined with screen shots and links • Color screen shots from current site • Dynamic flow of information and navigation from 2nd Generation web site: ◦ ◦ ◦ ◦

The Watch List The Interactive Tutorial—Online Investment Strategy Planner Commission Calculator 2-click navigation

• Comparing home pages of 3 site versions

xxv

xxvi

CD-ROM Contents

Chapter 12 Case Study–—Research Portal Web Site and the Online Feature Story: Britannica.Com and the Harlem Renaissance • Color screen shots from the web site • Production sitemap

Chapter 13 Case Study–—E-Learning: Interactive Math and Statistics Lessons • Color screen shots • Complete Math Script • Complete Statistics Script

Chapter 14 Case Study–—Museum Kiosk: The Nauticus Shipbuilding Company • Color screen shots • The overhead plan for the 3-D shipyard • Links to museums that use multimedia

Chapter 15 Case Study–—Training: Vital Signs • Script samples • Color screen shots

Chapter 20 Case Study–—Adapting Classic Books to a Computer Game for the Female Audience: Nancy Drew: The Secret of the Old Clock • • • •

Excerpt of Production Flowchart and Chart Legend Character Screen Shots Game Play Screen Shots Video Introduction

Chapter 21 Case Study—Adding Story to a Simulation: Amped 3 • Color Screen Shots • Story Development Documents • Script: Introduction and Act I

CD-ROM Contents

Chapter 22 Case Study—Parallel Stories Narrative: The Pandora Directive • The Pandora Directive ◦ The complete walkthrough ◦ The complete list of the character Louie Lamintz’s responses ◦ Attitudes, dialogue, and Ask Abouts ◦ Color screen shots illustrating the walkthrough and the Louie Lamintz material ◦ Dialogue flowcharts • Under A Killing Moon (the prequel to The Pandora Directive) ◦ Response attitudes and Ask Abouts ◦ Dialogue flowcharts ◦ Screen shots ◦ Bio of writer and description of developer with links to their web page

Chapter 23 Case Study—Worlds Narrative: Dust: A Tale of the Wired West • Dust: A Tale of the Wired West ◦ The complete dialogue transcripts for one of Dust’s characters, Marie Macintosh ◦ The storytelling techniques used in Dust illustrated with screen shots ◦ Screen shots ◦ A working demo • Titanic: Adventure Out of Time (the next program by the writer of Dust) ◦ Screen shots

Chapter 24 Case Study–—Immersive Exhibit: The New England Economic Adventure • Screen Shots • Treatment

xxvii

xxviii

CD-ROM Contents

• Script Treatment • Script

Chapter 26 Conclusion: Becoming a Successful Interactive Writer Links to schools, professional associations, job web sites, interactive media recruiters, and other resources for getting writing work and marketing your own ideas.

Case Studies: CD-ROM Only (Chapters from earlier book editions) Online Advertising Case Studies: ZDU and Personal View Campaigns (Ch. 13 2nd edition) • • • • • •

Complete 2nd edition chapter Working animations and color screen shots of the ZDU campaign An article entitled “Persuasion Theory and Online Advertising” Links related to online advertising ZD Net Personal View (case study from first edition of book) Color images of all drafts of the banner advertisement and the middle page for the Personal View campaign

Educational Multimedia Case Study: Sky High (Ch. 15 2nd edition) • Complete 2nd edition chapter • Links to educational web sites • Bios of writers and description of developer

Multiplayer Narrative Case Study: Boy Scout Patrol Theater (Ch. 14 1st edition) • • • • •

Complete 1st edition chapter The complete script of Boy Scout Patrol Theater Color screen shots illustrating the script Links to other multiplayer games and experiences Bio of writer and description of developer

Puzzle-Based Game Case Study: The 11th Hour: The Sequel to the 7th Guest (Ch. 21 2nd edition) • Complete 2nd edition chapter • The 11th Hour: The Sequel to The 7th Guest ◦ Script samples

CD-ROM Contents

◦ Color screen shots illustrating the script ◦ The documentary video The Making of The 11th Hour, which includes scenes from the game and interviews with the creators • The 7th Guest ◦ Script Samples ◦ Color screen shots illustrating the script

Cinematic Narrative Case Study: Voyeur (Ch. 22 2nd edition) • • • •

Complete 2nd edition chapter Script Samples Color screen shots illustrating the script Other issues illustrated with screen shots

Background: Articles on Multimedia and Web Production and Playback, Access, and Media Law • • • • •

Introduction to Interactive Media (Multimedia and the Web) Playback/Delivery Systems Production Systems and Software Writing Accessible Multimedia and Web Sites Interactive Media Legal Primer

References: References, Bios. of Writers, a Glossary of Multimedia Terms, and Information on Multimedia Education • • • •

Searchable Glossaries of Multimedia Terms Bios of Multimedia Writers and Descriptions of Production Companies References Information for the Teacher and the Student

Software Links to software useful to the interactive writer including software for scriptwriting, flowcharting, and WYSIWYG web site editors N.B. All sections of the CD-ROM will include links to pertinent sites on the World Wide Web that can be accessed if the reader has an Internet connection.

xxix

This Page Intentionally Left Blank

Acknowledgments

I’d first like to thank the editors and staff at Focal Press for their help and support writing and producing this book and CD-ROM, especially my editor Amy Jollymore and assistant editors Cara Anderson and Rachel Epstein. This book could not have been written without the generous donation of script samples and images by the copyright holders and production companies. Many thanks to The Federal Reserve Bank of Boston, Her Interactive, InterWrite, Jeff Kennedy Associates, CyberFlix Inc., Indie Built, Trilobyte Inc., Chedd-Angier Production Company, T. Rowe Price Associates, Access Software Inc., National Scouting Museum of the Boy Scouts of America, Ziff-Davis, Houghton Mifflin Company, Harvard Pilgrim Health Care, Encyclopaedia Britannica, Philips Media, and Prudential Verani Realty. Equally crucial was the time generously donated by the many writers and designers interviewed for this project. In the informational programs they include Shawn Hackshaw, Andrew Nelson, Kevin Oakes, Deborah Astudillo, Maria O’Meara, Steve Barney, John Cosner, Fred Bauer, Matt Lindley, John Hargrave, Peter Meyerhoff, Tom Michael, Emmett Higdon, and Peter Adams. The storytellers are Anne Collins-Ludwick, Madeleine Butler, Jane Jensen, Shannon Gilligan, Tony Sherman, Matt Costello, Dave Riordan, Lena Marie Pousette, Aaron Conners, and Andrew Nelson. A full list of all who contributed may be found in the Appendix at the back of the book. I also want to thank the readers of the first draft: Annette Barbier, Glorianna Davenport, and Maria O’Meara. I owe a special debt to writer Maria O’Meara, who not only critiqued the first edition manuscript but also contributed interviews and material for case studies for several editions of this book.

xxxi

This Page Intentionally Left Blank

Introduction

Third edition! I guess I must be doing something right in these pages. I have been gratified by e-mails and testimonials from writers and interactive media developers from all over the world, including Brazil, Finland, Malaysia, and the United States, who have written and told me how helpful my book was to them. This new edition continues the same approach that has been useful to my readers in the past but adds four new case studies; new sections, such as writing for blogs and usability tips for writers; a glossary; and updates throughout. This is the only current book that takes on developing content for the full range of interactive media, including computer games, training programs, web sites, museums exhibits, and e-learning courses. Having a broad understanding of all types of interactive content is essential for success as a writer of interactive media. You may think you just want to write web sites or computer games or educational programs, but there is such a blending of the different content types that you really have to know it all. Informational web sites can include games and instructional programs. Educational media is all over the web with online courses and other e-learning programs. The gaming business has an even greater online presence both for the games themselves and for marketing and promotion. Writers radically increase their value by learning to write for all types of interactive media. This book addresses that need. It is a book on writing for multimedia and the web—and much more. To be effective, an interactive writer has to be more than just a great wordsmith. The interactive writer must also understand the architecture, tools, and capabilities of interactive multimedia. This book provides a detailed explanation of the process of conceptualizing multimedia and web sites that both the newcomer and media industry professional will find valuable. Part I, “Interactive Media and the Writer,” examines the particular demands that multimedia and the web make on the writer, including interactivity, writing for many media, organizational tools, and script formatting. Part II, “Writing Informational Multimedia and Web Sites,” and Part III, “Writing Interactive Narrative,” are devoted to in-depth case studies of a wide variety of

xxxiii

xxxiv

Introduction

projects, ranging from web sites, to training, to games. Some of the top writers and designers for multimedia and the web reveal their secrets for creating powerful programs. Their ideas are documented with extensive script samples, flowcharts, and other writing material. Part IV, “Interactive Writing Careers,” outlines the challenges the interactive writer faces and provides tips for developing an interactive writing career and for marketing your own projects. The Glossary at the back of the book provides clear definitions of terms for readers who are new to interactive media. The attached CD-ROM includes script samples, screen shots, program demos, multimedia production information, links to software, a video on the creation of a multimedia program and other supplementary material. Read this book and CD-ROM interactively; choose what is valuable to you. If you are a NEWCOMER, start at the beginning of the book and browse through the background material on the CD-ROM. If you are an experienced INTERACTIVE MEDIA PROFESSIONAL, focus on the later chapters and the case studies to see how some of the top multimedia and web professionals work their magic. If you are or want to become a WEB WRITER or DESIGNER, you will benefit from the chapters about web sites and from the multimedia case studies as well, because many of the multimedia techniques discussed are now regularly used on the web or soon will be. If you are a GAMER, read Part III to learn how current and classic games were created. If you are a MEDIA SCHOLAR, study the entire book for a solid grounding in the principles and practices of interactive media. If you are a JOB SEEKER, check out Part IV, “Interactive Writing Careers,” for suggestions on how to develop an interactive media writing career and to market your own writing projects. So turn the page or pop in the Writing for Multimedia and the Web CD-ROM, browse the contents, and choose the material that suits your needs. Tim Garrand [email protected]

Interactive Media and the Writer PART I

1

Figure I-1 A portion of the writer’s flowchart for Nancy Drew: Secret of the Old Clock computer game. Copyright Her Interactive, Inc.

Interactivity and the Writer

1

Chapter Overview This chapter defines important terms and explains the key concepts relating to interactivity, including: • • • • •

Interactivity versus control Thinking interactively Linking High-level design Interactive devices

Write It All! Writing for multimedia and the web may be the most challenging work you will ever do. • • • •

Writing great prose text is not enough! Creating engaging video scripts is not enough! Writing audio like a radio pro is not enough! Making characters come alive with snappy dialogue is not enough!

As a writer for interactive media, you have to do all these things and more. To be truly effective in this field, you will have to do more than write great text. The most exciting programs today go beyond click-and-read. This includes the latest generation of web sites, as well as computer games, educational programs and other cutting edge interactive media. To develop powerful interactive content, you will need to understand how to tame the complex structure of interactive media and write for video, audio, animation, and online applications. And, most of all, you will have to understand intimately each program’s users and the impact of their interactions on your content.

3

4

WRITING FOR MULTIMEDIA AND THE WEB

Based on my experiences on nearly one hundred projects and on interviews with dozens of top experts in the interactive media field, I will describe how to master these skills and give examples from detailed case studies of successful programs. The case studies include professional interactive scripts, charts, and other documents that can serve as models for your own interactive writing assignments.

Defining Interactive Multimedia and the Interactive Writer Defining a Few Terms Why “Multimedia and the Web” in the title of this book? I know the word police will complain that this doesn’t make sense, because multimedia is actually a common type of content on the web. The words “multimedia” and “web” are not mutually exclusive, I know. I agree, but many users still think of the web as a place of mainly static pictures and text, while multimedia is the more interactive and media rich world of computer games, edutainment programs, and the like. I wanted to make it clear that this book is addressing the broad spectrum of interactive media content development. Before we go forward, I should define how we will use the terms “multimedia” and “interactive media” in this book.

Defining Multimedia As used in this book, “multimedia” and “interactive multimedia” are defined by four basic characteristics: • Combination of many media into a single piece of work. Combining several media or modes of expression into a single integrated program or piece of work is one aspect of multimedia. Video, text, audio, and still pictures are all examples of different media or modes of expression. • Computer mediated. In multimedia, a computer is used to mediate or make possible the interaction between the users and the material or media being manipulated. “Computer” is used here in the broadest sense, including computers in cell phones, game consoles, and other devices, as well as traditional PCs. No computer involved = no multimedia. A book with pictures is not multimedia. • Media-Altering Interactivity. User interactivity in multimedia is best defined as “the ability of the user to alter media he or she comes in contact with . . . Interactivity is an extension of our instinct to communicate, and to shape our environment through communication” (Jordan). Blowing up an alien in a computer game is altering the media. Customizing your broker’s web page so that it presents only the financial information you want is altering the media, as is visually creating

1

Interactivity and the Writer

your dream car on an automaker’s site. Shopping on television does not qualify as interactivity under this definition. • Linking. Linking allows links or connections to be made between different media elements. This can be the menu links connecting different sections of a web page, or the narrative links in a computer game that are triggered by the actions you choose for the character. To sum it up, multimedia is a combination of many media into a single work where media-altering interactivity and linking are made possible to the user via the computer. This definition includes all the disc- and cartridge-based (CD, DVD, Xbox, etc.) programs and most of the web sites in this book.

Defining Interactive Media “Interactive media” has traditionally been a much broader term than “multimedia.” “Interactive media” is used to describe all media with interactivity. It usually refers to computer-delivered interactive media, including both multimedia programs and nonmultimedia interactive programs, such as click-and-read web sites that have limited interactivity and no animations, video, or sound. This is how the term interactive media will be used in this book. In short, interactive media is computer-delivered media or modes of expression (text, graphics, video, etc.) that allows users to have some control over the manner and/or order of the media presentation.

“Multimedia” and “Interactive Media” in This Book Based on the above definitions, I will generally use the terms “multimedia” or “interactive multimedia” in this book to indicate my major focus is on computer games, E-learning, training programs, web sites, and other projects that use a combination of computer mediated rich media, complex interactivity, and linking. I will use “interactive media” to refer to all types of computer-delivered media with interactivity, including multimedia, such as computer games, AND simpler interactive media, such as pictures-and-text web sites.

Types of Interactive Multimedia The web is a growing platform for multimedia. Material is presented on sites through multiple media, including pictures, text, video, audio, and animation. The user controls the flow of information and/or performs complex tasks. Examples of Internet rich media applications include interactive animated presentations explaining a product; financial calculators with opportunities to input data and see visual presentation in charts and graphs; product searches with text, audio, and visual elements that allow the user to see how their search terms affect product choices; E-learning courses with exercises, examples, and student-teacher interactions; and online games of all types.

5

6

WRITING FOR MULTIMEDIA AND THE WEB

In addition to the World Wide Web, multimedia is presented on local networks, such as corporate intranets; computer hard drives, such as museum kiosks; interactive television, such as MSN TV; dedicated gaming systems, such as PlayStation and Xbox; mobile devices, such as PSPs (Play Station Portables), iPods, and phones; and discs, such as CD-ROMs and DVDs. Interactive multimedia has dozens of uses, with the most common being marketing, sales, product information, entertainment, education, training, and reference material. (See the Glossary at the back of the book for definitions of unfamiliar terms.) If you are completely new to multimedia and the web, and feel you need additional basic information on these subjects, you may want to review the Background section of this book’s attached CD-ROM.

The Role of the Interactive Writer The interactive writer may create: • • • • • • • •

proposals, outlines, sitemaps, treatments, walkthroughs, design documents, scripts, and all the other written material that describes a multimedia or web site project.

This can include developing the information architecture, on-screen text, overall story structure, dialogue, characters, narration, interface, and more. The key difference between writing for linear media, such as television and movies, and writing for interactive media is interactivity, which allows the user of the program to have control over the flow of the information or story material.

Interactivity Versus Control Potential Interactivity Interactivity means that the user can control the presentation of information or story material on the computer. The potential interactivity of multimedia is awesome. It is possible to interact not merely by screen or page, but by controlling the presentation of individual objects within a screen, such as a single character’s actions in a scene, the color of a part of an image, or the presentation of a line of text.

Limits to Interactivity There are practical limits to the potential of a particular user’s interactivity. The viewer’s equipment has to be powerful enough to support the level of interactivity. And even if the viewer has the best system in the world, if the source material is a

1

Interactivity and the Writer

CD-ROM, a DVD, or some other closed system, the player is working with a finite number of options. He or she can access only what the makers place on the disc. This limitation disappears when multimedia is delivered online, through the World Wide Web or an online service, which allow users to link instantly to thousands or perhaps millions of other sources throughout the world. However, for web surfers who still use a modem, the slow download speed can make the online multimedia experience sometimes frustrating. See the “Playback/Delivery Systems” article in the Background section of this book’s CD-ROM for a detailed discussion of this issue. Is unlimited interactivity the most effective way to communicate with multimedia, if technically possible for the user? It depends to a great degree on what your goals are. If, for example, you are trying to tell a story, such as the interactive narrative Voyeur, the degree of interactivity you can allow and still create believable characters, intriguing plot, and suspense will be far less than if you are simply creating a world for viewers to inhabit, such as SimCity 3000. Similarly, a web site with the focused goal of getting you to buy a car will have far less interactive options than an online encyclopedia that wants you to explore its information. Voyeur designer David Riordan echoes the feeling of many multimedia developers when he says that: “Infinite choice equals a database. Just because you can make a choice doesn’t mean it’s an interesting one.” He says that the creators of multimedia must maintain some control for the experience to be effective.

Thinking Interactively Thinking of All the Possibilities The stumbling block for most new interactive writers is not limiting interactivity and maintaining control over the multimedia experience. Most new writers have the opposite problem of overly restricting interactivity and failing to give users adequate control over the flow of information or story material. This is because limiting options is what most linear writers have been trained to do. In a linear video, film, or book, it is essential to find just the right shot, scene, or sentence to express your meaning. In writing for interactive media, “the hardest challenge for the writer is the interactivity—having a feel for all the options in a scene or story,” says Jane Jensen, writer-designer of the Gabriel Knight series. Tony Sherman, writer-designer of Dracula Unleashed and Club Dead agrees. Unlike a linear piece in which it is crucial to pare away nonessentials, in interactive media, the writer must “think of all the possibilities.”

Viewer Input It is difficult to predict how the viewer will interact with all the possibilities in a piece. Jane Jensen warns that this can sometimes make multimedia “a frustrating

7

8

WRITING FOR MULTIMEDIA AND THE WEB

and difficult medium . . . You have this great scene, but you have to write five times that much around it . . . to provide options. When your focus is on telling the story, that can feel like busy work and a waste of time.” For example, you have a telephone in one scene that your player must dial to call his or her uncle and find out who the murderer is. This is near the end of the game and getting the telephone number itself has been one of the game’s goals. The writer needs to anticipate all the things players might try to do with that telephone. What if players get the telephone number from having played the game earlier, and they then jump ahead to the telephone scene? What should happen when they dial? Should they get a busy signal? What if they dial the number after they have gotten it legally in the game, but they don’t have all the information they need, such as knowing that the one who answers is their uncle? Should the writer give them different information in the message? What if they dial the operator? What if they try dialing random numbers? This can be equally complex in an informational multimedia piece where you must anticipate the related information that the viewers will want to access and all the different ways they may want to relate to the key information. Compton’s Interactive Encyclopedia, for example, allows users to explore a particular piece of information through text, pictures, audio, videos, maps, definitions, a time line, and a topic tree. The design of the program allows all of these different approaches to be linked together if the viewer desires. This means that students studying Richard Nixon can mouse-click their way from an article about Nixon to his picture, to an audio of his “I Am Not a Crook” speech, to a video about Watergate and Nixon’s resignation, and finally to a time line showing other events that happened during his presidency.

Knowing the User A key way to anticipate users’ input is to know as much about them as possible. This is also important in linear media, but it is even more crucial in interactive multimedia, because the interactive relationship is more intimate than the more passive linear one. Knowing the audience is absolutely essential. Knowing what the user considers appealing and/or what information they need will affect every element of a production, from types of links to interactive design. On most multimedia and web projects, considerable effort is put into researching the user. Some sources for user information include customer support lines, customer surveys and interviews, bulletin boards, salespeople, user groups, trade shows, and bulletin boards. This information is usually put together into a document called a User Scenario or a Use Case. A Use Case first describes the user and his/her information and entertainment needs. Then the user’s most common paths through the program to get information or complete a task are charted. This helps the designers understand how they need to present the content to meet the user’s needs. Before a major project is released to the general public, it is tested with

1

Interactivity and the Writer

small groups of users in usability studies. The feedback from these studies allows the developers to refine their information design.

Linking Links are the connections from one section of an interactive media program to another section of the same program or, if online, to a totally different program. When the information for a program or site is stored in a database, then the linked material can be even smaller or more granular. It is possible to link users’ actions to single program elements, sentences, or even words. The simplest link is a text menu choice that the user clicks to bring up new information. When writers develop links, they must make a number of decisions: • What information, program elements, pages, chapters, or scenes will connect with other sections of the program? • How many choices will the user have? • Which choices will be presented first? • What will be the result of those choices? • Will the links be direct, indirect, or delayed?

Immediate or Direct Links: An Action In an immediate or direct link, the viewer makes a choice, and that choice produces a direct and immediate response that the viewer expects. For example, in the detail in Figure 1-1 from the T. Rowe Price investment company’s web site, when the user clicks on the “Rolling Over Your 401(k)” link in the menu, they expect to and will get a page of information about 401(k)s.

Indirect Links: A Reaction Indirect links, also called “if-then” links, are more complex. Users do not directly choose an item, as in the example above. Instead, they take a certain action that elicits a reaction they did not specifically select. The following example is taken from the walkthrough for the computer game The Pandora Directive. The walkthrough describes the program’s story and the main interactive options for the user. At this point in the story, you, the user, are trying to escape with the woman Regan, but you have been cornered by the villains Fitzpatrick and Cross. EXCERPT FROM THE PANDORA DIRECTIVE WALKTHROUGH You get the choice of shooting Fitzpatrick, shooting Cross, or dropping the gun. If you try to shoot Fitzpatrick, you get trapped alongside Regan and Cross; then everybody dies, safely away from Earth. If you try to shoot Cross, he kills you before you ever get into the ship. If you drop the gun, you get to the spaceship.

9

10

WRITING FOR MULTIMEDIA AND THE WEB

Figure 1-1 Detail from the T. Rowe Price home page showing direct links. Copyright T. Rowe Price Associates, Inc.

An example of an indirect link in an informational piece is a student who fails a test in a certain subject area and is automatically routed to easier review material, instead of being advanced to the next level. The student did not make this direct choice. It is a consequence of his or her actions. Figure 1-2 shows how a student who could not answer an arithmetic question in a math tutorial is sent back to an arithmetic review module as opposed to being advanced to the more difficult material. A number of educational multimedia programs work this way. Indirect links can also cause multiple things to happen when the user clicks one choice. This is most common in a program or web site where the information is dynamic because it is stored in a database. What this means is that the information is not static in large sections, like the pages and chapters of this book or a traditional HTML web page. If this book was a database-generated web site, every paragraph or sentence in it would be a separate piece of information. Depending on what actions the user took on the web site, these separate pieces of information could be sorted, organized, and displayed in the order requested by the user. For example,

1

Interactivity and the Writer

Figure 1-2 Indirect links: A reaction to user input.

on the T. Rowe Price web site, users can fill out a form and establish the list of mutual funds and stocks that they are most interested in. After they have done this once, when they log on to the site in the future, they are activating a program that searches out the most current data on their topics in the database, organizes this data, and presents it to them. Chapter 11 profiles this site and describes dynamic information flow and customization in more detail. In the T. Rowe Price example, the multiple actions (sorting, organizing, etc.) are finally displayed in one location, but a single indirect link can also create multiple actions throughout a site or program. For example, on a well-designed web site for an auto dealer, when a salesperson sells a car and enters the final sales form into the system, the car is automatically removed from the display on the public web site and from the dealer’s inventory list. The site might also automatically generate an e-mail message to the customers thanking them for their business.

Intelligent Links or Delayed Links: A Delayed Reaction Intelligent links remember what choices the user made earlier in the program or on previous plays of the program and alter future responses accordingly. These links can be considered delayed “if-then” links. In a story, intelligent links create a realistic response to the character’s action; in a training piece, they provide the most effective presentation of the material based on a student’s earlier performance. In The Pandora Directive, for example, you as the player are a detective who is trying to get in touch with Emily, a nightclub singer. You meet Emily’s boss, Leach, well before you meet her. If you are rude to him, he mistrusts you. Later in the script when you try to rescue Emily, he will block your entrance to her room, and she will be strangled. If, however, you are nice when you first meet him, he lets you in, and you save her. Certain web sites record every click you make and gradually define your preferences. This allows the sites to personalize their presentation to you so that they only show you information and products of interest to you. One example is Amazon.com’s recommendation of new book titles to repeat users based on past purchases. The most sophisticated sites might also personalize the way the information is presented. For example, a user who always jumps right to the online videos would be presented with pages containing more multimedia.

11

12

WRITING FOR MULTIMEDIA AND THE WEB

Customization and personalization will be discussed in more detail later in this book in Chapter 7.

High-Level Design and Information Architecture The complexity that interactivity and linking add to a multimedia project demands strong high-level design and/or information architecture for the program to be coherent and effective. High-level design determines the broad conceptual approach to the project, including the structure, interface, map, organizing metaphors, and even input devices. Information architecture or interactive architecture is the term usually applied to web sites for the overall grouping of the information, design of the navigation, and process flows of online applications.

Structure as an Interactive Device The overall structure of a piece is one of the main ways interaction can be motivated in a narrative. In the computer game Half-Life 2, scientist Gordon Freeman is on an alien-infested Earth and he must rescue the world from the evil he unleashed in the first Half Life. The player’s main interactions, which are motivated by this story, are exploring the barren futuristic world and (of course) blowing away bad guys. In another game,Grand Theft Auto: San Andreas, you play the role of Carl “CJ” Johnson who is returning home to find out why his mother has been killed. It’s not long before you/Carl are rebuilding your street gang in order to get to the bottom of the problems and set things straight. In the narrative informational piece A la rencontre de Philippe, the player is motivated to learn about Paris through the role of helping Parisian friends find an apartment. In another narrative information piece The Oregon Trail, your task is to outfit a wagon, join a wagon train, and make the journey safely across the country. This basic premise inspires a whole series of user interactions with the program from buying supplies, choosing a team of animals for the wagon, and shooting deer for food on the trail. The overall structure and navigation of a nonnarrative informational multimedia piece is called the information or interactive architecture. This is a large topic that will be dealt with in more detail in Chapter 3 and in the case studies, but it is worth mentioning here. Poorly structured information will cause the user either to fail to interact with the program at all, or to get confused and give up part way through. For example, good information architects knows what information to put on the top level of the interactive program, such as a web site’s home page, to engage the user’s interest. After hooking the user, this top-level information has to lead the user logically to the information that the user wants.

Interface Design Another way to help users find their way through the complex structure of an interactive media production is through good interface design. The interface is simply

1

Interactivity and the Writer

the “face” or basic on-screen visualization of the information or story material in a program. The interface governs how we will interact with multimedia. An interface can be as simple as a list of words in a clickable menu that organizes the information into content categories, such as the T. Rowe Price menu in Figure 1-1. The interface can also be more graphical, such as the time clock and icons from the Harlem Renaissance site in Figure 1-3. The interface can also be much more complex, such as the interface for the computer game Nancy Drew: Secret of the Old Clock computer game, which allows the user to interact with the story material in a variety of ways using items in the bottom tool bar and items in the main screen (Figure 1-4). From the bottom bar players can bring up the tools and clues they have found, consult their notebook, track their money, and get help. There are many more options in the main interface, including walking, driving the car, talking to people, solving puzzles, and using the telephone. The amount of input the writer is allowed to give regarding the interface design depends on the designer and the project, but the writer must consider the overall interface design and information architecture when they are writing. Interface design is crucial in deciding how multimedia content will be organized. It affects the structure of the script for the writer and dictates how the viewer will interact with that content.

Figure 1-3 Timeline and icons from the Harlem Renaissance web site. Copyright Encyclopaedia Britannica, Inc.

13

14

WRITING FOR MULTIMEDIA AND THE WEB

Figure 1-4 Interface for Nancy Drew: Secret of the Old Clock computer game. Copyright Her Interactive, Inc.

The interface also affects the navigation of the piece—how the viewer can travel through the information or story and the order in which the information will be presented. The navigation is often demonstrated through flowcharts and diagrams. (See the flowchart which introduces Part I.) The U.S. White House web site (http://www.whitehouse.gov/) uses a simple hierarchical menu for navigation in which users can first choose from a number of global links in the top navigation bar. By clicking the link “First Lady,” the user is taken down a level to the First Lady’s page, on that page you have a number of options including “Press Releases and Speeches.” Clicking that link will lead to a list of actual speeches, which you can click to read the speech “The First Lady’s Remarks After the Christmas Day Lunch.” So this is an example of a hierarchical menu where you had to drill down four levels to get to the First Lady’s speech you were interested in: White House Home Page → First Lady Main Page → Press Releases and Speeches Menu → “The First Lady’s Remarks After the Christmas Day Lunch.”

Map or Sitemap An element of good interactive design is a sitemap or map that represents the overall structure of a piece in a concrete manner. A sitemap illustrates how the player should interact with the interface and navigate through the program. It can be as simple as a text menu that lists all the key pages of a web site, broken down

1

Interactivity and the Writer

by categories. This type of sitemap is used on the Prudential Verani web site profiled in Chapter 10. Sometimes the map is a flowchart of the entire production, as in the Oakes Interactive training piece for Fidelity Investments retirement counselors. In this program, a student can bring up the flowchart of the whole program and access any area of it by clicking on one of the labeled boxes. The “Book at a Glance” at the beginning of this book uses a flowchart to provide an overview of book contents. The sitemap can even be a literal map, as in Grand Theft Auto: San Andreas, in which the player can consult a map of the cities that make up the island of San Andreas to get oriented and decide where to go next. (The actual interface of the game is a 3-D animation of the town’s buildings and citizens, with whom the viewer can interact.)

Metaphors For software developers, the metaphor is a concrete image or other element that represents an abstract concept, making it clear and comfortable to the user. Perhaps one of the best-known software metaphors is the desktop. Windows PCs and Macs present the abstract concepts of computer files, directories, and software as file folders and documents that users can arrange and work with on the desktop. Metaphors are also used to design individual screens and navigational aids. According to designer Aaron Marcus, “consistency and clarity are two of the most important concerns in developing metaphors” (p. 98). Familiarity to the viewer is a third item that could be added. Consistency means that users should not use buttons as the main navigational tool on one screen and then suddenly have to switch to a different approach, such as clicking on pictures, in the next screen. Both of these are valid metaphors for linked information, but they are confusing when mixed. Consistent placement of the same types of information in the same place on the screen is also important. Creating familiar metaphors ties into knowing your audience. A valid metaphor for the structure of an elementary school education CD-ROM or web site might be a street in a town. This is something students are familiar with. It makes sense for them to click on a library to get information or a movie theater to see a film. On a micro level, a common metaphor is a book that opens. Click a dog-ear to turn a page. Click the table of contents to go to a chapter. Sometimes a metaphor can add to the mood of a piece. The Harlem Renaissance web site, profiled in Chapter 12, uses a tourist metaphor to help make the user feel that they are visitors to another era. The metaphor is strengthened with items such as street maps, e-mail postcards, and evocative full-page visuals. A common metaphor on many web sites, including the latest version of the Prudential Verani site profiled in Chapter 10, is a stack of file folders with tabs that can be clicked on to access the content of another “file folder” of information; see Figure 1-5. All of these examples are concrete objects or concepts that help make accessing information more usable.

15

16

WRITING FOR MULTIMEDIA AND THE WEB

Figure 1-5 Home page for Prudential Verani Realty, showing file folder tab navigation metaphor. Copyright Prudential Verani Realty.

Familiar metaphors help orient viewers, but this certainly doesn’t mean that metaphors have to be clichéd or boring. Certainly a designer who can push the envelope without losing the audience should by all means go for it. There is lots of room to be creative. It is important to make even the minor elements of a production work well. For example, one of the frustrating things in multimedia is the “wait-state” image. Many programs are content to give the standard clock or hourglass, but there is no rule that the wait-state image cannot be fun. A.D.A.M. The Inside Story, an anatomy program, shows a skeleton with a cup of coffee. Some children’s programs have scurrying animals.

Input Devices Writers might also consider how the users will input their responses to the program. Standard choices include the keyboard, mouse, game controller, guns, writing text on screen, and touch screen, but sometimes the input device can be integrated into the material. Instead of a mouse, the Guitar Hero game has a guitar you can play and become a rock star, complete with visual action at six different locations, from basement parties to sold out stadiums. Redbeard’s Pirate Quest uses a model pirate ship loaded with electromagnetic sensors. Speech recognition is also finally coming of age, and this could have a major impact on interactive narratives. Even more exciting are the potential applications for multimodal interaction. “Multimodal systems process combined natural input modes—such as speech, pen, touch, hand gestures, eye gaze, and head and body movements—in a coordinated manner with multimedia output” (Oviatt, p. 74). For interacting with complex multimedia programs, such

1

Interactivity and the Writer

as virtual worlds populated with intelligent animated characters, a multimodal system will be far superior to the conventional Windows-Icons-Menus-Pointer (WIMP) interface.

Interactive Devices In addition to the high-level design elements, the designer and writer must develop specific interactive devices that will make users aware of the interactive possibilities they have created. These devices include icons, on-screen menus, help screens, props, other characters, cues imbedded in the story or information, and more.

Icons In computer usage, an icon is a symbol that represents a command or an ongoing action. For example, the floppy disc image in the toolbar of many software programs indicates the Save function. An hour glass icon indicates that the computer is doing a process and the user must wait. Various types of icons are used for interactive devices. In Voyeur they are used to inspire viewers to look into the rooms of the mansion that are visible from the voyeur’s apartment. If the voyeur moves the camera over a room in which there is action to view, an eye icon appears. If there’s something to hear, an ear appears. If there is evidence to examine, such as a letter, a magnifying glass appears. Clicking on the icons causes the material to be presented. The Nancy Drew games do something similar with the magnifying glass glowing when an item is clickable. In Britannica.com’s Harlem Renaissance web site, icons are used to efficiently indicate the main sections of the site in the web site’s navigation bar; see Figure 1-3. The megaphone is for leadership, the page is for literature, the palette is for art, and so on. The meaning of the icons is clarified through the use of rollovers that show text labels when the mouse passes over one of the icons. In the Oregon Trail, icons on the bottom of the screen let the player/traveler check the status of supplies and health for the group. The supplies icon shows a bag of flower and some containers; the health icon has a medicine bag and medicine. Be careful not to overuse icons or rely on obscure icons. Many icons benefit from a text label, and sometimes it’s better to skip the icons altogether and rely on text alone.

Menus and Other Text The text menu and the navigation bar are traditional and still effective ways to access material in informational multimedia. Figure 1-1 shows a menu from the T. Rowe Price web site. In addition to static text, menus can also be presented as popup or drop-down menus that take less screen space (Figure 1-6). They only appear when the user clicks on them. Text links can also be highlighted directly on

17

18

WRITING FOR MULTIMEDIA AND THE WEB

Figure 1-6 Drop-down menu from the T. Rowe Price web site. Copyright T. Rowe Price Associates, Inc.

a page within the body text, as in Figure 1-3, where the names of important figures of the era are links to additional information. Although text menus can work well in an informational piece, they can disrupt the flow of a narrative. However, some designers are willing to accept that disruption to achieve a high degree of interactivity. In Under a Killing Moon, written by Aaron Conners, menus allow the player a wide variety of action options, including look, get, move, open, and talk. The player can even choose the tone of the

1

Interactivity and the Writer

lead character’s dialogue by picking menu choices such as “Rugged Banter,” “Indignant,” and “Reeking of Confidence.” (See Chapter 23, “Parallel Stories Narrative Case Study: The Pandora Directive,” for a more detailed discussion of response attitudes.) Grand Theft Auto: San Andreas will also use text to indicate actions for the user. Text will appear on the screen at key moments with tips, such as “Ride the bike.” or “Keep up with your buddy.” Sometimes words on the screen are optional. In Under a Killing Moon, players can pull down an optional hints window. This helps orient them in the game and tells them their interactive options. Sometimes written material is integrated into the story itself. Shannon Gilligan’s Who Killed Sam Rupert? includes an investigator’s notebook that keeps track of what the detective/player has done so far in the game. The Nancy Drew games use a similar device. Many online transactions, such as an online account opening for a bank, also have optional help text or product information that the user can decide to access or not.

Props Props are a popular interactive device. In Under a Killing Moon, the character can click on objects in the room to get information. Depending on the object, a player might hear a voice-over wisecrack about a painting, or even see a full-motion video flashback that shows the detective’s relationship with the object. In the educational CD-ROM Sky High, users can click on various props in a scene, such as toy helicopters and birds, to bring up additional information related to that aspect of flight. Props that a character can actually use as they might be used in real life are particularly effective. In the educational game Zoo Vet, the player can use a wide variety of medical instruments to help sick zoo animals. The game Half Life 2 has a wide variety of props that the user can manipulate, which encourages interaction. For example, in one scene, the character has to pile a group of boxes a certain way to climb out of a window.

Characters Characters are another way to guide interactions. Sometimes this is the primary function of the character. In the Nancy Drew games, telephone calls from her friends and father nudge her in one direction or another and give additional clues. In the same games, talking with most of the main characters inspire additional actions. The investigators in Who Killed Sam Rupert and Gabriel Knight both have assistants who remind them of appointments, give them telephone messages, or suggest people to talk to. Other characters, who are not primarily information givers, might say things that suggest a location to visit or a person to interview. This is often used in Half Life 2. A character can also be used as a guide to lead the viewer through the material. This can be successful in both narrative and nonnarrative pieces. For example,

19

20

WRITING FOR MULTIMEDIA AND THE WEB

children’s educational programs frequently have characters that suggest what actions to take and what information to explore. The veterinary assistants in Zoo Vet perform this function by telling the player/veterinarian when their diagnosis and treatment is off track. Many training e-learning programs will have an expert guide you can call upon for advice when you are trying to complete a task. This guide is usually represented as video, graphics, text, and/or audio of a specific person who can be called upon for help and advice as if they were a live consultant. In the narrative video game Astronomica, the daughter of the doctor who disappeared approaches you, the user, directly by banging on your bedroom window and asking you to help find her father. She leads you to her father’s lab, where she works on the main computer, and sends you into the exploratorium to solve the problems there. She also appears now and again on a small communications monitor in the exploratorium to give you tips and encouragement.

Challenge of the Interactive Device The challenge of the interactive device is to design something that will motivate interaction without radically disrupting the flow of information or story material. A well-designed interactive device will not pull us out of the dream state of storytelling or disrupt our train of thought as we pursue information. In short, interactive devices must be well integrated into the material.

Conclusion This chapter has provided a broad overview of some of the key interactive issues the writer must consider when developing a multimedia informational or narrative program. Although the elements discussed above, such as interface design, are not always under the control of the writer, the writer must understand these concepts if he or she is to write effectively for interactive media. This chapter has discussed the “interactive” component of interactive multimedia. The next chapter will address the “multimedia” aspect of interactive multimedia. Writing for multimedia or many media is another key challenge for the writer.

References Davenport, Glorianna. “Bridging Across Content and Tools.” Computer Graphics 28 (February 1994), p. 31–32. Halliday, Mark. “Digital Cinema: An Environment for Multi-threaded Stories.” Master’s thesis, Massachusetts Institute of Technology, 1993. The Harlem Renaissance web site. http://www.britannica.com/harlem, 1999. Jensen, Jane. Telephone interview with the author, July 1994.

1

Interactivity and the Writer

Jordan, Ken. “Defining Multimedia.” NOEMA web site. http://www.noemalab.org/ sections/ideas/ideas_articles/jordan_multimedia.html Marcus, Aaron. “Making Multimedia Usable: User Interface Design.” New Media 5 (February 1995), p. 98–100. Oviatt, Sharon. “Ten Myths of Multimodal Interaction”. Communications of the ACM 42 (November 1999), p. 74–81. Prudential Verani web site. http://www.pruverani.com, 1999. Riordan, David. Telephone interview with the author, June 1994. Sherman, Tony. Telephone interview with the author, July 1994. T. Rowe Price web site. http://www.troweprice.com, 1999.

21

This Page Intentionally Left Blank

Writing for Many Media

2

Chapter Overview The multimedia writer must be able to write effectively for a variety of media. This chapter outlines some of the basic principles for writing: • Text • Audio • Video

The Skills of the Interactive Writer The necessity of writing for many media in the same production is as demanding on the multimedia writer as is dealing with interactivity. Unlike a print writer who can focus on honing communication skills with the written word, or the screenwriter who can specialize in communicating with images, the writer of interactive multimedia must be expert in a variety of techniques: writing to be read (journalism, poetry, copywriting); writing to be heard (radio, narration); writing to be seen (presentations, film, video); plus writing for the special demands of the computer screen. This is because multimedia can easily incorporate many types of media in a single production or even on a single screen, and multimedia can manipulate these media in ways not previously possible. Depending on the project, a multimedia writer may write on-screen text, audio narration, video action and dialogue, and other material. Often writers also write ancillary material, such as hints files and help screens. There are basic style differences in each of these types of writing. Following are a few guidelines, but if there is an area where you feel you are particularly weak, consult some of the resources listed in the “References” section of this book’s CD-ROM.

23

24

WRITING FOR MULTIMEDIA AND THE WEB

Text The World Wide Web has brought a major resurgence in the writing and reading of text in multimedia programs. Even with the increased use of web video, audio, and animation, on-screen text still plays a major role on most web sites where the primary activity of most users is still reading. The popularity of blogs (short for “weblogs”), which are composed mainly of text and links, has also increased online reading. A blog is a web site or portion of a web site that is set up to allow easy creation of additional content by multiple individuals. Information is posted on a regular basis, usually with the newest information coming first. Some blogs are restricted to one person or a set number of individuals, but many blogs are public so that anyone can add information and respond to earlier comments. Blogs are often used for noncommercial expression about a wide range of topics with current events, politics, and business among the most popular, but some commercial sites are starting to use blogs as a way to present news, PR information, and customer service. Blogs are also playing a larger role in political campaigns. Most of the writing tips below apply to blogs as well as to other online writing. Another use of text is in disk-based multimedia, such as CD-ROMs and DVDs, where it is most common in informational, educational, and training pieces.

Clear, Concise, and Personal An author writing blocks of text in an informational program or web site can take a few tips from print journalists: • Be accurate, check your facts, and be sure you understand what you are writing. • Keep sentences short and use simple sentence construction. • Use the lead or first sentence to tell simply and clearly what the following text is about. • Use the active voice—for example, “The dog bit the man,” not, “The man was bitten by the dog.” • Use descriptive nouns and verbs; avoid adjectives and adverbs. • Choose each word carefully, and avoid jargon or technical terms unless you are writing for a specialized audience. Andrew Nelson, the writer of the Harlem Renaissance site profiled in Chapter 12, suggests that when writing for the web you should remember that most people view the web as one person sitting in front of a computer. To connect to your site users, it is important to “write as if you are talking to an individual, not a collective group of anonymous web surfers.”

2

Writing for Many Media

Web Writing Tips from Usability Experts There are a number of text-writing techniques that are unique to writing for the computer screen. The main reason for using many of these techniques is that most people cannot read as quickly and as comfortably on a computer screen as they can from the printed page. Adding to the problem of writing for computer screens is that many readers use multimedia and the web to access information quickly. They do not want to sit down and read a six-page essay. They want to get the information quickly and then go about their business. The term “usability” describes how easy it is for users to perform tasks or get information on your web site or multimedia program. A number of usability experts have conducted tests with users and come up with conclusions about the most usable way to write and organize text for the web.

Write to Be Scanned Several classic site usability studies by Dr. Jakob Nielsen, usability engineer and information architect, discovered that many users don’t read web sites; rather, they scan them for the information they need. Later studies have confirmed that 80% of users scan web sites. (Koyani, Baile, Hall). To write effectively for these scanners, Nielsen suggests in The Alertbox: How Users Read on the Web that web writers use: • highlighted keywords (hypertext links serve as one form of highlighting; typeface variations and color are others) • meaningful subheadings (not “clever” ones) • bulleted lists • one idea per paragraph (users will skip over any additional ideas if they are not caught by the first few words in the paragraph) • the inverted pyramid style, starting with the conclusion and most important information • half the word count (or less) than in conventional writing These concepts are particularly true on the first couple of levels of a web site or multimedia program where users are trying to find the information they want. Once they have located their information deeper in the site, users may be content to read longer text material.

Recent Usability Studies Related to Text and Online Writing A more recent and more comprehensive study of web usability was organized by the U.S. Department of Health and Human Services and involved a large team of academics and practicing professionals who analyzed all the usability research currently available and came up with a number of conclusions that are useful to the web writer. (See http://www.usability.gov for additional information on this study.) The study confirmed Nielsen’s earlier work, but added a number of additional suggestions that are listed below.

25

26

WRITING FOR MULTIMEDIA AND THE WEB

Know and Respond to All Your Users • Writers must understand users’ expectations of a site. These user expectations can be formed by prior knowledge and past experiences. This requires user research by the writer or other members of the production team. Some sources for user information include customers support lines, customers surveys and interviews, bulletin boards, salespeople, user groups, and trade shows. • Present help for all users. This user assistance could be a help section, separate glossary, and/or being sure to define any unusual terms within the text. • Have text or other alternatives for information that is communicated by color. About 8% of males and a smaller number of females have trouble distinguishing colors. • Format information for multiple audiences. For example, if you have a medical web site, it might make sense to have differently written sections for doctors and patients.

Home Page, Navigation Pages, and Links • Describe your web site’s purpose clearly and simply on the home page. This can be done with a tag line or a brief piece of highlighted text high on the page. Don’t make users dig through the site to determine that your site has research information on televisions and is not a place to buy televisions. • Don’t have a lot of prose text on a home page or a navigation page. When most users come to a home page, they scan quickly looking for links to the information they want. A lot of text will either slow down their information search, or they may skip your site altogether. • For long pages that extend way below the fold, it helps users to have a clickable list of page topics at the top of the page. This allows them to quickly jump to the information on the page that they want. • Write “glosses” to help navigation. “Glosses” are bits of explanatory text that appear when a user moves the cursor over a link. This helps the user understand where the link is going. “Glosses” are not, however, an excuse for poorly labeled links and tabs. • Use a consistent clickability style. If your links are underlined and blue in one section, keep them the same throughout. Avoid using underlining for general, nonlink text because that suggests a link to most users. The top of the page and the left and right columns are common locations for link lists. • Make links in the body of the text descriptive. If you need to make the links a few words long, that is better than having an unclear link. Users tend to ignore the text around an embedded link, so don’t rely on that context to help. Avoid “Click Here.” Instead use descriptive text that tells specifically where the link will take the user, such as “Reptile Food” on a pet products site.

2

Writing for Many Media

Information Display • Display quantitative information in a standard and easily understood format for your users. For example, presenting time in a 24-hour clock (e.g., 16:25) for an American audience is not appropriate because Americans use twelve-hour clocks and will have to translate the information to the time format they are used to (e.g., 4:25PM). • Types of data with multiple information entries, such as statistics, is often better presented as a table, chart or other visual format. • Keep information needed for comparison on the same page or available in a popup link. Users can only remember three or four items for a few seconds. If you ask them to read product information on one page and then make decisions about products on the next page, they will have difficulty. Tables are useful for comparing lots of information. • Set appropriate page lengths: shorter for home pages and navigation pages; longer for pages that require uninterrupted reading of content. • Place important information higher on the page so users can locate it quickly. Top center is the most prominent part of a page. • Group information consistently. For example, if supplemental information is in a column on the right on one page, place it in the same location throughout the site to speed users’ information search. • Align items on a page. Bullets and menu items should be lined up along the left, such as the bullets in this list. This makes it much easier to scan information than if bullets are arranged in a diagonal or other artsy formation. • Use appropriate line lengths. Users tend to prefer short line lengths, but they can actually read faster with longer line lengths. One study shows that line lengths as short as twenty characters consistently slowed reading speed. So home pages and navigation pages may want to use shorter line lengths to engage users, but pages with more text may want to use longer lines to speed reading. • Limit page information only to what information is needed on that page. Do not add extraneous information unrelated to the page’s purpose. • Group related information and groups of links and give them meaningful headings.

Label Label, Label, Label. A repeated result from a number of usability studies is the need to clearly and consistently label chunks of information or portions of a task. This includes: • frame labels (frames divide a page in sections) • input boxes on a form. Put the labels for input boxes close to the entry box that they define.

27

28

WRITING FOR MULTIMEDIA AND THE WEB

• navigation tabs and menu links. They should be descriptive of the content they are leading to and use language all your users can understand. • category labels for groups of links and other information. If you have more than a few links on a page, group them and give each group a clear, descriptive heading. • unique and descriptive headings of blocks of content. Don’t use the same or similar labels for different content. Clear unique headings facilitate scanning. • rows and column heading on tables. Don’t use abbreviations unfamiliar to your user. • push buttons and other widgets. Try to use standard meaningful labels, such as “Enter,” “Cancel,” etc. • clickable images. Labels on clickable images makes it clear what information the image leads to and emphasizes that it is clickable.

Who Edits Interactive Media Text? If you are a writer who is coming to interactive media from the print world of books, newspapers or magazines, you probably expect an editor to be as important a position in interactive media as it is in print media. Except for a few exceptions, this will not be the case. Most interactive media projects will not have anyone on the team with the title of “editor.” This does not mean you will not get feedback on your writing. A variety of other individuals take on this role including: • The clients. They often know their business and message better than you do. The client will usually review your writing and offer detailed comments primarily on the accuracy of the content and the way certain products and business practices are described. But keep in mind that the client will probably not be a trained writer, as a book editor might be. The client will give feedback, but it is up to you to revise the writing so it accomplishes the client’s goals. • The instructional designer, information architect, or content strategist. If your project has one of these content experts onboard, it is likely that they might review your text to make sure it accomplishes their vision for the information presentation. People in this position are likely to have good writing skills and may be able to give some of the detailed comments you might expect from a print editor. • The game designer or exhibit designer. If you are building a computer game or a museum exhibit, the high level designer will often look at your text and give comments. • The development editor or subject matter expert. The place you are likely to see a traditional editor role is in e-learning and educational multimedia. In this case, it is not uncommon to have a subject matter expert editor, such as

2

Writing for Many Media

a math editor. This person will review your text and suggest detailed text and content changes, as a book editor would. • The copyeditor. Although most projects have some sort of copyeditor who will read through your text for typos and obvious grammatical errors, typically copyeditors do not offer substantial suggestions about your writing. So a good first step when you take on an interactive writing assignment is to determine who will give you feedback and get some sense of their expectations. But as noted above, you are likely not to get the kind of detailed editing you would get on a print project. Instead, many interactive writers need to learn to be their own editor as well as the writer.

Style Guide Although there may not be a human editor, most projects give editorial guidance through a writing style guide. This guide defines specific text usage for writers. Usually a project will have a custom style guide, but will also rely on a standard print style guide, such as The Chicago Manual of Style, for basic writing issues. Be sure to get a copy of the project style guide when you start a project. If there is no style guide, offer to write one. Without a project style guide, it is impossible to have writing consistency across the production.

How Editing Comments Are Presented If you do get editing comments, they will be delivered in one or more of the following ways: • Track changes. If you are not already aware of this feature of MSWord and other word processors, it is located in the Tools Menu. If “Track Changes” is clicked on, it allows an editor to enter and highlight changes. It then allows the writer to accept or reject changes and to compare multiple drafts of documents. • Handwritten notes. Many client like to print out a screen of text and edit the old fashioned way, with handwritten notes. If this is the case, make sure you know the standard editing symbols, such as delete, replace, insert, and transpose. These are available in any manual of style and on the web (see the link “Proofreader’s and Editor’s Symbols” in the references at the end of this chapter). • Comments in a second document. Clients also often simply write or list their comments in a separate document. The writer then has to integrate them into the final document. If we get this type of comments on a project, we will usually turn it into a table with the clients comments in one column and next to it in the next column—the resolution. The resolution describes how we addressed the comments or reason we did not address the comments if

29

30

WRITING FOR MULTIMEDIA AND THE WEB

Table 2-1 A sample list of reviewer’s comments. Number

Reviewers Initials

Location

Reviewer’s Comment

Writer’s Resolution

1.

D.G

Home Page

Line 2 of body text, should be “multiple” not “divide”

Fixed

2.

D.G

Addition Problem #1

Problem explanation is unclear. Clarify amounts of different types of fruit

Broken into bulleted list

we felt the suggestion was incorrect. See the sample above. It is good to capture the reviewer’s initials in case you need further clarifications. It is also a good idea for each comment to have a unique number so you can easily refer to it in discussions with the client or development team.

Web Text Writing Example The following excerpt from the T. Rowe Price web site illustrates many of the elements of good text writing for the computer screen described above, including the inverted pyramid, concrete statements, simple sentence construction, reduced amount of text, highlighted text, different fonts, bulleted lists, one idea per paragraph, and conversational style. Note that the underlined text in the sample below is shown as blue hyperlinks on the actual web site. ONLINE COLLEGE PLANNER This on-line College Planner can help you learn about meeting the costs of college. Our five-step College Planning Calculator calculates how much money you’ll need to save, and suggests ways to invest your savings. Meanwhile, our College Planning Library gives you more information on other helpful resources, including: • Tax Issues • Education IRAs • State Tuition Assistance Programs • Sources of Financial Aid • Ways that Grandparents Can Help A wealth of additional college planning information is available on-line. See our Additional Sources of Information. Copyright T. Rowe Price Associates.

2

31

Writing for Many Media

Blog Writing Example and Writing Tips The following fragment of a blog is from Google’ official blog (http://googleblog. blogspot.com/). Posting on this blog is limited to Google employees. It includes new product information, public relations information, and just plain goofy things that Google employees do. The goal is to connect with Google customers on a more personal basis than traditional corporate communications. The blog below demonstrates most of the good online writing style techniques discussed earlier in this chapter: • • • •

Descriptive heading. Clear, direct, short sentences. Gets right to the point. The tone is very personal and keeps its audience in mind. As public relations consultants Doug Hay and Sally Falkow point out, “a blog is not a corporate brochure. ‘Corporate Speak’ will not cut it. A good blog (i.e., one that gets a lot of attention) would be written in a conversational style, but must be well written. A sense of humor also helps to make it interesting.” • Links to other sites. This establishes a blogger as an expert because it shows you are knowledgeable about information resources pertaining to your subject. Linking also helps you get return links from other web sites. • Uses keywords pertinent to the subject. This will help the search engine rating. • It’s not in the example below, but another common technique is to try to end with a question or something controversial to encourage reader response. Searching for Music

Posted by David Alpert, Search Quality Product Manager It may come as no surprise, but I like to search for things on Google. Yep, when I’m looking for something, I always try it on Google first. And sometimes, that thing I’m looking for is music. Many of our users feel the same way, and we get a lot of search traffic on music terms like popular artists and albums. A few of us decided to try to make the information you get for these searches even better, so we created a music search feature. Now you can search for a popular artist name, like the Beatles or the Pixies, and often Google will show some information about that artist, like cover art, reviews, and links to stores where you can download the track or buy a CD via a link at the top of your web search results page. Copyright Google. http://googleblog.blogspot.com/

32

WRITING FOR MULTIMEDIA AND THE WEB

Audio Writing in which the audio carries the bulk of the meaning, as it does in radio, occurs fairly often in multimedia for three practical reasons: • Audio is much cheaper to produce than video. • Audio files are much smaller in size than video files. Because of this, it is much easier to include substantial audio material on a disc or to transmit audio files on web sites than it is to use video. • The popularity of podcasts. A podcast is a type of web feed of audio files that a user can download and play on their computer or their mobile device, such as an Apple iPod or a Sony PSP. Initially used for music, podcasts are now used for a wide variety of content, including radio programs, education, politics, religion, and much more. Writing where audio carries the primary meaning demands the skills of the radio writer, or the ability to write to be heard as opposed to being read. In addition to the print writer’s skills of being accurate, simple, and clear, the radio writer must: • Write conversationally, the way people talk. Radio is the most intimate medium. When most radio announcers talk through the mic to thousands of people, they imagine they are talking to just one person, because that is how most people experience radio: one person and a radio. This is the same intimate way most multimedia is experienced: one person and a computer. • Write material to be understood on the first listening. Unless an instant replay is designed into the program, audio is more difficult to replay than text is to reread. • Keep it simple. Be aware that the writing will be heard and not read. Avoid abbreviations, lots of numbers, unfamiliar names, parenthetical expressions and anything else that cannot be easily understood just by hearing it. • Read all your work out loud when you are rewriting, or better yet, have someone read it out loud to you. You’ll be amazed at how much of your perfectly acceptable written prose is unspeakable as dialogue or incomprehensible as narration. • Write visually. A well-written audio-only piece can stimulate vivid images in the audience’s minds. A famous radio ad once convincingly portrayed a ten-story-high hot fudge sundae being created in the middle of Lake Michigan. Create such pictures in the audience’s mind by using: ◦ Concrete visual words ◦ Metaphors and other comparisons to images the viewer already knows ◦ Sound effects

2

33

Writing for Many Media

◦ Different qualities of voices (sexy, accents, etc.) ◦ Music ◦ Words and phrases that appeal to other senses, such as touch, smell, and taste Examples of audio-only or audio-dominant multimedia include web audio interviews and seminars; audio and image scenes in which narration carries the bulk of the meaning; and even streaming web video, which can easily degenerate to a series of still pictures with audio voice-over if the user has a slow connection or if the network is congested.

E-Learning Narration Example The following example of narration is from the Houghton Mifflin Interactive Math and Statistics Lessons profiled in Chapter 13. This narration accompanies on screen text and graphics. So it does not really have to stand alone. Notice the short, uncomplicated sentences and clear straightforward language. The target audience is college statistics students. Bar graphs and pie charts are two common methods of representing data graphically. A bar graph is used to display quantitative or qualitative data. Bar graphs have the following features in common. • The bars may be placed horizontally or vertically. • The bars are all the same width and are evenly spaced.

Narrative Audio-Only Example Narrative scenes sometimes emphasize audio to save space or for dramatic effect, such as the following example from the interactive narrative Voyeur. In this scene the player is looking at closed window blinds and listening in. Notice the use of visual writing, sound effects, and different voices to create images in the audience’s mind. (These items are in boldface type.) CHLOE’S ROOM, LARA AND CHLOE. SLIGHT KNOCK ON DOOR. LARA (knock on door)

34

WRITING FOR MULTIMEDIA AND THE WEB

Chloe? CHLOE Yeah. Come on in Lara ... LARA (embarrassed) Oh, I’m sorry I didn’t know you weren’t dressed ... CHLOE No, no, no don’t worry about it, man, don’t worry about it. LARA (nervous laughter) Maybe if I had a tattoo there, Zack would take a closer look ... CHLOE Yeah? You like that? I’m not sure what hurt more, the tattoo or the hangover ... LARA What am I doing wrong with him? CHLOE Oh, Lara would you stop it right now! Don’t buy into Zack’s bullshit. You’re a babe. You’re gorgeous. You’ve got a terrific body. You just don’t know how to package it.... I have got the most terrific outfit for you. It’s going to look killer on you. I swear to God. RIIING! She’s interrupted by phone call. CHLOE Look,... Hold on a minute. (into phone) Yeah?... Oh, hi.... Well, not exactly... Hey man I’m working on it.... will you give me a fucking break ... Hold a sec.

2

Writing for Many Media

(to Lara) Lara, could you ... come back here tonight ... LARA I don’t want to be a pest ... CHLOE Oh, come on, come on, it’ll be fun ... please, come on, come by around eight. LARA OK.... see you then ... (door closes) CHLOE (back to phone) Like I told you, give me a couple a more days ... I’ll get you the damn money. Fine. Copyright Philips Interactive Media.

Video Writing for video is an important skill for the multimedia writer because DVDs can accommodate considerable full-motion video and animation. Likewise on the web, breakthroughs in compression, streaming tools, and faster user connections have made web video a reality. In a video, the viewer is seeing the results of the writing, not just reading or hearing them as in print and radio. Writing for video is a complex subject about which many books have been written. Further complicating this topic are the very different demands on the scriptwriter of writing documentaries and fiction. It is difficult to reduce the specifics of scriptwriting to a few rules, but some of the scriptwriter’s concerns include: • Showing, not telling. Discover action to present the information. Don’t have long-winded interviews about poverty in the ghetto; show scenes of poverty in the ghetto. Don’t have your character tell us about how sad they are; have them do something that shows this. • Structure. Have a clear grasp of how to structure a video. Academy Award-winning screenwriter Sheridan Gibney once said that scriptwriting has more in common with architecture than with writing. He said that screenplays are built, not written. Shots build scenes, scenes develop

35

36

WRITING FOR MULTIMEDIA AND THE WEB

•

•

•

•

•

sequences, and sequences create plots and subplots. Much of film and TV follows established structures that writers should be familiar with. (These structures are discussed in Part III, “Writing Interactive Narrative.”) Interactivity and chunking. Keep in mind that your video is part of an interactive program. In most cases, you will have to chunk it or break it down into smaller units so that the user can access just the piece of video he needs, when he needs it. Setup. Exposition is one of the hardest elements to portray in video, and without proper exposition, characters are shallow, themes are undefined, and the setting is unclear. Exposition includes background information on the characters, setting, and the backstory (events in the story that happened before the beginning of the current narrative). An example of important backstory occurs in the classic film Casablanca. This film begins in Casablanca, a port city in Morocco, but essential backstory includes the lead characters’ romance that occurred in Paris a year earlier. Setup is equally important in an informational video, where we need to understand the context of the material that is being presented. In the New England Economic Adventure profiled in Chapter 24, the program designers had to introduce users to economic history of New England before they could play the game. Unlike print, where it is fairly easy to “tell” the reader about background information, in video this material needs to be shown. In multimedia, novice video writers often either have the characters talking incessantly about things that happened years ago, or they dump the entire backstory into a separate background file and assume everyone has read it. Such a background file might be accessible from a program’s help or hints menu. Characterization. There are a limited number of original stories but an unlimited number of unique characters. Finding and developing unique characters is essential in most fiction films and many documentaries. It is also important that you pick the right characters for your audience. An informational program aimed at high school students, such as The New England Economic Adventure has young, energetic characters. Vital Signs profiled in Chapter 15 is aimed at medical professionals, thus it has more mature characters who can relate to that audience. Conflict. Conflicts must be clearly defined. Most video focuses on conflict, whether it is a fictional battle between humans and aliens or a 60 Minutes-type documentary on the concerned citizens of India versus their nuclear power industry. Cost. Unlike radio and print writing, video production is costly, and scriptwriters must be aware of this. Even though digital video cameras and desktop video editing software have brought costs down, a writer with a limited multimedia budget probably will have to forget about blowing up that rocket ship, do it as an animation, or use stock footage.

2

37

Writing for Many Media

Informational Program Video Example In the New England Economic Adventure, video, interactive games, and live hosts present information to high school students in an immersive museum exhibit in a theater. The excerpt below follows a short section that introduces the history of the times. Notice how they set up the background in this piece by making the main characters time travelers who can talk to us (the audience) directly.

Table 2-2 Informational program video example. Script copyright Federal Reserve Bank of Boston. HOST HOST Now let’s begin the Decision Round. In this round, you’ll have a chance to go back in time . . . to the year 1813, . . . where you’ll decide how to invest your money . . . and you’ll see if you make a profit. Ready to make some more money? Let’s begin our trip.

VOTE; PDA

VIDEO & LIGHTING

AUDIO, NARRATION & SFX

LOGO Decision Round

SFX Decision Round SFX

EFX

1813 gobo effect timed to movie

Lights fade out.

CHRIS and SARA on screen in modern-dress against plain background. They matrix out of the scene.

CHRIS Ready?

TRANSITION TO PAST Lights dim as sound effects fill room. We enter a door, and then a dark, private office.

EFFECTS :5-:10 seconds Lighting and sound effects in room take visitors back to 1813 Boston.

MAIN SCREEN VIDEO ADVISORS matrix into an area outside of LOWELL’S office. CHRIS and SARA materialize in costumes of the day that would make them fit

CHRIS (looking at his outfit, brushing himself off, maybe little flecks of electronic time transport material fly off) (to audience)

SARA Ready.

Continued

38

WRITING FOR MULTIMEDIA AND THE WEB

Table 2-2—(Cont’d) HOST

VOTE; PDA

VIDEO & LIGHTING

AUDIO, NARRATION & SFX

in with Lowell and his friends. The sounds of “aheming” and murmuring from inside the office.

Well, it looks like we all got here in one piece!

They open the door and enter the office.

SARA (brushing herself off) Let’s fill you in quickly. We are all prosperous associates of a man named Francis Cabot Lowell.

EFX

CHRIS We’ve made our money in trading, but Lowell has called us together to hear a startling new proposal. SARA C’mon. Let’s go in. LOWELL is presiding over a meeting. He sits at a functional office, or desk with ledgers, papers. There are two or three other men in the room. CHRIS and SARA enter the room, the camera following as if they are leading us to our seats. They slip into a couple of seats.

LOWELL (to the advisors/audience) Welcome, welcome. Come in. Sit down. Meet my associates. This is Patrick Jackson and Nathan Appleton. Sit down.

Props may hint at China trade, a porcelain tea service, a silk pillow or wall hanging of a Chinese scroll.

LOWELL I’ve called you here with a business proposition . . . After long hours of planning, I have devised a way by which we may avoid the catastrophic risks of the trading business . . . a new way to invest our money.

Computer Game Video Example The following video script example is by writer Matthew Costello from the opening of the video game The 11th Hour. Note how the characters, setting, background story, and key conflicts are set up quickly and visually through the use of the TV news show, the PDA, and Dennings reactions.

2

Writing for Many Media

INTRO-1 INT / DENNING’S COUNTRY HOME-AFTERNOON* CARL DENNING is watching television. His handsome face is grim and determined, bathed in the flickering light of the TV’s images. On the TV screen, an anchorwoman is reading the evening news. ANCHOR State Police have called off the intense search for producer Robin Morales of television’s CASE UNSOLVED. She continues to speak in voice-over as the screen is filled with an image of an intelligent-looking woman with compelling beauty. The words “ROBIN MORALES—CASE UNSOLVED PRODUCER” are superimposed across the bottom of the screen. ANCHOR (V/O) Morales was researching a story about the famed haunted house in the small town of Harley on Hudson—the abandoned mansion of Henry Stauf. The anchorperson continues to talk over images of old newspaper stories from the 1920s and mysterious photos of HENRY STAUF and his ill-fated guests. The screen switches to current images of the main street of Harley on Hudson. ANCHOR (V/O) Police have expressed concern that Morales’ disappearance may be connected to a series of killings that have plagued the Hudson Valley this year. Another IMAGE, a BODY, lying in the grass. Signs of violence, blood, the skin discolored, leaves and twigs stuck to the body. ANCHOR (V/O) So far, four women and three men have been victims fitting a pattern of homicide, and several others are missing. Another image of Robin comes onto the screen. ANCHOR(V/O cont’d) Robin Morales has been missing for more than three weeks and seems to have vanished without a trace.

39

40

WRITING FOR MULTIMEDIA AND THE WEB

The anchorwoman again appears on the screen. ANCHOR She is the producer for the very popular and flamboyant CASE UNSOLVED reporter Carl Denning. An image of Denning fills the screen, smiling, confident. ANCHOR (V/O) Denning is said to have been in seclusion in his country home in Connecticut since Morales’ disappearance. It’s rumored that the two were romantically involved before ... Denning clicks off the TV with a remote switch. He slumps back in his chair and massages his temples. He looks up at the sound of a doorbell ringing, gets out of his chair and crosses the room and opens the door. A UPS truck is pulling away and a package is on the doorstep. Denning crouches down and picks it up and goes back inside. He returns to his chair and opens the package, revealing a small, portable computer of some kind. He switches it on, and a game flickers to life on the machine ... “Funhouse From Hell”— Cartoony images of mayhem, monsters ... Slowly, the computer game changes to an image of Robin looking frightened in the basement of an old house. She speaks to him from the small screen. ROBIN Carl ... help me ... please! ... I can’t get out ... I ... The image of Robin fades away and the video screen goes blank as if the game has shut itself off. Denning shakes the box and clicks it on and off but it seems to have died. DENNING What is this!...? He sets the game computer on the arm of the chair, gets to his feet and begins to pace. The game starts beeping. He grabs it and switches it on. An image of the Stauf mansion appears briefly and fades away and the game shuts down again. DENNING Damn!

2

Writing for Many Media

Then the screen comes alive for another brief moment: An image of Robin appears. She mouths the word “Help” but there is no sound and the picture quickly fades. Denning pulls on a leather windbreaker and stuffs the game in his pocket as he crosses the room and leaves in a rush. Script copyright Trilobyte Inc.

Conclusion A writer who is a master of all the types of writing described above will be an asset on a multimedia production team, but additional skills will make you truly invaluable. These are outlined in the next chapter.

References Gibney, Sheridan. Lecture. University of Southern California, Los Angeles. Google Official Blog. http://googleblog.blogspot.com/ Hay, Douglas and Falkow, Sally. “What Is a Blog Anyway?” http://www.falkowinc. com/inc/Blog.pdf Koyani, Sanjay, and Bailey, Robert W., and Nall, Janice R. “Research-Based Web Design & Usability Guidelines.” http://usability.gov/pdfs/guidelines.html Nelson, Andrew. E-mail to the author, October 1999. New Communications Blogzine http://www.newcommblogzine.com Nielsen, Jakob. “The Alertbox: How Users Read on the Web.” http://www.useit. com/alertbox/9710a.html. O’Meara, Maria. Notes to the author, February 1996. Proofreader’s and Editor’s Symbols. University of Colorado Style Guide. http://www.colorado.edu/Publications/styleguide/symbols.html T. Rowe Price web site. http://www.troweprice.com, 1999, 2005. webSite 101. Top 10 Blog Writing Tips. http://www.website101.com/RSS-BlogsBlogging/blog-writing-tips.html Yahoo Podcasts Directory. http://podcasts.yahoo.com/

41

This Page Intentionally Left Blank

3

High-Level Design, Management, and Technical Skills Useful to the Interactive Writer

Chapter Overview Understanding interactivity and the ability to write well for many media are essential for the interactive writer, but writers who want to get more control over their material and expand their career options should consider developing additional skills. The skills this chapter discusses include: • • • • • • • •

Information and interactive architecture High-level narrative design Project management Content expertise Content strategy Writing to the search engines Flowcharting and other techniques for organizing content Basic HTML skills

High-Level Design, Content, and Project Management Information and Interactive Architecture Information architecture is the overall structure and navigation of an informational multimedia piece. Structuring multimedia is far more challenging than structuring a linear piece, such as a book or a video, because multimedia is made up of many

43

44

WRITING FOR MULTIMEDIA AND THE WEB

discreet units of information that can be connected in a myriad of ways, as was discussed in the last two chapters. Key issues for the information architect are: • clearly identifying the project’s communication and business goals. • understanding the key needs of the targeted user, including what specific tasks they need to accomplish. These needs are usually incorporated in a narrative called a use case or a user scenario that tracks the users path through the site or program as they look for information or accomplish tasks. • organizing the information into categories and subcategories. • deciding how the different categories and pieces of information will be linked so that the user can easily navigate among them and interact with them. • establishing the types of interaction and functionality that will be allowed and what technology (databases, simulations, etc.) will facilitate the needed interactions. An information architect has to not only have a librarian’s eye for organizing information, but the architect also needs a broad understanding of current technologies available for interactive multimedia. For example, the information architect should clearly understand how databases work and how dynamically-driven database information can be presented on a web site or multimedia program. This topic will be discussed in the case studies in Chapters 11. Some types of programs require information architects who specialize, such as instructional designers who focus on training and education programs. An instructional designer usually teaches a specific skill or body of content as opposed to the information architect whose job is usually to make it possible for a user to find the information they need in a larger body of information. A well-designed information architecture not only helps users find the information they want, but it is also one of the most effective ways to initiate interaction with a program. For example, good information architects know how to hook the user by placing the most appropriate content on the top level of the interactive program, such as a web site’s home page where most users first arrive. After hooking the user, this top-level information has to lead the user logically to the information that the user wants or that the designers want them to see, such as the purchasing section of the site. Structuring your site so that there are several ways to access information is also important because different users will approach the site differently. The main toy page on Buy.com (http://www.buy.com) is a good example. Click on Toys in the Home Page menu and you are taken to the main Toys page where you can choose to shop by search, age, price, gender, category, latest and greatest, and featured items. Not every type of site or program needs this many ways to access the program content, but some options should usually be presented. An interactive architect performs most of the same duties as an information architect, but he or she is also expected to contribute more to the overall user

3

High-Level Design, Management, and Technical Skills Useful to the Interactive Writer

experience on the project. This includes making suggestions about the interface, design, usability, and online applications. The last item, designing applications, is probably the biggest change for the interactive architect, who is no longer just organizing information, but must also help design user activities within a program. Examples of common activities include opening a bank account on a web site, purchasing a product, or completing an exercise on an e-learning program. The interactive architect must design how the user will complete each step of the activities and move through the entire program. The interactive architect works with other team members, particularly the technical architect, when designing applications, but it is one of the duties of the interactive architect to make sure all these elements work together effectively with the information architecture. In actual practice, the titles “interactive architect” and “information architect” may not be as clearly defined as I have suggested above. Sometimes an information architect’s role will closely resemble what I have described above for the interactive architect. Common deliverables for an information or interactive architect are: • use cases or user scenarios: define how a user will use the site or program. • content outlines: provide a hierarchical grouping and prioritizing of content in information programs. • process flows or sitemaps: chart the information flow of an information product or the process flow of an activity primarily with the use of flowcharts. (See Figure 3-1.) • wireframes: screen/page level illustrations showing the information arrangement on the page level. These are sometimes static illustrations. Other times they have simple interactivity, often designed in HTML. Just as film writers become directors to gain more control of their work, interactive writers should consider moving up to the information or interactive architect role. In the case studies in Parts II and III of this book there is considerable discussion of the information architecture or structure of multimedia to give writers insight into this practice.

High-Level Narrative Design Similar to the information architecture in an informational program, the high leveldesign of an interactive narrative defines the major elements and organization of the project, including: • • • •

the story structure the characters the role of the player in the narrative and what they will be able to do the granularity of the interactions. For example, will the player be able to choose scenes, shots, or the dialogue of the characters?

45

46

WRITING FOR MULTIMEDIA AND THE WEB

Figure 3-1 Partial flowchart/sitemap for the Prudential Verani web site. Copyright Prudential Verani Realty.

3

High-Level Design, Management, and Technical Skills Useful to the Interactive Writer

The writer’s participation in the high-level design process of a narrative varies considerably from project to project. Sometimes the designer develops the story idea and the basic structure of the piece before the writer comes on the project. It is the designer who determines what the player will be able to do and how the interactions will work. Sometimes the writer’s role is even more restricted; the designer may do much of the writing and bring in a writer to handle just a few scenes. But even in this diminished role, the writers need to be aware of how the scenes they are writing relate to the overall piece. Other designers bring the writers in early and encourage their contribution to the overall design. Many writers feel this is the best way to go, particularly when dealing with stories. As writers gain experience in multimedia, many learn high-level story design and take more control of their material. This is actually a growing trend with the all-powerful designer disappearing on many projects and being replaced by a designer-writer. This was the case for the interactive narratives that are profiled in Chapters 22 and 23.

Project Management Once a writer becomes responsible for the high-level story design or information architecture, he or she has an overall grasp of the project that is equal to or surpasses any other member of the team. Considering this, it is not a big leap from information architecture or high-level design to project manager, if the writer has organizational and people management skills. The project manager manages the budget, the personnel on the project, the client, and the coordination of all the elements.

Content Expertise In informational multimedia, writers are more valuable if they have familiarity with certain types of content. It certainly doesn’t hurt for a writer to have a specialty or several specialties, such as finance, medicine, mathematics, foreign languages or science. An important writing subcategory is localization. This involves the translation of multimedia and web content to other languages and cultures so that the program can have a wider audience. But unless the writer is assured of adequate work in one specialization, she should be careful to maintain enough flexibility so that she doesn’t get pegged into just one type of work.

Content Strategy Content strategy involves deciding the most effective way to present content for the user while also furthering the brand and business goals of the client. A content strategist must first clearly understand the content to be communicated, the needs and technical skills of the users, the business goals of the client, and budget constraints. Then the strategist can recommend the best approach for presenting the specific content. For example, would an explanation of erosion on a geology web

47

48

WRITING FOR MULTIMEDIA AND THE WEB

site be best presented as text, text and graphics, video, animation or some combination of the above? A quite different example would be explaining banking products to a consumer. Would this best be done with text and graphics, a chart, or an online advisor (an interactive tool that asks a series of questions and gives advice). If information architects have content strategy skills, they are more valuable employees because they cannot only organize information but can also recommend the best way to present the information.

Web Site Marketing: Writing for Search Engines If you write the most amazing web site and no one can find it, then you have failed. Most users find information on the web through major search engines, portals, and directories. On many search engines, link popularity and search results click through are equally if not more important than the site text. However, a web site writer needs to be able to write a site in such a way that within the limits of the search engine, the site text will improve the site’s ranking on search engine results. This requires clever writing of site titles, site text, and to a lesser degree, meta tags. Meta tags are text on a web page that is hidden from the user but that can have some impact on how your site appears in search engine results. For a detailed discussion of writing for search engines see “Search Engines and Key Words” in Chapter 10.

Technical Skills If the writer wants to expand his or her role beyond writer into information architect, project manager, and the other skill sets described above, learning a few technical tools can be quite helpful.

Flowcharting One of the handiest tools for visualizing and organizing the branching structures of most multimedia programs and web sites is the flowchart (Figure 3-1). It is also a useful device to visualize online processes, such as the applying for a job or completing a series of exercises in an e-learning course. Fortunately, some of the software for creating flowcharts is inexpensive and easy to learn. Numerous examples of flowcharts as preproduction documents for multimedia productions and as illustrations appear in this book and in the “Chapters” section of the book’s CD-ROM.

Flowchart Functions and Variations A flowchart can have several functions and variations for the same multimedia production: • To design interactions. Lines with arrows drawn between the labeled boxes on a chart make it possible to understand what links with what and in

3

High-Level Design, Management, and Technical Skills Useful to the Interactive Writer

•

•

•

•

•

•

what way. For example, does the link work in both directions? Is it viewerinitiated or automatic? To see the effects of revisions. Continuity is a monstrous issue in interactive media. In linear media, changes in one scene may affect only the scenes immediately following it, but in interactive media, changes in one screen will affect all of the material that is linked to it. It is hard to determine these effects without a chart. To chart character development. Some writers create separate charts to track character development, particularly in parallel branching structures where the writers must be sure that the character change is properly set up and consistent in each plot line. To present material to clients. A complex interactive script can be inscrutable to a client, particularly one who has no interactive background. A one-page flowchart overview can do wonders to explain a project. To communicate with the production team. A production team chart is far more complicated than a client chart, especially a chart for the programmers, in which boxes are labeled with complicated programming code. To track large productions. Flowcharts combined with project management software can help chart the progress of a large production, keeping track of what has been accomplished and who is responsible for what lies ahead. To form the basis for the user’s sitemap. Sometimes the chart itself is the user map, as in Fidelity Investments’ retirement counselors’ training program, where students can bring up the flowchart at any point and click on a labeled flowchart box to go to that section of the course.

Flowchart Symbols A number of developers have suggested flowchart symbols to help make charts more useful. The symbols shown in Figure 3-2 include some commonly used symbols: • Decision Block: A point where users have to make a choice that sends them to a different branch of the process or information. Flowcharting Symbols Decision Block

Document

Figure 3-2 Common flowcharting symbols.

Input/ Output

Connector

Step

Terminal

49

50

WRITING FOR MULTIMEDIA AND THE WEB

• Input/Output: User enters data of some kind, such as a test or a form. • Step: A single step in a process (see also “Document” below). • Document or Page: A single screen or web page, usually contains multiple elements. Particularly on web sites, the simple square is also commonly used for this. • Connector: The link between symbols indicating process or information flow direction. • Terminal: The beginning and ending points of a process.

Custom Symbols and Labels for a Project The goal of using flowchart symbols or text labels is to increase clarity, but if there are too many complex symbols, they may add confusion. In my experience, a universal set of symbols has not been totally accepted. Instead, writers and developers seem to adopt symbols and labels that work well for them on a particular project. For example, Aaron Conners of Access Software uses shaded boxes to distinguish characters in his interactive dialogue. (See The Pandora Directive flowchart, Figure 22-2. For the Prudential Verani web site, the symbols illustrated in Figure 3-3 were used.)

Flowchart Design Tips The goal is for the flowchart to be a clear visualization of the project structure. There are a number of techniques that help make it a more useful tool. The following points are illustrated in the Prudential Verani flowchart in Figure 3-1. 1. Give every page of the site a unique number and name. This makes communication with clients and production staff much clearer. Give pages in a specific section of the site the same first number with different second letters. In the flowchart example in Figure 3-1, standard outline conventions were used with numbers and different case letters. For example, the menu page for the Homes and Land section is Roman numeral “I.” The Contact an Agent page, which is linked to that page, is page “IA,” and so on.

KEY Fannie Mae Purchase Addendum

Static pages

Homes & Land Search Page

Dynamic & interactive

U P D

(Londonderry Development #1)

Need manual update

Figure 3-3 Custom flowcharting symbols for a specific project.

CROSS LINKS * Calculators * Mortgages 101

Cross links and external links

3

High-Level Design, Management, and Technical Skills Useful to the Interactive Writer

2. For ease of printing and presentation to a client or on a review web site, run the chart vertically, as in the sample in Figure 3-1, instead of horizontally. If this becomes a problem because your site is more than five levels deep, you may want to reexamine your information architecture and divide your material into more main categories. If a site has too many levels, it can cause navigation problems. 3. Simplify where you can. If there will be multiple sections that will be designed in the same way, it is OK to say that in a note. No need to draw out all the boxes for repetitive pages. There are several examples of this on the chart in the “New Construction” section where each housing development will be presented on the site the same way. 4. Make it easier to see the main sections by writing those pages in bold text. See “Homes and Land” and “New Construction” in Figure 3-1. 5. Indicate cross-links (links to pages within the site that are already on the chart) and external links (links to other web sites) as text only. This helps make the chart more readable and makes it clearer how many pages have to be produced for this project. If there are multiple cross-links or external links from the same page, use asterisks or bullets to separate them. 6. Visually indicate the pages that will have special functions, for example, pages that will have interactive elements or that will be generated dynamically from a database. Do not, however, make your chart confusing with too many different types of symbols. Three or four symbols with a simple key at the top are adequate. See the key sample in Figure 3-3.

Flowcharting Software The key characteristics of a good writer’s flowcharting program are that it can: • Easily and quickly create and edit flowcharts. • Export the chart in a standard image format, such as JPEG or GIF, and the outline as HTML for web publication. On almost every project that I have worked on, the client expects you to post work on a web site for review. A flowchart program that will automatically convert the charts and outline for web publishing saves a lot of time. • Be used cross-platform. Ideally, there should be both Windows and Mac versions of the software. The files should also be cross-platform because your client or other members of your team may need to work with the outlines and flowcharts, and they may be on different platforms than you are. This condition will depend to a large degree on the platforms used by the production team and the client. If everyone is on Windows, then a Windows only software is acceptable. The most popular flowcharting software, Visio, is Windows only.

51

52

WRITING FOR MULTIMEDIA AND THE WEB

• Convert the chart into an outline and vice versa. This conversion is useful because: ◦ some clients prefer outlines. ◦ a chart can be converted into an outline, and then that outline can be used as the basis of a script for a program. ◦ an outline can be imported from another program and then converted to a flowchart.

Software Recommendation There are lots of tools that you can use to create flowcharts including word processors, draw programs, authoring programs, and presentation software, but like any dedicated task, you are going to be much better off getting software designed specifically for flowcharting. There are many good flowcharting programs on the market. Depending on your situation, you many not be able to choose the software and will have to use whatever the client or the rest of the production team already uses. In most cases, this will probably be Microsoft Visio, which is one of the most popular flowcharting tools. This does not mean it is definitely the best tool or ideal for your situation. It is expensive, only works with Windows, and is loaded with features a writer may not need. If you do have the option of choosing your flowcharting software, you might consider Inspiration. This software is inexpensive, works on Macintosh and Windows, converts charts to outlines, and is very easy to use. All the demonstration charts in this book were drawn with Inspiration. Besides Visio and Inspiration, other major flowcharting software includes: SmartDraw (Windows only) and ConceptDraw (Windows and Mac).

Other Organizational Tools Outlines Some writers prefer to start their project with a simple hierarchical outline, as in a linear media writing project, such as a book or article. I find that an outline combined with a flowchart is a useful way to describe the content in a web site (see Chapter 10). Some storywriters find outlines one of the easiest ways to keep the story line and character development clear. Aaron Conners, whose interactive movies Under a Killing Moon, The Pandora Directive, and Amped III are among the most complex being written, uses an outline in the early stages of writing.

Storyboards or Wireframes Storyboards or wireframes are an excellent organizing tool. A storyboard or wireframe is an illustration of the main screens of a program or web site combined with text explanations of the elements and how they will work together. Typically a storyboard screen is a more elaborate, finished product than a wireframe, but often

3

High-Level Design, Management, and Technical Skills Useful to the Interactive Writer

these two terms are used synonymously. A storyboard or wireframe is a useful tool to plan out the information design at the page/screen level. They are also an effective way of presenting the information design to the production team and the client. Storyboards or wireframes can be very elaborate for complex programs, but often the client just needs a rough visualization of the proposed screens. There are dedicated storyboard programs, such as Boardmaster, but other multiuse programs will work equally as well for the writer. A WYSIWYG (pronounced “wiz-ee-wig,” an acronym for “What You See Is What You Get”) HTML editor, such as Macromedia’s Dreamweaver, can create quick web pages that function like storyboards and even link the pages to give a simulation of the planned interactivity. Many information architects prefer a graphics program, such as Photoshop or Illustrator, to create static images of the proposed screens. Others use their flowcharting software to draw outlines of screen layouts. Sometimes just a rough sketch done in your word processor’s draw program is adequate, such as the screen in Figure 3-4, which was done in Microsoft Word for a CD-ROM on careers.

Menu Video Salary Education Resources Career Menu Main Menu

Public Sector Screen

Types of Jobs in Specific Career Title (e.g., Jobs in Solid Waste) Introduction Text summary of guide's key points, which are also delivered via video below. Public Sector Images for In text and video or audio, the guide Public sector explains jobs in this area and provides links for specific job information Private Sector Images for In text and video or audio, the guide Private sector explains jobs in this area and provides links for specific job information Nonprofit Sector Images for In text and video or audio, the guide explains jobs in this area and provides Nonprofit links for specific job information Guide Simulation Explanation and Link (Help)

Private Sector Screen

Nonprofit Sector Screen

Figure 3-4 Rough storyboard or wire frame for a CD-ROM done in Word. Storyboard copyright The Environmental Careers Organization.

53

54

WRITING FOR MULTIMEDIA AND THE WEB

Database Although the word “database” might strike fear in the hearts of many nontechnical writers, database programs have become much easier to use. They can be a useful tool when writing, organizing, and managing large, complex projects. For example, my company InterWrite developed a geology web site and CD-ROM for the textbook company Houghton Mifflin. The project was large, had numerous assets (video, graphics, audio, animations), several content experts, and a number of editors. Developing a coherent script that would clearly describe and organize all these elements, plus allow all the content people and editors to add their comments to the script, was a challenge. The solution was to develop the script as a FileMaker Pro database that allowed us to have one master script as well as to sort and export various special versions of the script for different team members. See the end of Chapter 5 for a description of this solution and a sample page from the script. Don’t feel that you have to learn to use a database to be an interactive writer. This was an unusual solution.

WYSIWYG HTML Editors A WYSIWYG editor is a software program that allows the user to create web pages without knowing HTML, the markup language or programming code that is the basis of many web sites and browser based programs. A WYSIWYG editor’s features include text formatting, image layout, linking, and much more. These editors are as easy to use as word processing software. There are a couple of reasons why a writer should be able to create web pages. On almost every project that I work on, one of the first things that the client wants done is the creation of a review web site or extranet. This is a web site where I post scripts, flowcharts, images, and other production documents for the client to comment on. Sometimes it is also useful to rough out a complex section of a project in an HTML-based, interactive wireframe to help the client visualize it. Basic WYSIWYG editors are inexpensive and adequate for most of a writer’s tasks. If you are already skilled with a major word processor, such as Word or WordPerfect, then you may not have to spend any money at all. Most major word processors have converters that will convert your text into HTML. In most cases, however, these are not as versatile as a dedicated HTML editor. If you have the budget, my recommendation is to get Macromedia Dreamweaver, which is one of the easiest to use and most powerful HTML editors. If you are a student, there is usually a substantial student discount.

Conclusion A multimedia writer does not have to learn all the skills described above to be successful. Many writers in large organizations are happy just writing content, but

3

High-Level Design, Management, and Technical Skills Useful to the Interactive Writer

to increase your chances of success and your ability to handle any writing or organizational challenge, the more tools in your arsenal the better. On the other hand, don’t forget to maintain your primary focus—presenting compelling information and exciting stories.

References Inspiration Software. http://www.inspiration.com. Iuppa, Nicholas V. Interactive Video Design. Boston, MA: Focal Press, 1982. Macromedia Dreamweaver. http://www.macromedia.com/software/dreamweaver. O’Meara, Maria. Notes to the author, February 1996. Prudential Verani Realty Site. http://www.pruverani.com, 1999.

55

This Page Intentionally Left Blank

4

The Multimedia and Web Site Production Team

Chapter Overview No matter how multiskilled a writer is, he or she will usually work as part of a production team. Understanding who these team members are and how to interact with them can add to the writer’s success and ultimately that of the project. This chapter discusses the following members of the multimedia and web site production team: • • • • • • • • • • • • • • • • •

Writer Content Strategist Instructional Designer Information Architect or Interactive Architect Interface Designer Game Designer Usability Expert Subject Matter Expert Business Strategist Art Director/Creative Director/Graphic Artist Animator Project Manager Video/Audio Director/Developer Photographer/Videographer Voice Talent and Actors Programmer/Coder Product Manager

57

58

WRITING FOR MULTIMEDIA AND THE WEB

The Writer The interactive writer may create: proposals, outlines, sitemaps, treatments, walkthroughs, design documents, scripts, and all the other written materials that describe a multimedia or web site project. This can include developing the information architecture, on-screen text, overall story structure, dialogue, characters, narration, interface, and more. Exactly which of these tasks the writer actually does on a specific project depends on the needs of the project, the size of the team, and the skill of the writer. Sometimes the writer simply writes text already outlined in detail by an information architect or an instructional designer. On smaller projects the writer might also play additional roles.

The Content Strategist Content can be presented in a wide variety of ways: animation, video, text, graphics, exercises, etc. The content strategist determines the content strategy through analysis of the user’s information needs, technical expertise, favored delivery media, and culture. He also researches the current format and organization of the client data and the client’s business and branding goals for a specific type of content. Based on this research, the content strategist develops a strategy that suggests the most effective presentation for each type of content in the project. The content strategist will give clear direction to the writer. Sometimes the content strategist role is combined with the information architect of the instructional designer.

The Instructional Designer This role occurs most commonly in educational multimedia, training, and e-learning programs where a specific skill or subject is being taught. Drawing from knowledge of the user, the content, and instructional design principals, the instructional designer carefully structures the information to teach the desired content to the user. Some of the tasks include breaking information into smaller units, sequencing information units and determining the need for interactive elements, such as tests, exercises, and feedback. The key instructional design deliverables are process flowcharts and wireframes. Process flowcharts visually lay out the sequence and relationship of the information overall. Wireframes present the information design of individual screens in rough sketches or interactive prototypes.

The Information Architect or Interactive Architect As described in the Chapter 3, the information architect is the person responsible for the overall structure and navigation of an informational multimedia and web project.

4

The Multimedia and Web Site Production Team

The information architect, sometimes also called an interactive architect, is a close cousin to the instructional designer. Sometimes the same person has both skill sets. Many of the same steps previously defined in the instructional design definition also hold true here, but the overall goal is somewhat different. A project requiring an information architect is not necessarily instructing the user, but instead is making a body of information easy to find and use, such as product information on an automaker’s web site. An interactive architect might be designing the process flow for an online or offline application, such as a tool for doing your taxes. Similar to instructional design, the key deliverables for both interactive and information architecture are process flowcharts and wireframes. (See Chapter 3 for more information on wireframes and flowcharts.)

The Interface Designer The interface designer position can vary from project to project. Sometimes it incorporates the information architect and instructional designer positions along with graphic design skills. Sometimes the position is primarily a graphic design position that works with a separate information architect or instructional designer. The job of the interface designer is to structure the layout and the visual look of a project’s interface as presented to the user. The interface could be as simple as an information web site with menus and text or as complex as an elaborate computer game world with buildings, people you can talk to, and functional objects like telephones and cars. See Chapter 1 for more on interfaces.

The Game Designer Related to the above skill sets is the game designer. On a large computer game, there may be several types of designers, but these categories are sometimes lumped into one title: “creative designer,” “game designer,” or just “designer.” In most cases, a designer’s responsibilities include the structure of the game play, the visual look of the project, and sometimes also the interface design.

The Usability Expert Usability testing makes sure that the product functions effectively from the user’s point of view, while achieving the client’s goals. To refine usability, the usability expert gets user feedback on products in various ways, including questionnaires, interviews, blind testing, and site visits to the user’s location. The usability expert also has knowledge of usability best practices and often has an advanced degree in a field, such as human computer interaction or communications. The usability expert provides usability test reports, analyzes questionnaire results, interview

59

60

WRITING FOR MULTIMEDIA AND THE WEB

transcripts, and usability expert analyses. Reviewing some of this material can help the writer better understand the user. (See “Tips for Writers from Usability Experts” in Chapter 2.)

The Subject Matter Expert Although the writer will often be in charge of doing his or her own research on a subject, if a subject is particularly complex or technical, there will also be a subject matter expert (SME) on a project. This person is crucial to the writer. The SME will often provide reference material, outlines, and will review the writer’s script for accuracy. Sometimes the SME is simply a resource for the writer to interview.

The Business Strategist This business strategist has some similarities with the subject matter expert in that the business strategist is an expert on business issues. Usually a business strategist has an MBA and some experience in business. This role is common on corporate e-commerce web sites and marketing web sites where it is important to understand the client’s business goals and processes and come up with a way to achieve these goals in the interactive media project. The business strategist often writes the user scenarios, which describe typical users and how they might use the product. This is a great resource for the writer so that he/she can be sure to slant the writing toward the project’s audience.

The Art Director/Creative Director/Graphic Artist The art director, sometimes also called the creative director, oversees and sometimes creates visuals—backgrounds, interface screens, graphics, and animations. The art director supervises individual graphic artists. The writer should work closely with the art director/creative director, especially if considering more complex visuals, such as animations. He or she can make the writer aware of the communication potential of the graphic tools being used on the project. On a well-run project, the visual design serves the content. The creative director works closely with the information architects and instructional designers to visually engage the viewer, maximize a positive user experience, and support effective information presentation.

The Animator On a complex project, a good animator is a real asset to the team. The writer should learn the capabilities of this individual because an animation is often the

4

The Multimedia and Web Site Production Team

only clear way to explain certain subjects, such as scientific processes. Animation is also used for simpler uses, such as online tours of a complex web site or program. Macromedia Flash animation has become an important tool for web sites.

The Project Manager On large projects, this is a separate position, but sometimes is combined with other positions, as described in Chapter 3. The project manager (PM) manages the budget, the schedule, the client, and the personnel on the project. If the writer needs resources or is unclear about deadlines or any other aspect of the project, the PM is usually the person to go to.

The Video/Audio Director/Developer The video or film director is in charge of creating live-action video or audio. The director may also be in charge of developing the original audio for stock footage. The writer’s relationship to the director varies with each individual, but in many cases it is a collaboration that starts with the director commenting on early drafts of the script, and extends into production with the writer performing last-minute rewrites. On projects with limited video, the director and the developer who actually produce the video and audio may be the same person. On larger projects, the director is in charge of a team of cameramen, editors, lighting technicians, sound artists, actors, etc.

The Photographer/Videographer Another key person is the photographer or, if there is video, the videographer. On smaller projects, there will not be a separate video director. The writer has to be sure that the photographer or videographer can capture the images needed for the project. The writer must be able to adequately describe the project’s visuals needs and to understand the capabilities of the photographer/videographer and the limitations of their equipment.

The Voice Talent and Actors If a project has audio narration or on-screen actors, the voice talent or actors will be part of the team. It is useful for the writer to listen to the actors or voice talent speaking the lines the writer has written. This can help the writer tune the language so it is better suited for this particular speaker.

61

62

WRITING FOR MULTIMEDIA AND THE WEB

The Programmer/Coder The programmer writes the code or uses the authoring program to make the dreams of the writer, designer, and other production members become reality on the computer screen. Establishing good rapport with the programmer is useful for the writer to understand what type of information or story element manipulations are possible with the tools available for this program. If a programmer’s skills are limited to HTML and JavaScript for web sites, the team member is sometimes called a site developer. Site developers often also have graphic skills.

The Product Manager On large projects, the product manager works with the client and deals with marketing issues if the program is aimed at the mass market. Sometimes the roles of product manager and project manager are combined. A writer who is brought in early can test ideas with the product manager, who often knows the client’s needs or the intended market best. But writers should never completely abdicate their creative vision in favor of market research. If the marketing people could always predict what would be successful, then they would all be rich.

Conclusion Not all of the individuals discussed above will be on every project. Many projects will have some of these duties combined. Very large projects will have even more positions. To get a sense of the types of positions evolving in multimedia and the web, go to the careers section on the web site of a big production company or recruiter and review their job listings. The core creative team for most projects includes writers, designers, and programmers. Because of the complexity of multimedia, the writers must think of themselves as part of this team and learn all they can from their team members so that they push the communication potential of multimedia and the web to the limits needed for each project.

References O’Meara, Maria. Notes to the author, 1996, 2005.

5

Script and Proposal Formatting Chapter Overview Multimedia and the web’s use of many media and interactivity make script formatting difficult. Nevertheless, it is essential for writers to present their ideas effectively on paper so that clients and production team members can visualize their ideas. At this point in the industry, there is no one set format for all situations. The format chosen depends on the demands of the individual production. After discussing scriptwriting software, this chapter defines the following formats: • • • • •

Web site outlines Treatments Proposals and design documents Single-column scripts Multicolumn scripts

Scripting Software There are number of software programs dedicated to script formatting and developing large writing projects, including: • CopyWrite (Mac) is a project management tool for writers. It allows a writer to browse, organize, and manage the documents and information for a project. • StoryView helps organize large writing projects. It is a visual outliner for writers that lets a writer brainstorm, create, structure, and organize ideas. • WordMenu is an all-in-one dictionary, thesaurus, almanac, and more. • Final Draft Screenplay and Movie Magic are two popular screenplay formatting and script development software programs.

63

64

WRITING FOR MULTIMEDIA AND THE WEB

Some writers swear by these programs and think that it makes the writing process much easier. The web sites for these programs are at the end of this chapter. Most of them have free demos so you can try them out and see if they work for you. My own feeling, and that of many of the writers interviewed for this book, is that if you are competent with a major word processing program, such as MSWord, you don’t really need a dedicated scriptwriting program. The key is in becoming skilled with tables and learning how to create macros. Macros allow you to automate certain formatting functions and make writing a script much easier. If you don’t know how to use macros, go to the help section of your software, search for macros and follow the instructions. Using your current word processor will not only save you money and the time it would take to learn a new program, it will also insure compatibility. Scripts and other documents are often shared with other members of the multimedia team. If you write in a major word processor, chances are that other members of the team will be able to open your files and edit your documents. If you use a specialized script formatting software, accessibility may not be the case, unless the software can export to a standard format, such as MSWord or RTF. This export feature should be a major consideration before buying one of these specialized scriptwriting tools.

Preliminary Documents: Outlines, Proposals, and Design Documents A project’s script or detailed design document includes every word of text, narration and dialogue; descriptions of all the images, videos, and animations; and explanations of the linking and functional elements. Fortunately, projects almost never start with a script. Usually some sort of preliminary written document is presented to the client and other members of the production team before the final script is written. This is useful for clients who may have difficulty understanding an interactive script. It also insures that the basic goals of the project are being achieved before the fine details are worked out in the script. Sometimes the preliminary form itself, such as a web site outline, is adequate to get the production green-lighted with the client. (One preliminary document, the use case, which defines the user’s needs, is explained in Chapter 7.)

Outlines Before writing a full text script of all the content on a web site or another information heavy program, such as an online course, it is useful to write a content outline and a flowchart to explain the content and navigation to the client and production team. Flowcharts were discussed in detail under “Flowcharting” in Chapter 3. The flowchart illustrates the overall navigation, structure, and size of the site; the outline

5

Script and Proposal Formatting

provides more details about the actual content and functionality of the individual pages. The outline sample that follows is most effectively used with an accompanying flowchart. The client consults the chart for overall structure, and then reads the outline for the details. The structure of each page on the outline below is fairly simple. The outline should be adjusted to match the specific project. The elements include: • • • •

Title: The page title, which should be the same as what is on the flowchart Image: Describes possible images for the page, including animations or videos Text: Describes on-screen text Links: Includes all the links on this page from text within the page and from the navigation bar or menu • Navigation: The specific buttons that will have to be created for the navigation bar or menu • Functionality: This describes what the user can do on this page besides click and read. For example, if it is a real estate site, as in the example below, can the user search for properties or calculate a mortgage payment? A useful feature of Inspiration software, which I use to create my outlines, is that it will convert the outline to HTML for publishing to a client’s review site on the web. Part of this conversion creates a clickable menu at the top of the outline for every page in the site, so the client can quickly jump to the page they want. See the Chapter 10 section on this book’s CD-ROM for a working example of this menu.

Partial Outline of the Prudential Verani Web Site HOME PAGE TITLE: PRUDENTIAL VERANI REALTY: The Real Estate and Relocation Resource for Southern NH IMAGE: Images that demonstrate that Verani is a professional, friendly place. Possible images: Prudential logo, friendly Verani staff, Verani office, people enjoying a beautiful home. Might have other images on page to lead user to some of our key features, such as a calculator image for the tools and an e-mail icon for our custom e-mail notification service. Images will be small or designed in such a way that the page will load quickly. TEXT: Explain that we are part of Prudential, one of the largest corporations in the world, but also a

65

66

WRITING FOR MULTIMEDIA AND THE WEB

family-owned company with strong roots in Southern New Hampshire. We have the resources to sell your property effectively and/or make your home search efficient and successful. Also should introduce some of the key features of the site, such as our searches, custom e-mail notification tools, extensive information resources, and so on. Near the bottom of the page should be a short disclaimer stating that we have made every effort to make the information on this site accurate but are not liable for any errors or omissions; please see our Terms of Use Policy. LINKS: Homes & Land, New Construction, Commercial & Industrial, Relocation Services, Verani Mortgage and Title, Real Estate Information & Resources, News & Special Events, Search/Site Map, About Us/Contact. Might also have a link from a calculator image to the tools and calculator section. In text on the bottom of the page and on every page will be links to Terms of Use, Privacy Statements and a webmaster e-mail link. NAVIGATION BAR: Homes & Land, New Construction, Commercial & Industrial, Relocation Services, Verani Mortgage and Title, Real Estate Information & Resources, News & Special Events, Search/Site Map, About Us/Contact. I. HOMES & LAND TITLE: Homes & Land IMAGE: Small image of attractive house. This could be the same picture all the time or a regularly changing featured house. TEXT: Briefly explain the range of properties we offer and the area we cover. Direct the user to the search page and other services that will help with moving and home buying, such as Relocation Services, the How to Buy a Property Section, Home Preference Check List/Questionnaire, & New Construction. LINKS: Home, Search, Contact, Relocation Services, the How to Buy a Property Section, Home Preference Check List/Questionnaire, & New Construction. NAVIGATION BAR: Home, Search, Contact

5

Script and Proposal Formatting

IA. CONTACT AN AGENT TITLE: Contact Us IMAGE: Photo of friendly agent. TEXT: Phone numbers, addresses, and e-mails for all offices. Plus a form that the user can fill out and submit so that we can contact them. LINKS: Home Page, Search, Contact, Homes & Land. NAVIGATION BAR: Home Page, Search, Contact, Homes & Land. FUNCTIONALITY: Users can fill out form with their address and e-mail, click the type of information they want, write a short note and submit it to us. Message will go to different people at Prudential Verani depending on what type of information the user requests.

Copyright Prudential Verani Realty.

Treatments Although a treatment could be used for a preliminary description of a web site, it is more commonly used for CD-ROM or DVD multimedia programs. The treatment, a form borrowed from linear film or TV writing, describes the structure and key elements of a project in a form similar to an essay or a short story. Guidelines for treatment writing include: • • • •

Use the third person (e.g., “He shambles,” not “I shamble” or “you shamble”). Use the present tense (“he shambles,” not “he shambled”). Write visually. Be descriptive, but don’t call shots. Capitalize: ◦ Character names when they first appear. ◦ Major sound effects. ◦ Technical directions, such as ROLLOVER, LINK, etc. (but don’t use unless necessary).

• Usually summarize on-screen text, dialogue, and narration, although a few bits of dialogue or narration are allowed if they help present the material. • Usually double-space treatments, although sometimes they are single-spaced, with chapter or section headings in all capitals.

67

68

WRITING FOR MULTIMEDIA AND THE WEB

Multimedia Informational Treatment Sample The following sample is from the conclusion of the treatment for The Nauticus Shipbuilding Company, a multimedia program about shipbuilding presented on a museum kiosk. (The entire treatment may be found under “The Proposal” in Chapter 14.) Conclusion: After the last component has been selected, a 3-D animation sequence depicts the launching of the vessel. If the design is suitable for the mission, the visitor will see a depiction of their design successfully carrying out the mission. If the design is fundamentally flawed, the vessel will be shown sinking. Some evaluation will be provided as to the ability of the visitor’s design to carry out the selected mission. Finally, the visitor will be given the opportunity to print out his design and evaluation.

Narrative Treatment Sample A narrative interactive treatment is sometimes called a walkthrough. The following is a section of the walkthrough for The Pandora Directive. (See Chapter 22.) In the introductory conversation with Gordon Fitzpatrick, you learn that he is looking for a Dr. Thomas Malloy, who recently stayed at the Ritz Hotel. Fitzpatrick and Malloy used to work together (where, unspecified). Fitzpatrick then says he saw a photograph of Malloy in the Bay City Mirror and found out that the photograph had been taken at a local university (San Francisco Tech). Fitzpatrick gives Tex a copy of the photo.

Proposals and Design Documents A treatment is usually only one component of the first detailed description of an interactive project. This preliminary description is sometimes called a high-level design document proposal, a design proposal or just a proposal.

Format for an Informational Design Document Proposal A proposal can be in many forms. There are several examples in the cases studies. One fairly standard approach includes the following elements. See Chapter 14 for a complete design document following this format. • Design objective. This is a short description of what the program hopes to accomplish. It is sometimes no more than a paragraph, but it is important because it is the first chance to grab the reader.

5

Script and Proposal Formatting

• Creative treatment. This is a detailed description of the entire program. It will run for many pages, depending on the size of the project. • Navigation. This is a description of the interface and how the user will navigate through the program. It often includes a navigation flowchart. The navigation is also described in the treatment. • Production and marketing. Design documents often have sections dealing with the project schedule or, if it is a mass-market piece, ideas for marketing the program to the public. Biographies of the writer, designer, and other key personnel are sometimes included here.

Format for a Narrative Proposal A proposal for a multimedia program that includes a story would follow much of the same format as above. It may, however, call the treatment a “story summary.” There may also be sections describing the characters.

Storyboards, Scripts, and Final Documents Unlike the preliminary documents discussed above that summarize the key features of a program, the script details every element of a piece. The examples that follow are only a few of the interactive script formats in use, but they present enough options that you should be able to find something that can be adapted for your production. Be aware that many productions don’t use traditional scripts at all and instead use combinations of flowcharts, dialogue lists, walkthroughs, and other types of written material. These materials and other script samples are documented in more detail in the case studies in Part II and Part III.

Linear Screenplay Format Many approaches to formatting scripts for interactive multimedia use linear screenplay or teleplay format as their basis and then add variations, so it is useful to understand the specifics of the linear screenplay format. Script format is important because the running time of a video is judged by the number of pages. One page, if it is typed in proper format, is roughly one minute of screen time. There are variations on the example below, such as greater use of double-spacing in television writing, but the example is a standard screenplay format that can readily be adapted to different situations. Note that margins and line spacing are distorted in the example below to allow space for the directions. The format below includes some technical and camera directions. Be aware that if you are writing a script to hand off to a director or multimedia designer, they may not want such directions included. In that case, you can still use the same format below, but leave out the technical and shot material, such as “Camera Dollies Back.”

69

70

WRITING FOR MULTIMEDIA AND THE WEB

DIRECTIONS

THE MULTIMEDIA WRITER

Top margin = 1". Number pages in upper righthand corner. No number on page 1. Slug lines are typed in CAPS at the beginning of each scene, telling whether scene is INT. or EXT. (interior or exterior), location of scene, and day or night.

FADE IN:

Scene Description: Left margin 1.75", right margin 1" (7.5" if measured from left).

The room is a wreck. The floor is covered with papers and trash, the bed is unmade and cigarette butts litter the desk and windowsills.

Break long descriptions into several short paragraphs. The first time a character’s name appears in the scene description, type it in CAPS.

ARNOLD throws the door open and stumbles into the room. CAMERA DOLLIES BACK with him. Arnold is in his early twenties, thin and unkempt. His once handsome features are contorted in agony. He clutches what appears to be a multimedia manuscript in his hand.

Single-space within scene description or dialogue. Add a blank line space between dialogue passages, scene description paragraphs, and slug lines.

He stumbles to the floor and falls to his knees, pulling the script to his bosom. He falls back with a scream and hits the floor in agony, dropping the script.

INT. ARNOLD’S BEDROOM DAY

The title of the manuscript is revealed to be The Great American Computer Game. ARNOLD (OS)* (whispering)

Dialogue: left margin = 3.0", right margin = 2" (or 6.5" if measured from left).

Why me? DISSOLVE TO: EXT. ARNOLD’S APARTMENT DAY LONG SHOT The door of the apartment swings open and Arnold stumbles out clutching his script.

5

71

Script and Proposal Formatting

Name of person speaking dialogue is in CAPS and centered over the dialogue. No space between speaker’s name and dialogue.

ARNOLD I keep asking myself: What is the secret? The booming, powerful, authoritative voice from the unseen NARRATOR of our film is heard.

Dialogue direction is typed in small letters, centered under speaker and placed in parentheses.

Camera movements, such as tilt, pan, track, dolly, and zoom typed in CAPS in the scene description. On right side of page are placed: Fade out and Dissolve to. On left is Fade in.

Bottom margin = 1/2–1". It depends on how dialogue breaks. Don’t break dialogue over 2 pages.

NARRATOR (VO)** (booming) Arnold never did learn the secret. He should have read Tim Garrand’s Writing for Multimedia and the Web. THE CAMERA QUICKLY ZOOMS IN TO Arnold. He tosses away his script in the trash and runs off. His script sits on the top of the trashcan, its pages fluttering sadly in the breeze. FADE OUT.

*(OS) next to the speaker means off-screen. The character is part of the action, but we do not see him or her in this particular shot. A character yelling from the bathroom while the camera focuses on the bedroom is an example of an offscreen voice. Or, as in the example above, the camera could simply be focused on an object in the same room as the character, leaving the character nearby but off-screen. **(VO) next to the speaker means voice-over. This indicates that the speaker is not a part of the film or video’s action. A modern newscaster narrating a World War I documentary is an example of VO.

Single-Column, Simple If-Then Interactive Format Use: Narrative or informational programs with limited interactivity, usually at the scene level. Because it is a single-column script, it would not be well suited to a program with extensive voice-over narration. That usually requires a multicolumn script, which is explained later in this chapter under “Double-Column Format” and “Triple-Column Format.” Description: This script is similar to the linear screenplay described above, except that at various points in the script the user is given two or three choices

72

WRITING FOR MULTIMEDIA AND THE WEB

of different scenes. This type of script can be used when the interactivity is fairly simple. The following example is part of an interactive museum piece located at the National Scouting Museum in Irving, Texas. In this story, the characters have to choose whether to search the school, the farm or the neighborhood for a missing child. The situation is first outlined in a linear fashion, and then the options follow: first the school scene option, then the farm scene option. The neighborhood option is not included in this sample. The complete script is included in the “Boy Scout Patrol” area of the Chapters section of the book’s CD-ROM.

BOY SCOUT PATROL THEATER by Maria O’Meara SCENE 2 TROOP HQ 2-1. WS GROUP ALEX Okay. We all know why we’re here. Bob has divided the map up into areas. We’re going to use the buddy system to cover each one. BOB Here’s a map of the area we’re searching. 2-2. MAP GRAPHIC BOB (voice-over) This is where she was last seen—the school. Here’s where she lives. Between the two is the old Wilson Farm. WHICH PART DO YOU WANT TO SEARCH? A. THE SCHOOL B. THE FARM C. THE GIRL’S NEIGHBORHOOD IF A. THE SCHOOL SCENE 2A 2A-l. CU ALEX ALEX Chas and Don, you guys go see if she’s not still hanging around the school.

5

73

Script and Proposal Formatting

M-l. TRANSITION MONTAGE TO SCHOOL 1. POV HALLWAY 2. POV SCIENCE ROOM 3. POV POOL 4. POV STAIRS SCENE 3 3-1.2 SHOT BOYS enter a classroom.

[Scenes have been deleted. The boys search the school and fail to find the girl. They return to scout headquarters and must choose again.] WHICH PART DO YOU WANT TO SEARCH? A. THE SCHOOL B. THE FARM C. THE GIRL’S NEIGHBORHOOD [IF B. THE FARM] 2B-l. 2 SHOT ALEX AND BOB ALEX Greg and Hal—search the farm. M-2. TRANSITION MONTAGE TO FARM AREA 1. POV WOODS They happen upon their science teacher who is looking for mushrooms in a field. He looks very scientific and has a sample bag, notebook, magnifying glass, etc. He is humming a little song.

Copyright National Scouting Museum of the Boy Scouts of America.

Single-Column, Complex If-Then Interactive Format Use: The previous example had fairly simple if-then conditions. For example, if the scout decided to search the farm, then we cut to the farm scene. For many projects the interactivity is far more complex. In such projects, the questions users ask of characters in the program or what action users did previously will affect what

74

WRITING FOR MULTIMEDIA AND THE WEB

new actions, characters or dialogue will appear on screen. This type of complex if-then interactivity requires a more complex format. Description: The following sample is from the computer game, Nancy Drew: The Secret of the Old Clock. This is a highly interactive program where the player gradually accumulates clues and information to solve a mystery. The player gathers the information in a nonlinear sequence. So the game engine needs to keep track of what the player has already discovered in order to reveal the next pertinent bit of information. For example, if the player has already asked a certain character about another character’s middle name, he or she should get a different response than if he or she had not asked that question previously. In the first line of the sample below, there is an elaborate series of conditions that indicates what the player already knows: “If EV_Saw_Questions = True and EV_EC_Said_Lois = False and EV_JW_Said_Mid_Name = False.” This indicated the player does not know the middle name is “Lois” and that the player has not asked this specific character JW about this before. When these conditions are met, the player will be able to click on (ask) the question that follows the conditions tagged with , and the character will respond with the line that’s in square brackets ([ ]). However, if the conditions are different and JW_Said_Mid_Name = True (see the line below “Go to 1048”), that means the player has asked JW about this before and instead of Scene 1047, Scene 1048 will be used in which the player is sent to another character, Emily. This script format is used in conjunction with a flowchart. There is a more detailed discussion of this script format and this game in Chapter 20. Scene 1047 Information Check If EV_Saw_Questions = True and EV_EC_Said_Lois = False and EV_JW_Said_Mid_Name = False

[‘Course I do. It was . . . {frustrated} Oh, piffle! It’s right on the tip of my tongue. It was . . . it was . . .][JWP47] Go to 1048 Flag Set: EV_JW_Said_Mid_Name = True Info Check: No Bye: No =========== Scene 1048 [{with an exasperated sigh} It’ll pop into this feeble brain of mine one of these days. Why don’t you just go ask Emily.][JWP48] Flag Set: None

5

75

Script and Proposal Formatting

Info Check: Yes Bye: Yes ===========

Copyright Her Interactive Inc.

Single-Column, Screen-Based Informational Script with Element Labels Use: This script is best suited to an informational program that has considerable interactivity and a variety of media, such as narration, text, and video. Screen elements are clearly defined in the script by labels. Description: This script was used in the training program Vital Signs, which teaches medical technicians how to perform various tasks. Each script page is one screen of material. The script page has three parts divided by horizontal lines. The top part describes the lesson and topic. The middle part describes the actions. The bottom part describes the feedback (reaction to the actions) and linking. VITAL SIGNS Unit: u1 Lesson: Blood Pressure Topic: Title: Screen: u1.4.13p Type: Graphic File:

(GRAPHIC/VIDEO: Colette looking apprehensive) Text: Meet Colette, age 7. You’re going to take her blood pressure. You’ve explained the procedure to her. What do you use next? (CAPTIONS) Cuff Ball Pump Valve on cuff Doll (AUDIO: NARRATOR VO): Now it’s your turn. Meet Colette, age 7. You’re going to take her blood pressure. You’ve explained the procedure. What do you use next—the cuff, the ball pump, the valve on the cuff or the doll? SELECT your choice now. Feedback: (VO and text) Cuff, Ball Pump, Valve = (SFX: Little Girl’s Voice) (VO audio ONLY): No. I don’t want that. It’s going to hurt!

76

WRITING FOR MULTIMEDIA AND THE WEB

NARRATOR (VO): Apparently, Colette didn’t again. Doll = NARRATOR (VO): You’re good. That’s her face, you can tell Colette didn’t buy demonstrate on a doll. (SELECT “GO AHEAD” Branching: u1.4.14p Special Instructions:

buy your explanation. Try right. From the look on your explanation, so you to continue.)

Copyright Harvard Pilgrim Health Plan.

Single-Column, Screen-Based Informational Script Written in a Database Use: This type of script could be used for a narrative or information piece with substantial interactivity. It would only be needed for a complex program with many team members or where the final pages were dynamically generated from script segments in a database. Description: My company InterWrite developed a geology web site and CD-ROM for the textbook company Houghton Mifflin. The project was quite large, had numerous assets (video, graphics, audio, animations), several content experts, and a number of editors. Developing a coherent script that would clearly describe all these elements and allow all the content people and editors to add their comments to the script was a challenge. The solution was to develop the script as a FileMaker Pro database (see following for a sample page). Each of the elements below, such as screen text or visual layout, was separate fields or units of information in the database. This allowed us to have one master script with all the elements, but by using the databases sort and export functions, we were able to create multiple custom scripts and documents from that master script. These documents included: a list of scenes and a flowchart for the project manager; a table of assets needed for the media researcher; a script (free of internal comments) for an outside vendor; a detailed list of instructions for the animator; and so on. This database script could also be used as the basis of an asset database so that video, graphics, and other elements could be easily found for future projects.

GEOLOGY EXPLORER Page Number. Title Date

VIII-2b Relative Ages

Screen Text

Now see if you can determine the year in which the car in the center was released. Write your answer

5

77

Script and Proposal Formatting

in the space provided and then hit “Continue.” If you have absolutely no idea, just hit “Continue.” Visual Layout

Layout 2 Text top, Graphic bottom. The graphic consists of the three cars in a row. A text input box labeled “Car Release Date” is above the 1955 Ford.

Screen Action

Input date; hit “Continue.”

Feedback Links

Correct Answer + Continue. → VIII-2b1 Incorrect Answer + Continue. → VIII-2b2.

A: Graphic 1

D1) Model-T Ford

A: Graphic 2

D2) 1955 Ford

A: Graphic 3

D3) 1999 Lexus

A: Animation A: Audio A: Video A: Shockwave

Three pictures are arranged in a horizontal row with a text input box above D2)1955 Ford.

Assets Notes Notes Internal

No need to actually register whether the student is right. We can just give the correct answer.

Notes to Author Notes to Vendor

Copyright Houghton Mifflin Company.

Double-Column Format Use: Informational projects with substantial interactivity and voice-over narration. Description: This format is similar to what is used for documentary video. It has two columns, with images on the left and audio and text on the right. An unusual aspect

78

WRITING FOR MULTIMEDIA AND THE WEB

of this particular script is that it is illustrated, which works very well to present the feel of the completed project. Most double-column scripts do not include images. This program is displayed in an interactive kiosk at the National Maritime Center in Norfolk, Virginia. This production teaches shipbuilding principles by having the player build a ship. In the following section, users can choose to get information on various hull types and then must pick one of these hulls for the ship they are building. Because there is only a small amount of material on each hull, all the choices are listed sequentially. See Chapter 14 for the full script.

THE NAUTICUS SHIPBUILDING COMPANY IMAGES

AUDIO & TEXT “Press a number to learn about a hull”

CHOICES: 1) Air Cushion –Flat hull rides on cushion of air –Capable of high speeds –Needs flat water conditions –Flat, rectangular deck, easy to load 2) Planing Hull –V-shaped hull capable of high speeds –Performs best in flat water conditions –High stress levels on hull 3) Displacement Hull –Deep, rounded hull, very stable in all conditions –Very large cargo capacity –Stable platform for large propulsion systems –Needs very large propulsion system 4) SWATH (Small Waterplane Area Twin Hull) –2 submerged hulls, very stable –Flat deck provides good work area

5

79

Script and Proposal Formatting

After selecting a hull to use, cut to Design Assembly screen, animation of hull rollout.

Loudspeaker VO: “Planing hull being moved into position.”

Cut to POV animation moving to propulsion subassembly area.

Background sound of motors whirring and machinery clanging. “Next, you’ll need to choose a propulsion system.”

Copyright Chedd-Angier Production Company.

Three Column Format with Narration and Text Transcript Use: Informational scripts with substantial interactivity and a variety of media including both audio narration and on-screen text transcripts of that narration. Description: Often learning programs will have both audio narration and a text transcript of the on-screen narration. This helps learners who may prefer to read versus listen, do not have audio or who have a disability. The writer cannot just repeat the narration and the text transcript because there will be subtle differences in the narration, which must be listened to (and read aloud by the narrator) and the text transcript, which is read silently by the user. Note that the narration column is shaded to clearly identify it for the narrator who must read the text. This format also has a fourth column (not pictured here), which was used for production purposes, such as timing the narration. The animations and graphics are simply described by a file name, which is described in detail on a separate animation page of the script. See Chapter 13 in the book or CD-ROM for a more detailed example of this format. Images, Text, Programming

Narration (Text Transcript)

Narration (Audio Transcript)

2)(Main Screen Text) When data are collected over a period of time, they can be represented by a time plot.

When data are collected over a period of time, they can be represented by a time plot.

When data are collected over a period of time, they can be represented by a time plot.

3)(Definition Box) A time plot is a graph showing data measurements in chronological order.

A time plot is a graph that shows data measurements in chronological order. It is important to

A time plot is a graph that shows data measurements in chronological order. It is important to note

1)(Title) Creating Time Plots

80

WRITING FOR MULTIMEDIA AND THE WEB

4a)(Procedure Box)Making a Time Plot[il0262m02c01 anim01F1_IW.ai]

note that the interval of time between measurements should be the same. So, if you take a measurement once a week, it should be on the same day every week. Or, if you take a measurement every day, the same time period, such as one-half hour, should be used.

that the interval of time between measurements should be the same. So, if you take a measurement once a week, it should be on the same day every week. Or, if you take a measurement every day, the same time period, such as one-half hour, should be used.

To make a time plot, use the following procedure.

To make a time plot, use the following procedure.

Copyright Houghton Mifflin Company.

Six Column Format with Live Host, Interactive Media, and Audience Interactivity Use: Immersive exhibits in museums or complex presentations at major conferences and events that use a combination of live host and interactive media before live audiences. Description: Script has six columns for the Host’s dialogue, user interaction in this case through a PDA attached to each seat, video on big screen, audio and narration, lighting effects on the audience, and cues for the host who controls the program. See Table 5-1 for an example. A longer example of this script can be read in Chapter 24.

Conclusion As you have seen in the variety of script and other document formats in this chapter, there is no one way to format for multimedia and web documents. The primary requirement is to make sure that whatever format you choose, it is clear to your client and everyone on your production team. And as with most things, keep it as simple as you can. Your format should be self-explanatory.

Table 5-1

In our first game, we’ll be visiting the year 1813 and exploring the beginnings of the textile industry here in New England. Look down at your screen to see how much you have to start with. HOST As you see, you each have $10,000 in your accounts. Remember, that’s $10,000 in 1813 dollars. But in that time, just as today, you could earn money . . . so let’s earn a little more money right now in our Lightning Round. HOST You’ll have a chance to answer 3 questions. For each one you answer correctly, you’ll earn $1,000! You’ll have 10 seconds after the question to enter your answer. Anyone have any questions? . . . Let’s start the lightning round.

VIDEO & LIGHTING

AUDIO, NARRATION, & SFX

Graphic or animation Bank account icon from PDA.

PDA GRAPHIC on system shows each person how much they have.

EFX

CUES

1813 Gobo effect on queue with movie

Host – next at the word screen activates PDA info

Host spot and blue wash fade out. Gobo Lightning effects timed to main screen.

Host – Next on the words Lightning Round. Movie starts 30 frames after lights fade out.

Script and Proposal Formatting

VOTE; PDA

5

HOST

MAIN SCREEN Graphic Bank account shows amount of money each person has.

GRAPHIC Lightning Roz und graphic or animation flashes on main screen. Possible lighting effects flash throughout room.

SFX Lightning round theme song plays.

Continued

81

82

Table 5-1 Continued HOST

VIDEO & LIGHTING

AUDIO, NARRATION, & SFX

VISITORS have a pre-set amount of time to answer the questions

GRAPHIC & MAIN SCREEN TEXT BUILD, with graphics What was the relationship between Britain and the United States in 1813? a. They were at war. b. They were allies. c. The United States was a British colony. d. Europeans had not yet come to North America.

CHRIS (VO) First question. What was the relationship between Britain and the United States in 1813? a. They were at war. b. They were allies. c. The United States was a British colony. d. Europeans had not yet come to North America.

Copyright Federal Reserve Bank of Boston.

EFX

CUES

WRITING FOR MULTIMEDIA AND THE WEB

VOTE; PDA

5

Script and Proposal Formatting

References Cockburn, Alistair. Writing Effective Use Cases. Addison-Wesley, 2000 Copywrite. http://www.bartastechnologies.com/products/copywrite/ Final Draft. http://www.finaldraft.com/ Loge, Ken. E-mail to Focal Press. January 28, 2005 Movie Magic. http://www.screenplay.com/products/mms/index.htm StoryView. http://www.screenplay.com/products/sv/ WordMenu. http://www.wordmenu.com/

83

This Page Intentionally Left Blank

6

Key Points from Part I: Interactive Media and the Writer

Multimedia Defined (Chapter 1) Interactive multimedia is a computer-delivered, communication medium that uses any combination of sound, pictures, video, animation, and text to communicate to the user interactively. Multimedia is presented on the World Wide Web; local networks, such as corporate intranets; computer hard drives, such as museum kiosks; interactive television, such as MSN TV; dedicated gaming systems, such as PlayStation and Xbox; mobile devices, such as PSPs (Play Station Portables) and iPods; and discs, such as CD-ROMs and DVDs. Interactive multimedia has dozens of uses, with the most common being marketing, sales, product information, entertainment, education, training, and reference material.

Thinking Interactively (Chapter 1) Unlike linear media in which the writer must limit options, in multimedia and on the web, the writer must have a feel for all the possible interactions in a narrative scene or for all the different ways that information can be linked together in an informational program. Complicating the interactivity is the need to anticipate user input—the different ways that users will want to take advantage of the interactive options the writer has provided.

Linking (Chapter 1) A link is the way that one element of a program is connected to another element in the same program or a completely different program. There are three

85

86

WRITING FOR MULTIMEDIA AND THE WEB

basic types of links: 1. Immediate or direct links: An action. 2. Indirect links: A reaction. 3. Intelligent or delayed links: A delayed reaction.

High-Level Design and Information Architecture (Chapter 1) The complexity that interactivity and linking add to a multimedia project demands strong high-level design and/or information architecture for the program to be coherent and effective. High-level design determines the broad conceptual approach to the project, including the structure, interface, map, organizing metaphors, and even input devices. Information architecture or interactive architecture is the term usually applied to web sites for the overall grouping of the information, design of the navigation, and process flows of online applications.

Interactive Devices (Chapter 1) The designer and writer must develop specific interactive devices that will make users aware of the interactive possibilities they have created. These devices include on-screen menus, help screens, icons, props, characters, and cues embedded in the story or information.

Writing for Many Media (Chapter 2) The interactive writer must be expert in a variety of techniques: writing to be read ( journalism, copywriting); writing to be heard (radio, narration); writing to be seen (film, video); plus writing for the special demands of the computer screen. This is because multimedia can easily incorporate many types of media in a single production or even a single screen, and multimedia can manipulate these media in ways not before possible.

High-Level Design and Management Skills (Chapter 3) Writers who want to get more control over their material and expand their career options should consider developing additional skills, such as: • Information architecture or interactive architecture • High-level narrative design

6

Key Points from Part I: Interactive Media and the Writer

• Project management • Content expertise

Flowcharting and Other Organizational Tools (Chapter 3) To organize the complex elements of a multimedia or web production, the writer must learn organizational tools. Flowcharting is a particularly useful way to visualize an interactive program for clients and production team members. Other organizational and visualization tools commonly used by writers are outlines, storyboards, databases, and index cards.

Writing as Part of the Production Team (Chapter 4) No matter how multiskilled the writer is, he or she will usually work as part of a production team. Understanding who these team members are and how to interact with them can add to the writer’s success and ultimately that of the project. The size and complexity of the project dictates how large and varied the team will be. Some of the possible team members include: writer, content strategist, instructional designer, information architect or interactive architect, interface designer, game designer, usability expert, subject matter expert, business strategist, art director/creative director/graphic artist, animator, project manager, video/audio director/developer, photographer/videographer, actors/voice talent, programmer/coder, and product manager.

Script Formatting (Chapter 5) The preliminary forms for many multimedia programs are proposals, design documents, and outlines. The elements of an informational design document include design objective, creative treatment, navigation, production, and marketing. A narrative proposal might also include a story summary and characters. There are a wide variety of script formats including single-column and multicolumn scripts.

87

This Page Intentionally Left Blank

Writing Informational Multimedia and Web Sites P A R T II

89

Figure II-1 The start page for individual investors on the T. Rowe Price web site. Copyright T. Rowe Price

7

Defining and Achieving Goals for Informational Multimedia and Web Sites

Chapter Overview This chapter introduces multimedia and web sites that communicate information without using fictional storytelling techniques. The aspects of informational multimedia and web sites examined in this chapter include: • Definitions of nonnarrative informational multimedia and web sites • How to define your projects goal by considering business context, data, and users • Techniques to achieve common informational multimedia and web site communication goals

Informational Multimedia and Web Sites Defined Most multimedia and web sites are designed to communicate information or to allow users to perform information-based tasks. Multimedia informational titles include marketing and customer service web sites, e-learning online courses, educational and reference CDs and DVDs, corporate training programs, museum exhibits, some online advertising, and even extended edition movie DVDs that provide background on a film. If the information being presented is about something concrete, such as a person or a place, informational multimedia follows the documentary tradition of presenting its information through the actual locations and individuals studied. For example, Compton’s Interactive Encyclopedia shows a video of Babe Ruth hitting a home run in Yankee Stadium, as opposed to having an actor portray Ruth in a studio. The Harlem Renaissance web site (see Chapter 12) has photos and video of Harlem in the 1920s.

91

92

WRITING FOR MULTIMEDIA AND THE WEB

If the information is more abstract, such as the process of buying a home, the material can be explained through text; visualizations, such as charts; and even interactive devices, such as calculators. See the case study in Chapter 10. There would be nothing wrong with an informational program that used an actor to play Babe Ruth, and many informational programs are created using narrative fiction. Examples include character-driven training programs, in which an actor takes on the role of a typical employee, and dramatic re-creations of historical events, such as the videos of New England History in The New England Economic Adventure, profiled in Chapter 24. Narrative fiction and informational programs using narrative have special concerns of their own and will be dealt with later in Part III. The focus of Part II is on informational multimedia programs that do not use fictional storytelling techniques.

Defining the Goal: Business Context, Data, and Users Before you can start building an informational multimedia program or web site, you need to clearly define your user and your goal for the project. Defining the user is actually one of the three components of defining the project’s goals. These elements are listed in the table below.

Business Context The business context includes the needs and resources of the client or the entity that is funding the project. • Corporate goals. What does the client think that they need to get out of the project? For example, do they want to build a web site to sell more real estate, such as Prudential Verani Realty profiled in Chapter 10? Does the client also have secondary goals?

Components of Project Goal Definition Business Context

Data

Users

• Corporate goals • Resources • Brand

• Document types • Formats

• • • • •

Information needs Research modes Expertise Technology Culture & language

Business Context + Data + Users = Project Goals

7

Defining and Achieving Goals for Informational Multimedia and Web Sites

• Resources. Where are the resources that the client can commit to this project? These include the overall budget, development staff, subject matter experts, and staff to maintain project after it is completed. • Brand. What is the company’s brand? How is the company perceived by potential customers or how do they want to be perceived? For example, T. Rowe Price, whose web site is profiled in Chapter 11, is a financial investment company. Their brand is that they are knowledgeable, reliable, and serious about taking care of your money. There will be little that is light or funny on their site.

Data • Document types. What type of information does the client already have? Is there adequate product information? Is there information about the company? What areas of information are lacking? • Formats. What is the format of the data? Is it in databases, print brochures, videos, or just in the heads of key company personnel?

Users Information programs are usually focused tightly to a specific group of potential users. For example, the Prudential Verani Real Estate site (Chapter 10) wants to serve people interested in buying homes, land, or commercial property in New Hampshire and northern Massachusetts. The training program Vital Signs wants to teach medical assistants how to take a patient’s temperature, blood pressure, and other vital signs. Because users are so well defined for most informational programs, it is essential to understand the user before coming up with a program’s goal. • Information needs. What information or activities do the users want from your project? For example, on a real estate site, are they going to just want lists of houses for sale, or will they also want mortgage calculators and other tools? Will they need to perform any online transactions, such as buying a product? • Research modes. How does your targeted user typically look for information? Do they like to search or browse? Do they need an online advisor tool that will allow the user to write answers to a series of questions and get advice? How will they want the information organized? What are their key information categories? • Expertise. What does the typical user already know about the product or topic? Does there need to be a lot of background information, or can we move right into the main content? • Technology. How will users generally access your information? Will they use a PDA, web phone, computer, etc? If a web site, will they use broadband or dialup? Are the users sophisticated enough with technology to allow advance features, or are they novices who will be easily confused?

93

94

WRITING FOR MULTIMEDIA AND THE WEB

• Culture & language. What is the dominant culture and language of your users? Is there a significant minority of users from another culture? If so, you may need to create separate programs for each, or at least create sections of your programs in another language. Adapting a project to another culture and language is called localization and is a complicated process usually handled by specialist localization companies, such as Lionbridge.

Use Cases and User Scenarios One of the ways that interactive programs try to understand their users is in the writing of use cases. A use case is a way to capture the step-by-step information or action needs of a specific user of a software program or web site. A single use case will have a detailed description of a type of user and can have one or more user scenarios. Each user scenario describes the steps a user will take using the program and how the system should respond to meet user needs and achieve the client’s business goals. Use cases can be very detailed, include extensive research, and fill many pages answering all the questions posed in the previous section about users. There are also many formats for writing use cases. Some follow narrative prose similar to the treatment format outlined in Chapter 5, while others are in outline or table form, such as the sample below. To write an effective use case requires researching the users of a program. This can involve user questionnaires, interviews, blind testing, and site visits to the user’s location. Often secondary sources that know the user, such as the sales team, are also helpful. Usually a business analyst, information architect or an instructional designer will write the use case. A writer should request these documents to help inform the writer about the user. Sometimes, particularly on smaller projects, the writer may be required to write the use cases. If you are on a project and there are no use cases, it is something you might suggest. The sample below is a very simple user scenario for an online chemistry course. Notice the description of the user, the activity, and the step-by-step plotting of the user’s actions. This use case attempts to put the writer in the head of the user and thus allows the writer to provide the content and functions that the user needs and expects. A brief use case sample: Chemistry Online Course Use Case Scenario 6: Instructor Reviews Grades Description of User • Instructor reviewing grades • Viewing in office (broadband connection) • Computer quality and speed ranges = very good • Technically somewhat sophisticated

7

Defining and Achieving Goals for Informational Multimedia and Web Sites

Activity • Login to course already begun

• Navigates to grades

• Checks answers and grades

• Logout

Description of Steps/User Actions

Notes

• Each cell below = a screen

Explanation of screen view and user actions

• Popup screen text is in italics and separated from main text by lines 1. Instructor logs on to Blackboard. 2. This leads to Welcome page. Instructor clicks on course link on right under My Courses. 3. This links to announcements page. Instructor clicks on control panel on announcements page in left menu.

4. On control panel page, user clicks on Gradebook in Assessments area of control panel.

5. This leads to View Spreadsheet screen of Gradebook, which shows all students in course and a summary of their grades by exercise. The instructor clicks on a grade of a particular student.

Other options in Assessment area of control panel: • Test Manager • Survey Manager • Pool Manager • Gradebook • Course Statistics Other Major options on View Spreadsheet page include • Add Item • Manage Items • Gradebook Settings • Weight Grades • Download Grades • Upload Grades

95

96

WRITING FOR MULTIMEDIA AND THE WEB

6. On the View Grades/Modify Grade page that results, instructor clicks on the View button at the right of the desired exercise listing that the instructor wishes to view.

[NOTE: The screen title of this page is View Grades, but the sequence menu at the top of the page calls it Modify Grade.]

7. The Modify Grade page shows the entire quiz with the question, the correct answer, and the student answer. The instructor also has the option of getting the Teacher Answer. Instructor reviews student work. Making notes offline.

• This screen will display student and correct answers to the questions, but not the answers to the hints. • The Teacher Answer consists of the worked-out solution and sometimes some additional notes to the instructor. When the Assignment is an algorithmic one, the solution should use the variables rather than a single numerical value. But the instructor also needs to see the numerical answer for a given instance of the algorithm. (Please note that this Teacher Answer does not include placing the algorithm used by the computer to determine the answer on the screen.) These requirements are not handled by Blackboard and will have to be met by the Interactive • In Blackboard, if desired, instructor can clear student attempt or change the weighting of each question in the exercise. • Instructor makes notes offline because there is no notes column in the Gradebook

8. Instructor logs out and returns to original login page. Copyright Houghton Mifflin Company.

7

Defining and Achieving Goals for Informational Multimedia and Web Sites

Example of Defining the Goal Once you have answered all the questions listed in the previous section and have a clear understanding of business context, data, and users, you can define your informational project’s goals. Goals should be clearly defined, measurable, and limited in number. An example is probably the best way to understand how this process of goal definition works. Although the Prudential Verani Realty site will be discussed in more detail in Chapter 10, we will focus on the goal definition of this project here.

Prudential Verani Business Context Prudential Verani Realty is a large regional company and was willing to commit significant resources to make their web site the dominant real estate site in their market. Because the Verani family has lived and worked in the New Hampshire real estate market for three generations, even though they are a fairly large organization, their brand is that of a friendly, local company. One of their slogans is “We’re not just your realtor, we’re your neighbor.” They originally had multiple business goals for this Web site: 1. Better attract and serve customers (buyers) 2. Better attract and serve clients (sellers) 3. Sell properties more effectively 4. Help agents and staff make the most effective use of their time

Prudential Verani Data Prudential Verani Realty main document types were descriptions of real estate listings. These were in a database that was not searchable online. They also had information in print material about the company, the real estate selling and buying process, mortgages, and other related information. Last, there was quite a bit of real estate knowledge in the heads of their top agents and managers.

Prudential Verani Users The potential users of the Verani site were primarily English speaking and middle class New Englanders. Southern New Hampshire and Massachusetts is an area with lots of high-tech businesses, so many of the potential site visitors are sophisticated users of technology. Because buying a property is something most users do infrequently, their knowledge of current real estate practices is limited. The primary information need was to search for a property, but users also had significant secondary information needs about the real estate selling and buying process and related issues, such as radon, lead, and relocation assistance.

97

98

WRITING FOR MULTIMEDIA AND THE WEB

Prudential Verani Web Site Goals The Prudential Verani web site goals were defined by analyzing the information described above on business context, data, and users. The main goal decided for the new site was to make it an information resource for sellers and buyers of real estate. Much of the information that was currently in print was made accessible online. This included school reports; town reports; lists of home inspectors; and tools, such as mortgage calculators, interactive check lists, and e-mail updates of current properties. This information greatly increased traffic to the site. Users came to the site for real estate information and tools. This well-presented online information helped the agents deliver information to clients more effectively and demonstrated that Verani is a well-run, knowledgeable, and friendly company. This encouraged users to consider them when they were buying or selling a property. To support this primary business goal, all properties were easily searchable by users, according to multiple criteria, and new homes had their own section with substantial graphics and virtual tours. As much as possible, the information was presented in such a way that the user made a connection with the realtor. For example, after a site visitor used the mortgage calculator, he had the option of viewing Verani properties in that price range or of having the site connect him to an agent. The end result was a web site that achieved both the client’s and the user’s goals and made effective use of the existing data.

Techniques to Achieve Common Informational Goals The goals for the Prudential Verani site as described above are the specific goals for just one type of informational program and audience. But as mentioned in the beginning of this chapter, informational multimedia programs and web sites cover a wide range of information including general reference, info-tainment, education, interactive magazines and newspapers, sales and marketing, training, public relations, customer support, and much more. The good news for the writer trying to grasp the techniques used to create this wide array of informational programming is that most of these productions have one or more of the following general goals, each of which have their own techniques for execution: 1. To persuade 2. To entertain 3. To enable transactions 4. To create a sense of community 5. To inform 6. To teach

7

Defining and Achieving Goals for Informational Multimedia and Web Sites

Of the above goals, the two most fundamental to informational multimedia are the last two: to inform and to teach. (Informing users about real estate was one of the major goals of the Prudential Verani site.) Inform and teach are also the goals that are of the most concern for the writer and that are at the core of most other goals. Because of this, I will only briefly discuss goals 1 through 4 and devote the rest of the chapter to a detailed analysis of how to use interactive multimedia to achieve goals 5 and 6: to inform and to teach.

Goal #1: To Persuade Persuasion is a meta-goal that most informational media share. Advertising sells products. Nonfiction book writers try to persuade us to accept their view of the world. And marketing web sites want to convince us that their company is the best. Because this is such a universal goal, extensive material has already been written about persuasion technique so this topic will not be discussed in detail here. Aristotle was the first to point out the three time tested modes of persuasion to change someone’s heart and mind: • Ethical: If your viewer believes the speaker, they will believe the speech. (Ethos means speaker in Greek.) This is the reason that we have to listen to all those highly trained athletes tell us that they love sugary soft drinks. A second meaning of ethical is to align your message with the beliefs or ethics of your audience. Many Americans are concerned about the environment. Hence the growth of “green” advertisements that seek to show that a product is as beloved by the little forest creatures as is Snow White. • Logical: Logical simply means convincing us with facts. Show us why this is a better built toothbrush. • Emotional: Connect to our emotions. “I am going to be one sexy dude if I wear those blue jeans.” This is the approach most used by advertisers. If you are not familiar with basic persuasion theory, please refer to the article “Persuasion Theory and Online Advertising” in the “Online Ads: ZDU & Personal View” area of the Chapters section of this book’s CD-ROM.

Goal #2: To Entertain Entertainment as a goal will be discussed in more detail in the book’s Part III, but one point worth mentioning about entertaining the audience is that all programs must entertain or engage to some degree. Even if a program had the greatest information, it would have limited communication value if it was absolutely boring. A project can be viewed on a continuum, with a plain listing of information at one end, to a program that is pure entertainment at the other end. But most pieces do not exist at either end of this continuum; rather they fall somewhere along the line, embracing elements of both entertainment and information. Where a specific project sits on this continuum is an important consideration for the writer.

99

100

WRITING FOR MULTIMEDIA AND THE WEB

Goal #3: To Enable Transactions The goal “to enable transactions” is important on web sites that allow users to perform an activity, such as to buy a book from Amazon.com or to open a bank account online at BankofAmerica.com. In transactional sites such as these, the writer is still teaching the user information. In this case, how to perform the transaction. Many of the principles we will discuss concerning the goal “to teach” will apply to writing for transactional sites. Online transactions and activities do, however, put special demands on the writer who must teach the user about the product and how to perform the transaction in the most efficient way possible. If it takes the user too long to get the information they need to perform the transaction, they simply won’t do it. The actual designing of online applications that enable transactions is a topic worthy of detailed study but it is more the responsibility of the interactive architect and the technical architect than it is the job of the writer.

Goal #4: To Create a Sense of Community Many informational web sites try to create a sense of community among their users. For example, many major software companies have online user forums on their web sites, where users of the same software tools can discuss tips and tricks with the software and get to know each other. At MySpace.com, tens of millions of mostly young users share their ideas, photos, and music. These types of techniques can make a user feel as if they belong to group of like-minded individuals. Physical communities, such as towns or cities, can use similar techniques on their web sites to get their citizens involved and make them feel a part of their community. Although this is a valid goal and useful techniques, they do not really demand the skill of the professional writer except to perhaps suggest such techniques be used as part of the larger information architecture of the site. Much of the information actually written for such sites involves informing the user about their community, its values, and common assumptions.

Goal #5: To Inform A writer whose goal is to inform wants to provide users with access to a large body of information. This could be an online encyclopedia, a magazine site, or a comprehensive product information site, such as the web sites profiled in Chapters 10 and 11 of this book. The viewers need not and usually are not expected to access all of the information. Instead, they simply take what they need. The information is usually presented clearly and is structured into discreet units so users can find precise answers to their questions. The database is the most common tool used in a program whose main goal is to provide access to a large body of information. General reference works, such as Grolier’s Multimedia Encyclopedia and Britannica Online, and more focused references, such as Microsoft Cinemania, are based on databases. The multimedia

7

Defining and Achieving Goals for Informational Multimedia and Web Sites

database also has many uses in business. For example, real estate companies often have databases of homes for sale. Much of the Prudential Verani Realty web site profiled in Chapter 10 is based on their database of properties. The T. Rowe Price database of mutual fund information is the basis of many of the key features of their web site (Chapter 11).

Approaches to Inform Creating access to loosely-related body of material, such as a database. The major challenge with a large body of loosely related data is to organize the information in a way that allows users to easily access the information that they want. There are a number of ways to do this. Grouping by categories. The simplest way is to group by categories, that is, putting all the same types of items together. For example, Cinemania groups movie listings, biographies, awards, and media. The media category includes the subgroups of movie stills, portraits, dialogue, music, and film clips. A common developer’s technique for grouping by category is the card sort method. Users first break the content into separate small units or chunks. Write this information on cards (paper or electronic) then sort the cards into the appropriate categories or bins. Content categories are the most obvious grouping, but material can be organized according to numerous criteria, such as place, time, or theme. For example, Cinemania could have a feature that allows searching by place so a user could search for all the material that originated in New York. By time, a search could include all material before 1930. By theme, it could include all material involved with crime. Even more useful is to combine categories into what is called a complex query. Combine the movie criterion with the place criterion and get all the movies made in New York. Add the time criterion and get all the movies made in New York before 1930. Add the crime theme criterion and get all the movies made in New York before 1930 that deal with crime. The limitation of this category approach is that the categories that the writer comes up with may not be the ones that the user would come up with. The ideal program would help users create their own categories and customize the database to their use. Concept maps. Concept maps are a way to visualize categories in a database or any body of loosely related content according to a visual image or map. A very simple concept map is the tabbed navigation used on many web sites that essentially try to make the web site look like a file drawer with tabbed file folders that can be sorted through (see Figure 1-5 for an example). The museum and journey approach are other common images. The museum approach allows users to enter a virtual museum, enter exhibit rooms in their area of interest, and view exhibits about a particular subject. The journey allows users to travel along a certain sequence. A danger with concept maps is combining incompatible maps. An early draft of the program Sky High attempted to combine the temporal map of journeying along

101

102

WRITING FOR MULTIMEDIA AND THE WEB

a time line with the spatial map of the stars and planets. These two different types of maps did not work smoothly together and had to be abandoned. See the book’s CD-ROM Chapters section “Educational Multimedia Case Study: Sky High” for a full discussion of this incompatible maps issue. Customized and personalized information. Another excellent approach is to presort the database and only present the user the information that they need or want. To do this, the web site or other multimedia program has to first collect the user’s information preferences and/or needs. There are two basic ways this can be done: customization and personalization. Customization involves the user consciously inputting their preferences into the computer program. This is usually done by filling out a form or clicking answers on a questionnaire. Once the user’s preferences are noted, then just the information that interests them can be presented. For example, on the T. Rowe Price site (see Chapter 11), users can define what mutual funds they want data on. Next time they log onto the site, only those funds will be presented. Learning programs can also be customized by allowing the user to choose which sections they want to study and in what order. Personalization’s main difference from customization is that the user generally does not provide conscious input about their preferences. Instead, the computer program learns the user’s preferences by previous activity on the program or web site. Personalization is most commonly used in transactional web sites that are trying to match their products with the user. The best known example is the online retailer Amazon.com, which tracks the books and other items you bought in the past and recommends new purchases based on your previous activity. Amazon.com will also try to guess your preferences by associating you with other customers. If you bought books about angels, and several other customers who bought books about angels also bought books about devils, then Amazon.com might suggest some devil books to you on your next visit. Personalization can also be used on learning programs that can track the user’s progress through the program and adapt the type and difficulty of material it will present based on the user’s previous performance. One popular math program for primary school children will offer review exercises of earlier material if the student gets several problems wrong. Search. Search is one of the most useful tools when accessing a large body of loosely related or unrelated information. The World Wide Web itself fits that category, and tools such as Google and Yahoo! devise ever more sophisticated ways for the user to find exactly what they want. Any web site of any size usually has a search tool as part of it. Designing the search is not usually the writer’s job, but a few things a writer can recommend are to make sure search results are in a usable form, design a search around the terms users commonly use, notify users when multiple search options exist and provide controlled vocabulary search templates for common

7

Defining and Achieving Goals for Informational Multimedia and Web Sites

searches’ for example, to find information on “writing computer games,” recommend that the searcher use “game designer,” “interactive writing,” “multimedia writing.” Guides and agents. One of the most promising approaches for making a database accessible is by creating guides or agents to lead users through the material. These guides could be software creations that are part of the program. For example, The Mayo Clinic Family Health Book CD-ROM includes an on-screen character who introduces material and helps to guide users in the direction that they want. This type of a guide is limited by the material that was written for the screen character to present, but there has been much research into how to create truly intelligent agents who could be told by the user what information he or she needed, and then the user could go get a cup of coffee while the helper searched the world and delivered the information to the user’s desktop computer. From repeated interactions, such an agent could continue to refine their knowledge of the user’s preferences. A common use of software agents on the web are those used on job sites, such as Monster.com and Dice.com. A job seeker enters the criteria for the type of job she is interested in on the site. The site will then e-mail the user when jobs that match her criteria appear in their database.

Avoiding Cognitive Overload by Controlling Complexity Guides, agents, and customized information are some ways to keep users who are browsing a vast database or several databases from getting confused by the diversity and complexity of the unsequenced material they encounter, but cognitive overload is still a problem. Browsing a database is quite a different experience from reading a textbook, where the information is carefully explained and structured to build understanding of an overall topic gradually. In a database or any unstructured collection of material included the web, just the opposite can occur. Topics of varying degrees of difficulty can be encountered and only partially understood by the student. For example, search engines will often drop you into a middle page of a web site and you may have to backtrack to the home page to get your bearings. “A failure to control this complexity can lead to cognitive overload and failure to learn” (Ambron and Hooper, 127). Cognitive load can be reduced in a number of ways, for example: • Reduce the number of choices available on the screen at any one time: “seven plus or minus two” is optimal (Ambron and Hooper, 128). • Reduce the level of difficulty available to the student at any different time. Students must have viewed crucial introductory material before they are allowed to access advanced concepts. • Build a note-taking function into the program so students can track their progress and note partially understood concepts. (Note-taking can include text and pictures.)

103

104

WRITING FOR MULTIMEDIA AND THE WEB

• Give students the opportunity to “mark” a section of the program that they can return to later. • Build in a clear orientation so students can understand where they are and that the various pieces of information are connected. Navigation maps and consistent interface design help with this.

Goal #6: To Teach A database provides access to a wide body of information. Exactly what information the user accesses and learns is up to the individual. In a teaching program, however, the information may be more narrowly defined and the writer has a clearer goal of what information he or she wants the user to take away from the program. The Integrated Media Group’s Video Producer is a good example of a teaching program at the college level. Its goal is to teach the basics of video production. It is carefully structured to do this with mini-lectures, examples, reviews, and quizzes. Fidelity Investments’ training program for retirement counselors is similarly focused on teaching a skill. Houghton Mifflin’s Geology Explorer web site teaches key concepts about geology. Instructional theory is a complicated subject that must be studied in depth if one is to become an instructional designer, but it is important to be at least familiar with some of the basic concepts of instructional design before writing educational or training programs.

Interactive Multimedia Instruction as Interpersonal Instruction Some experts in interactive instruction claim that effective interactive instruction should include the characteristics of interpersonal instruction: immediacy of response, nonsequential access to information, adaptability, feedback, options, bidirectional communication, and interruptibility (Schwier and Misanchuk, 175–176). Immediacy of response. In practical terms, this means that an action the learner takes should get a response immediately. It is psychologically important for the learner to feel connected. For example, when a student clicks on an answer in a quiz, he or she should get some sort of response even if it is just a sound. Similarly, if there is going to be a wait after a student clicks an icon to access a large file, something should be happening on the screen—preferably something more interesting and tied to the program than an hourglass or a watch. Wait-state and other responses should be in tune with the program. Rodney’s Wonder Window, a humorous children’s educational CD-ROM, has funny wait-state text messages, such as “Please wait, Rodney is putting on clean underwear,” and visual images, such as the heads on the character icons spinning around or their hair curling. Feedback. Immediacy of response does not mean complex feedback to every action. Deciding what kind of feedback to give and when to give it to the learner is a difficult question. There is no consensus on this subject. There is even disagreement on simple types of feedback. For example, some writers provide only a minimal

7

Defining and Achieving Goals for Informational Multimedia and Web Sites

response, such as “Correct,” to correctly answered test questions, and reserve complex feedback for questions answered incorrectly. Others include detailed feedback for correct answers as well, to reinforce the message and to guard against students’ guessing the right answers and not learning the material. Bidirectional Communication. Clearly related to immediacy of response and feedback is bidirectional communication and interruptibility. A well-designed learning program gives the user ample opportunity to communicate with the program as well as for the program to communicate with the user. This includes letting the learner communicate through various methods, including typing text, manipulating images, and sound. This is essential if maximum learning is going to happen for the maximum number of students, because studies have proved that we all learn in different ways—some by watching, others by doing, and yet others by analyzing. Thus it is important to present the message in a variety of approaches. Interruptibility. Students should be able to interrupt the program at any point and go in the direction that is useful for them. They should, for example, be able to return easily to earlier material for review. If they feel comfortable with the material, they should be able to jump ahead to a more advanced part of the program. Programs that do not allow this movement can be frustrating. Video Producer, an otherwise excellent education program on video production, requires that students complete a series of quizzes on video production techniques before they are allowed to create a video in the program’s studio. This defeats the purpose of interactive multimedia and incorporates the drawback of linear media and classroom instruction where all levels of students must progress through the material in the same way. Inclusion of standard navigation tools can also improve interruptibility. Many programs respond to standard quit commands, such as “Command-Q” on the Macintosh. When users quit, they should be able to leave a bookmark at the spot they left and return to it when they start again without having to start at the beginning. Help. Excellent help programs are now included in basic productivity programs, such as word processors, but a surprising number of educational programs or complex web sites do not provide a constant helping hand. Help features are particularly important with web applications, such as opening a bank account online. As in the case of wait-state messages, a writer who can make the access to help more interesting and in tune with the particular program than a help button will contribute to the program’s effectiveness. It is important to build the help function into the interface design from the beginning as well as into the writer’s schedule. Writing help pages can be extremely time-consuming. Personalizing instruction: nonsequential access to information, adaptability, and options. Multimedia’s ability to access information in the order that the user finds most useful allows a writer to personalize or customize a program and make it adaptable to the user. Many programs allow users to customize the program at the beginning by filling out a user profile based on such criteria as educational level, job, and familiarity with the subject. Once entered into the computer, this profile

105

106

WRITING FOR MULTIMEDIA AND THE WEB

might cause the program to take the user down a completely different path, or just alter the text on certain screens, or offer different product suggestions. Personalization can also occur without the user’s conscious involvement. Transactional web sites, such as Amazon.com, track what products you have purchased and use this activity to determine what products to show you in the future. Whatever the approach, personalizing the program continues beyond the beginning by tracking the user’s progress and adapting to his or her needs. For example, a learner who consistently has difficulties in a certain area might be directed to special remedial sections geared to that particular problem. The program might also alter the way it presents the instructional material in the rest of the lesson. If the student learned best from the video segments, the video might be increased and text minimized. A simple way to customize a multimedia piece is to allow students to choose the level of difficulty and thus advance at their own rate. Another adaptation is the degree of control allowed the student over the learning material. Some studies have suggested that weaker students can benefit from more structure (Schwier and Misanchuk, 186). The way subject matter is approached also customizes a program. Someone learning marketing should be able to choose various contexts designed into the program in which to practice their new skills, such as marketing a virtual baseball team, video store, or rock group.

Multimedia Games as Teaching Tools The above discussion deals with all types of interactive media, but a specialized type of multimedia, the computer game, is also getting greater respect among educators. This is because at a closer look, it becomes clear that computer games exhibit many sound instructional design principles. The instructional principles embodied in games are outlined in an insightful article by Professors Douglas Gentile and J. Ronald Gentile. • Most games have multiple levels of difficulty, allowing a user to first master easier tasks and information and then move on to more difficult tasks. • Games usually offer multiple ways to solve the same problem, this allows students to better understand the solution and to transfer skills learned to a variety of settings. • Even when students have learned a certain skill, the nature of the game experience makes them happy to continue to exercise that skill repeatedly in the game until it is absolutely mastered. • The excitement generated by character identification, jeopardy, and the challenge and reward structure of games can make students almost addicted

7

Defining and Achieving Goals for Informational Multimedia and Web Sites

to the experience and thus intently focused on the learning process built into a game. • Students, who have been unsuccessful with traditional forms of instruction because of previous academic record or socioeconomic background can often do well with games. (Gentile) Studies, such as the one quoted above, are pointing to new ways to use multimedia as an instructional tool and greatly increasing their legitimacy in the classroom.

Conclusion By clearly defining your user and goals, you can then use the most effective techniques to achieve those goals. Likewise, poorly defined or contradictory goals are impossible to execute. The time spent in the early planning stages of a project will radically improve your chances of success.

References Ambron, Sueann, and Kristina Hooper, eds. Learning with Interactive Multimedia: Developing and Using Multimedia Tools in Education. Redmond, WA: Microsoft Press, 1990. Gentile, D.A., and Gentile, J.R. “Violent video games as exemplary teachers.” Paper presented at the Biennial Meeting of the Society for Research in Child Development, 2005, Atlanta, GA. http://www.mediafamily.org/research/Exemplary_Teachers_SRCD.pdf Reddy, M. “The Conduit Metaphor: A Case of Frame Conflict in Our Language about Language.” In Metaphor and Thought, Andrew Ortony, ed. Cambridge: Cambridge University Press, 1979. Schwier, Richard A., and Earl R. Misanchuk. Interactive Multimedia Instruction. Englewood Cliffs, NJ: Educational Technology, 1993.

107

This Page Intentionally Left Blank

8

Informational Multimedia and Web Architecture

Chapter Overview Multimedia programs and web sites have a wide variety of possible structures and navigation. Rarely do these approaches exist in a pure form. Most projects have some combination. A key question the writer must ask when developing a piece is which approach will best achieve the communication goals. As discussed in Chapter 3, information architecture is often planned with flowcharts and wireframes. Every possible interactive architecture is not listed here, merely those that are most commonly used by the writer and designer of nonnarrative, informational multimedia.

Linear Structure Defined: Linear structure has no linking or interactivity. Linear structure can be compared to a desert highway with no crossroads. It is the structure of most motion pictures and television programs. Use: Linear structure makes it possible to integrate into multimedia some of the standard linear informational structures, such as the problem-solution structure and the dialectical structure. The problem-solution structure is used by setting up a problem linearly and then asking the user to solve it interactively. Dialectical structure, a favorite of the TV news magazines, sets up a dialogue between two different points of view. First we hear from the Army general who wants to spend billions on a bomber, then we hear from the peace activist who doesn’t want to spend any more money on new weapons. This A/B, love/hate pattern is repeated until a conclusion emerges or we can draw our own conclusion. A simpler use of linear

109

110

WRITING FOR MULTIMEDIA AND THE WEB

structure in interactive media is the presentation of key information that should not be interrupted. This is often used for introductory material. For example, The New England Economic Adventure (Chapter 24) introduces each new section with a linear video on the historical background of the program.

Linear Structure with Scene or Section Branching Defined: Linear structure with scene or section branching is basically a linear structure with a few limited choices as to how certain scenes will play out. This structure can be compared to the desert highway that has a few detours. (See Figure 8-1.) The detours, however, always return the traveler to the same highway. Use: This is sometimes used in training pieces that are explaining a step-by-step concept by following a linear structure. There is often an option of detouring from the step-by-step instruction for a review of the concept or for additional material, but after the detour, the user is returned to the page that he or she had left. The Work-plus.com web site does this in the section of the site where it explains to the user how to use the company’s product. The basic step-by-step instruction is brief, but users have the option to link to the help pages in each section for additional background material. Sometimes a program will actually force the user to link to different sections. In the marketing tutorial charted in Figure 8-1, the student who answers information incorrectly on radio or television advertising is

Figure 8-1 Linear structure with scene or section branching for part of a marketing tutorial.

8

Informational Multimedia and Web Architecture

sent back to the radio and television content to review before proceeding forward in the tutorial.

Hierarchical Branching Defined: In hierarchical branching, information is organized according to categories and subcategories, so users can click an information category and then a subcategory to find the information that they want. This approach could be compared to going to a mall and searching for an Italian cookbook. At the first fork in the mall, you can choose left for the department store, straight ahead for the bookshop, or right for the electronic shop. You want a cookbook, so you choose straight and go to the bookshop. Now you must choose between nonfiction, fiction, and magazines. You choose nonfiction, which includes many choices, ranging from biography to cookbooks to zoology. You choose cookbooks. The cookbook section has French cookbooks, Indian cookbooks, and Italian cookbooks. You choose Italian and, phew, you are finally done. Use: Hierarchical branching in a multimedia program works exactly this way with a hierarchy of ever-narrowing choices, except your finger does the clicking instead of your heels. See Figure 8-2 for a diagram of hierarchical structure for a program about shipbuilding. The user can click menus to drill down to the level that has the information that they want. Although this is one of the most popular structures on the web, it has several potential pitfalls. One is branching explosion, which means creating too many user options. Too many options are created because increasing the number of decision points or the number of choices at each decision point means that the total number of possible branches increases exponentially. In Figure 8-2, the options quickly jump from three, to twelve, and, by adding one more level, to forty-eight. The amount of material quickly expands to a volume difficult for a writer to create and prohibitive to produce.

Figure 8-2 Hierarchical structure for a web site on shipbuilding.

111

112

WRITING FOR MULTIMEDIA AND THE WEB

Another danger with hierarchical branching is that if there are too many levels of information, the user can get lost and find it difficult to make connections with material on the same level, such as forty-eight subcategories on level four of a shipbuilding program. There is also a practical limitation to the number of choices at any one branching level. Some studies say that five to seven choices is the most people can easily comprehend. Branching explosion is kept under control by limiting categories at a level, segmenting the audience at the top of the hierarchy, and by allowing alternate access to information on the site, such as search and sitemaps. See Figure 8-3 for an example of how T. Rowe Price segments their audience at the top level by key users, as opposed to using subject categories, such as mutual funds, that might apply to multiple user groups. This allows each major section to be less dense with information and categories because it focuses on the needs of just one group. In general, most effective web sites do not go very deep—not more than three or four subcategories. Effectively done, hierarchical branching can be a useful and economical way to present information, which is why it is the dominant structure on most web sites. This does not necessarily mean it is the best structure for all types of information. Other alternatives are presented in this chapter.

Figure 8-3 Segmenting audience to reduce branching explosion. Home page from the T. Rowe Price web site. Copyright T. Rowe Price Associates, Inc.

8

Informational Multimedia and Web Architecture

Single-Level Linking Defined: There is no hierarchy in this approach. Usually the user is presented with a problem and given a number of possible resources for solving the problem that can be accessed in any order. As opposed to hierarchical branching, which looks like a well-organized mall, single-level branching is like wandering into a chaotic flea market. At a flea market you can go any number of places and talk to anyone in any order. Use: In the interactive documentary A Right to Die: The Case of Dax Cowart, Dax Cowart has a serious illness. He wants to refuse treatment and die. His doctors and others feel differently. The user of this program can access video interviews, text, and other material about this case in order to answer the question, does Cowart have the right to end his life? (The irony of this piece is that Dax was not allowed to die; the therapy was successful, and he went on to live a happy life.) Although single-level linking structure is useful, it is fairly rare on a complete program because it must be limited to a focused topic with limited options. If there are too many options, then a hierarchical structure or another approach has to be used to organize the material. Single-level linking is more common in small parts of programs. An area of the Geology Explorer web site examines the formation of a cross-section of land. Within each part of the program, students have the option of looking at screens dealing with a description of a layer, an animation showing the process of layer formation, an explanation of the geologic event that caused the layer to be formed, or a quiz. Because it is useful for the student to compare all these elements, they have the option of accessing and reviewing this material in the order that makes most sense to them.

Parallel Path or Multipath Architecture Defined: This approach is borrowed from interactive narrative where one of the main structures is parallel path stories. See Figure 18-4 in the middle of Chapter 18. In a parallel paths story, the writer lays out three or more possible versions of the same basic story. Depending on the players’ choices as they move through the game, they move back and forth through the different story versions. This will be explained in more detail in the narrative section of the book. When applied to an informational program, this approach creates three or more distinct paths the user can travel through a specific body of information. In the physical world this could be compared to a traveler having three or more possible distinct routes that would lead towards the same destination or slightly different destinations.

113

114

WRITING FOR MULTIMEDIA AND THE WEB

Use: One of the most effective uses of this approach is with online transactions or other activities where the user is trying to accomplish a specific goal. One example would be users who wanted to open a bank account online at a bank web site. The challenge for the writer is that these users are a heterogeneous group. Some are web-savvy, others are newbies. Some know a lot about banking products, others need a lot of explanation. Some want certain accounts, others want totally different or less accounts. To accommodate this variety of users, the writer can prepare multiple information paths through the online account opening application. One of the ways this can be achieved is through good interface design, such as putting the essential information and activities on the left side of the page and putting the secondary product information on the right side of page, perhaps in a box to indicate that it is secondary. Lastly, context sensitive help could be available from a drop down menu on every page. Another approach would be to allow users to customize the transaction by choosing their knowledge and skill level at the beginning of the process. With designs, such as these, the web-savvy user who knows banking products can move quickly down one path performing only the essential activities. The web-savvy user who needs product information could take a slower path, moving first to the product information and then to the essential activities. The user most in need of help could move through the help feature, to the product information, and finally the essential transactional activities. This approach is different from a hierarchical structure because the user can easily move from one information path to the other and does not have to dig up or down through multiple subcategories.

Dynamically-Generated Database Driven Web Sites Defined: Strictly speaking this is not a separate structure, but a technology by which web pages are assembled for the user. Many sites, particularly transactional, content-managed, and personalized sites, do not have static pages of information on their servers that are presented to the user. Instead they have a more or less blank framework page or template for different sections of the site. The actual content that fills that framework is drawn in small chunks from a database and then the pages are dynamically assembled to be viewed in your browser. What this means for writers is that they have to be particularly skilled in the technique we discussed earlier of being able to write small units of information that can stand alone, but also work in conjunction with other information if need be. In terms of actual structure, a dynamically generated web site will still appear to the user to be following one of the basic structures above. For example, if you drill down the category menus on Amazon.com, the structure is hierarchical.

8

115

Informational Multimedia and Web Architecture

Use. Most sophisticated transactional sites, sites that sell something or perform tasks, are dynamically generated from databases. For example, the amazon.com home page template is set up like the table below. Amazon.com Header and Global Navigation: Your Store, Your Account, Cart, etc. Long Menu of Different Product Categories

Wide Center Content Area Listing Products and Special Offers Separated by Headers

Small Block Advertising Featured Product Small Block Advertising Featured Product More Small Blocks

Bottom Links: Customer, Support, International Sites, etc.

What goes into each section of the template will change depending on your shopping habits and if you have been to Amazon.com before. If you have ordered toys before, the advertisements and products offered will show ads and links for toys. If you have never bought products before, then different, more general ads will be shown. This technique is called personalization. The web site is adjusted to you by the server software. These individual ads and bits of product information are in chunks on the server, and they are delivered to the template and displayed on your browser. As mentioned above, the key point of this discussion for the writer is that many web pages are not “pages” at all, but rather snippets of information assembled on the fly to display in your browser as if they were a single page. Many if not most sophisticated web sites are closer to client-server applications than a collection of pages. (A client-server application involves client software on the user’s computer, that requests data from the server on the company’s computer.)

Passive Versus Active Information Delivery: Getting Beyond Click-and-Read with Simulations, Worlds, and Role Playing Passive Information Delivery Many interactive informational writers use the structures previously discussed in this chapter and deliver their content in a way that requires no user action beyond clickand-read. For example, users on a web site might click a series of menu items and read the linked content. This is a functional way to access information, but it keeps viewers at a distance by not making them use or think about the information. For example, Figure 8-2, in the discussion of hierarchical branching, shows the structure of a click-and-read approach to a project about shipbuilding. In this case, the writer

116

WRITING FOR MULTIMEDIA AND THE WEB

simply organized the information according to categories and subcategories, so users can click an information category and view material about it. This information is presented in a clear manner, but it is not very engaging.

Active Information Delivery Active or dynamic information delivery demands more of the user than simply clickand-read. For example, the same shipbuilding program charted in Figure 8-2 could easily be developed as a program that involves the user interactively. Figure 8-4 charts the structure of an actual program on this subject called The Nauticus Shipbuilding Company. In this program, the user plays the role of a shipbuilder. The user is first asked to choose between three different types of ships that need to be built: a transatlantic cargo ship, a cross-channel ferry, and an oceanographic research vessel. The user is then asked to assemble one of these ships by choosing from a variety of components for the hull, propulsion, and superstructure. At the end of the program, the completed ship is evaluated. As it leaves the dock, it floats or it sinks. This approach teaches the same information as the click-and-read hierarchical approach illustrated in Figure 8-2, but it does so in a much more engaging fashion. The answer to getting beyond click-and-read is to involve the user in some way. This is, after all, interactive multimedia.

Using Click-and-Read Active information delivery is not appropriate for every type of project. Passive information delivery is actually much more common. For example if you want to present product information on a simple product or answers to customer support questions, click-and-read is perfectly fine. It is also generally less expensive than active information programs. But if your goal is to engage the user to fully experience and learn your topic, then active delivery should be considered.

Approaches to Getting Beyond Click-and-Read The following approaches—simulations, worlds structure, and role-playing—are only a few of the many approaches and techniques that can fully engage the user and present information actively. The correct approach should emerge from understanding the information to be presented and the intended audience.

Simulation Defined: In a simulation, an experience or activity is recreated virtually on screen. The activity can be driving a car, flying a plane, snowboarding (Chapter 21), or building an entire city. The structure is dictated by the activity. Use 1, Problem Solver: Educational simulations that have extensive need of writers are usually more complex than simply flying a plane or driving a car. For educational programs, the simulations usually involve a problem for the user to solve or a task to accomplish. For example, the popular Sim City programs give the user the power to build a city by altering the landscape, adding parks, schools, railroads, power plants,

8

Informational Multimedia and Web Architecture

Figure 8-4 Structure of active information delivery—The Nauticus Shipbuilding Company. Script sample copyright Chedd-Angier Production Company.

117

118

WRITING FOR MULTIMEDIA AND THE WEB

and other components, but it must be done within budget and the user must cope with disasters, such as flood, fire, and alien invasion. The Nauticus Shipbuilding Company, which was discussed earlier in this chapter and illustrated in Figure 8-4, is another example of a problem solver simulation. In this case the task is to build a ship. Use 2, Gamer: In this case the user takes on the role of a player in a game. Not all games are simulations. For example, multimedia versions of crossword and word search are not. But if the player actively takes on the role of a character in the game, they generally are. This is somewhat similar to the problem-solver approach, except that it usually operates with more clearly defined game rules. For example Houghton Mifflin’s World Languages CD-ROMs have a “Words in Space” game (Figure 8-5). The player takes on the role of a defender of the home planet. At the beginning of the game, it is announced that the planet is being attacked by spaceships from a planet whose name is a certain category of words, such as in Figure 8-5, “Numbers Greater Than Fifty.” All the spaceships are labeled with words. Some have names of numbers greater than fifty in the foreign language. Others are friendly ships labeled with lower number words. The player has to translate the names of the

Figure 8-5 “Words in Space” game in the CD-ROM for Mais Oui! Copyright Houghton Mifflin Company.

8

119

Informational Multimedia and Web Architecture

ships and shoot them. If the player shoots the wrong ship, the player is shot by the enemy ships. Three enemy hits on the player, and it is game over and time to go back and study those vocabulary lists. Use 3, Explorer, Worlds Structure: In this approach the user takes on the role of an explorer or traveler who explores an entire world of information. There is no set problem to be solved or sequence of actions to be accomplished as in the previous uses (gamer and problem solver). The worlds structure organizes the options available to the viewer not in a linear fashion or in a hierarchy but in a graphic spatial representation. This approach is most useful if there is a large body of information that can be incorporated in a location. It does not have to be a physical location that we normally visit. The museum interactive piece Into the Cell allows viewers to take a fantastic voyage into a living cell. A writer approaches a project like this by first deciding on a list of locations in the virtual world that he or she is creating, then determining what will happen in each location, and finally how the user will be able to discover these events. A flowchart is not very useful here. More useful is a graphical illustration of the world, a list of the locations, and descriptions of the events that will occur in each location. This is explained further in the following section.

Writing a Simulation The writers Brian Sawyer and John Vourlis suggest that the best way to write a simulation is to start with the “most basic categories: ‘Characters’ and ‘Locations,’ then break these down into sub-categories, and so on . . . After laying out the categories, the next step is to fill in the details of each object: 1) its attributes and 2) its rules of behavior” (101). For example, in The Nauticus Shipbuilding Company, the attributes of the air cushion hull are that it is capable of high speeds, needs flat-water conditions, and has a flat deck that is easy to load. Its behavior, if chosen for the oceanographic research vessel, is that it will sink because it can’t withstand the rough seas off New England.

Attributes and Behavior of the Hulls in The Nauticus Shipbuilding Company Simulation ATTRIBUTES

BEHAVIOR OF HULLS IF USED FOR OCEANOGRAPHIC RESEARCH VESSEL

Air Cushion:

Nonfunctional

• • • •

• Can’t withstand rough seas

Flat hull rides on cushion of air Capable of high speeds Needs flat water conditions Flat, rectangular deck easy to load

120

WRITING FOR MULTIMEDIA AND THE WEB

ATTRIBUTES

BEHAVIOR OF HULLS IF USED FOR OCEANOGRAPHIC RESEARCH VESSEL

Planing Hull:

Functional

• V-shaped hull capable of high speeds • Performs best in flat water conditions • High stress levels on hull

• Capable of high speeds

Displacement Hull:

Functional

• Deep, rounded hull very stable in all conditions • Very large cargo capacity • Stable platform for large propulsion systems • Needs very large propulsion system

• Stable in rough seas

SWATH (Small Waterplane Area Twin Hull):

Optimal

• Two submerged hulls very stable • Flat deck provides good work area

• Very stable in rough seas • Plenty of protected work and living space • Shallower draft provides access to shore areas

• Not very stable in rough seas • Limited work and living space

• Plenty of work and living space • Deep draft limits access to shore areas

Copyright Chedd-Angier Production.

Other Approaches to Active Information Delivery Simulations, role-playing, and worlds structures are among the more popular techniques for active information delivery, but there are other options, ultimately only limited by your imagination. • Reporter. A number of educational programs, including Sky High, allow users to report on their multimedia experience by using a virtual camera and a word processor to write a journal. This is probably not a true simulation because although you are playing a role, your actions don’t affect what happens in the program. But being a reporter is at least more engaging than a simple click-and-read approach.

8

Informational Multimedia and Web Architecture

• Tools. Allowing the user to work with the information by giving them functioning tools in your program is another way to get users engaged. For example, the Prudential Verani Realty web site profiled in Chapters 10 has dynamic information elements such as calculators, rent versus buy estimators, and interactive checklists. • Virtual Advisors. Virtual advisors are online forms that ask the user a series of questions. After the user has filled out the form, the online advisor suggests the proper product to buy or action to take. This is commonly used for more complex products, such as opening a bank account online. Many major banks have some sort of online advisor on their web sites to help users choose the type of account that is right for them.

Active Information Delivery as Part of Larger Passive Information Delivery Program In the programs described above, Sim City and The Nauticus Shipbuilding Company, the complete programs are simulations. It is also perfectly good technique to add a simulation or other type of active information delivery to an otherwise clickand-read program. For example, in Houghton Mifflin’s Geology Explorer web site, the users are asked to chart the location and magnitude of an earthquake using interactive animation tools. Another exercise in the same program allows users to date the geologic layers of a cross-section of land.

Benefits of Active Information Delivery: Learning to Learn An additional benefit of an active information delivery, particularly a simulation, is that in addition to teaching a specific skill or subject matter, this type of multimedia is also very successful at teaching students how to learn. A generation ago, the standard structure for most elementary school classrooms was a teacher standing in front of a sea of students at desks and delivering knowledge from his or her information-packed brain to those of the empty-headed students. A visitor to most classrooms today would find a different structure. The sea of desks is gone. Students are grouped in fours or fives around smaller tables and are engaged in activities. The teacher moves about the room, facilitating their learning. This different structure reflects current learning theory, which rejects the concept of empty heads waiting to be filled and replaces it with the goal of teaching students how to learn. Some theorists have used the metaphor of the toolmaker—that is, teaching students how to create the learning tools that will serve them throughout life (Reddy, 284–324). A big reason for this major change is the rapid explosion in knowledge. A hundred years ago, the body of knowledge was relatively stable. Individuals could

121

122

WRITING FOR MULTIMEDIA AND THE WEB

learn a trade and successfully perform that trade until retirement. Today, however, information is expanding so rapidly that education has become a lifelong pursuit. Students have no assurance that the information they are learning will be valid in a few years or even that the careers they are training for will exist after graduation. To thrive in this type of a world, students must be excellent learners and have a full bag of learning tools to take with them for the rest of their lives.

Teaching Toolmakers with Interactivity: Playing as If One of the best ways to develop these tools—to learn how to learn—is through hands-on learning, an opportunity to interact with the subject under study. One way to do this is through interactive multimedia programs. However, as Edith Ackerman of the MIT Media Lab points out, “we should not assume that ‘hands-on’ activities alone will make for a meaningful experience of constructive learning . . . . Any activity remains essentially undirected and noncontrollable, blind, and meaningless, if it is just acted out without any evaluation of its consequences” (Ackerman 1–3). Approaches to evaluating these consequences include soliciting reliable feedback and giving the learner the ability to reconstruct the experience. There should be some way to reconstruct and replay the learning experience in a safe environment, because the major way learners incorporate new material is not through the experience itself but through the ability to recreate the material in some fashion, thus making it their own. In short, “interactivity is important, not because it allows the direct manipulation of real objects, but because it fosters the construction of models or artifacts, in which an intriguing idea (thought and feeling) can be run or played out ‘for good’ in a make-believe world” (Ackerman, 6). In an interactive multimedia program, this construction of models can range from trying out different marketing techniques in a practice case study in an e-learning course to building an entire city in one of the SimCity games. Such game elements allow the students to explore “what” will happen “if” they try various options. And as Ackerman points out, “Scientific inquiry, as much as other forms of cognitive investigation, indeed requires playing ‘what if’” (Ackerman, 6).

Conclusion Whether you use active or passive information delivery, it is important to pick the type of structure and approach to your material that will best fulfill your goals as discussed in the previous chapter. The user’s needs, business context, and type of data will all have a major effect on your final decision. For example, creating a simulation will generally be more expensive than a click-and-read approach and may not be appropriate for a low budget web site project. In general, when working on the World Wide Web, you need to also keep in mind that, unlike a CD-ROM or a museum kiosk, the web is an open system.

8

Informational Multimedia and Web Architecture

On the World Wide Web and other networks it is possible to link from words or images on one site to related information on other sites all over the world. The web allows the possibility of linking all of the structures described in this chapter in one unlimited search for information. A user might start at one site that is hierarchical, link to another site with a linear video, and yet another that involves her in a simulation. A graph of this would look like a mad combination of all of the examples in the chapter. With multisite branching such as this, the individual creator has the resources of the world to present his or her information, but the writer gives up much of the control in so doing. So if you add links from your web site to other sites, be aware of how the other sites are structured and whether this will impact the experience for your users. If the structure on the external site you are linking to is radically different, you may need to add an explanation before users take the jump to the other site. This chapter concludes the introductory informational multimedia material. Beginning with the next chapter, major informational multimedia programs and web sites will be examined in depth to better understand how the principles we have been exploring so far are applied on actual projects.

References Ackermann, Edith. Tools for Constructive Learning: Rethinking Interactivity. Cambridge, MA: MIT Media Lab, October 1993. Sawyer, Brian, and John Vourlis. “Screenwriting Structures for New Media.” Creative Screenwriting 2 (Summer 1995): 95–103.

123

This Page Intentionally Left Blank

9

Introduction to the Informational Multimedia and Web Site Case Studies

Description of Case Studies The case studies in the chapters that follow demonstrate how various goals were achieved and challenges were met in specific multimedia programs and web sites: • Prudential Verani Realty web site: A detailed profile of the writing of this site, from proposal to documentation. Prudential Verani is one of the largest realtors in New England. • T. Rowe Price web site: The investment firm T. Rowe Price offers interactive information for new and seasoned investors. This chapter also includes a description of the different types of commercial web sites. • Britannica.com and The Harlem Renaissance: An analysis of web site portals and writing the online feature story. • E-Learning: Interactive Math and Statistics Lessons: Writing multimedia math and statistics lessons for the college audience. • The Nauticus Shipbuilding Company: A museum kiosk shipbuilding simulation located at Nauticus, National Maritime Center, Norfolk, Virginia. • Clinical Support Staff Interactive Certification Program: Vital Signs: An interactive multimedia training program for medical assistants at a health maintenance organization (HMO) on the process of taking vital signs—temperature, pulse, respiration, and blood pressure. Case Studies Note: Informational multimedia case studies from previous edition chapters, Sky High and the ZDU Online Ad Campaign are now located in the Chapters section of the book’s CD-ROM.

125

126

WRITING FOR MULTIMEDIA AND THE WEB

Approach to Case Studies An understanding of how the writers of these programs dealt with informational multimedia issues will give you insight into how to deal with similar issues when they arise in your work. Each case study answers the following questions: • Program Description and Background. Is the program a typical example of its genre, or is it unusual? Who commissioned, developed, and wrote the program? What was the preproduction process? • Goals. What were the writers and designers’ goals in creating this project? What information or experience were they trying to communicate? • Challenges. Which goals were particularly difficult to achieve? What approaches were successful in achieving these goals and which were discarded? • Response to the Project. Did the program achieve its goals? Was it a critical and/or commercial success? The case studies are documented with script examples, screen shots, and flowcharts. Additional script samples and other material are available for many of the programs on the Writing for Multimedia and the Web CD-ROM. Note: Because all the case studies follow the above structure, the Chapter Overview section that has been appearing at the beginning of previous chapters will not appear on the case studies. It will be replaced by a descriptive summary of each case.

10

Case Study—Writing a Marketing Web Site from Proposal to Documentation: Prudential Verani Realty

Summary

Name of Production: Prudential Verani Realty Web Site, http://www.pruverani.com Writer: Timothy Garrand Developers: InterWrite Audience: Commercial and Residential Real Estate Customers, General Public Medium: World Wide Web Location: Where web is viewed Subject: Real Estate Goals: Inform, teach Architecture: Hierarchical branching, dynamic database generated The text samples, flowcharts, and illustrations used in this chapter are copyright Prudential Verani Realty.

Scope of This Chapter This chapter studies all the different types of writing that can be required to develop a commercial web site, with an explanation of the goals of each document and some tips for achieving those goals. Although a writer’s efforts are sometimes limited to

127

128

WRITING FOR MULTIMEDIA AND THE WEB

the content of a site, the writer may be also called upon to write the initial proposals, planning documents, maintenance instructions, and online marketing writing, such as meta tags. The writer playing these roles needs to understand organizational tools, such as flowcharting software; how writing affects the site’s online marketing efforts; and the capabilities of the latest web technology to communicate information effectively. This chapter is different from the later case studies that will focus primarily on writing the project’s content.

Program Description and Background Program Description The Prudential Verani Realty web site is a marketing and content web site designed for Prudential Verani Realty, one of the largest real estate companies in New England. The goals of the site are to: • • • • • •

Attract buyers of commercial and residential real estate Attract real estate sellers to list their properties with Prudential Verani Attract customers for other Verani services, such as relocation and mortgages Present a positive image for the Prudential Verani company Recruit new agents to join the company Present useful real estate information

The site includes extensive searchable information about Verani properties, descriptions of Verani services, general real estate information, and numerous interactive tools such as calculators, checklists, maps, and e-mail updates. The site consists of hundreds of HTML pages, many Active Server Pages and an extensive database of real estate properties. (Active Server Pages, or ASP, is a programming language that can be used to make web pages more interactive and functional.)

Production Background Prudential Verani Realty approached my company, InterWrite, to develop the second generation of their web site. InterWrite is an interactive media developer that has been creating web sites and multimedia in the greater Boston area since 1996. The first, limited version of the Prudential Verani site had been done some years earlier and had to be completely redone with all new information architecture, graphics, content, and programming. None of the original site material was used. On the new site, I served as the writer, information architect, and project manager, Steve Street created graphics and HTML design, Ken Jones did the programming and technical development, and Laurie Strysko did the photographs. The Prudential Verani Realty executives on the project were Suzanne Burns and Giovanni Verani. Some of the InterWrite developed site has since been revised with a different design and minor changes to the content. (It is usually a good idea to revise a site

10

Case Study—Writing a Marketing Web Site from Proposal to Documentation: Prudential Verani Realty

Figure 10-1 The home page for Prudential Verani Realty.

every few years to keep it fresh for users.) This chapter focuses on the creation of the InterWrite developed site because it gives us a rare opportunity to examine the complete site development process from concept to maintenance documentation, and the writer’s role in each stage of the process. Take a look at the current site, compare it to the version described here, evaluate the changes, and discuss whether or not they have moved the site closer to its goals. The original color image for this screen shot and others is available on the Writing for Multimedia and the Web CD-ROM.

Planning the Prudential Verani Realty Web Site One of the keys to a successful large-scale web site is adequate planning. Adequate planning insures that a web site achieves its goal and communicates its intended message for the least possible cost. A clear plan on paper allows a client to discuss options and make revisions for far less cost than it does to make revisions on a completed site.

129

130

WRITING FOR MULTIMEDIA AND THE WEB

Scoping a Project: Goals, Tools, and Price The first stage of developing the site was to better define the project. This was accomplished through researching similar sites, meeting with the client, and digesting all of the client’s existing marketing material. Some of the key questions that had to be answered and discussed with the client were: 1. What are the client’s goals for this site? For example, is the primary purpose informational, marketing, content, or transactional—selling products online? 2. Who is the audience for this site? What are their demographics? What information about the product are they most interested in? What information do they already have? How sophisticated are they with using the web? How advanced are their browser and connection speed? What are the key use cases? (Use cases are the most common ways visitors will use the site.) If possible talk to users directly and test an early version of the site to determine their needs. 3. What is the client’s wish list? What elements does the client think would be great for the site? Why would these elements be effective in achieving the client’s goals? Can the client rate the wish list items in order of importance? 4. Who are the client’s competitors? What are their web sites like? What techniques do they use? 5. Where will the site be hosted? What are the technical capabilities of the hosting service, or the client if they are doing the hosting? What platform will the hosting service be using? 6. What are the elements in existing company material that the client likes or that seem particularly effective? What resources already exist, such as pictures or a database of information? Is this material suitable for the web site? 7. What are the branding issues? Are there guidelines for a specific way material needs to be presented? 8. Is a web site the correct medium to present all the material, achieve the client’s goals, and reach the intended audience? Would a disk-based interactive program, or even a video or a brochure, be more appropriate for some of the material? 9. What form does the intended information take? Is it numbers and statistics? Video? Graphics? Text? 10. How often and how extensively does this information need to be updated? Does the client have adequate staff to do updating, or will this require a maintenance contract? 11. Are there ways that we can present this information that are dynamic and customizable for the user? 12. Will this project need to pay for itself, for example by incorporating advertising? 13. What are the ways this site can be marketed to drive traffic to the site?

10

Case Study—Writing a Marketing Web Site from Proposal to Documentation: Prudential Verani Realty

The Proposal for the Prudential Verani Web Site Once the project has been defined by answering all the above questions, and a rough idea of costs has been established, then it is time to write the proposal. For the Prudential Verani site, the developer, InterWrite, created a proposal that outlined the goals of the site, two possible approaches to achieving those goals, and the approximate costs of each of these approaches. (Most proposals only present one approach to the client.) The purpose of proposal writing is to present options to the client clearly, succinctly, and appealingly. This should not be a hard-sell document, but it should point out the advantages of the work being suggested. Note the modular approach in the proposal to the design and pricing of the project. This allowed the clients to delete or combine elements in a way that created the site and budget they desired. This is only one approach to proposal writing. There are many other approaches. Some major companies request so many specific topics to be addressed that proposals can be forty to fifty pages long. Note also that the stage listed below as “The First Step” is often called “Discovery” or “Requirements.”

Section of Prudential Verani Web Site Proposal Goals of an Improved Web Site 1. Better attract and serve customers (buyers) 2. Better attract and serve clients (sellers) 3. Sell properties more effectively 4. Help agents and staff make the most effective use of their time 5. Improve cooperation with business partners

The First Step: Requirements Gathering The first step to revise the Verani site is to clearly define the message, content, functionality, and navigation. This material will be presented in outlines and flowcharts of the proposed site. Once this step is completed, we can develop a precise budget. Until then, the amounts below are estimates. The cost to develop the outline, flowcharts, and budget would be: $XXXX-$XXXX. Site Revision Options We’ve presented two approaches to revising your site in the document that follows. • Option 1: Achieves the most important goals for your site at a moderate cost.

131

132

WRITING FOR MULTIMEDIA AND THE WEB

• Option 2: Achieves all the goals that we discussed for your site at a higher cost. Both of these options have been broken into sections so we can delete and combine elements to achieve exactly the web site and budget you desire. Option #1: Revision to Achieve Most Important Goals

Suggested Revision (To protect the client’s privacy, all dollar amounts have been blocked out.)

Estimated Cost

Expand Content: The Real Estate and Relocation Information Source for New Hampshire Your current site tells the user about your company and your properties. An alternative is also to make your site an information resources for sellers and buyers of real estate. This would greatly increase traffic to your site. Users would come to your site for information. This well-presented information would demonstrate that you are a well-run, knowledgeable company. This would encourage users to come to you when they are considering buying or selling a home. The site would also of course continue to fulfill its current functions of presenting your properties and company. Types of information that could be included are:

$XXXX

• • • • • •

Mortgage calculator School reports Town reports Relocation information List of home inspectors Interactive tutorials on how to buy a property

This material would be presented in such a way that the user makes a positive connection with your agency. For example, after a site visitor uses our mortgage calculator to determine how much they could afford, then we would offer to show the visitor Verani properties in that price range.

10

Case Study—Writing a Marketing Web Site from Proposal to Documentation: Prudential Verani Realty

Graphic and HTML Redesign of Site This includes a complete graphic redesign of the site, including redesigning the home page, secondary pages, headers, buttons, original graphics, and integration of graphics into HTML. The goal is to make the site a more upscale, friendly place, demonstrating that Prudential Verani:

$XXXX

• has the resources to sell your property most effectively • has the knowledge and resources to make your home search efficient and successful • has a friendly, professional staff that would be a pleasure to work with

NOTE: This is only part of the proposal. In the full proposal, many additional elements are outlined in the table and the total budget is estimated. The proposal also includes a second, more expensive revision option and an approximate production schedule for completing the project. The actual budget numbers are crossed out on this proposal sample to protect the client’s privacy.

Scope of Work/Revision Plan The above proposal was discussed with key members of the Prudential Verani team and eventually options were eliminated and the scope of work of the project was clearly defined. This scope is an important document because it can be the basis of your contractual agreement with the client. The writing needs to be very clear and unambiguous. There is no need for salesmanship here. Do not promise anything you cannot deliver, and make it clear what work is not your responsibility. Many of the elements in the scope of work/revision plan have been refined and simplified from the original proposal. REVISION PLAN/SCOPE OF WORK FOR THE PRUDENTIAL VERANI WEB SITE 1. Production Planning and Content Definition The first stage of designing the web site is to clearly define the site in an outline and flowchart. The flowchart will consist of a complete graphical plan of the site, illustrating every internal page in the site and each page’s place in the overall site architecture. A first draft of the outline and flowchart will be presented to key Verani staff for comments. Based on these comments, a second draft will be created that will also be submitted for comments.

133

134

WRITING FOR MULTIMEDIA AND THE WEB

Once the tasks and content are clearly defined, then we can produce a detailed and final budget, production plan/time line, and payment schedule. Production Planning Costs: $XXXX Payment for production planning will be in three stages: • $XXXX to initiate the project • $XXXX due at completion of first draft outline and chart • Balance of costs for production planning due at sign-off for final draft chart, outline, budget, and production schedule. Costs for the outline/charts will be a minimum of $XXXX but no more than $XXXX. 2. Web Site Creation Once the production planning is complete, the second stage of the process is to produce the web site. The tasks contracted for include the following: Graphic and HTML Redesign of Site. This includes a complete graphic redesign of the site, including redesigning the home page, secondary pages, headers, buttons, original graphics, and integration of graphics into HTML. The goal is to make the site a more upscale, friendly place, demonstrating that Prudential Verani: • has the resources to sell your property effectively • has the knowledge and resources to make your home search efficient and successful • has a friendly, professional staff that would be a pleasure to work with Improve the Content about Your Company and Properties The current site presents your properties, company, and agents. We will create new material and build on the existing material to make this presentation more effective. For example, we will improve the graphic design of the results page for the properties database search. This page will also include links to other relevant information on the site. Another improvement would be to create custom templates for the New Construction section, making this section easily updateable. In addition, we will add new material about the company that is not on the current site, such as a new mortgage and title section.

10

Case Study—Writing a Marketing Web Site from Proposal to Documentation: Prudential Verani Realty

We will also increase the functionality of the site, such as adding a site-wide search and an easily updateable Special Events page for announcing open houses or special meetings.

NOTE: This is a fragment of the scope of work/revision plan. The complete scope continues similarly to the above, clearly defining every element that will be created for the site. The last part of the scope below defines the services and production schedule. 3. Services Included InterWrite or its subcontractors will complete all of the tasks agreed upon in the final outline. All payment will be made to InterWrite, who will be responsible for payment to all subcontractors and for subcontractors completing their work. Prudential Verani agrees to pay InterWrite within 30 days of the agreed upon dates in the payment plan. Payment will be made at the completion of major stages of the project. This payment plan will be developed after completion of the production planning and outlines, described in Step 1 at the beginning of this document. The final product will be a fully functioning and tested web site placed on the server of your choice. The final web site will be owned and copyrighted by Prudential Verani. After the web site is completed, Prudential Verani will be responsible for the regular upkeep of the site unless additional contracts are made with InterWrite Design. 4. Approximate Time Frame • This time frame can be finalized after completing the final outlines. At this point, the following is a rough estimate, subject to change. • Keeping this time frame requires a speedy turnaround (2–3 days) of drafts for comment from Prudential Verani. With longer turnaround times, InterWrite cannot keep this schedule. Project Start

December 7

Final Outlines/Charts Completed

December 31

First Drafts of Content and Graphics

January 29

Complete First Draft of Site Launched

February 19

Final Site Launched

March 1

Online Marketing Completed

March 8

135

136

WRITING FOR MULTIMEDIA AND THE WEB

Gathering and Grouping Site Material Once the scope of work is accepted by the client, the next step is for the web site developer and the writer to gather as much information as they can about the client’s products and services. This information can come from existing information collateral, such as brochures, advertisements, older web sites, and even marketing videos if they exist. But the source for the most current information will be the client themselves. In the case of this site, a number of the top executives and agents at Prudential Verani Realty were interviewed. It is also a good idea to examine the user scenarios. User scenarios describe exactly how users will use the site. User scenarios will discuss where each type of user might enter the site, what information they will be looking for, and step by step how they will move through the site to get to that information. For example, someone looking to buy a commercial warehouse and get a mortgage will need different information and travel a different sequence through the site than would someone buying their first home with cash. The developer’s job is to make sure the information each user wants is where they expect it to be on the site and in the proper sequence. In addition to grouping the content by following user scenarios, another common method is the card sort. Sometimes actual physical paper cards are used, but I prefer electronic “cards” that can be sorted on the computer. The first step is to determine the “bins” or main categories, such as “Homes and Land,” and subcategories if the site is big enough, such as “New Construction.” Then all the possible information on the site is broken down into discreet units or chunks, such as “Radon and Lead Information.” Then, working with the client, these information units are sorted to the proper bins. A variation with a large group of stakeholders is to place the bin categories on the wall and give each user a sticky labeled with each content chunk. The stakeholders can then vote by placing a sticky under each bin category on the wall. If the majority of the “Radon and Lead” stickies are placed under the “Homes and Land” category, then that is probably where that information should be placed on the actual site. If using the card sort method, it is important to make sure that the content arrangement supports the user scenarios. You may have to rearrange some content or create cross links to make sure that users can accomplish their goals. As with any major change, when you have settled on an initial site structure it is a good idea to verify it with potential site users.

Flowchart/Sitemap Once the content groupings have been approved by the client, the next step is usually the development of a flowchart or sitemap of the site. The flowchart should indicate every page of the site. The goal is for the flowchart to be a clear visualization of site structure. See Chapter 3 for a detailed discussion of flowcharting and flowchart software. As discussed in Chapter 3, there are a number of techniques

10

Case Study—Writing a Marketing Web Site from Proposal to Documentation: Prudential Verani Realty

KEY Fannie Mae Purchase Addendum

Static pages

Homes & Land Search Page

Dynamic & interactive

U P D

(Londonderry Development # 1)

Need manual update

CROSS LINKS Calculators Mortgages 101

Cross links and external links

Figure 10-2 Symbol key for Prudential Verani web site flowchart/sitemap.

that help make the flowchart a more useful tool, including: 1. Give every page of the site a unique number and name. 2. For ease of printing and presentation, run the chart vertically instead of horizontally, as in Figure 10-3. 3. Simplify where you can. If there will be multiple sections that will be designed in the same way, it is OK to say that in a note. No need to draw out all the boxes for repetitive pages. 4. It can make it easier to see the main sections of the web site by writing those pages in bold with drop shadows. 5. Indicate cross-links (links to pages within the site that are already on the chart) and external links (links to other web sites) as text only. 6. Visually indicate pages that will have special functions. For example, pages that will have interactive elements or that will be generated dynamically from a database (see Figure 10-2).

Outline As discussed in Chapter 3, the flowchart illustrates the overall navigation, structure, and size of the site; the outline provides more details about the actual content and functionality of the individual pages. The flowchart and outline that follow are most effective when used together. The client consults the chart for overall structure, then reads the outline for the details. Not all sites use outlines, but they are particularly useful for information heavy sites and to explain content groupings to nontechnical clients. The structure of each page on the outline below is fairly simple. The outline should be adjusted to match the specific project. The elements include: • Title: The page title, which should be the same as what is on the flowchart. • Image: Describes possible images for the page. • Text: Describes onscreen text.

137

138

WRITING FOR MULTIMEDIA AND THE WEB

Prudential Verani Web Site (partial chart)

IA. Contact an agent

IB. Bank Owned Properties and Short Sales IC. Homes & Land Search Page I. Homes & Land ID. Land

CROSS LINK How to Buy A Property Home Preference Checklist Relocation Services

H O M E P A G E

IB2. Freddie Mac Purchase Addendum

IIA1. Floor Plan and Virtual Tour of Model Home IIA2. Builder Profile

IIA1 a. Photo of Living Room NOTE: IIA1b etc. Photos of other rooms in the house on separate pages

IIA3. Feature & Subdivision Plan

IIA4. (House Model #1)

II. New Construction

THIS IS A PARTIAL CHART. OTHER PAGES WOULD BE BELOW IN THE FULL CHART. SEE CD-ROM FOR FULL CHART

IB1. Fannie Mae Purchase Addendum

IIA. U P (Londonderry D Development #1)

NOTE: IIA5 etc. Each Model would have its own page. IIA6. Financing

NOTE: IIB etc. Each development will have a menu page. U IIC. Future P Residential D Developments

CROSS LINKS Calculators Mortgages 101

NOTE: IIB1 etc. Pages for other developments same as for IIA. Development #1 above.

Figure 10-3 Partial flowchart/sitemap for the Prudential Verani web site.

10

Case Study—Writing a Marketing Web Site from Proposal to Documentation: Prudential Verani Realty

• Links: Includes all the links on this page from text within the page and from the graphical navigation bar. • Navigation bar: The specific buttons that will have to be created for the navigation bar. • Functionality: This describes what the user can do on this page besides click-and-read. For example, can they search for properties or calculate their mortgage.

Partial Outline of the Prudential Verani Web Site Home Page Title: Prudential Verani Realty The Real Estate and Relocation Resource for Southern NH IMAGES: Images which demonstrate that Verani is a professional, friendly place. Possible images: Prudential logo, friendly Verani staff, Verani office, people enjoying a beautiful home. Might have other images on page to lead user to some of our key features, such as a calculator image for the tools and an e-mail icon for our custom e-mail notification service. TEXT: Explain that we are part of Prudential, one of the largest corporations in the world, but also a family-owned company with strong roots in Southern NH. We have the resources to sell your property effectively and/or make your home search efficient and successful. Also should introduce some of the key features of the site, such as our searches, custom e-mail notification tools, extensive information resources, etc. Near the bottom of the page should be a short disclaimer stating that we have made every effort to make the information on this site accurate but are not liable for any errors or omissions; please see our Terms of Use Policy. LINKS: Homes and Land, New Construction, Commercial and Industrial, Relocation Services, Verani Mortgage and Title, Real Estate Information and Resources, News and Special Events, Search/Site Map, About Us/Contact. Might also have a link from a calculator image to the tools and calculator section. In text on the bottom of the page and every page will be links to Terms of Use, Privacy Statements, and a webmaster e-mail link.

139

140

WRITING FOR MULTIMEDIA AND THE WEB

NAVIGATION BAR: Homes and Land, New Construction, Commercial and Industrial, Relocation Services, Verani Mortgage and Title, Real Estate Information and Resources, News and Special Events, Search/sitemap, About Us/Contact. I. Homes and Land TITLE: Homes and Land IMAGE: Small image of attractive house. This could be the same picture all the time, or a regularly changing featured house. TEXT: Briefly explain the range of properties we offer and the area we cover. Direct the user to the search page and other services that will help them in their moving and home buying, such as Relocation Services, the How to Buy a Property Section, Home Preference Checklist/Questionnaire, and New Construction. LINKS: Home, Search, Contact, Relocation Services, the How to Buy a Property Section, Home Preference Checklist/Questionnaire, and New Construction. NAVIGATION BAR: Home, Search, Contact. IA. Contact an Agent TITLE: Contact Us IMAGE: Photo of friendly agent. TEXT: Phone numbers, addresses, and e-mails for all offices, plus a form that user can fill out and submit so that we can contact them. LINKS: Home Page, Search, Contact, Homes and Land. NAVIGATION BAR: Home Page, Search, Contact, Homes and Land. FUNCTIONALITY: Users can fill out a form with their address and e-mail, click the type of information they want, write a short note, and submit it to us. Message will go to different people at Prudential Verani, depending on what type of information the user requests.

10

Case Study—Writing a Marketing Web Site from Proposal to Documentation: Prudential Verani Realty

NOTE: This is a partial outline. See the Chapter 10 area in the Chapters section of the Writing for Multimedia and the Web CD-ROM for a full outline.

Writing the Web Site Once the outline and site flowchart have been thoroughly discussed with and approved by the client, a detailed budget and scope of work will be created. (Because this final scope of work is similar to the preliminary scope discussed earlier in this chapter, and because production budgeting is outside the parameters of this book, these documents will not be discussed here.) With an approved outline and final scope of work/revision plan, the content for the web site can now be written.

Online Writing Style Tips As discussed in Chapter 2, strong writing for the web and multimedia follows many of the principals of good journalism, including: • • • • •

Strong lead sentences that summarize content Inverted pyramid style: put most important content first Simple sentence construction Concrete words: nouns and verbs, avoid adjectives and adverbs Active not passive voice verbs

As also discussed in Chapter 2, there are also a number of writing techniques that are specific to writing for the web and multimedia. Please refer to Chapter 2 for the full discussion; following are just a few of the main points. • • • •

highlighted keywords meaningful subheadings (not “clever” ones) bulleted lists one idea per paragraph half the word count (or less) than conventional writing Nielsen, The Alertbox: How Users Read on the Web

These concepts are particularly true on the first couple of levels of a web site or multimedia program where the user is trying to find the information they want. Once they have located their information deeper in the site, users may be willing to read longer text material. These general style techniques apply to most online writing, but specific types of pages make unique demands on the writer. Examples of special types of pages

141

142

WRITING FOR MULTIMEDIA AND THE WEB

on the Prudential Verani web site include: • • • •

Home page Section menu/introduction pages Static content pages Interactive and dynamic content pages

Each of these page types will be discussed in detail in the remainder of this chapter, including how to write pages so that a site will show up well when users search for the site’s topic in search engines and directories.

Search Engines and Keywords A unique aspect of writing for the web is the need to consider search engines. In most cases, search engines such as Google, and directories such as Yahoo!, are a primary way that new users will find your site. When users go to Google and type in words related to your site, such as “New Hampshire real estate,” you want your site to appear in the top ten to twenty search engine results. To achieve this, with many search engines, it can help to pay attention to keywords. Keywords are simply the words that your potential customers and/or site visitors are likely to enter into a search engine to find your site. The challenge is to decide which keywords to use. For the first draft of your site, you can start by asking your clients what keywords they expect potential customers to use. They know their business better than you do. Ideally, you should also ask a number of users if you can. Many search engines also maintain web sites that list the most common search terms. Reviewing common terms in your category can help you to phrase your keywords correctly. A couple good sites for common search terms are: • AOL Hot Searches: http://hot.aol.com/ • Google Zeitgeist: http://www.google.com/press/zeitgeist.html Because repetition is an important factor in search-engine ranking, you need to focus on a few keywords and repeat them judiciously throughout the home page. For the Verani site, the primary keywords are: “New Hampshire real estate,” “NH real estate,” “Southern New Hampshire real estate,” and “southern NH real estate.” As in this example, it is usually wiser to use keyword phrases of two or more words. Single word keywords or even common short phrases, such as “real estate” are not specific enough to allow a user who is making a focused search to pull up your site on the first page or two of the search results. Your work with keywords is not completed once you finish the site and submit it to search engines. Evaluating and modifying your choice of keywords is an ongoing process to better your search engine placement. Software tools can help with this process and allow you to better refine your keywords. After you have submitted your site to the search engines, and the site begins showing up in

10

Case Study—Writing a Marketing Web Site from Proposal to Documentation: Prudential Verani Realty

the search engine indexes, you can use site analysis software, such as WebTrends (http://www.webtrends.com/), to monitor who comes to your site and what search words they use. Once you have determined the most common search words being used to find your site, you can rewrite your site to include more of them. Another useful tool in this process is search-engine position-analysis software, which will search specific keywords on the major search engines and report your ranking for that specific terms. For example, when searching Google for “New Hampshire real estate,” the Prudential Verani site comes up fourth in the search results. You can do without the search position software by doing multiple searches of your keywords in the major search engines, but it will take a while. Later in this chapter, we will have more discussion about how to write your web site to improve search engine placement, but adjusting the site’s text is not the only way to improve search engine and directory rankings. For example, most search engines currently track link popularity. If your site has many links from high quality sites, your site will be higher in the rankings. Click-through measurement can also be important for search engines. If your site initially appears lower on the search results listings but gets lots of clicks by users, a search engine may give your site a higher ranking. Most search engines also accept paid rankings. For other nonwriting tips on marketing your web site, check out the reference material on Search Engine Watch (http://www.searchenginewatch.com). Also, if your client has sufficient resources, they might consider a search engine optimization company. These companies have special techniques to boost your search engine rankings. But because this is a book about writing, we will not address these nonwriting topics further here, but instead discuss how writing can enhance search engine ranking as one of our web writing considerations.

The Home Page The home page is the most important page of a web site. (See Figure 10-1 for a screenshot of the home page.) If this page does not accomplish its goals, then the user may go no further and the site can fail. There is a heavy burden on the home page. It must: 1. 2. 3. 4.

Hook the user’s interest. Communicate the basic message and tone of the site. Introduce key site elements and lure the user deeper into the site. Provide the correct keywords and frequency of keywords to help search engine placement. 5. Address legal issues. The writer shares some of the above duties with the graphic and interface designers, but good writing is a major component of the success of any home page. It is important for the writer to work with the graphic designer when creating the page so that the designer’s images support and expand on the writer’s content.

143

144

WRITING FOR MULTIMEDIA AND THE WEB

The Title Word for word, the title is probably the most important text on your home page. The page title and the main heading are frequently confused. The page title is not the heading that appears immediately above the text. On the Prudential Verani home page (Figure 10-1), the main heading is “We’re not just your real estate company . . . we’re your neighbor.” The title on the Verani page appears in the bar at the very top of the browser: “New Hampshire Real Estate: Specializing in Southern NH Homes, Land, and Commercial Properties.” The functions of the title are to: 1. Identify an open web page. 2. Provide key site information to search engines’ spiders. (Spiders are software programs that search web sites and collect information for search engine ranking.) 3. Identify the site in search engine and directory lists. 4. Identify the site in bookmark lists. Of these functions, the last three are by far the most important. For many search engines, the title is one of the most important elements for determining how your site will rank when someone searches for one of your keywords. The title in the first draft of the home page, “Welcome to Prudential Verani Realty”

identifies the business and is a common sort of title on the web. However, this title made a poor showing in search engine tests. The second draft title is much more descriptive of the Prudential Verani services. It also contains many keywords that will help determine search engine placement with search engines that track keywords. The second draft title is: New Hampshire Real Estate: Specializing in Southern NH Real Estate, Homes, Land, and Commercial Properties.

Longer titles, such as this, may not show in their entirety in all browsers and search engine results, but the entire title will be indexed for keywords, which can boost your search engine ranking on some search engines. Do not write keywords in your title that do not relate to your site. Also, do not write a long list of keywords, especially repetitive words in the title. Search engine companies are getting better at determining keyword and link spam (attempts to fool the search engine) to gain good search engine placement. If a search engine detects spam, it may penalize your site by dropping it lower on the list or eliminating it from its index altogether. So make sure that your title makes sense grammatically and in terms of the content of your site. It takes clever writing to

10

Case Study—Writing a Marketing Web Site from Proposal to Documentation: Prudential Verani Realty

create a site that gets strong search engine placement and is still a good read for the user. In addition to improving your search engine ranking, another key function of your title is to identify your web site in search engine and directory lists. Remember that, unlike the title of a newspaper story, a web site title often must stand-alone in a search engine or directory list. So be sure that your title is effective on its own. Don’t use a teaser or trick title that has little independent meaning. Stick with something that is clear and descriptive of your site.

The Main Menu The main menu on the home page is the clickable list of the main sections of the site. Its key functions are to: 1. Provide a brief outline of the site, giving the user a sense of what lies within. 2. Serve as a main navigational tool The titles in the main menu should be descriptive and brief. Many designers also believe that they should be limited in number. Other designers, however, like to give their sites a portal look with dozens of links. This approach requires careful text design, but it can still overwhelm the user who is looking for quick information. The first draft menu titles on this site are: • Residential • New Construction • Commercial/Industrial • Relocation Services • Mortgage and Title • News and Special Events • Search/Sitemap • About Us/Contact • Resources

The only change with the second draft was to use more descriptive language for two of the titles: “Residential” was changed to “Homes and Land;” “Resources” was changed to “Tools and Information: Calculators, Maps, and More.” If a menu is made up of text links, it can also provide a good source of keywords to boost search engine placement. Unfortunately, in many cases a graphic menu is more visually attractive. You can compensate for the use of a graphic menu by using alternate image tags in the HTML code that describe the content of the picture. But only a few search engines read these tags. Another alternative is to repeat your graphic menu links on the bottom of the page as text links. This not only helps search engine placement, but is also useful to the visually impaired who

145

146

WRITING FOR MULTIMEDIA AND THE WEB

have special machines that can read text but not graphics. (See “Writing Accessible Multimedia” in the Background section of the Writing for Multimedia and the Web CD-ROM.)

Links to Exciting Elements In addition to the main menu links on the home page, it is also a good idea to have links to any areas of your site that the user might find particularly exciting or interactive. The goal is to: 1. Lure the user deeper into your site. 2. Get the user interacting with your site. If you can get a user doing things on your site besides reading, you have taken a good first step to getting them to explore the site. Some designers call this making the site “sticky.” On this site the links to exciting elements include: • Search for Properties • Calculate your Mortgage • Get E-mail Updates

As you can see, these links are brief, descriptive, and written in terms of actions. They address some of a user’s key interests for visiting a real estate site, and they encourage the user to do something. There were no changes between the first and second drafts.

Slogans/Headings A slogan can help express the tone of the site. If the slogan has keywords, is in text, and is written as a heading, it can also boost search engine placement. Some search engines give greater importance to words surrounded by HTML heading tags. (See the Background section of the Writing for Multimedia and the Web CD-ROM for an introduction to HTML.) As is the case with menus, as discussed above, a slogan or heading may look better as a graphic, and you may choose to forego the search engine advantage to improve the visual look of the page. The slogan for this page is: We’re not just your real estate company ... We’re your neighbor.

Each of the two parts of the slogan is centered over the paragraph that relates to it. There is not much text on this home page, but web pages that do have more text should break the text into sections and have clear, descriptive headings at the top of each section of text. This helps the user scan your information more quickly.

10

Case Study—Writing a Marketing Web Site from Proposal to Documentation: Prudential Verani Realty

Body Text The body text is the main text on the page. Its functions are to: 1. Hook the user by explaining why this is the site you want to explore for your real estate needs. 2. Introduce the type of material that is in the site. 3. Boost the search engine rating by including keywords. 4. Get the user to make contact. 5. Strengthen the legal protection for the company. The first draft body text below satisfies many of our requirements for good web writing: • Brief: The user can see the entire home page without scrolling. • Strong lead sentence that summarizes content. • Inverted pyramid style: put most important content first. The integrity of the Verani family is secondary to the size, experience, and capabilities of their company. • Concrete words: uses nouns and verbs, avoiding adjectives and adverbs. There is little fluff here. The user is not told that Verani is the best company around. Instead, the company is described in very concrete terms: the number of agents, years of experience, sales figures, and affiliations. This information shows rather than tells the user that this is a hot company. • The word “contact” in the last sentence is a link to a contact information page encouraging the user to get in touch. FIRST DRAFT: More than 60 agents, 35 years of experience, $100 million in sales, and the global connections of the Prudential Real Estate Network make us the right choice to help you buy or sell residential and commercial properties. The Verani family has lived in New Hampshire for three generations. As your neighbor, we will treat you with the trust and integrity for which the Verani family is known. Enjoy our site, then contact us for a personal consultation about your real estate needs.

The problem with this first draft was that in tests with search engines, this text produced poor search engine rankings for the site. This is important because the body text is used by virtually all search engines to rank your site. The first paragraph was rewritten to include more keywords and keyword repetition. On a longer page it is also important to have keywords high on the page and as page and section titles. The challenge was to incorporate more keywords while continuing to make the site engaging to the user. The ideal page from a search engine’s point of view is a page without tables or frames, limited graphics, and lots of text. Such a page may get a

147

148

WRITING FOR MULTIMEDIA AND THE WEB

site a high ranking in a search engine, but once the user gets to this unattractive, text-heavy page, they will probably not click beyond the home page. SECOND DRAFT: A leader in New Hampshire real estate for 35 years, we specialize in southern NH real estate: homes, land, and commercial properties. Our 60+ agents and the global connections of the Prudential Real Estate Network make us the right choice for residential and commercial real estate.

The one other change, which was on advice from the company lawyer, was to add a link to the terms of use statement in the body text: SECOND DRAFT: Please review our Terms of Use, enjoy our site, then contact us for a personal consultation about your real estate needs.

The Terms of Use is an important legal document that can help reduce the site owner’s liability. Every commercial site should have one. But don’t worry, this is not one more job for the writer. A lawyer must write the Terms of Use. When you are on the web, click the “Terms of Use” link at the bottom of the Prudential Verani home page to see what such a document looks like.

Bottom Text Links Text links at the bottom of the home page are typically used for legal and business purposes, such as links to Terms of Use or the webmaster. It is also the place where you will often place the name of the site developer. For the second draft, the writer added a text menu of key site links to aid navigation and to incorporate additional keywords for search engine placement. Do not just put a list of keywords in tiny or invisible text at the bottom of the page or the search engine will punish you for trying to spam them. A text menu at the bottom of the page is, however, a legitimate addition to your home page.

Complete First and Second Draft Home Page Text After the previous discussion about writing the home page, review the first and second drafts of the home page text to get an overall understanding of the impact of the changes. Changes are in bold. First Draft Home Page Text TITLE: Welcome to Prudential Verani Realty SECTION MENU: Residential New construction

Second Draft Home Page Text (Changes are in bold) TITLE: New Hampshire Real Estate: Specializing in Southern NH Real Estate, Homes, Land, and Commercial Properties

10

Case Study—Writing a Marketing Web Site from Proposal to Documentation: Prudential Verani Realty

Commercial/industrial Relocation Services Mortgage and Title News and Special Events Search/sitemap About Us/Contact Resources LINKS TO EXCITING ELEMENTS: • Search for Properties • Calculate your mortgage • Get E-mail updates SLOGANS/HEADINGS: We’re not just your real estate company . . . we’re your neighbor. BODY TEXT: More than 60 agents, 35 years of experience, $100 million in sales, and the global connections of the Prudential Real Estate Network make us the right choice to help you buy or sell residential and commercial properties. The Verani family has lived in New Hampshire for three generations. As your neighbor, we will treat you with the trust and integrity for which the Verani family is known. Enjoy our site, then contact us for a personal consultation about your real estate needs. BOTTOM TEXT LINKS: • Terms of Use • Privacy Policy • Developed by InterWrite

SECTION MENU: Homes and Land New construction Commercial/industrial Relocation Services Mortgage and Title News and Special Events Search/Sitemap About Us/Contact Tools and Information: Calculators, Maps, and More LINKS TO EXCITING ELEMENTS: • Search for Properties • Calculate your Mortgage • Get E-mail updates SLOGANS/HEADINGS: We’re not just your real estate company . . . we’re your neighbor. BODY TEXT: A leader in New Hampshire real estate for 35 years, we specialize in southern NH real estate: homes, land, and commercial properties. Our 60+ agents and the global connections of the Prudential Real Estate Network make us the right choice for residential and commercial real estate. The Verani family has lived in New Hampshire for three generations. As your neighbor, we will treat you with the trust and integrity for which the Verani family is known. Please review our Terms of Use, enjoy our site, then contact us for a personal consultation about your real estate needs.

149

150

WRITING FOR MULTIMEDIA AND THE WEB

BOTTOM TEXT LINKS: • Terms of Use • Private Policy • Developed by InterWrite • New Hampshire Homes and Land • New Hampshire New Construction • New Hampshire Commercial/Industrial Real Estate • Relocation Services • Mortgage and Title • Real Estate Tools and Information: Maps, Calculators, and more • Contact

Home Page Meta Tags Meta tags are HTML tags that enclose special text at the top of your web page. Unlike the page title, the text between meta tags never appears on the web page that is displayed on your user’s computer screen. As with the page title, either you or (more likely) the production team need to access the HTML code of your page to write meta tags. You can view the meta tags and the HTML source code for a web page simply by opening the View menu of your browser and clicking “Source” and looking for the word “meta” near the top of the page. In the past, the meta tags could be helpful to search engine ranking, but in recent years their impact has diminished. Nevertheless they are still worth at least a brief discussion. The meta tags of key concern to the writer are the Keyword and the Description meta tags. These tags can affect the way some search engines: 1. Rank your site for specific keyword searches 2. Describe your site in search results It is important to note that most major search engines no longer index Keyword meta tags but many do use the Description meta tag. For the search engines that do use them, however, well-written meta tags can still make a difference. Description Meta Tag: The description meta tag describes your site. This tag is indexed by some search engines for keywords that will affect your search engine ranking, and some search engines also use this meta tag as the description of your

10

Case Study—Writing a Marketing Web Site from Proposal to Documentation: Prudential Verani Realty

site that will appear in the list of search engine results when a user searches for one of your keywords. It is important to have a strong first sentence that summarizes your site and convinces the user to click on your link in the search engine results. One reason for this is that the amount of text search engines will display for a description range from approximately 130 to 400 characters. So in many search engines, the first sentence may be all that is displayed for the description. Another reason for the importance of the first sentence is that users are in a rush. They are quickly scanning the search engine results to find the information that they want. So be sure to quickly and clearly tell them who you are and why you are worth clicking on. Stay away from meaningless marketing hype. The following example clearly states that Prudential Verani is a successful real estate agency. This statement is backed up by the concrete figure of their annual sales. The second sentence explains what type of real estate they sell. Additional paragraphs are also added because they add additional material for the search engine to index, and the longer description may show up in some search engine results, although it will not in most.