Compiled with the assistance of the Tiger University Program of the Estonian
                   Information Technology Foundation
Ülikooli logo




                PANTONE 1807
                PANTONE Black


ess
Creating and Testing Low
  or Medium Fidelity
   Prototypes Recap
  Ilya Shmorgun,Valeria Gasik, David Lamas
Topics

• Low fidelity prototypes
• Medium fidelity prototypes
• Testing prototypes
Low Fidelity Prototypes
Sketch


• A rough or unfinished drawing or painting
• Often created to assist in making a more
  finished picture
Things to Remember

• A sketch is disposable
• Draw as many variations as possible
• Don’t go into too much detail
Example
Defining the
Interactions
Tap the Back button




        Tap the Camera button
                                 Tap the lecture name
Start




           Tap the Scan button
Medium Fidelity
 Prototypes
Wireframe

• A visual guide that represents the skeletal
  framework of a website or an application
• Usually lacks typographic style, color, or
  graphics
• The main focus lies in functionality,
  behavior, and priority of content
Example
4:20PM                                           4:20PM

              mTLU             Done     Back                   mTLU                        Done


                                        IFI7038
                                        21. sajandi käsitlusi informatsioonist ja täh...
                        16:15 - 19:45
IFI7038
                                        Lorem ipsum
21. sajandi käsitlusi inf...
                                        Nullam id dolor id nibh ultricies vehicula ut id elit. Duis
Teng Jaan
                                        mollis, est non commodo luctus, nisi erat porttitor
                                        ligula, eget lacinia odio sem nec elit. Maecenas
                                        faucibus mollis interdum. Morbi leo risus, porta ac
                                        consectetur ac, vestibulum at eros. Integer posuere
        Nothing else today              erat a ante venenatis dapibus posuere velit aliquet.
                                        Donec id elit non mi porta gravida at eget metus.
                                        Lorem ipsum
                                        Nullam id dolor id nibh ultricies vehicula ut id elit. Duis
                                        mollis, est non commodo luctus, nisi erat porttitor
                                        ligula, eget lacinia odio sem nec elit. Maecenas
                                        faucibus mollis interdum. Morbi leo risus, porta ac
                                        consectetur ac, vestibulum at eros. Integer posuere
                                        erat a ante venenatis dapibus posuere velit aliquet.
                                        Donec id elit non mi porta gravida at eget metus.




        Thu     Fri     Sat
Defining the
Interactions
4:20PM                                      4:20PM                                                                 4:20PM

                                                    mTLU           Done                            Back                   mTLU                        Done

                                                                                Tap the Back
                                                                                                   IFI7038
                                                                                      button       21. sajandi käsitlusi informatsioonist ja täh...
                                                            16:15 - 19:45
                                      IFI7038
                                                                                                   Lorem ipsum
                                      21. sajandi käsitlusi inf...
                                                                                                   Nullam id dolor id nibh ultricies vehicula ut id elit. Duis
                                      Teng Jaan
                                                                                                   mollis, est non commodo luctus, nisi erat porttitor
                                                                                                   ligula, eget lacinia odio sem nec elit. Maecenas
                                                                                                   faucibus mollis interdum. Morbi leo risus, porta ac
                                                                                                   consectetur ac, vestibulum at eros. Integer posuere
                                              Nothing else today            Tap the lecture        erat a ante venenatis dapibus posuere velit aliquet.
                                                                                                   Donec id elit non mi porta gravida at eget metus.
                                                                            name                   Lorem ipsum
                                                                                                   Nullam id dolor id nibh ultricies vehicula ut id elit. Duis
Start                                                                                              mollis, est non commodo luctus, nisi erat porttitor
                 Tap the Camera                                                                    ligula, eget lacinia odio sem nec elit. Maecenas
                                                                                                   faucibus mollis interdum. Morbi leo risus, porta ac
                 button                                                                            consectetur ac, vestibulum at eros. Integer posuere
                                                                                                   erat a ante venenatis dapibus posuere velit aliquet.
                                                                                                   Donec id elit non mi porta gravida at eget metus.




                                              Thu    Fri     Sat


                      Tap the Done
                             button

                                                    4:20PM                                                                  4:20PM

                                                    mTLU            Done                                                   mTLU                       Done




                                      IFI7038               16:15 - 19:45
                                      21. sajandi käsitlusi inf...
                                      Teng Jaan



                                      IFI7038               16:15 - 19:45
                                                                                     Tap the Fri
                                      21. sajandi käsitlusi inf...
                                      Teng Jaan                                          button                 No lectures today

                                                            16:15 - 19:45
                                      IFI7038
                                      21. sajandi käsitlusi inf...
                                      Teng Jaan




                                              Nothing else today

                                              Thu    Fri     Sat                                                Thu           Fri        Sat



                                                                            Tap the Sat button
Tools

• Pen and paper
• OmniGraffle
• Balsamiq
• Mockingbird
Testing Prototypes
Why do you need to
       test?
