• Save
Effective Prototyping Process for Software Creation
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Effective Prototyping Process for Software Creation

on

  • 12,660 views

A short version of the Effective Prototyping process as covered in the book by Arnowitz, Arent, and Berger: Effective Prototyping for Software Makers.

A short version of the Effective Prototyping process as covered in the book by Arnowitz, Arent, and Berger: Effective Prototyping for Software Makers.

Statistics

Views

Total Views
12,660
Views on SlideShare
12,283
Embed Views
377

Actions

Likes
48
Downloads
1
Comments
3

16 Embeds 377

http://business901.com 305
http://www.linkedin.com 14
http://moodle.unitec.ac.nz 11
http://processequipmentmarketing.com 8
https://www.linkedin.com 7
http://www.slideshare.net 7
http://business901.blogspot.com 7
http://feeds.feedburner.com 6
http://www.techgig.com 4
http://moodle.cpcc.edu 2
http://www.customerthink.com 1
http://yourmarketingmachine.blogspot.in 1
http://business901.blogspot.co.at 1
http://yourmarketingmachine.blogspot.mx 1
http://www.twylah.com 1
http://yourmarketingmachine.blogspot.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • Sorry everyone, traffic did not justify keeping the site so I moved the templates to here:
    http://arnoland.blogspot.com
    Are you sure you want to
    Your message goes here
    Processing…
  • Thanks for your presentation, I would like to download your presentation and the prototyping files, but I could not get through your website www.effectiveprototyping.com. Anyway, thanks again.
    Are you sure you want to
    Your message goes here
    Processing…
  • it can help me in FYP
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Effective Prototyping Process for Software Creation Presentation Transcript

  • 1. Effective Prototyping definition • best practices • tools Jonathan Arnowitz • Michael Arent • Nevin Berger SF Bay IxDA/BayCHI Google, Mountain View 16 January 2008 1
  • 2. Agenda • Forward • What is prototyping, who does it and why? (Michael Arent) • Prototyping Process (Jonathan Arnowitz) • Rapid Prototyping with Excel (Nevin Berger) • Q&A
  • 3. 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
  • 4. 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.
  • 5. What is prototyping, who does it and why?
  • 6. What is a prototype: the dictionary Definition 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 Definition 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)
  • 7. 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
  • 8. 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
  • 9. 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.
  • 10. 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 certificate 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.
  • 11. 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.
  • 12. 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
  • 13. What is prototyping? + Engineering Design Focuses on functions, features and Focuses on product experience technical capabilities. and usability.
  • 14. 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…
  • 15. 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.
  • 16. 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
  • 17. 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
  • 18. The Prototyping Process Jonathan Arnowitz
  • 19. The Prototyping Process “Best practice prototyping requires a process -- an effective one. Prototyping should not be a random act of design.”
  • 20. 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
  • 21. 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
  • 22. Prototyping steps (not waterfall steps) Understand Users Design UIs Build Prototype Ensure Usability
  • 23. Prototyping steps (not waterfall steps) Understand Users Design UIs Build Prototype Ensure Usability
  • 24. Agile Development 23
  • 25. Agile Development 24
  • 26. Agile Development 24
  • 27. Prototyping process Phase 1: Plan • Verify requirements • Define user or user group • Develop task flows and scenarios
  • 28. 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
  • 29. Business/marketing requirements Generally derived from market field 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…
  • 30. 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…
  • 31. Technical Requirements Defines the technology needed to provide the required functionality: • Software architecture considerations • Platform considerations • Development tool considerations • Optimal performance • And other technical considerations…
  • 32. Usability Requirements Defines 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
  • 33. Define users How to get information about your users: • Conduct user research -- site visits, etc. • Get info from field engineers and sales force • Participate in user group forums
  • 34. Develop Task Flows and Scenarios
  • 35. Prototyping process Phase 2: Prepare • Determine characteristics • Choose a method • Choose a tool
  • 36. Define content and fidelity Low fidelity (wireframe) High fidelity
  • 37. Define content and fidelity Low fidelity (wireframe) High fidelity
  • 38. 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
  • 39. 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
  • 40. 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
  • 41. Card Sorting
  • 42. Wireframe Prototyping
  • 43. Storyboard Prototyping
  • 44. Paper Prototyping
  • 45. Digital Prototyping
  • 46. Blank Model Prototyping
  • 47. Video Prototyping
  • 48. Wizard of Oz Prototyping
  • 49. Coded Prototyping
  • 50. Choose a Prototyping Tool •Word •VisualBasic •PowerPoint •HTML Editor •Excel •Dreamweaver •Visio •Flex •Paper •Director •Acrobat •Java •Photoshop •VisualStudio •QuickTime
  • 51. 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 - - - - + - +++
  • 52. Prototyping process Phase 3: Design • Select the design criteria • Create the design • Build the prototype
  • 53. 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
  • 54. 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
  • 55. Prototyping process Phase 4: Results • Define and communicate results to stakeholders • Validate with domain experts and users as needed • Ensure most effective transfer of prototyping results to next steps, including: •Definition of a new product •Another prototype •Development of the product
  • 56. Prototyping success Prototyping success depends on: • Well defined 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
  • 57. The Book: Available now at your favorite bookseller.
  • 58. Rapid Prototyping in Excel Nevin Berger
  • 59. 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
  • 60. 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
  • 61. 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 flexible for alignment of graphics and text • Has robust text tools • Has a presentation mode
  • 62. 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
  • 63. 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