07 Prototyping. Project P3: Prototyping/Mockup Assignment 4: Fitts Law Experiment // 2015S UE Principles of Interaction. A.

Transcription

1 A. Riener // 2015S UE Principles of Interaction 07 Prototyping Project P3: Prototyping/Mockup Assignment 4: Fitts Law Experiment May 8, 2015 JKU Linz Priv.-Doz. Dipl.-Ing. Dr. Andreas Riener Institute for Pervasive Computing Johannes Kepler University JKU Linz // Principles of Interaction UE // May 8, 2015 // Slide 1 A. Riener

2 Principles of Interaction >> Overview of Assignments & Project Stages Assignments A1: Scientific Literature Research Reading/summarizing a paper [Literature research UE only] One minute madness slide + presentation [Concept presentation: OMM 3 Design] A2: Everyday and Future Appliances Observing everyday interactions (ATM) [Observation methods 5 Deployment] Future appliances: Novel fitness/sports applications (related to PR) [Ideation 2 Analysis] A3: Evaluating with Experts and Users Cognitive walkthrough (Fitness app) [Cognitive walkthrough 3 Design] Think aloud [Think aloud 5 Deployment, UE] A4: Ergonomics of Human-System Interaction Interaction performance analysis [Fitts law 3 Design] [Competences used] JKU Linz // Principles of Interaction UE // May 8, 2015 // Slide 2 A. Riener

3 Principles of Interaction >> Overview of Assignments & Project Stages Group project Changing my Life P1: Brainstorming and Ideation Literature review, problem definition, concept development (photo traces, video) [World Cafe, Mindmap, Lotus blossum 2 Analysis, Concept presentation (video) 3 Design] P2: Evaluation Focus group/questionnaire, final concept with time plan [Focus group 2 Analysis, Questionnaire design 5 Deployment, UE] P3: Prototyping and Mockups Low fidelity (Balsamiq, Wizard of Oz, etc.) [Low fidelity prototyping 3 Design, UE] P4: Analysis and Interpretation User study, results presentation, final paper [Usability testing 3 Design, 5 Deployment, Interpretation/Discussion, Paper writing UE?] [Competences used] JKU Linz // Principles of Interaction UE // May 8, 2015 // Slide 3 A. Riener

4 Assignment 4 Ergonomics of Human-System Interaction (Due date May 22, 2015) JKU Linz // Principles of Interaction UE // May 8, 2015 // Slide 4 A. Riener

5 Assignment >> A4: Ergonomics of Human-System Interaction Please be aware of the Please be aware of due date/time! the due date/time! 2 nd part due May 22 nd JKU Linz // Principles of Interaction UE // May 8, 2015 // Slide 5 A. Riener

6 Assignment >> A4: Ergonomics of Human-System Interaction Fitts law study and evaluation To allow for comparative analysis (results of different participants), the experiments should be carried out under exactly the same conditions! For Fitts experiment, this would mean: Same computer, same display, same mouse, same mouse acceleration speed, same environmental conditions (room, light, temperature, etc.), and so on... This is not possible! (at least not when carried out at individual locations) What we do instead: Agree for a reasonably fixed setting We will use one type of mouse and a specific mouse pad (shared amongst course participants) Setting: Windows system, 15 screen, similar mouse cursor speed, similar execution environment, distinct subjects with same level of experience and same age range (16-35), etc. for details see assignment document! Report any deviations! Commitment in class : Use your own mouse and mousepad, document your setting, e.g., submit (include) a photo with your report JKU Linz // Principles of Interaction UE // May 8, 2015 // Slide 6 A. Riener

7 Assignment >> A4: Ergonomics of Human-System Interaction Fitts law study and evaluation Study execution Invite at least 3 participants; first familiarize yourself with the system/ environment (but don t use your data set for the evaluation!) Fitts law experiment is online, accessible here: PrinciplesOfInteraction/fitts/Fittslaw.html Create and download the cursor log files (one for each series) JKU Linz // Principles of Interaction UE // May 8, 2015 // Slide 7 A. Riener

