Stáhnout prezentaci
Prezentace se nahrává, počkejte prosím
2
NUR - Prototyping Low Fidelity
3
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
4
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
5
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
6
NUR - Prototyping (low fidelity) (5) What must be done before User research (D1) Problem description, UI modelling – –HTA, STN
7
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
8
NUR - Prototyping (low fidelity) (7) Catch&Run – Use-cases diagram
9
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
10
NUR - Prototyping (low fidelity) (9) Catch&Run – prototype
11
NUR - Prototyping (low fidelity) (10) Catch&Run – prototype
12
NUR - Prototyping (low fidelity) (11) Catch&Run – prototype
13
NUR - Prototyping (low fidelity) (12) Catch&Run – prototype
14
NUR - Prototyping (low fidelity) (13) Catch&Run – prototype
15
NUR - Prototyping (low fidelity) (14) Catch&Run – prototype
16
NUR - Prototyping (low fidelity) (15) Catch&Run – prototype
17
NUR - Prototyping (low fidelity) (16) Catch&Run – prototype
18
NUR - Prototyping (low fidelity) (17) Catch&Run – prototype
19
NUR - Prototyping (low fidelity) (18) Catch&Run – prototype
20
NUR - Prototyping (low fidelity) (19) Catch&Run – prototype creation
21
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
22
NUR - Prototyping (low fidelity) (21) Ticket kiosk – HTA
23
NUR - Prototyping (low fidelity) (22) Ticket kiosk – prototype
24
NUR - Prototyping (low fidelity) (23) Ticket kiosk – prototype
25
NUR - Prototyping (low fidelity) (24) Ticket kiosk – prototype test setup
26
Mummy - construction site inspection Paper prototype Electronic prototype (HTML, PPT)
27
NUR - Prototyping (low fidelity) (26) Mummy: construction site inspection Inspector Construction site Mummy Server construction plans Remote expert Collaboration Adaptation
28
NUR - Prototyping (low fidelity) (27) Mummy: construction site inspection
29
Paper prototype
30
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
31
NUR - Prototyping (low fidelity) (30) Load visualization – prototype
32
NUR - Prototyping (low fidelity) (31) Load visualization – animation control Variant A Variant B Variant C
33
NUR - Prototyping (low fidelity) (32) Load visualization – date picker Variant B Variant A
34
NUR - Prototyping (low fidelity) (33) Load visualization – proportions Use of color for lines distinction Black&white visualization
35
NUR - Prototyping (low fidelity) (34) Load visualization – colors Colors Gray scale
36
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
37
NUR - Prototyping (low fidelity) (36) Traffic situation – use-cases
38
NUR - Prototyping (low fidelity) (37) Traffic situation – HTA Plan: Traffic situation overview – –stepwise view – –zoom to center – –run animation
39
NUR - Prototyping (low fidelity) (38) Traffic situation – UI control
40
NUR - Prototyping (low fidelity) (39) Traffic situation – map
41
NUR - Prototyping (low fidelity) (40) Conference schedule Personal schedule of the conference attendee Cíl: quick and simple planning
42
NUR - Prototyping (low fidelity) (41) Conference schedule – prototype
43
NUR - Prototyping (low fidelity) (42) Conference schedule – prototype creation
44
NUR - Prototyping (low fidelity) (43) Electronic prototype HTML prototype PPT prototype
45
NUR - Prototyping (low fidelity) (44) MS PowerPoint Vector graphics Hyperlinks Embedded videos, images Animations
46
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.
47
NUR - Prototyping (low fidelity) (46) MS PowerPoint - hyperlinks
48
NUR - Prototyping (low fidelity) (47) MS PowerPoint - Action
49
NUR - Prototyping (low fidelity) (48) MS PowerPoint - animation Custom animation Fading Emphasis Move on path
50
NUR - Prototyping (low fidelity) (49) MS PowerPoint - example
51
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
52
NUR - Prototyping (low fidelity) (51) Text insertion Vpisování textu nahrazeno stiskem tlačítka a vyplněním přednastaveného textu.
53
NUR - Prototyping (low fidelity) (52) OpenOffice Similar to MS Office Object animation in context menu
54
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
55
NUR - Prototyping (low fidelity) (54) Web – clickable area mapa.png
56
NUR - Prototyping (low fidelity) (55) Web – clickable area mapa.png
57
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.
58
NUR - Prototyping (low fidelity) (57) Web – shortcut keys Hyperlinks link 01.html
59
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"; }
60
NUR - Prototyping (low fidelity) (59) Web vs. presentation? Type of application Design speed o o Experience, reuse, … Interaction o o mouse, keyboard, … …
61
NUR - Prototyping (low fidelity) (60) Electronic program guide Visual design - Gimp Photographs Snapshost series + JavaScript
62
NUR - Prototyping (low fidelity) (61) EPG - prototype showcase... simple approach
63
NUR - Prototyping (low fidelity) (62)
64
NUR - Prototyping (low fidelity) (63)
65
NUR - Prototyping (low fidelity) (64)
66
NUR - Prototyping (low fidelity) (65)
67
NUR - Prototyping (low fidelity) (66)
68
NUR - Prototyping (low fidelity) (67) Paper prototyping http://paperprototyping.com/ http://balsamiq.com/ http://gomockingbird.com/
69
Thank for your attention
70
NUR - Prototyping (low fidelity) (69) MS PowerPoint Vektorová grafika Hypertextové odkazy Vložené obrázky a videa Animace
71
NUR - Prototyping (low fidelity) (70) MS PowerPoint - příklad
72
NUR - Prototyping (low fidelity) (71) Vkládání textu Martin Martinovský J. A. Komenského 321 Martin Slovensko
73
Thank for your attention
74
NUR - Prototyping (low fidelity) (73) Resources [Buxton 2007] B. Buxton: Sketching User Experiences, Morgan Kaufman, 2007
![NUR - Prototyping (low fidelity) (73) Resources [Buxton 2007] B.](http://images.slideplayer.cz/24/7534714/slides/slide_74.jpg "Buxton: Sketching User Experiences, Morgan Kaufman,")
Podobné prezentace
