Programming of Interactive Systems Anastasia.Bezerianos@lri.fr 1 - - PowerPoint PPT Presentation

▶
programming of interactive systems
SMART_READER_LITE
LIVE PREVIEW

Programming of Interactive Systems Anastasia.Bezerianos@lri.fr 1 - - PowerPoint PPT Presentation

Nov 07, 2022 470 likes •994 views

Programming of Interactive Systems Anastasia.Bezerianos@lri.fr 1 A.Bezerianos - Intro ProgIS - week1b-ConceptionCycle.key - 7 September 2020 Week 1 : b. Design Cycle of Interactive System developing & prototyping

slide-1
SLIDE 1

Programming of Interactive Systems

Anastasia.Bezerianos@lri.fr

1 A.Bezerianos - Intro ProgIS - week1b-ConceptionCycle.key - 7 September 2020

slide-2
SLIDE 2

Week 1 :


  • b. Design Cycle of Interactive System

developing & prototyping


Anastasia.Bezerianos@lri.fr

(part of this class is based on previous classes from Anastasia, and of T. Tsandilas, S. Huot, M. Beaudouin-Lafon, N.Roussel, O.Chapuis)

2 A.Bezerianos - Intro ProgIS - week1b-ConceptionCycle.key - 7 September 2020

slide-3
SLIDE 3

software engineering

Requirement Analysis Design Implementation Testing waterfall model (1970s)

3 A.Bezerianos - Intro ProgIS - week1b-ConceptionCycle.key - 7 September 2020

slide-4
SLIDE 4

software engineering

spiral model (Boehm, 1998)

4 A.Bezerianos - Intro ProgIS - week1b-ConceptionCycle.key - 7 September 2020

slide-5
SLIDE 5

user-centered design

User

Requirements and Specification Analysis Design Prototyping Evaluation

5 A.Bezerianos - Intro ProgIS - week1b-ConceptionCycle.key - 7 September 2020

slide-6
SLIDE 6

user-centered design

User

Requirements and Specification Analysis personas scenarios field studies task analysis requirement specification Design brainstorming participatory design conceptual models metaphors interaction styles scenarios storyboards interaction models Prototyping paper prototypes low/high fidelity prototyping physical models alpha/beta releases Evaluation usability tests heuristic evaluation focus groups lab experiments

  • bservational studies

6 A.Bezerianos - Intro ProgIS - week1b-ConceptionCycle.key - 7 September 2020

slide-7
SLIDE 7

methods: multidisciplinary origin

Image by W. Mackay & M. Beaudouin-Lafon

Design

Psychology Sociology Anthropology Industrial design Typography Graphic design

Natural sciences Interactive Systems Engineering

Architecture Computer science Electronical Mechanical Optics Physiology

7 A.Bezerianos - Intro ProgIS - week1b-ConceptionCycle.key - 7 September 2020

slide-8
SLIDE 8

importance of user-centered design

Development Cost

Cost of user interfaces : ~50% of total cost

Maintenance Cost

20% : « bugs » 80% : unexpected user needs

Problem correction Cost

= $1 during design = $10 during development = $100 after delivery

8 A.Bezerianos - Intro ProgIS - week1b-ConceptionCycle.key - 7 September 2020

slide-9
SLIDE 9

importance of user-centered design

In this class we focus on IS programming, … but we still need other parts of the cycle to help us in the development, such as …

Design + Prototyping

9 A.Bezerianos - Intro ProgIS - week1b-ConceptionCycle.key - 7 September 2020

slide-10
SLIDE 10

system design + prototyping

10 A.Bezerianos - Intro ProgIS - week1b-ConceptionCycle.key - 7 September 2020

slide-11
SLIDE 11

how to start?

Understand your user needs

Through interviews, observations, etc.

Invent ideas

Brainstorm, generate as many solutions as possible Focus on the consistent interaction between user and system

Prototype

Envision how your ideas would work in practice

Code !!!

11 A.Bezerianos - Intro ProgIS - week1b-ConceptionCycle.key - 7 September 2020

slide-12
SLIDE 12

brainstorming

Generate creative ideas

l a t e r f

  • r

y

  • u

r p r

  • j

e c t ! !

12 A.Bezerianos - Intro ProgIS - week1b-ConceptionCycle.key - 7 September 2020

slide-13
SLIDE 13

prototyping

13 A.Bezerianos - Intro ProgIS - week1b-ConceptionCycle.key - 7 September 2020

slide-14
SLIDE 14

user-centered design

User

Requirements and Specification Analysis personas scenarios field studies task analysis requirement specification Design brainstorming participatory design conceptual models metaphors interaction styles scenarios storyboards interaction models Prototyping paper prototypes low/high fidelity prototyping physical models alpha/beta releases Evaluation usability tests heuristic evaluation focus groups lab experiments

  • bservational studies

14 A.Bezerianos - Intro ProgIS - week1b-ConceptionCycle.key - 7 September 2020

