Nur prototyping
This presentation is the property of its rightful owner.
Sponsored Links
1 / 36

NUR - Prototyping PowerPoint PPT Presentation


  • 102 Views
  • Uploaded on
  • Presentation posted in: General

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.

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.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -

Presentation Transcript


Nur prototyping

NUR - Prototyping

Low Fidelity


User interface design big picture

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)


Mummy construction site inspection

Mummy - construction site inspection

Paper prototype

Electronic prototype (HTML, PPT)


Mummy construction site inspection1

Mummy: construction site inspection

Mummy Server

constructionplans

Construction site

Adaptation

Collaboration

Inspector

Remote expert

NUR - Prototyping (low fidelity)


Mummy construction site inspection2

Mummy: construction site inspection

NUR - Prototyping (low fidelity)


Nur prototyping

Paper prototype


Electronic prototype

Electronic prototype

  • HTML prototype

  • PPT prototype

NUR - Prototyping (low fidelity)


What must be done before

What must be done before

  • User research (D1)

  • Problem description, UI modelling

    • HTA, STN

NUR - Prototyping (low fidelity)


Ms powerpoint

MS PowerPoint

NUR - Prototyping (low fidelity)

Vector graphics

Hyperlinks

Embedded videos, images

Animations


Ms powerpoint vector graphics

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


Ms powerpoint hyperlin ks

MS PowerPoint - hyperlinks

NUR - Prototyping (low fidelity)


Ms powerpoint action

MS PowerPoint - Action

NUR - Prototyping (low fidelity)


Ms powerpoint animation

MS PowerPoint - animation

NUR - Prototyping (low fidelity)

Custom animation

Fading

Emphasis

Move on path


Ms powerpoint example

MS PowerPoint - example

NUR - Prototyping (low fidelity)


Windows classical theme

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)


Text insertion

Text insertion

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

NUR - Prototyping (low fidelity)


Openoffice

OpenOffice

NUR - Prototyping (low fidelity)

Similar to MS Office

Object animation in context menu


Web simple web page

Web - Simple web page

NUR - Prototyping (low fidelity)

  • Screenshots

  • Active parts – hyperliks

    • click map

    • table

    • div

  • Shortcut keys


Web clickable area

Web – clickable area

mapa.png

NUR - Prototyping (low fidelity)


Web clickable area1

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">


Web table

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)


Web shortcut keys

Web – shortcut keys

NUR - Prototyping (low fidelity)

Hyperlinks

<a href= "link 01.html" accesskey="A"></a>


Web shortcut keys1

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>


Web vs presentation

Web vs. presentation?

NUR - Prototyping (low fidelity)

  • Type of application

  • Design speed

    • Experience, reuse, …

  • Interaction

    • mouse, keyboard, … …


Electronic program guide

Electronic program guide

NUR - Prototyping (low fidelity)

Visual design - Gimp

Photographs

Snapshost series + JavaScript


Epg prototype showcase

EPG - prototype showcase

NUR - Prototyping (low fidelity)

... simple approach


Nur prototyping

NUR - Prototyping (low fidelity)


Nur prototyping

NUR - Prototyping (low fidelity)


Nur prototyping

NUR - Prototyping (low fidelity)


Nur prototyping

NUR - Prototyping (low fidelity)


Nur prototyping

NUR - Prototyping (low fidelity)


Thank for your attention

Thank for your attention


Ms powerpoint1

MS PowerPoint

NUR - Prototyping (low fidelity)

Vektorová grafika

Hypertextové odkazy

Vložené obrázky a videa

Animace


Ms powerpoint p klad

MS PowerPoint - příklad

NUR - Prototyping (low fidelity)


Vkl d n textu

Vkládání textu

Martin Martinovský

J. A. Komenského 321

Martin

Slovensko

NUR - Prototyping (low fidelity)


Thank for your attention1

Thank for your attention


  • Login