NUR- Prototyping. Low Fidelity

Transcription

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 profiles mental models System modeling scenarios storyboards HTA, CTT step 2 UI Design app. models (GOMS, KLM, 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 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 3

4 Mockup vs. prototype Mockup describes UI important application states only not all UI elements explicitly depicted not intended for user testing Prototype describes UI all states of selected part of application explicit depiction of all UI elements intended for user testing 4

5 What must be done before User research (D1) interviews user profiles/models Task analysis, app. modelling scenarios HTA mockups 5

6 Catch&Run: description Chase in given physical area Goal: game money Players roles Idler Catcher Runner Technology mobile phone GPS, data connection 6

7 Catch&Run: use-cases diagram 7

8 Catch&Run: HTA Plan: Try to find a treasure as Idler and avoid contact with others 2.3 Join game See my money See my role See players Alert about treasure find 8

9 Catch&Run: prototype 9

10 Catch&Run: prototype 10

11 Catch&Run: prototype 11

12 Catch&Run: prototype 12

13 Catch&Run: prototype 13

14 Catch&Run: prototype 14

15 Catch&Run: prototype 15

16 Catch&Run: prototype 16

17 Catch&Run: prototype 17

18 Catch&Run: prototype 18

19 Catch&Run: prototype creation 19

20 Ticket kiosk Ticket kiosk for city transport electronic ticket electronic wallet paper ticket Goal: intuitive UI for people struggling with IT 20

21 Ticket kiosk: HTA 21

22 Ticket kiosk: prototype 22

23 Ticket kiosk: prototype 23

24 Ticket kiosk: prototype test setup 24

25 Mummy construction site inspection Mummy Server Construction site construction plans Adaptation Inspector Collaboration Remote expert 25 NUR - Prototyping (low fidelity) (25)

26 Mummy: construction site inspection 26

27 Mummy: paper prototype 27

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

29 Load visualization: prototype 29

30 Variant C Variant B Variant A Load visualization: animation control 30

31 Load visualization: date picker Variant A Variant B 31

32 Load visualization: proportions Use of color for lines distinction Black&white visualization 32

33 Load visualization: colors Colors Gray scale 33

34 Traffic situation Visualization of the city traffic situation progress Goal: quick overview of traffic situation Problem: visualization of the progress in time 34

35 Traffic situation: use-cases 35

36 Traffic situation: HTA Plan: Traffic situation overview stepwise view zoom to center run animation 36

37 Traffic situation: UI control 37

38 Traffic situation: map 38

39 Conference schedule Personal schedule of the conference attendee Cíl: quick and simple planning 39

40 Conference schedule: prototype 40

41 Conference schedule: prototype creation 41

42 Electronic prototype HTML prototype PPT/ODP/KEY prototype PDF prototype 42

43 Paper prototyping

44 Electronic Lo-Fi prototyping Balsamiq Mockups export to hyperlinked PDF file Axure RP export to HTML+JavaScript free license for students Proto.io mobile app design (native player for ios and Android) 15-day free trial 44

45 Example question for examination How long should last creation of Lo-Fi prototype? What are the key characteristics of Lo-Fi prototype? 45

46 Thank you for attention