Lecture notes for ICS 3211

1. ICS3211 - Intelligent
Interfaces II
Combining design with technology for effective human-
computer interaction
Week 8
Department of AI,
University of Malta,
20201

2. Prototyping & Evaluation
Design I
Week 8 overview:
• Using Processing - designing visual interfaces
• The Interaction Design Process
• Evaluation Paradigms
• Planning an Evaluation
• Designing Usability Tests
2

3. Learning Outcomes
At the end of this session you should be able to:
• Explore programming for visual design prototyping;
• Draw inferences about designing for different interfaces;
• Compare and contrast the different interfaces for use on the
same application/game;
• List the research issues/gaps in the design for AR/VR
applications;
• Describe some of the current research projects in AR/VR.
3

4. Experience Prototyping
The experience of evensimple artifacts does not exist in
a vacuumbut, rather, in dynamic relationship with other
people, places andobjects.
Additionally, the quality of people’s experience changes
over time asit is influenced byvariations in these
multiple contextual factors.
4

5. Cover
Download
Exhibition
» ownload Processing
» Play With Examples
» Browse Tutorials
» xhibition
Reference
Libraries
Tools
Environment
Tutorials
Examples
Books
overview
People
Foun dation
Shop
»Forum
»GitHub
»Issues
>•Wild
»FAQ
>•Twitter
»Facebook
Processing is a program.ming language, development environment
and online community. Since 2001, Processing has promoted
software literacy within the visual arts and visual literacy within
technology. Initially created to serve as a software sketchbook and
to teach computer program.ming fundamentals within a visual
context, Processing evolved into a development tool for
professionals. Today, there are tens of thousands of students,
artists, designers, researchers, and hobbyists who use Processing
for learning, prototyping, and production.
,. Free to download and open source
,. Interactive programs with 2D,3DorPDFoutput
,. OpenGLintegration for accelerated3D
,. For GNU/Linux, Mac OSX andWindows
,. over 100 libraries extend the core software
,.Well docum ented,with many books available
Keyflies
by MilesPeyton
I
: p
!
Petting Zoo
byMinimaforms
Fragmented Memory
by PhillipSteams
5

6. Processing
How to do prototyping using Processing
6

7. Processing - Starting Out
• https://processing.org/tutorials/gettingstarted/
• Open Source
• Interactive programs with 2D, 3D or PDF output
• OpenGL integration for accelerated 2D and 3D
• For GNU/Linux, Mac OS X, and Windows
• Over 100 libraries extend the core software
7

8. Basic Parts Of A Sketch
/* Notes comment */!
//set up global variables!
float moveX = 50;!
!
//Initialize the Sketch!
(){!void setup
}!
!
//draw every frame!
void draw(){!
}!
8

9. Sample Drawing
int m = 0;!
float s =
0;!
!
void setup(){!
size(512,512);!
background(255);!
}!
!
void draw (){!
fill(255,0,0);
!
ellipse(mouseX,mouseY,s,s);!
}!
!
void mouseMoved(){!
s = 40 + 20*sin(++m/10.0f);!
}!
9

10. Drawing
• draw() getscalled as fast as possible, unlessa frameRate is specified
• stroke() setscolor of drawing outline
• fill() setsinside color of drawing
• mousePressedis true if mouseis down
• mouseX, mouseY- mouseposition
!void draw() { !
!stroke(255); !
!if(mousePressed) {!
!line(mouseX, mouseY, pmouseX, pmouseY);!
!}!
!
!
!}!
10

11. Processing And Drawing
• BasicShapes
rect(x, y, width, height)!
ellipse(x, y, width, height)!
line(x1, y1, x2, y2), line(x1,y1, x2, y2, z1, z2)!
• Filling shapes- fill( )
fill(int gray), fill(color color), fill(color color, int
alpha)!
• Curve
• Draws curved lines
• Vertex
• Creates shapes (beginShape,endShape)
11

12. Vertex Demo
void setup(){!
size(400,400);!
}!
!
void draw(){!
background(255);
! fill(0);!
beginShape();!
vertex(0,0);!
vertex(400,400);!
vertex(mouseX,mouseY);!
endShape();!
}!
12

13. Curve Demo
void setup(){!
size(400,400);!
}!
!
void draw(){!
background(255);!
fill(0);!
!
int xVal = mouseX*3-100;!
int yVal = mouseY*3-100;!
!
curve(xVal, yVal, 100, 100, 100, 300, xVal, yVal);!
curve(xVal, yVal, 100, 300, 300, 300, xVal, yVal);!
curve(xVal, yVal, 300, 300, 300, 100, xVal, yVal);!
curve(xVal, yVal, 300, 100, 100, 100, xVal, yVal);!
!
}!
13

