Effective Prototyping Process for Software Creation

Effective Prototyping deﬁnition • best practices • tools Jonathan Arnowitz • Michael Arent • Nevin Berger SF Bay IxDA/BayCHI Google, Mountain View 16 January 2008 1

Agenda • Forward • What is prototyping, who does it and why? (Michael Arent) • Prototyping Process (Jonathan Arnowitz) • Rapid Prototyping with Excel (Nevin Berger) • Q&A

Forward: why this talk? Our goals for effective prototyping are: • Democratize prototyping • Demystify • the design process • the prototyping activity • Help people create higher quality software • Make your prototyping help the software creation process and make you look good

Short exercise You have 3 minutes. Quickly jot down the following on two note cards. When finished hand your cards up to the front to us. 2 most important best practices with prototyping • Best practice 1 • Best practice 2 2 most important things that defines a prototype to you • Aspect 1 • Aspect 2 When finished hand your cards up to the front to us.

What is prototyping, who does it and why?

What is a prototype: the dictionary Deﬁnition No. 1 • pro·to·type n. 1. An original or model after which anything is copied; the pattern of anything to be engraved, or otherwise copied, cast, or the like; a primary form; exemplar; archetype. – Webster’s 1913 Dictionary Deﬁnition No. 2 • pro·to·type n. 1. An original type, form, or instance serving as a basis or standard for later stages. 2. An original, full-scale, and usually working model of a new product or new version of an existing product. 3. An early, typical example. – Dictionary.com (2007)

What is a prototype: A Designer’s definition “The use of simplified and incomplete models of a design to 1.explore ideas, 2.elaborate requirements, 3.refine specifications, 4.and test functionality.” William Lidwell et al, Universal Principles of Design, 2003

What is a prototype: A software development definition A prototype is a model of a design that is: • complete or incomplete • portraying specific content and fidelity • for a specific planned purpose • for a specific audience(s) and purpose • planned with specific characteristics • done in a specific method • created with a specific tool

What is prototyping? To be sure it is… • The most important design artifact in a software project • The life blood of achieving a rational design outcome with or without UCD Without any planning its success relies purely on serendipity.

What is prototyping? If it isn’t for you now, it can be... •formalized •manageable •predictable •professional Fact 1: No one has either a degree in prototyping or certiﬁcate of proof they can do it – only a portfolio of examples, at best. Fact 2: You’re at the mercy of the practitioner’s competence/ incompetence as well as a company’s evolved or non-evolved practices.

What is prototyping? It is changing... • Attention to the topic of prototyping and details of its practice have grown 500% in average HCI texts Albeit, that is a change from 3 pages to 15 pages in a book that is 400-800 pages long.

Why do we prototype? • Explore and try out design ideas – thus increase innovation and creativity • Validate design requirements and assumptions • Communicate your ideas to a cross disciplinary group: • Fellow software makers • Stakeholders • End users • Customers • Greatly reduce the high risk and costs of developing poor designs

What is prototyping? + Engineering Design Focuses on functions, features and Focuses on product experience technical capabilities. and usability.

Who prototypes? Software makers: Those who envision, design then produce software. • Software engineers • Interaction designers • Product managers • Graphic designers • Visionaries • User researchers • Marketers • Game designers • Functional analysts • and many others…

Excercise 2 On a sheet of paper: • Make a quick sketch prototype of one screen in a contact management software Again – you have just 3 minutes.

What do you prototype? Software: Software elements: • Desktop apps • Information design • Mobile apps • Interaction design • Web sites • Navigation model • Web apps and services • Transaction design • Visual design • Visual design and layout • Utilities • Branding • Lots of other stuff… • System performance

Benefits of prototyping • Verifies or disproves assumptions • Clarifies requirements – helps set expectations and avoid confusion • Helps identify issues early on • Brings user perspective early in the process • Minimizes risks/costs • Keeps coding rework to a minimum

The Prototyping Process Jonathan Arnowitz

