1 / 36

NUR - Prototyping

NUR - Prototyping. Low Fidelity. User interface design - big picture. UI Design app. models (GOMS, KLM, HTA, CTT, etc.) prototypes final design 3 parts visual design interaction design UX design. User Research. User Modeling personas mental models. Application Domain.

jolene
Download Presentation

NUR - Prototyping

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. NUR - Prototyping Low Fidelity

  2. User interface design - big picture • UI Design • app. models (GOMS, KLM, HTA, CTT, etc.) • prototypes • final design • 3 parts • visual design • interaction design • UX design User Research • User Modeling • personas • mental models Application Domain • Documentation • visual design • interaction design • UX design • Problem Description • sources: marketing research • User Requirements • scenarios • HTA • storyboards • UI Testing • KLM • CW • EE • user testing (UX) step 4 step 0 step 1 step 2 Implementation step 3 step 5 NUR - Prototyping (low fidelity)

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

  4. Mummy: construction site inspection Mummy Server constructionplans Construction site Adaptation Collaboration Inspector Remote expert NUR - Prototyping (low fidelity)

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

  6. Paper prototype

  7. Electronic prototype • HTML prototype • PPT prototype NUR - Prototyping (low fidelity)

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

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

  10. MS PowerPoint – vector graphics 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) Shapes Styles Groups Z-axis

  11. MS PowerPoint - hyperlinks NUR - Prototyping (low fidelity)

  12. MS PowerPoint - Action NUR - Prototyping (low fidelity)

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

  14. MS PowerPoint - example NUR - Prototyping (low fidelity)

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

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

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

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

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

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

  21. 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)

  22. Web – shortcut keys NUR - Prototyping (low fidelity) Hyperlinks <a href= "link 01.html" accesskey="A"></a>

  23. Web – shortcut keys NUR - Prototyping (low fidelity) 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>

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

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

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

  27. NUR - Prototyping (low fidelity)

  28. NUR - Prototyping (low fidelity)

  29. NUR - Prototyping (low fidelity)

  30. NUR - Prototyping (low fidelity)

  31. NUR - Prototyping (low fidelity)

  32. Thank for your attention

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

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

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

  36. Thank for your attention

More Related