14. Class And Objects
• see http://processing.org/learning/objects/
• Object
• grouping of multiple related properties and
functions
• Objects are defined byObject classes
• EgCarobject
• Data
• colour, location,speed
• Functions
• drive(),draw()
14

15. Classes
• four elements:name,data,constructor, and
methods.
• Name
class myName { }!
• Data
• collection of classvariables
• Constructor
• run when object created
• Methods
• classfunctions
15

16. 16

17. 17

18. Class Usage
// Step 1. Declare an object.!
Car myCar;!
!
void setup() { !
// Step 2. Initialize object.!
myCar = new Car();
!
!}
!
on the object. !
void draw() { !
background(255); !
// Step 3. Call methods
myCar.drive(); !
myCar.display(); !
}!
18

19. Constructing Objects
• OneCar
Car myCar= new Car(); !
• TwoCars
!
!
!// Creating
!Car myCar1
!Car myCar2
two car objects
= new
= new
Car();
Car(); !
• One car with initial
values
Car myCar = new Car(color(255,0,0),0,100,2); !
19

20. Modifying Constructor
Car(color tempC, float tempXpos, float
{
tempYpos, float tempXspeed) !
c= tempC; !
xpos
ypos
= tempXpos;
= tempYpos;
!
!
xspeed = tempXspeed; !
}!
!
20