slide-15
SLIDE 15

We start already with:

  • an understanding of the users’ needs
  • a problem to solve and decide what we will develop

(concept) We explore possibilities and show interactions: Storyboards

design activities

15 A.Bezerianos - Intro ProgIS - week1b-ConceptionCycle.key - 7 September 2020

slide-16
SLIDE 16

Design scenarios and storyboards

capture and communicate an interaction story with the new system

Rapid Prototyping

physical models, sketches, paper prototypes, … receive user feedback early in the design cycle

interaction in context

16 A.Bezerianos - Intro ProgIS - week1b-ConceptionCycle.key - 7 September 2020

slide-17
SLIDE 17

a storyboard

student design scenario of the use of communcation device

17 A.Bezerianos - Intro ProgIS - week1b-ConceptionCycle.key - 7 September 2020

slide-18
SLIDE 18

a series of key frames as sketches

  • riginally from film

used to get the idea of a scene sequence snapshots of the interface at particular points in the interaction

portrays key scenes in the interface and the transitions that caused the changes

  • Ex. http://webzone.k3.mah.se/k3jolo/Sketching/sk31.htm,

http://stavchansky.net/work.php?wID=42&cat=3

storyboards

18 A.Bezerianos - Intro ProgIS - week1b-ConceptionCycle.key - 7 September 2020

slide-19
SLIDE 19

Illustrate a design scenario (in Fond HCI) Describe the interaction in easy to read segments Define the key elements and a coherent order Decide what details to show

  • Ex. http://webzone.k3.mah.se/k3jolo/Sketching/sk31.htm,

http://stavchansky.net/work.php?wID=42&cat=3

storyboards

19 A.Bezerianos - Intro ProgIS - week1b-ConceptionCycle.key - 7 September 2020

slide-20
SLIDE 20

storyboards: possible shots

20 A.Bezerianos - Intro ProgIS - week1b-ConceptionCycle.key - 7 September 2020

slide-21
SLIDE 21

storyboards: possible shots

  • ur focus

21 A.Bezerianos - Intro ProgIS - week1b-ConceptionCycle.key - 7 September 2020

slide-22
SLIDE 22

State Transition Diagrams Scenario Sequences Make storyboards come alive

storyboard techniques

22 A.Bezerianos - Intro ProgIS - week1b-ConceptionCycle.key - 7 September 2020

slide-23
SLIDE 23

State Transition Diagrams Scenario Sequences Make storyboards come alive

storyboard techniques

23 A.Bezerianos - Intro ProgIS - week1b-ConceptionCycle.key - 7 September 2020

slide-24
SLIDE 24

State Transition Diagrams Scenario Sequences Make storyboards come alive

storyboard: State Transition Diagrams

24 A.Bezerianos - Intro ProgIS - week1b-ConceptionCycle.key - 7 September 2020

slide-25
SLIDE 25

Create transition diagram

key interaction steps branch points when multiple interactions exist

For each transition

sketch the screen include the transition diagram (a navigational map) when we have a large number of transitions

Label the transition with what triggered it

typically user input or set of system responses

storyboard: State Transition Diagrams

25 A.Bezerianos - Intro ProgIS - week1b-ConceptionCycle.key - 7 September 2020

slide-26
SLIDE 26

Interacting with a mobile agenda:

Looking at the agenda and seeing that there is a 10am meeting with someone named Mary Ford.

storyboard: State Transition Diagrams

26 A.Bezerianos - Intro ProgIS - week1b-ConceptionCycle.key - 7 September 2020

slide-27
SLIDE 27

storyboard: State Transition Diagrams

Check to see what the meeting is about. etc …

27 A.Bezerianos - Intro ProgIS - week1b-ConceptionCycle.key - 7 September 2020

slide-28
SLIDE 28

storyboard: State Transition Diagrams

28 A.Bezerianos - Intro ProgIS - week1b-ConceptionCycle.key - 7 September 2020

slide-29
SLIDE 29

storyboard: State Transition Diagrams

29 A.Bezerianos - Intro ProgIS - week1b-ConceptionCycle.key - 7 September 2020

slide-30
SLIDE 30

storyboard: State Transition Diagrams

this shows a linear interaction (no branches)

from the book “Sketching User Experiences: The Workbook”

30 A.Bezerianos - Intro ProgIS - week1b-ConceptionCycle.key - 7 September 2020

slide-31
SLIDE 31

storyboard: State Transition Diagrams

This is the detail we need before programming

31 A.Bezerianos - Intro ProgIS - week1b-ConceptionCycle.key - 7 September 2020

slide-32
SLIDE 32

State Transition Diagrams Scenario Sequences Make storyboards come alive

storyboard techniques

32 A.Bezerianos - Intro ProgIS - week1b-ConceptionCycle.key - 7 September 2020

slide-33
SLIDE 33

storyboard: Scenario Sequence

Describes a person doing a particular task e.g., checking announcement with mobile

