SlideShare a Scribd company logo
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
Creating low and medium fidelity prototypes
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

More Related Content

PDF
Wordress.com alkeet ja sosiaalisen median lyhyt historia
Valeria Gasik
 
PPT
HCE
cworkmanq
 
PDF
Facebook survey – What questions people ask on walls?
Valeria Gasik
 
PPS
Gimnasia olimpica
emmanuel_macias
 
PPT
Padharo Mhaare Des
anuvratbhansali
 
PPT
Mengatasi masalah spamming
Ardhany Ervannudin
 
KEY
Working on ideas
Valeria Gasik
 
PPT
Lupus diet
cmarny
 
Wordress.com alkeet ja sosiaalisen median lyhyt historia
Valeria Gasik
 
Facebook survey – What questions people ask on walls?
Valeria Gasik
 
Gimnasia olimpica
emmanuel_macias
 
Padharo Mhaare Des
anuvratbhansali
 
Mengatasi masalah spamming
Ardhany Ervannudin
 
Working on ideas
Valeria Gasik
 
Lupus diet
cmarny
 

Viewers also liked (7)

PDF
TWS 2014 – Paper Prototyping
Valeria Gasik
 
PDF
MariaDB 10.1 - что нового.
Sergey Petrunya
 
PPTX
W3 c geolocation api
Nikhil Khokale
 
KEY
Ubiquitous computing
Valeria Gasik
 
PDF
Interaction Design's Work
Valeria Gasik
 
PDF
Common Table Expressions in MariaDB 10.2 (Percona Live Amsterdam 2016)
Sergey Petrunya
 
DOC
Silabus adm-kkadper-yang-betul
Eman Suherman
 
TWS 2014 – Paper Prototyping
Valeria Gasik
 
MariaDB 10.1 - что нового.
Sergey Petrunya
 
W3 c geolocation api
Nikhil Khokale
 
Ubiquitous computing
Valeria Gasik
 
Interaction Design's Work
Valeria Gasik
 
Common Table Expressions in MariaDB 10.2 (Percona Live Amsterdam 2016)
Sergey Petrunya
 
Silabus adm-kkadper-yang-betul
Eman Suherman
 
Ad

More from Valeria Gasik (18)

PDF
What's UX anyway?
Valeria Gasik
 
PDF
Low Fidelity Prototyping with Paper
Valeria Gasik
 
PDF
User Research: Personas, scenarios, user stories
Valeria Gasik
 
PDF
Paper Prototyping Basics (IxDworks.com)
Valeria Gasik
 
PDF
Testing Paper Prototypes (IxDworks.com)
Valeria Gasik
 
PDF
Personas, Scenarios, User Stories, Use Cases (IxDworks.com)
Valeria Gasik
 
PDF
TWS 2014 – Testing paper prototypes
Valeria Gasik
 
PDF
TWS 2014 – Personas, scenarios, user stories
Valeria Gasik
 
PDF
TWS 2014: Interaction Design, brief introduction
Valeria Gasik
 
PDF
TSS 2013 – Paper Prototyping
Valeria Gasik
 
PDF
TSS 2013 – IxD, Personas, Scenarios, User Stories and Use Cases
Valeria Gasik
 
PDF
TSS 2013 – Interactive Design Tools
Valeria Gasik
 
KEY
Introduction to interaction design
Valeria Gasik
 
KEY
Creating Low Fidelity Prototypes
Valeria Gasik
 
KEY
01 new media-design
Valeria Gasik
 
KEY
Summer School 2012 Introduction
Valeria Gasik
 
PDF
Web interaction design from graphic designer's perspective
Valeria Gasik
 
PDF
Paper prototype
Valeria Gasik
 
What's UX anyway?
Valeria Gasik
 
Low Fidelity Prototyping with Paper
Valeria Gasik
 
User Research: Personas, scenarios, user stories
Valeria Gasik
 
Paper Prototyping Basics (IxDworks.com)
Valeria Gasik
 
Testing Paper Prototypes (IxDworks.com)
Valeria Gasik
 
Personas, Scenarios, User Stories, Use Cases (IxDworks.com)
Valeria Gasik
 
TWS 2014 – Testing paper prototypes
Valeria Gasik
 
TWS 2014 – Personas, scenarios, user stories
Valeria Gasik
 
TWS 2014: Interaction Design, brief introduction
Valeria Gasik
 
TSS 2013 – Paper Prototyping
Valeria Gasik
 
TSS 2013 – IxD, Personas, Scenarios, User Stories and Use Cases
Valeria Gasik
 
TSS 2013 – Interactive Design Tools
Valeria Gasik
 
Introduction to interaction design
Valeria Gasik
 
Creating Low Fidelity Prototypes
Valeria Gasik
 
01 new media-design
Valeria Gasik
 
Summer School 2012 Introduction
Valeria Gasik
 
Web interaction design from graphic designer's perspective
Valeria Gasik
 
Paper prototype
Valeria Gasik
 
