Introduction to
                          Prototyping


                               UX Meetup
                         September 1, 2011


Alexis Antonelli, User Experience Consultant
What is a prototype?

 A scenario-based simulation that allows a person
 to experience chosen aspects of a potential
 product.



“Prototypes don’t have to be clever or sophisticated, so
long as you can be when you present or test them.”




2                           Introduction to Prototyping | UX Meetup 9/01/11
Why prototype?


    Because the only constant is change




    The earlier in the process you make
             changes, the better




3                     Introduction to Prototyping | UX Meetup 9/01/11
What’s the difference between sketches,
wireframes, and prototypes?

    Paper isn’t necessarily a wireframe and
     clickable screens aren’t necessarily a prototype
    It’s about process and purpose
    It helps to use verbs:
         Sketching or Wireframing: brainstorming,
          ideating, mocking up, laying out, documenting
         Prototyping: Modeling, simulating, demonstrating,
          evaluating, testing




 4                               Introduction to Prototyping | UX Meetup 9/01/11
Continuum
     Paper Based            Screen Based



     Sketch or Wireframe    Clickable Wireframe




     Paper Prototype        Interactive Prototype




5                          Introduction to Prototyping | UX Meetup 9/01/11
What about fidelity?
fi·del·i·ty (Noun):
The degree of resemblance to the final product.




6                        Introduction to Prototyping | UX Meetup 9/01/11
Dimensions of fidelity

        Visual
         (Low: sketches High: graphics, branding)
        Functional
         (Low: static pages High: dynamic states, loading
         screens)
        Content/Data
         (Low: lorem ipsum High: real prices, copy)

        Breadth

        Depth

     7                           Introduction to Prototyping | UX Meetup 9/01/11
Types of prototypes

    Paper-based (Paper prototype video)
    Screen-based (Screen prototype example)
    Combo


    Rapid, throwaway or closed-ended prototype
    Evolutionary prototype




 8                            Introduction to Prototyping | UX Meetup 9/01/11
Uses for prototyping

    Put requirements into a visual language
    Interaction modeling
    Demo an upcoming or potential product
    Usability testing
    Internal or client review




 9                          Introduction to Prototyping | UX Meetup 9/01/11
The prototyping process
    Start with a purpose and goal for the prototype
     and write it down, stay on target. Are you
     testing, communicating, demonstrating, etc?
    Who is the audience?
    Sketch or wireframe before you build
    Choose scenarios
    Choose fidelities
    Build
    Don’t go overboard, more is not more


 10                         Introduction to Prototyping | UX Meetup 9/01/11
Prototyping for Usability Testing
     May or may not have a prototype to start with
     Set test goals, plan, scenarios, participants, etc.
     If built, expect to have to adjust for testing
     (Choose fidelities, build)
     Tell participants up front that it is a prototype
     If participants go somewhere not built, remind
      them it’s a prototype and gather data




     11                          Introduction to Prototyping | UX Meetup 9/01/11
Who should prototype?
    Speed
    Resources
    What needs to be prototyped




 12                        Introduction to Prototyping | UX Meetup 9/01/11
Thank you!


              Alexis Antonelli
         User Experience Consultant
              uxconsultant.com
           aa@uxconsultant.com

            Axure RP 6 Training
              September 24 in LA
     uxconsultant.com/AxureTraining.html




13                     Introduction to Prototyping | UX Meetup 9/01/11
References
     Prototyping: A Practitioner's Guide
      Todd Zaki Warfel, 2009
     Paper Prototyping: The Fast and Easy Way to Design and Refine User Experience
      Carolyn Snyder, 2003
     Breaking the Fidelity Barrier: An Examination of Our Current Characterization of
      Prototypes and an Example of Mixed Fidelity Success
      CHI 2006 Proceedings
      McCurdy, Connors, Pyrzak, Kanefsky, Vera, 2006
     Usability Problem Identification Using Both Low and High Fidelity Prototypes
      Proceedings of the SIGCHI Conference on Human Factors in Computing Systems
      Virzi, Sokolov, Karis, 1996
     Introduction to Prototyping, Scottish UPA
      http://www.slideshare.net/neil00allison/introduction-to-prototyping-scottish-upa-
      june-2011
      Neil Allison, 2011
     Managing Change with Axure (AA RT 1.2)
      http://www.axureworld.org/library/category/axureworld-2010
      Dhawal Shah, 2010




     14                                            Introduction to Prototyping | UX Meetup 9/01/11

