NUR - Prototyping. Low Fidelity

Rozměr: px

Začít zobrazení ze stránky:

Download "NUR - Prototyping. Low Fidelity"

Jana Vaňková
před 5 lety
Počet zobrazení:

1 NUR - Prototyping Low Fidelity

2 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)

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

4 Mummy: construction site inspection Mummy Server Construction site construction plans Adaptation Inspector Collaboration Remote expert (4)

5 Mummy: construction site inspection (5)

6 Paper prototype

7 Electronic prototype HTML prototype PPT prototype (7)

8 What must be done before User research (D1) Problem description, UI modelling Add new place HTA, STN (8)

9 MS PowerPoint Vector graphics Hyperlinks Embedded videos, images Animations (9)

10 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. (10)

11 MS PowerPoint - hyperlinks (11)

12 MS PowerPoint - Action (12)

13 MS PowerPoint - animation Custom animation Fading Emphasis Move on path (13)

14 MS PowerPoint - example (14)

15 Windows classical theme Soubor Úpravy Formát Nástroje Možnosti Nápověda výběr toho nebo onoho výběr čehokoliv Pokračovat Textové pole Text. pole s nabídkou (15)

16 Text insertion Vpisovánítextu nahrazeno stiskem tlačítka a vyplněním přednastaveného textu. (16)

17 OpenOffice Similar to MS Office Object animation in context menu (17)

18 Web - Simple web page Screenshots Active parts hyperliks o click map o table o div Shortcut keys (18)

19 Web clickable area mapa.png (19)

20 Web clickable area <map name="mapa"> <area href= "link1.html" shape="rect" coords="10,10,210,110"> <area > </map> <img src="mapa.png" usemap="#mapa"> (20)

21 Web table Lorem Ipsum je demonstrativní výplňový text používaný v tiskařském a knihařském průmyslu. LoremIpsumjepovažovánozastandard v tétooblastiužodzačátku16. 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. (21)

22 Web shortcut keys Hyperlinks <a href= "link 01.html" accesskey="a"></a> (22)

23 Web shortcut keys JavaScript <body onkeypress = "show_page(event.which)"> <script type="text/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"; } </script> (23)

24 Web vs. presentation? Type of application Design speed o Experience, reuse, Interaction o mouse, keyboard, (24)

25 Electronic program guide Visual design - Gimp Photographs Snapshost series + JavaScript (25)

26 EPG - prototype showcase... simple approach (26)

27 (27)

28 (28)

29 (29)

30 (30)

31 (31)

32 Thank for your attention

33 MS PowerPoint Vektorová grafika Hypertextové odkazy Vložené obrázky a videa Animace (33)

34 MS PowerPoint - příklad (34)

35 Vkládání textu Martin Martinovský J. A. Komenského 321 Martin Slovensko (35)

36 Thank for your attention

Podobné dokumenty

User interface design - big picture

User interface design - big picture Application Domain step 0 User Research Problem Description sources: marketing research step 1 User Modeling personas mental models User Requirements scenarios HTA storyboards