The Prototyping Process “Best practice prototyping requires a process -- an effective one. Prototyping should not be a random act of design.”

Prototyping Process • Phase 1: Plan - Decide what you want to prototype • Phase 2: Prepare - Decide how you want to prototype • Phase 3: Design - Create a prototype • Phase 4: Results - Decide what to do next

Prototyping | Waterfall Prototyping steps (not waterfall steps) Requirements Design Build Test Understand Users Design UIs Build Prototype Ensure Usability Measure design improvement Develop UI specifications Validate prototypes Create iterative prototypes Validate task scenarios/flows Create task scenarios/flows Define requirements Conduct field studies/focus groups

Prototyping steps (not waterfall steps) Understand Users Design UIs Build Prototype Ensure Usability

Agile Development 23

Agile Development 24

Prototyping process Phase 1: Plan • Verify requirements • Define user or user group • Develop task flows and scenarios

Types of prototyping requirements Four main types of requirements (which are contradictory a fact which should be recognized not swept under the carpet) •Business/marketing •Functional •Technical •Usability

Business/marketing requirements Generally derived from market ﬁeld research, market analysis, competitive analysis, domain expertise, sales force intelligence, focus groups and other means. • Regulatory and policy requirements; e.g. accessibility, localization, etc. • Branding considerations • Marketability and salability potential • And others…

Functional requirements The functions required to support business or marketing requirements, such as the ability to: • Fetch and read mail • Engage with a transaction process • Tabulate and manage game points • Schedule and manage time • And gazillions of others…

Technical Requirements Deﬁnes the technology needed to provide the required functionality: • Software architecture considerations • Platform considerations • Development tool considerations • Optimal performance • And other technical considerations…

Usability Requirements Deﬁnes the user experience and usability needs for customer and user adoption of the software: • Ease of use • Learnability • Pragmatics • Satisfaction/pleasure • Cognitive and ergonomic considerations

Deﬁne users How to get information about your users: • Conduct user research -- site visits, etc. • Get info from ﬁeld engineers and sales force • Participate in user group forums

Develop Task Flows and Scenarios

Prototyping process Phase 2: Prepare • Determine characteristics • Choose a method • Choose a tool

Define content and fidelity Low fidelity (wireframe) High fidelity

Fidelity Matrix Fidelity Content Low Medium High Visual Design 1 2 3 4 5 6 7 Interaction 1 2 3 4 5 6 7 Design Information 1 2 3 4 5 6 7 Design Editorial Content 1 2 3 4 5 6 7 System 1 2 3 4 5 6 7 Performance

Determine Characteristics • Audience: Internal/External • Stage: Early/Midterm/Late • Speed: Rapid/Diligent • Longevity: Short/Medium/Long • Expression: Conceptual/Experiential • Fidelity: Low/Medium/High • Style: Narrative/Interactive • Medium: Physical/Digital

Choose a Method The method of prototyping you use will change as your software product develops and evolves. • Card sorting •Blank model prototyping • Wireframe prototyping •Video prototyping • Storyboard prototyping •Wizard of Oz prototyping • Paper prototyping •Coded prototyping (including scripting and HTML) • Digital prototyping

Card Sorting

Wireframe Prototyping

Storyboard Prototyping

Paper Prototyping

Digital Prototyping

Blank Model Prototyping

Video Prototyping

Wizard of Oz Prototyping

Coded Prototyping

Choose a Prototyping Tool •Word •VisualBasic •PowerPoint •HTML Editor •Excel •Dreamweaver •Visio •Flex •Paper •Director •Acrobat •Java •Photoshop •VisualStudio •QuickTime

