NUR- Prototyping Low Fidelity
User interface design - big picture Application Domain step 0 User Research user needs and requirements Problem Description sources: marketing research step 1 User Modeling personas profiles mental models System modeling scenarios storyboards HTA, CTT step 2 UI Design app. models (GOMS, KLM, etc.) prototypes final design 3 parts visual design interaction design UX design UI Testing KLM CW EE user testing (UX) step 3 Documentation visual design interaction design UX design step 4 Implementation step 5 2
Lo-Fi Prototyping hours/days to develop many alternatives no final interaction techniques not on target devices sketchy look&feel paper/electronic paper lab tests 3
Mockup vs. prototype Mockup describes UI important application states only not all UI elements explicitly depicted not intended for user testing Prototype describes UI all states of selected part of application explicit depiction of all UI elements intended for user testing 4
What must be done before User research (D1) interviews user profiles/models Task analysis, app. modelling scenarios HTA mockups 5
Catch&Run: description Chase in given physical area Goal: game money Players roles Idler Catcher Runner Technology mobile phone GPS, data connection 6
Catch&Run: use-cases diagram 7
Catch&Run: HTA Plan: Try to find a treasure as Idler and avoid contact with others 2.3 Join game 3.2.1 See my money 3.2.2 See my role 2.2.1 See players 3.3.2 Alert about treasure find 8
Catch&Run: prototype 9
Catch&Run: prototype 10
Catch&Run: prototype 11
Catch&Run: prototype 12
Catch&Run: prototype 13
Catch&Run: prototype 14
Catch&Run: prototype 15
Catch&Run: prototype 16
Catch&Run: prototype 17
Catch&Run: prototype 18
Catch&Run: prototype creation 19
Ticket kiosk Ticket kiosk for city transport electronic ticket electronic wallet paper ticket Goal: intuitive UI for people struggling with IT 20
Ticket kiosk: HTA 21
Ticket kiosk: prototype 22
Ticket kiosk: prototype 23
Ticket kiosk: prototype test setup 24
Mummy construction site inspection Mummy Server Construction site construction plans Adaptation Inspector Collaboration Remote expert 25 NUR - Prototyping (low fidelity) (25)
Mummy: construction site inspection 26
Mummy: paper prototype 27
Load visualization Visualization of the internet load in the city Goal: intuitive interaction and clear visualization of in time changing values Problems control of animation visualization 28
Load visualization: prototype 29
Variant C Variant B Variant A Load visualization: animation control 30
Load visualization: date picker Variant A Variant B 31
Load visualization: proportions Use of color for lines distinction Black&white visualization 32
Load visualization: colors Colors Gray scale 33
Traffic situation Visualization of the city traffic situation progress Goal: quick overview of traffic situation Problem: visualization of the progress in time 34
Traffic situation: use-cases 35
Traffic situation: HTA Plan: Traffic situation overview stepwise view zoom to center run animation 36
Traffic situation: UI control 37
Traffic situation: map 38
Conference schedule Personal schedule of the conference attendee Cíl: quick and simple planning 39
Conference schedule: prototype 40
Conference schedule: prototype creation 41
Electronic prototype HTML prototype PPT/ODP/KEY prototype PDF prototype 42
Paper prototyping http://paperprototyping.com/ http://balsamiq.com/ http://gomockingbird.com/ 43
Electronic Lo-Fi prototyping Balsamiq Mockups http://balsamiq.com/ export to hyperlinked PDF file Axure RP http://www.axure.com/ export to HTML+JavaScript free license for students Proto.io https://proto.io/ mobile app design (native player for ios and Android) 15-day free trial 44
Example question for examination How long should last creation of Lo-Fi prototype? What are the key characteristics of Lo-Fi prototype? 45
Thank you for attention