http://grouplab.cpsc.ucalgary.ca/grouplab/uploads/Publications/Publications/2012- NarrativeStoryboard.Interactions.pdf

33 A.Bezerianos - Intro ProgIS - week1b-ConceptionCycle.key - 7 September 2020

slide-34
SLIDE 34

storyboard: Scenario Sequence

Describes a person doing a particular task e.g., checking announcement with mobile

http://grouplab.cpsc.ucalgary.ca/grouplab/uploads/Publications/Publications/2012- NarrativeStoryboard.Interactions.pdf

Important for explaining the context of use, less import for the preparing for coding

34 A.Bezerianos - Intro ProgIS - week1b-ConceptionCycle.key - 7 September 2020

slide-35
SLIDE 35

State Transition Diagrams Scenario Sequences Make storyboards come alive

Storyboard techniques

35 A.Bezerianos - Intro ProgIS - week1b-ConceptionCycle.key - 7 September 2020

slide-36
SLIDE 36

An interactive storyboard Concrete representation of an IS (that does not exist)

making storyboards come to lif: prototypes

Spotlight system, From Design for the Wild, Bill Buxton

36 A.Bezerianos - Intro ProgIS - week1b-ConceptionCycle.key - 7 September 2020

slide-37
SLIDE 37

paper prototypes

Designing with office supplies

multiple layers of sticky notes and plastic overlays different sized post-it’s represent icons, menus, windows etc.

interaction demonstrated by manipulating notes

new interfaces built on the fly

sessions videotaped for later analysis

usually end up with mess of paper and plastic!

37 A.Bezerianos - Intro ProgIS - week1b-ConceptionCycle.key - 7 September 2020

slide-38
SLIDE 38

concrete representation of an IS (that does not exist)

prototypes

38 A.Bezerianos - Intro ProgIS - week1b-ConceptionCycle.key - 7 September 2020

slide-39
SLIDE 39

Prototype is used to …

  • Explore different design alternatives
  • Ensure its usability under different conditions
  • Aid users to imagine the interface
  • Focus on problematic aspects of the interface

Why prototype?

  • If you start implementing code too early, you risk spending too much

time to create a system that does not work for your users

Prototyping is a fast way to …

  • Explore details of your concept before implementation
  • Communicate the concept to users, your managers, etc
  • Justify your design choices

prototypes

39 A.Bezerianos - Intro ProgIS - week1b-ConceptionCycle.key - 7 September 2020

slide-40
SLIDE 40

prototype evolution

From Sketching the User Experience, Bill Buxton

40 A.Bezerianos - Intro ProgIS - week1b-ConceptionCycle.key - 7 September 2020

slide-41
SLIDE 41

sketches

41 A.Bezerianos - Intro ProgIS - week1b-ConceptionCycle.key - 7 September 2020

slide-42
SLIDE 42

mid-fidelity prototype

42 A.Bezerianos - Intro ProgIS - week1b-ConceptionCycle.key - 7 September 2020

slide-43
SLIDE 43

Scan the stroller -> Change the color -> Place the

  • rder ->

Initial screen

Story – board

43 A.Bezerianos - Intro ProgIS - week1b-ConceptionCycle.key - 7 September 2020

slide-44
SLIDE 44

Scan the shirt -> Touch previous item -> Delete that item-> Alternate path…

44 A.Bezerianos - Intro ProgIS - week1b-ConceptionCycle.key - 7 September 2020

slide-45
SLIDE 45

Video Prototype

45 A.Bezerianos - Intro ProgIS - week1b-ConceptionCycle.key - 7 September 2020

slide-46
SLIDE 46

46 A.Bezerianos - Intro ProgIS - week1b-ConceptionCycle.key - 7 September 2020

slide-47
SLIDE 47

47 A.Bezerianos - Intro ProgIS - week1b-ConceptionCycle.key - 7 September 2020

slide-48
SLIDE 48

48 A.Bezerianos - Intro ProgIS - week1b-ConceptionCycle.key - 7 September 2020

slide-49
SLIDE 49

High-fidelity (very detailed) prototypes Can be build by interface builders (e.g. SceneBuilder)

  • r your Toolkit

… but (some) functionality is missing Good for communicating a specific aspect

e.g.: detailed dialog box with the size and text of buttons

high fidelity prototype

49 A.Bezerianos - Intro ProgIS - week1b-ConceptionCycle.key - 7 September 2020

slide-50
SLIDE 50

Sketching and Prototyping

Early design Late design

Brainstorm different representations Choose a representation Rough out interface style Sketches & low fidelity paper prototypes Task centered walkthrough and redesign Fine tune interface, screen design Heuristic evaluation and redesign Usability testing and redesign Medium fidelity prototypes in computer (wireframes, animations) Limited field testing Alpha/Beta tests High fidelity prototypes (interface builders) Working systems

50 A.Bezerianos - Intro ProgIS - week1b-ConceptionCycle.key - 7 September 2020