8 Assignment >> A4: Ergonomics of Human-System Interaction Fitts law study and evaluation Study execution Pre-assigned sequence of study execution (Reason?) 1KI1QcjEGyAMm4BPSCDZvIS0Xa2YfrzPTPQVeKuPf6Z8/edit Example: Erik Reindl starts with 4 (Separated Circle), continues with 3 (Letter O), etc. JKU Linz // Principles of Interaction UE // May 8, 2015 // Slide 8 A. Riener

9 Assignment >> A4: Ergonomics of Human-System Interaction Fitts law study and evaluation Study execution Submission of the first part (until May 8, 2015) Log files of at least 3 participants Questionnaires (ISO Device Assessment Questionnaire ) as scans (PDF) and Excel-files (see assignment for details). Data analysis Second part of A4 Due May 22, 2015 For details on tasks see the assignment document JKU Linz // Principles of Interaction UE // May 8, 2015 // Slide 9 A. Riener

10 Team project Changing my Life P3: Prototyping/Mockup Due date: To be determined (June 5 th, 2015?) JKU Linz // Principles of Interaction UE // May 8, 2015 // Slide 10 A. Riener

11 P3: Prototyping tools (Mockups, Wireframing) Easiest, but inflexible tools - PowerPoint ;-( - Adobe Flash - MS Visio for wireframes - TCL/TK, etc. Popular wireframe software and mockup tool - Axure ( - Balsamiq ( we are using Balsamiq! - Mockup Screens ( - POP - Prototyping on paper ( # iphone prototyping: Desing on paper Take pictures Simulate - irise visualization platform ( - Lots of list of tools: Search Google Mockup tools, Prototyping tools, e.g. # 9 Excellent Tools for Design Mockups Mashable JKU Linz // Principles of Interaction UE // May 8, 2015 // Slide 11 A. Riener

12 Ready to use tool to develop your software/application s user interface mybalsamiq : project-based collaboration and communication - Remote UX Design - Group support - Can be used in Project phase 3 (4) You should have already received an invitation - click on the link and complete registration JKU Linz // Principles of Interaction UE // May 8, 2015 // Slide 12 A. Riener

13 Log in - browse to - enter your address as user name, and your password, click Log in JKU Linz // Principles of Interaction UE // May 8, 2015 // Slide 13 A. Riener

14 Log in - you should see the projects window similar to the one below - enter your address as user name, and your password, click Log in JKU Linz // Principles of Interaction UE // May 8, 2015 // Slide 14 A. Riener

15 Mockups - add a new mockup for each screen of your app(lication) - click on the New Mockup button in the upper right corner JKU Linz // Principles of Interaction UE // May 8, 2015 // Slide 15 A. Riener

16 Mockups - under the top main menu in the tab bar, click on the ios option - drag the iphone image to the main workspace JKU Linz // Principles of Interaction UE // May 8, 2015 // Slide 16 A. Riener

17 Mockups - you want to use controls for the Google Android? download extensions - e.g., JKU Linz // Principles of Interaction UE // May 8, 2015 // Slide 17 A. Riener

18 Mockups - in the main menu of Balsamiq, select the option View and then the Skin option to select the skin you would like to use (sketch, wireframe) JKU Linz // Principles of Interaction UE // May 8, 2015 // Slide 18 A. Riener

19 TTeam Project >> Changing my Life Mockups - use the tab bar to display different GUI components (or you can just select the All option), drag the various components you want on your mockup JKU Linz // Principles of Interaction UE // May 8, 2015 // Slide 19 A. Riener

20 Mockups - when you are done (or whenever you like), click the Save button in the upper left corner of the windows JKU Linz // Principles of Interaction UE // May 8, 2015 // Slide 20 A. Riener

21 Mockups - change the name for New mockup to something that reflects the name of this screen such as Main for the main screen of your app(lication) JKU Linz // Principles of Interaction UE // May 8, 2015 // Slide 21 A. Riener

22 Upload your own images - in the main menu, select the option Project and then Close Editor - back on the project page, click on the option Assets (upper right corner) JKU Linz // Principles of Interaction UE // May 8, 2015 // Slide 22 A. Riener

23 Upload your own images - click on the Upload button, find and select your file(s), click Choose - Your uploaded images will now be available under the Project Assets option JKU Linz // Principles of Interaction UE // May 8, 2015 // Slide 23 A. Riener

24 Upload your own images - click on the Upload button, find and select your file(s), click Choose - your uploaded images will now be available under the Project Assets option JKU Linz // Principles of Interaction UE // May 8, 2015 // Slide 24 A. Riener

25 Upload your own images - Edit one of your mockups, select the Project Assets tab - you can immediately use your own images... JKU Linz // Principles of Interaction UE // May 8, 2015 // Slide 25 A. Riener

26 Create interactive screens - select one of your mockup screens and click the Edit button - select the item (tab bar, button,...) that you want to link to another screen Tip If you only see a bar, click on the little square icon in the upper left corner JKU Linz // Principles of Interaction UE // May 8, 2015 // Slide 26 A. Riener

27 Create interactive screens - use the pull-down menu Links and select the mockup you want to link to - interactive screens can be used to determine the flow of your app(lication) JKU Linz // Principles of Interaction UE // May 8, 2015 // Slide 27 A. Riener

28 Lauch a prototype - once you are done with your app s wireframes, you can test it by clicking on the Launch Prototype arrow in the upper right hand corner JKU Linz // Principles of Interaction UE // May 8, 2015 // Slide 28 A. Riener

29 Lauch a prototype - your prototype will be opened in a new tab window - by using your mouse as a touch, you can see the flow of your app JKU Linz // Principles of Interaction UE // May 8, 2015 // Slide 29 A. Riener

30 And that s all? -...basically yes - but there are a number of tutorials to help you getting more out of Mockups, - for example, start with the Creating a Mobile App in 10 Minutes tutorial JKU Linz // Principles of Interaction UE // May 8, 2015 // Slide 30 A. Riener

31 Mockup User experience To actually make use of the mockup, after drafting the UI potential users should be asked how they perceive the interface, how they would like to operate it, what are potential issues or room for misinterpretation, etc. - P3 (b) Usability specification and evaluation plan - P4 User study, analysis, interpretation Tips on Prototyping for Usability Testing Blog: User-testing your mybalsamiq wireframes with Usabilla ( Usabilla : Specific feedback with visual context; truly understand what people think and feel...; - Better suited for website testing - You can try out for free (30 days for free; as of May 7, 2015) JKU Linz // Principles of Interaction UE // May 8, 2015 // Slide 31 A. Riener

32 Assignment >> Project P3: Prototyping/Mockup Due ate/time! Due date/time! To be determined June 5 (June 5 th th, 2015, 2015?) June 4 th : Feast of Corpus Christi June th (holiday) Feast of Corpus Christi June 8 th (holiday) : Lecture exam June th Lecture exam JKU Linz // Principles of Interaction UE // May 8, 2015 // Slide 32 A. Riener

33 Team Project >> P3: Prototyping/Mockup Steps to accomplish (in the group) Develop a prototype (use any applicable prototyping technique) Horizontal/vertical prototype or mix Document what you have done (photos, screen shots, video) Goal: a prototype, not a running system or a ready-to-market product (but you are encouraged to spend effort to make it realistic, complete) Think about qualitative/quantitate usability specifications (table) In addition, provide an evaluation plan (what?, how?, subjects?) Technical documentation General structure (main chapters) is fixed, content flexible ;-) Only the very first version required; but can already if you have time be at greater extent (flexible: v0.1 v0.9) Due date for P3: To be determined (as said before) May 29th, June 5th or 12th, 2015? - June 4th: Feast of Corpus Christi (holiday) - June 8th: Lecture exam Due date for P4: June 30, 2015? JKU Linz // Principles of Interaction UE // May 8, 2015 // Slide 33 A. Riener

34 A. Riener // 2015S UE Principles of Interaction 07 Prototyping Project P3: Prototyping/Mockup Assignment 4: Fitts Law Experiment May 8, 2015 JKU Linz Priv.-Doz. Dipl.-Ing. Dr. Andreas Riener Institute for Pervasive Computing Johannes Kepler University JKU Linz // Principles of Interaction UE // May 8, 2015 // Slide 36 A. Riener