Ad

Recently uploaded (20)

PDF
William Trowell - A Construction Project Manager
William Trowell
 
PDF
Data Sheet Cloud Integration Platform - dataZap
Chainsys SEO
 
PDF
GenAI for Risk Management: Refresher for the Boards and Executives
Alexei Sidorenko, CRMP
 
PDF
bain-temasek-sea-green-economy-2022-report-investing-behind-the-new-realities...
YudiSaputra43
 
PDF
TEST BANK FOR INTERMEDIATE ACCOUNTING 11TH EDITION BY DAVID SPICELAND MARK NE...
mboogey861
 
PPTX
Financial Management for business management .pptx
Hasibullah Ahmadi
 
PPTX
Communications Recruiter Melbourne.pptx
ReithGordon
 
PPTX
Pakistan’s Leading Manpower Export Agencies for Qatar
Glassrooms Dubai
 
PPTX
E-Way Bill under GST – Transport & Logistics.pptx
Keerthana Chinnathambi
 
PPTX
Chapter 3 Distributive Negotiation: Claiming Value
badranomar1990
 
PDF
Keppel Ltd. 1H 2025 Results Presentation Slides
KeppelCorporation
 
PPTX
Presentation - Business Intelligence Solutions 007.pptx
FBSPL
 
PPTX
Keynote: CATHOLIC UNIVERSITY: A PLACE OF CREATIVITY AND KNOWLEDGE
Alvaro Barbosa
 
PPTX
E-commerce and its impact on business.
pandeyranjan5483
 
PDF
Unveiling the Latest Threat Intelligence Practical Strategies for Strengtheni...
Auxis Consulting & Outsourcing
 
PDF
From Risk to Opportunity: How Cybersecurity Enhances Your Staffing Business
Withum
 
PPTX
BUSINESS FINANCE POWER POINT PRESENTATION
JethSrey
 
PDF
Tariff Surcharge and Price Increase Decision
Joshua Gao
 
PDF
Rodolfo Belcastro su All Around The Worlds Magazine - Febbraio 2025
Rodolfo Belcastro
 
PPTX
Memorandum and articles of association explained.pptx
Keerthana Chinnathambi
 
William Trowell - A Construction Project Manager
William Trowell
 
Data Sheet Cloud Integration Platform - dataZap
Chainsys SEO
 
GenAI for Risk Management: Refresher for the Boards and Executives
Alexei Sidorenko, CRMP
 
bain-temasek-sea-green-economy-2022-report-investing-behind-the-new-realities...
YudiSaputra43
 
TEST BANK FOR INTERMEDIATE ACCOUNTING 11TH EDITION BY DAVID SPICELAND MARK NE...
mboogey861
 
Financial Management for business management .pptx
Hasibullah Ahmadi
 
Communications Recruiter Melbourne.pptx
ReithGordon
 
Pakistan’s Leading Manpower Export Agencies for Qatar
Glassrooms Dubai
 
E-Way Bill under GST – Transport & Logistics.pptx
Keerthana Chinnathambi
 
Chapter 3 Distributive Negotiation: Claiming Value
badranomar1990
 
Keppel Ltd. 1H 2025 Results Presentation Slides
KeppelCorporation
 
Presentation - Business Intelligence Solutions 007.pptx
FBSPL
 
Keynote: CATHOLIC UNIVERSITY: A PLACE OF CREATIVITY AND KNOWLEDGE
Alvaro Barbosa
 
E-commerce and its impact on business.
pandeyranjan5483
 
Unveiling the Latest Threat Intelligence Practical Strategies for Strengtheni...
Auxis Consulting & Outsourcing
 
From Risk to Opportunity: How Cybersecurity Enhances Your Staffing Business
Withum
 
BUSINESS FINANCE POWER POINT PRESENTATION
JethSrey
 
Tariff Surcharge and Price Increase Decision
Joshua Gao
 
Rodolfo Belcastro su All Around The Worlds Magazine - Febbraio 2025
Rodolfo Belcastro
 
Memorandum and articles of association explained.pptx
Keerthana Chinnathambi
 

Creating low and medium fidelity prototypes

  • 1. Compiled with the assistance of the Tiger University Program of the Estonian Information Technology Foundation
  • 2. Ülikooli logo PANTONE 1807 PANTONE Black ess
  • 3. Creating and Testing Low or Medium Fidelity Prototypes Recap Ilya Shmorgun,Valeria Gasik, David Lamas
  • 4. Topics • Low fidelity prototypes • Medium fidelity prototypes • Testing prototypes
  • 6. Sketch • A rough or 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
  • 11. Tap the Back button Tap the Camera button Tap the lecture name Start Tap the Scan button
  • 13. 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
  • 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
  • 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 and paper • OmniGraffle • Balsamiq • Mockingbird
  • 20. 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
  • 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 • Low fidelity prototypes • Medium fidelity prototypes • Testing prototypes
  • 24. 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

Editor's Notes