Introduction to prototyping

  • 1.
    Introduction to Prototyping UX Meetup September 1, 2011 Alexis Antonelli, User Experience Consultant
  • 2.
    What is aprototype? A scenario-based simulation that allows a person to experience chosen aspects of a potential product. “Prototypes don’t have to be clever or sophisticated, so long as you can be when you present or test them.” 2 Introduction to Prototyping | UX Meetup 9/01/11
  • 3.
    Why prototype? Because the only constant is change The earlier in the process you make changes, the better 3 Introduction to Prototyping | UX Meetup 9/01/11
  • 4.
    What’s the differencebetween sketches, wireframes, and prototypes?   Paper isn’t necessarily a wireframe and clickable screens aren’t necessarily a prototype   It’s about process and purpose   It helps to use verbs:   Sketching or Wireframing: brainstorming, ideating, mocking up, laying out, documenting   Prototyping: Modeling, simulating, demonstrating, evaluating, testing 4 Introduction to Prototyping | UX Meetup 9/01/11
  • 5.
    Continuum Paper Based Screen Based Sketch or Wireframe Clickable Wireframe Paper Prototype Interactive Prototype 5 Introduction to Prototyping | UX Meetup 9/01/11
  • 6.
    What about fidelity? fi·del·i·ty(Noun): The degree of resemblance to the final product. 6 Introduction to Prototyping | UX Meetup 9/01/11
  • 7.
    Dimensions of fidelity   Visual (Low: sketches High: graphics, branding)   Functional (Low: static pages High: dynamic states, loading screens)   Content/Data (Low: lorem ipsum High: real prices, copy)   Breadth   Depth 7 Introduction to Prototyping | UX Meetup 9/01/11
  • 8.
    Types of prototypes   Paper-based (Paper prototype video)   Screen-based (Screen prototype example)   Combo   Rapid, throwaway or closed-ended prototype   Evolutionary prototype 8 Introduction to Prototyping | UX Meetup 9/01/11
  • 9.
    Uses for prototyping   Put requirements into a visual language   Interaction modeling   Demo an upcoming or potential product   Usability testing   Internal or client review 9 Introduction to Prototyping | UX Meetup 9/01/11
  • 10.
    The prototyping process   Start with a purpose and goal for the prototype and write it down, stay on target. Are you testing, communicating, demonstrating, etc?   Who is the audience?   Sketch or wireframe before you build   Choose scenarios   Choose fidelities   Build   Don’t go overboard, more is not more 10 Introduction to Prototyping | UX Meetup 9/01/11
  • 11.
    Prototyping for UsabilityTesting   May or may not have a prototype to start with   Set test goals, plan, scenarios, participants, etc.   If built, expect to have to adjust for testing   (Choose fidelities, build)   Tell participants up front that it is a prototype   If participants go somewhere not built, remind them it’s a prototype and gather data 11 Introduction to Prototyping | UX Meetup 9/01/11
  • 12.
    Who should prototype?   Speed   Resources   What needs to be prototyped 12 Introduction to Prototyping | UX Meetup 9/01/11
  • 13.
    Thank you! Alexis Antonelli User Experience Consultant uxconsultant.com aa@uxconsultant.com Axure RP 6 Training September 24 in LA uxconsultant.com/AxureTraining.html 13 Introduction to Prototyping | UX Meetup 9/01/11
  • 14.
    References   Prototyping: A Practitioner's Guide Todd Zaki Warfel, 2009   Paper Prototyping: The Fast and Easy Way to Design and Refine User Experience Carolyn Snyder, 2003   Breaking the Fidelity Barrier: An Examination of Our Current Characterization of Prototypes and an Example of Mixed Fidelity Success CHI 2006 Proceedings McCurdy, Connors, Pyrzak, Kanefsky, Vera, 2006   Usability Problem Identification Using Both Low and High Fidelity Prototypes Proceedings of the SIGCHI Conference on Human Factors in Computing Systems Virzi, Sokolov, Karis, 1996   Introduction to Prototyping, Scottish UPA http://www.slideshare.net/neil00allison/introduction-to-prototyping-scottish-upa- june-2011 Neil Allison, 2011   Managing Change with Axure (AA RT 1.2) http://www.axureworld.org/library/category/axureworld-2010 Dhawal Shah, 2010 14 Introduction to Prototyping | UX Meetup 9/01/11