21. Mouse Interaction
mouseX, mouseY);!
• Mouse position
• mouseX, mouseYvariables
• Mouse Interaction
• mousePressed()
• mouseReleased()
• mouseDragged()
• Add in own code
void mouseDragged(){!
line(pmouseX,
pmouseY,
}!
21

22. Keyboard Interaction
• Check keyPressedvariable in draw() method
!void draw(){!
pressed " +key);!
! !if(keyPressed){!
! ! !print(" you
! !}!
}!
"+key);!
• Use keyPressed() method
!void keyPressed(){!
! !print(" you're pressing
!}!
22

23. Importing Libraries
• Canaddfunctionality byImporting
Libraries
• javaarchives - .jar files
• Include import code
import processing.opengl.*;!
• PopularLibraries
• Minim - audio library
• OCD - 3D camera views
• Physics- physics engine
• bluetoothDesktop - bluetooth networking
23

24. http://toxiclibs.org/
24

25. Graphical Controls
height);!
• UseControlP5 Library
• http://www.sojamo.de/libraries/controlP5/
• Add graphical controls
• Buttons,sliders,etc
• Support for OSC (Open Sound Controller)
• UseControlP5class
import controlP5.*;!
addButton(name, value, x, y, width,
• EventHanding
25

26. Interface Elements
• Interfascia
• http://www.superstable.net/interfascia/
• GUI Library for Processing
• Buttons
• Check boxes
• Textfields
• Progress bar
26

27. 27
ProcessingTime…timeforsomefun

28. Interaction DesignProcess
(Re)design
Identify
needs
Build an
interactive
version
Evaluate
Final Product
28

29. When toevaluate?
• Once the product has been developed
• pros : rapid development, small evaluation cost
• cons : rectifying problems
• During design and development
• pros : find and rectify problems early
• cons : higher evaluation cost, longer development
design implementation
evaluation
redesign &
reimplementation
design implementation
29

30. Four evaluationparadigms
• Quick and dirty
• Usability testing (lab studies)
• Field studies
• Predictive evaluation
30

31. Quick and dirty
• ‘quick & dirty’ evaluation describes the
common practice in which designers informally
get feedback from users or consultants to
confirm that their ideas are in-line with users’
needs and are liked.
• Quick & dirty evaluations are done any time.
• The emphasis is on fast input to the design
process rather than carefully documented
findings.

32. Usability testing
• Usability testing involves recording typical users’
performance on typical tasks in controlled settings.
Field observations may also be used.
• As the users perform these tasks they are watched &
recorded on video & their key presses are logged.
• This data is used to calculate performance times,
identify errors & help explain why the users did what
they did.
• User satisfaction questionnaires & interviews are
used to elicit users’ opinions.

33. Usability Engineering
• Term coined by staff at Digital Equipment Corp.
around 1986
• Concerned with:
– Techniques for planning, achieving and verifying objectives for
system usability
– Measurable goals must be defined early
– Goals must be assessed repeatedly
• Note verification above
• Definition by Christine Faulkner (2000):
– “UE is an approach to the development of software and
systems which involves user participation from the outset and
guarantees the usefulness of the product through the use of a
usability specification and metrics.”

34. Field studies
• Field studies are done in natural settings
• The aim is to understand what users do naturally
and how technology impacts them.
• In product design field studies can be used to:
- identify opportunities for new technology
- determine design requirements
- decide how best to introduce new technology
- evaluate technology in use.

35. Predictive evaluation
• Experts apply their knowledge of typical users, often
guided by heuristics, to predict usability problems.
– Heuristic evaluation
– Walkthroughs
• Another approach involves theoretically based
models.
– Predicting time, errors:
– GOMS and Fitts’ Law formula
• A key feature of predictive evaluation is that users
need not be present
• Relatively quick & inexpensive

36. Evaluation approaches andmethods
Method Usability
testing
Field
studies
Predictive
Observing x x
Asking
users
x x
Asking
experts
x x
Testing x
Modeling x
36

37. Characteristics of approaches
Usability
testing
Field
studies
Predictive
Users do task natural not involved
Location controlled natural anywhere
When prototype early prototype
Data quantitative qualitative problems
Feed back measures &
errors
descriptions problems
Type applied naturalistic expert
37

38. How to Plan an Evaluation?
• Preece, Roger & Sharp - DECIDE
framework
– captures many important practical issues
– works with all categories of study

39. DECIDE:
A framework to guide evaluation
• Determine the goals the evaluation addresses.
• Explore the specific questions to be answered.
• Choose the evaluation paradigm and techniques to
answer the questions.
• Identify the practical issues.
• Decide how to deal with the ethical issues.
• Evaluate, interpret and present the data.

40. Determine the goals
• What are the high-level goals of the evaluation?
• Who wants it and why?
The goals influence the paradigm for the study
• Some examples of goals:
− Identify the best metaphor on which to base the design.
− Check to ensure that the final interface is consistent.
− Investigate how technology affects working practices.
− Improve the usability of an existing product .

41. Explore the questions
• All evaluations need goals & questions to guide them
so time is not wasted on ill-defined studies.
• For example, the goal of finding out why many
customers prefer to purchase paper airline tickets
rather than e-tickets can be broken down into sub-
questions:
- What are customers’ attitudes to these new tickets?
- Are they concerned about security?
- Is the interface for obtaining them poor?
• What questions might you ask about the design of a cell
phone?

42. Choose the evaluation paradigm &
techniques
• The evaluation paradigm strongly
influences the techniques used, how data
is analyzed and presented.
• E.g. field studies do not involve testing or
modeling

43. Identify practical issues
For example, how to:
• select users
• stay on budget
• staying on schedule
• find evaluators
• select equipment

44. Decide on ethical issues
• Develop an informed consent form
– See example(s) in text, Web site, etc.
• Participants have a right to:
- know the goals of the study
- what will happen to the findings
- privacy of personal information
- not to be quoted without their agreement
- leave when they wish
- be treated politely
• “Informed consent” agreement

45. Evaluate, interpret & present data
• How data is analyzed & presented depends on the
paradigm and techniques used.
• The following also need to be considered:
- Reliability: can the study be replicated?
- Validity: is it measuring what you thought?
- Biases: is the process creating biases?
- Scope: can the findings be generalized?
- Ecological validity: is the environment of the
study influencing it - e.g. Hawthorn effect

46. Developing Usability Tests
• Goals and Usability Concerns
• Observations from Tasks
• Triangulation
• Test Plan and Scenarios
• Questionnaires and Interviews

47. Observing and Recording Tests
• Notes
• Audio Recording
• Still photos
• Video
• Event Logging Software

48. Conducting Usability Tests
• Prepare test room
• Pre-test Questionnaire
• Brief user (explain UI, scenario, etc.)
• Post-test Questionnaire
• Thank user and organise findings

49. Pilot studies
• A small trial run of the main study.
• The aim is to make sure your plan is viable.
• Pilot studies check:
- that you can conduct the procedure
- that interview scripts, questionnaires,
experiments, etc. work appropriately
• It’s worth doing several to iron out problems before
doing the main study.
• Ask colleagues if you can’t spare real users.

50. Key points
• An evaluation paradigm is an approach that is influenced by
particular theories and philosophies.
• Five categories of techniques were identified: observing
users, asking users, asking experts, user testing, modeling
users.
• The DECIDE framework has six parts:
- Determine the overall goals
- Explore the questions that satisfy the goals
- Choose the paradigm and techniques
- Identify the practical issues
- Decide on the ethical issues
- Evaluate ways to analyze & present data
• Do a pilot study

51. –Steve Jobs
“If a user is having a problem, it is our
problem.”