Choose a Prototyping Tool The right tool for the right method… Tools Storyboard Wireframe Visualization Paper Wizard of Oz Blank model Coded Word ++ + - ++ 0 0 - PowerPoint +++ ++ + ++ ++ 0 - Excel + +++ ++ + ++ 0 0 Visio + +++ 0 + 0 0 + Paper ++ +++ 0 +++ 0 + 0 Acrobat +++ ++ ++ ++ ++ 0 + Photoshop + + +++ + + 0 + QuickTime + 0 +++ 0 +++ 0 ++ VisualBasic - ++ ++ + + 0 +++ HTML Editor ++ ++ + - - 0 ++ Dreamweaver ++ ++ ++ - - 0 +++ Flex + ++ - - + + +++ Director ++ ++ - - + + +++ Java - - - - - - +++ VisualStudio - - - - + - +++

Prototyping process Phase 3: Design • Select the design criteria • Create the design • Build the prototype

Select Design Criteria Interaction design criteria: Visual design criteria: • Information flow • Users should feel in control • Grid-based organization • Complex info should be progressively disclosed • Harmonious rhythm and pattern • Interaction and navigation should be efficient • Unity and variety • Minimize user’s memory load • Typography • Speak the user’s language • Balance • Explicitly show required actions and fields • Logical grouping • User interfaces should be accessible

Exercise 3 On yet another sheet of paper • Make a quick sketch prototype of another screen in a contact management system • Feedback on your screen design is positive for functionality and information However new VC money has arrived with new requirements: • The information will be displayed on a mobile device • It will feature emergency contacts for the elderly • This prototype you want to show the product manager and check for all functional requirements

Prototyping process Phase 4: Results • Deﬁne and communicate results to stakeholders • Validate with domain experts and users as needed • Ensure most effective transfer of prototyping results to next steps, including: •Deﬁnition of a new product •Another prototype •Development of the product

Prototyping success Prototyping success depends on: • Well deﬁned objectives and areas of responsibility regarding who owns the prototype • Team trust, empathy, and open mindedness • Collaboration and communication with all key stakeholders • Effective Prototyping Strategy • All supported by a common understanding of prototyping tools and methods

The Book: Available now at your favorite bookseller.

Rapid Prototyping in Excel Nevin Berger

Prototyping in Excel? I can’t picture it! • Usual reaction • Traditionally the tool of choice for managers and accountants • Re-inventing an old tool to a new purpose • A new way of using features you may have used many time before • How Excel prototyping got started • Mark Miller and the Enforcer • How it has evolved • Built a methodology for building prototypes in Excel

Benefits of using Excel as a prototyping tool • Short learning curve – existing expertise • Easy access, Excel is often standard issue • Can create low to middle fidelities • Can create interactive prototypes • Supports iterative prototyping because can be very easy and fast to use • Workbook is self-contained file • Includes all the elements needed to create a prototype • The prototype • Annotations that support the requirements document

Application features that support prototyping • Can create customized color palette • Can easily color table cells and put borders on cells to create designs • Table cell designs can easily be cut and pasted for rapid design • Has scrollable canvas to meet all design size needs • Can create simple graphics or use graphics from other programs • Has hyperlink functionality for linking between pages • Enforces a grid that is ﬂexible for alignment of graphics and text • Has robust text tools • Has a presentation mode

What Excel cannot do • Create complicated graphics • Need to rely on graphical programs • Limited animation effects • PowerPoint • Ways around this limitation • Limited interactivity • Compared to Dreamweaver or other HTML programs • Have to be creative in interactivity • Limited digital testing ability

The End • To get these samples plus copy of our presentation go to: • http:www.effectiveprototyping.com • Go to the forum and register • Registration is for anti-spam purposes. We will never contact you by email unless you let us (opt-in) 85

http://business901.com	250
http://www.slideshare.net	7
http://feeds.feedburner.com	6
http://processequipmentmarketing.com	3
http://moodle.cpcc.edu	2
http://www.techgig.com	2
http://www.customerthink.com	1
http://business901.blogspot.com	1
http://yourmarketingmachine.blogspot.com	1

Effective Prototyping Process for Software Creation

by Jonathan Arnowitz on Oct 20, 2009

Accessibility

Categories

Tags

Upload Details

Usage Rights

9 Embeds 273

Statistics

Effective Prototyping Process for Software Creation — Presentation Transcript