• You don’t know your users
• You assume too much
• You have no idea what your users will
  stumble upon
• Creating personas is no substitute for real
  user feedback
Preparing for Testing
Preparing for Testing
•   Write several tasks, which will allow a user to
    test all aspects of your prototype
•   Write an introduction to your application
•   Decide who will moderate the testing and
    who will take notes
•   Test your prototype with at least three people
•   The optimal number of testers is 5+
Topics Covered

• Low fidelity prototypes
• Medium fidelity prototypes
• Testing prototypes
Assignment
• Choose a platform for your application (iOS,
  Android, Windows Phone)
• Create sketches or wireframes
• Put them in a state transition diagram
• Make a clickable prototype
• Prepare a testing session
• Test the prototype

Creating low and medium fidelity prototypes

  • 1.
    Compiled with theassistance of the Tiger University Program of the Estonian Information Technology Foundation
  • 2.
    Ülikooli logo PANTONE 1807 PANTONE Black ess
  • 3.
    Creating and TestingLow or Medium Fidelity Prototypes Recap Ilya Shmorgun,Valeria Gasik, David Lamas
  • 4.
    Topics • Low fidelityprototypes • Medium fidelity prototypes • Testing prototypes
  • 5.
  • 6.
    Sketch • A roughor unfinished drawing or painting • Often created to assist in making a more finished picture
  • 7.
    Things to Remember •A sketch is disposable • Draw as many variations as possible • Don’t go into too much detail
  • 8.
  • 10.
  • 11.
    Tap the Backbutton Tap the Camera button Tap the lecture name Start Tap the Scan button
  • 12.
  • 13.
    Wireframe • A visualguide that represents the skeletal framework of a website or an application • Usually lacks typographic style, color, or graphics • The main focus lies in functionality, behavior, and priority of content
  • 14.
  • 15.
    4:20PM 4:20PM mTLU Done Back mTLU Done IFI7038 21. sajandi käsitlusi informatsioonist ja täh... 16:15 - 19:45 IFI7038 Lorem ipsum 21. sajandi käsitlusi inf... Nullam id dolor id nibh ultricies vehicula ut id elit. Duis Teng Jaan mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Maecenas faucibus mollis interdum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Integer posuere Nothing else today erat a ante venenatis dapibus posuere velit aliquet. Donec id elit non mi porta gravida at eget metus. Lorem ipsum Nullam id dolor id nibh ultricies vehicula ut id elit. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Maecenas faucibus mollis interdum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Donec id elit non mi porta gravida at eget metus. Thu Fri Sat
  • 16.
  • 17.
    4:20PM 4:20PM 4:20PM mTLU Done Back mTLU Done Tap the Back IFI7038 button 21. sajandi käsitlusi informatsioonist ja täh... 16:15 - 19:45 IFI7038 Lorem ipsum 21. sajandi käsitlusi inf... Nullam id dolor id nibh ultricies vehicula ut id elit. Duis Teng Jaan mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Maecenas faucibus mollis interdum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Integer posuere Nothing else today Tap the lecture erat a ante venenatis dapibus posuere velit aliquet. Donec id elit non mi porta gravida at eget metus. name Lorem ipsum Nullam id dolor id nibh ultricies vehicula ut id elit. Duis Start mollis, est non commodo luctus, nisi erat porttitor Tap the Camera ligula, eget lacinia odio sem nec elit. Maecenas faucibus mollis interdum. Morbi leo risus, porta ac button consectetur ac, vestibulum at eros. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Donec id elit non mi porta gravida at eget metus. Thu Fri Sat Tap the Done button 4:20PM 4:20PM mTLU Done mTLU Done IFI7038 16:15 - 19:45 21. sajandi käsitlusi inf... Teng Jaan IFI7038 16:15 - 19:45 Tap the Fri 21. sajandi käsitlusi inf... Teng Jaan button No lectures today 16:15 - 19:45 IFI7038 21. sajandi käsitlusi inf... Teng Jaan Nothing else today Thu Fri Sat Thu Fri Sat Tap the Sat button
  • 18.
    Tools • Pen andpaper • OmniGraffle • Balsamiq • Mockingbird
  • 19.
  • 20.
    Why do youneed to test? • You don’t know your users • You assume too much • You have no idea what your users will stumble upon • Creating personas is no substitute for real user feedback
  • 21.
  • 22.
    Preparing for Testing • Write several tasks, which will allow a user to test all aspects of your prototype • Write an introduction to your application • Decide who will moderate the testing and who will take notes • Test your prototype with at least three people • The optimal number of testers is 5+
  • 23.
    Topics Covered • Lowfidelity prototypes • Medium fidelity prototypes • Testing prototypes
  • 24.
    Assignment • Choose aplatform for your application (iOS, Android, Windows Phone) • Create sketches or wireframes • Put them in a state transition diagram • Make a clickable prototype • Prepare a testing session • Test the prototype