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)
Mummy - construction site inspection Paper prototype Electronic prototype (HTML, PPT)
Mummy: construction site inspection Mummy Server Construction site construction plans Adaptation Inspector Collaboration Remote expert (4)
Mummy: construction site inspection (5)
Paper prototype
Electronic prototype HTML prototype PPT prototype (7)
What must be done before User research (D1) Problem description, UI modelling Add new place HTA, STN (8)
MS PowerPoint Vector graphics Hyperlinks Embedded videos, images Animations (9)
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)
MS PowerPoint - hyperlinks (11)
MS PowerPoint - Action (12)
MS PowerPoint - animation Custom animation Fading Emphasis Move on path (13)
MS PowerPoint - example (14)
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)
Text insertion Vpisovánítextu nahrazeno stiskem tlačítka a vyplněním přednastaveného textu. (16)
OpenOffice Similar to MS Office Object animation in context menu (17)
Web - Simple web page Screenshots Active parts hyperliks o click map o table o div Shortcut keys (18)
Web clickable area mapa.png (19)
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)
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)
Web shortcut keys Hyperlinks <a href= "link 01.html" accesskey="a"></a> (22)
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)
Web vs. presentation? Type of application Design speed o Experience, reuse, Interaction o mouse, keyboard, (24)
Electronic program guide Visual design - Gimp Photographs Snapshost series + JavaScript (25)
EPG - prototype showcase... simple approach (26)
(27)
(28)
(29)
(30)
(31)
Thank for your attention
MS PowerPoint Vektorová grafika Hypertextové odkazy Vložené obrázky a videa Animace (33)
MS PowerPoint - příklad (34)
Vkládání textu Martin Martinovský J. A. Komenského 321 Martin Slovensko (35)
Thank for your attention