NUR - Prototyping Low Fidelity

NUR - Prototyping (low fidelity) (2) User interface design - big picture User Research user needs and requirements step 0 Problem Description sources: marketing research Application Domain 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

NUR - Prototyping (low fidelity) (3) 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

NUR - Prototyping (low fidelity) (4) Sketch vs. Prototype SKETCH Evocative Suggest Explore Question Propose Provoke Tentative Noncommitta l PROTOTYPE Didactic Describe Refine Answer Test Resolve Specific Depiction Source: Buxton 2007

NUR - Prototyping (low fidelity) (5) What must be done before User research (D1) Problem description, UI modelling – –HTA, STN

NUR - Prototyping (low fidelity) (6) Catch&Run – description Chase in given physical area Goal: game money Players roles – – Idler – – Catcher – – Runner Technology – –mobile phone – –GPS, data connection

NUR - Prototyping (low fidelity) (7) Catch&Run – Use-cases diagram

NUR - Prototyping (low fidelity) (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

NUR - Prototyping (low fidelity) (9) Catch&Run – prototype

NUR - Prototyping (low fidelity) (10) Catch&Run – prototype

NUR - Prototyping (low fidelity) (11) Catch&Run – prototype

NUR - Prototyping (low fidelity) (12) Catch&Run – prototype

NUR - Prototyping (low fidelity) (13) Catch&Run – prototype

NUR - Prototyping (low fidelity) (14) Catch&Run – prototype

NUR - Prototyping (low fidelity) (15) Catch&Run – prototype

NUR - Prototyping (low fidelity) (16) Catch&Run – prototype

NUR - Prototyping (low fidelity) (17) Catch&Run – prototype

NUR - Prototyping (low fidelity) (18) Catch&Run – prototype

NUR - Prototyping (low fidelity) (19) Catch&Run – prototype creation

NUR - Prototyping (low fidelity) (20) Ticket kiosk Ticket kiosk for city transport – –electronic ticket – –electronic wallet – –paper ticket Goal: intuitive UI for people struggling with IT

NUR - Prototyping (low fidelity) (21) Ticket kiosk – HTA

NUR - Prototyping (low fidelity) (22) Ticket kiosk – prototype

NUR - Prototyping (low fidelity) (23) Ticket kiosk – prototype

NUR - Prototyping (low fidelity) (24) Ticket kiosk – prototype test setup

Mummy - construction site inspection Paper prototype Electronic prototype (HTML, PPT)

NUR - Prototyping (low fidelity) (26) Mummy: construction site inspection Inspector Construction site Mummy Server construction plans Remote expert Collaboration Adaptation

NUR - Prototyping (low fidelity) (27) Mummy: construction site inspection

Paper prototype

NUR - Prototyping (low fidelity) (29) 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

NUR - Prototyping (low fidelity) (30) Load visualization – prototype

NUR - Prototyping (low fidelity) (31) Load visualization – animation control Variant A Variant B Variant C

NUR - Prototyping (low fidelity) (32) Load visualization – date picker Variant B Variant A

NUR - Prototyping (low fidelity) (33) Load visualization – proportions Use of color for lines distinction Black&white visualization

NUR - Prototyping (low fidelity) (34) Load visualization – colors Colors Gray scale

NUR - Prototyping (low fidelity) (35) Traffic situation Visualization of the city traffic situation progress Gíl: quick overview of traffic situation Problem: visualization of the progress in time

NUR - Prototyping (low fidelity) (36) Traffic situation – use-cases

NUR - Prototyping (low fidelity) (37) Traffic situation – HTA Plan: Traffic situation overview – –stepwise view – –zoom to center – –run animation

NUR - Prototyping (low fidelity) (38) Traffic situation – UI control

NUR - Prototyping (low fidelity) (39) Traffic situation – map

NUR - Prototyping (low fidelity) (40) Conference schedule Personal schedule of the conference attendee Cíl: quick and simple planning

NUR - Prototyping (low fidelity) (41) Conference schedule – prototype

NUR - Prototyping (low fidelity) (42) Conference schedule – prototype creation

NUR - Prototyping (low fidelity) (43) Electronic prototype HTML prototype PPT prototype

NUR - Prototyping (low fidelity) (44) MS PowerPoint Vector graphics Hyperlinks Embedded videos, images Animations

NUR - Prototyping (low fidelity) (45) MS PowerPoint – vector graphics Shapes Styles Groups Z-axis Lorem Ipsum je demonstrativní výplňový text používaný v tiskařském a knihařském průmyslu. Lorem Ipsum je považováno za standard v této oblasti už od začátku 16. století, kdy dnes neznámý tiskař vzal kusy textu a na jejich základě vytvořil speciální vzorovou knihu. Jeho odkaz nevydržel pouze pět století, on přežil i nástup elektronické sazby v podstatě beze změny. Nejvíce popularizováno bylo Lorem Ipsum v šedesátých letech 20. století, kdy byly vydávány speciální vzorníky s jeho pasážemi a později pak díky počítačovým DTP programům jako Aldus PageMaker.

NUR - Prototyping (low fidelity) (46) MS PowerPoint - hyperlinks

NUR - Prototyping (low fidelity) (47) MS PowerPoint - Action

NUR - Prototyping (low fidelity) (48) MS PowerPoint - animation Custom animation Fading Emphasis Move on path

NUR - Prototyping (low fidelity) (49) MS PowerPoint - example

NUR - Prototyping (low fidelity) (50) Windows – classical theme Textové pole Text. pole s nabídkou výběr tohonebo onohovýběr čehokoliv SouborÚpravyFormátNástrojeMožnostiNápověda Pokračovat

NUR - Prototyping (low fidelity) (51) Text insertion Vpisování textu nahrazeno stiskem tlačítka a vyplněním přednastaveného textu.

NUR - Prototyping (low fidelity) (52) OpenOffice Similar to MS Office Object animation in context menu

NUR - Prototyping (low fidelity) (53) Web - Simple web page Screenshots Active parts – hyperliks o o click map o o table o o div Shortcut keys

NUR - Prototyping (low fidelity) (54) Web – clickable area mapa.png

NUR - Prototyping (low fidelity) (55) Web – clickable area mapa.png

NUR - Prototyping (low fidelity) (56) Web – table Lorem Ipsum je demonstrativní výplňový text používaný v tiskařském a knihařském průmyslu. Lorem Ipsum je považováno za standard v této oblasti už od začátku 16. století, kdy dnes neznámý tiskař vzal kusy textu a na jejich základě vytvořil speciální vzorovou knihu. Jeho odkaz nevydržel pouze pět století, on přežil i nástup elektronické sazby v podstatě beze změny. Nejvíce popularizováno bylo Lorem Ipsum v šedesátých letech 20. století, kdy byly vydávány speciální vzorníky s jeho pasážemi a později pak díky počítačovým DTP programům jako Aldus PageMaker.

NUR - Prototyping (low fidelity) (57) Web – shortcut keys Hyperlinks link 01.html

NUR - Prototyping (low fidelity) (58) Web – shortcut keys JavaScript … function show_page ( key_pressed ){ if (key_pressed == 119) this.location.href = "index04.html"; else if (key_pressed == 115) this.location.href = "index02.html"; else if (key_pressed == 122) this.location.href = "tel_ct1.html"; }

NUR - Prototyping (low fidelity) (59) Web vs. presentation? Type of application Design speed o o Experience, reuse, … Interaction o o mouse, keyboard, … …

NUR - Prototyping (low fidelity) (60) Electronic program guide Visual design - Gimp Photographs Snapshost series + JavaScript

NUR - Prototyping (low fidelity) (61) EPG - prototype showcase... simple approach

NUR - Prototyping (low fidelity) (62)

NUR - Prototyping (low fidelity) (63)

NUR - Prototyping (low fidelity) (64)

NUR - Prototyping (low fidelity) (65)

NUR - Prototyping (low fidelity) (66)

NUR - Prototyping (low fidelity) (67) Paper prototyping

Thank for your attention

NUR - Prototyping (low fidelity) (69) MS PowerPoint Vektorová grafika Hypertextové odkazy Vložené obrázky a videa Animace

NUR - Prototyping (low fidelity) (70) MS PowerPoint - příklad

NUR - Prototyping (low fidelity) (71) Vkládání textu Martin Martinovský J. A. Komenského 321 Martin Slovensko

Thank for your attention

NUR - Prototyping (low fidelity) (73) Resources [Buxton 2007] B. Buxton: Sketching User Experiences, Morgan Kaufman, 2007