NUR - Prototyping. Low Fidelity

Size: px

Start display at page:

Download "NUR - Prototyping. Low Fidelity"

Maximilian Scott
10 years ago
Views:

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)

Design app. models (GOMS, KLM, HTA, CTT, etc.

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 Sketch vs. Prototype SKETCH Evocative Suggest Explore Question Propose Provoke Tentative Noncommittal PROTOTYPE Didactic Describe Refine Answer Test Resolve Specific Depiction Source: Buxton 2007 (4)

5 Sketches from practices (5)

6 What must be done before User research (D1) Task analysis, UI modelling Add new place HTA, STN (6)

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

8 Catch&Run: use-cases diagram (8)

9 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 (9)

3 Join game 3.2.1 See my money 3.2.2 See my role 2.

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 (19)

20 Catch&Run: prototype creation (20)

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

22 Ticket kiosk: HTA (22)

23 Ticket kiosk: prototype (23)

24 Ticket kiosk: prototype (24)

25 Ticket kiosk: prototype test setup (25)

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

27 Mummy: construction site inspection (27)

28 Mummy: paper prototype

29 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 (29)

30 Load visualization: prototype (30)

31 Load visualization: animation control Variant C Variant B Variant A (31)

32 Load visualization: date picker Variant A Variant B (32)

33 Load visualization: proportions Use of color for lines distinction Black&white visualization (33)

34 Load visualization: colors Colors Gray scale (34)

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

36 Traffic situation: use-cases (36)

37 Traffic situation: HTA Plan: Traffic situation overview stepwise view zoom to center run animation (37)

38 Traffic situation: UI control (38)

39 Traffic situation: map (39)

40 Conference schedule Personal schedule of the conference attendee Cíl: quick and simple planning (40)

41 Conference schedule: prototype (41)

42 Conference schedule: prototype creation (42)

43 Electronic prototype HTML prototype PPT prototype PDF prototype (43)

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

45 EPG - prototype showcase... simple approach (54)

46 (55)

47 (56)

48 (57)

49 (58)

50 (59)

51 EPG: PDF prototype (Balsamiq) (60)

52 Paper prototyping (61)

53 Thank for your attention

NUR- Prototyping. Low Fidelity

NUR- Prototyping. Low Fidelity 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