Prezentace se nahrává, počkejte prosím

Prezentace se nahrává, počkejte prosím

NUR - Prototyping Low Fidelity NUR - Prototyping (low fidelity) (2) User interface design - big picture User Research user needs and requirements step.

Podobné prezentace


Prezentace na téma: "NUR - Prototyping Low Fidelity NUR - Prototyping (low fidelity) (2) User interface design - big picture User Research user needs and requirements step."— Transkript prezentace:

1

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

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


Stáhnout ppt "NUR - Prototyping Low Fidelity NUR - Prototyping (low fidelity) (2) User interface design - big picture User Research user needs and requirements step."

Podobné prezentace


Reklamy Google