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 mental models System modeling scenarios HTA storyboards step 2 UI Design app. models (GOMS, KLM, HTA, CTT, 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)
Sketch vs. Prototype SKETCH Evocative Suggest Explore Question Propose Provoke Tentative Noncommittal PROTOTYPE Didactic Describe Refine Answer Test Resolve Specific Depiction Source: Buxton 2007 (4)
Sketches from practices (5)
What must be done before User research (D1) Task analysis, UI modelling Add new place HTA, STN (6)
Catch&Run: description Chase in given physical area Goal: game money Players roles Idler Catcher Runner Technology mobile phone GPS, data connection (7)
Catch&Run: use-cases diagram (8)
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 (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 (19)
Catch&Run: prototype creation (20)
Ticket kiosk Ticket kiosk for city transport electronic ticket electronic wallet paper ticket Goal: intuitive UI for people struggling with IT (21)
Ticket kiosk: HTA (22)
Ticket kiosk: prototype (23)
Ticket kiosk: prototype (24)
Ticket kiosk: prototype test setup (25)
Mummy construction site inspection Mummy Server Construction site construction plans Adaptation Inspector Collaboration Remote expert (26)
Mummy: construction site inspection (27)
Mummy: paper prototype
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 (29)
Load visualization: prototype (30)
Load visualization: animation control Variant C Variant B Variant A (31)
Load visualization: date picker Variant A Variant B (32)
Load visualization: proportions Use of color for lines distinction Black&white visualization (33)
Load visualization: colors Colors Gray scale (34)
Traffic situation Visualization of the city traffic situation progress Goal: quick overview of traffic situation Problem: visualization of the progress in time (35)
Traffic situation: use-cases (36)
Traffic situation: HTA Plan: Traffic situation overview stepwise view zoom to center run animation (37)
Traffic situation: UI control (38)
Traffic situation: map (39)
Conference schedule Personal schedule of the conference attendee Cíl: quick and simple planning (40)
Conference schedule: prototype (41)
Conference schedule: prototype creation (42)
Electronic prototype HTML prototype PPT prototype PDF prototype (43)
Electronic program guide Visual design - Gimp Photographs Snapshost series + JavaScript (53)
EPG - prototype showcase... simple approach (54)
(55)
(56)
(57)
(58)
(59)
EPG: PDF prototype (Balsamiq) (60)
Paper prototyping http://paperprototyping.com/ http://balsamiq.com/ http://gomockingbird.com/ (61)
Thank for your attention