This lecture discusses human computer interaction design processes and interface paradigms. It covers development methodologies like rapid contextual design and ease of use methods. The lecture also discusses the four pillars of design: user interface requirements, guidelines, processes, and interaction styles. Additionally, it examines interaction types like instructing, manipulating, conversing, and exploring. Finally, the lecture reviews interface paradigms from the 1980s through the 2000s including command line, WIMP/GUI, multimedia, web, speech, and mobile interfaces.

1. CS3240 - Human Computer Interaction
Lecture 3 : Managing Design Processes
Lecturer : Dr Bimlesh Wadhwa
dcsbw@nus.edu.sg
dcsb @n s ed sg

2. Content
• Development Methodologies
p g
– Rapid Contextual Design & Ease of Use
Method
• Four pillars of Design
– 1 User Interface Requirements
• Users, Requirements, Collection methods
– 2 Guidelines, Documents & Process
,
• Refer previous Lecture
• Interface and Interaction Styles
1-2
3-2

3. Development Methodologies
• Rapid Contextual Design - RCD
– Holzblatt et al 2005
• Ease of Use Method
– IBM
• Others
– GUIDE, STUDIO, OVID
, ,
1-3
3-3

4. Rapid Contextual Design
Contextual Inquiry
Interpretation Sessions and work modeling
Model Consolidation and Affinity diagram Building
Personas
Visioning
Storyboarding
User E i
U Environment Design
tD i
Paper prototypes and mock-up interviews
1-4
3-4

5. Rapid Contextual Design
Talk to customers, while they work
Interpret the data; create a shared perspective
I t t th d t t h d ti
Consolidate; create visual representation of work
Develop Personas
Review & ‘walk’ the consolidated vision
Use i
U pics and graphs to describe concepts; storyboarding
d h t d ib t t b di
Single representation of users and the work; built from from
storyboards
1-5
Conduct interviews and tests with actual users; provide
verification of design before committing to code 3-5

6. Ease of Use Method
1-6
3-6

7. The Four Pillars of Design
1-7
3-7

8. Users or Stakeholders
• Who are they?
• What are their abilities ?
• Th i t k and E i
Their tasks d Environment ?t
1-8
3-8

9. Users or Stakeholders
Check out
Check-out operators
• Suppliers
•LLocal shop
l h
owners
Customers 1-9
Managers and owners

10. Users - categories
• primary: frequent hands-on
• secondary: occasional or via someone else
• tertiary: affected by its introduction, or will
influence its purchase
f
1-10

11. Users - capabilities
•size of hands may affect the size and positioning of
input buttons motor abilities may affect the
i t b tt t biliti ff t th
suitability of certain input and output devices
• height if designing a physical kiosk
• strength - a child’s toy requires little strength to
operate,
operate but greater strength to change batteries
• disabilities(e.g. sight, hearing, dexterity)
1-11

12. Personas
• Generally personas are synthesized from
Generally,
data collected from interviews with users.
– a name and picture
p
– demographics (age, education, ethnicity,
family status)
– job title and major responsibilities
– goals and tasks in relation to your site
– environment ( h i l social,
i t (physical, i l
technological)
1-12

13. Users -Tasks
• Tasks:
– their context
– what information do they require?
y q
– who collaborates to achieve the task?
– why i the task achieved the way it is?
h is th t k hi d th i ?
1-13

14. Users - Environment
Environment or context of use:
— physical: dusty, noisy, vibration, light, heat,
humidity, ..
— social: sharing of files, of displays, in paper,
ff f
across great distances, work individually, privacy
for clients
— organisational: hierarchy, IT department’s
attitude and remit user support communications
remit, support,
structure and infrastructure, availability of
trainingg
1-14

15. Examples
Interactive system for food stalls in a university’s self-
service cafeteria
Users : under 25 , comfortable dealing with technology
Function : calculates total cost of purchases.
Environmental : noisy and b
E i t l i d busy; users lik l t b t lki
likely to be talking
with friends and colleagues while using the system.
1-15

16. Interactive system for control of functioning of
nuclear power plant
plant.
Users : well trained engineer or scientist competent to
handle technology
Function : monitors the temperature of the reactors
p
Environmental : uncluttered restrictive , might need to
uncluttered,
wear protective clothing
1-16

17. Interactive system to support distributed design teams
e.g. f car d i
for design
Users : professional designer, prepared to learn system to
g y
make his job better; likely to be multi-lingual
Functional : communicates information between remote
sites
Environmental : physically di t ib t d over wide area, fil
E i t l h i ll distributed id files
to be shared, product to comply with network technologies
and communication protocols
1-17

18. Methods to collect User Information
Interviews
Questionnaires
(Personal, Focus
(Survey )
Group)
Observation Participatory
(Ethnographic) Design
Qualitative and Quantitative 1-18

19. Interviews
Personal & Focus Group interviews
• Immediate responses
• Allows users to express themselves in own words
• Allows collection of a large volume of rich data
• Allows discussion, probing and unexpected insights
• Useful in Investigating problems
1-19

20. Interviews - guidelines
• Prepare and distribute agenda, outline of topic and
p g p
questions that will be asked
• Ensure that each question is open ended, unambiguous
and contains only one idea
• Use skilled interviewers with good listening skills
• Ensure interviews last no longer than 30‐60 minutes,
depending on type
• Select a comfortable and neutral setting and ensure
p
participation by all
p y
• Include highest level of management available if possible
• Record interviews rather than relying on memory
1-20

21. Questionnaires
• Qualitative & quantitative sections
• Manual or electronic distribution
• Quick & Cheap distribution
• Good reachability
• Relatively low resource consumption - human and
financial
1-21

22. Questionnaires - guidelines
• “Sell” importance before distribution and provide an incentive.
• Keep them short, structured and grouped according to purpose.
• Let respondents know the number of questions.
• Give clear instructions, appropriate time and due date for return.
• Use terminology or language familiar to your users
users.
• Use “satisfactory,”“unsatisfactory” scale, rather than
“1,2,3”ranking.
• Allow flexibility to go back change “skip” or “save” responses
back, change, skip save responses.
• Avoid surveying for information you can find another way.
• Test or pilot to a sample group before distribution
www.surveymonkey.com , www.polldaddy.com , www.zoomerang.com
www.statpac.com, www.vovici.com, www.researchexec.com
www.snapsurveys.com, www.surveycrafter.com, www.coolsurveys.com
www snapsurveys com www surveycrafter com www coolsurveys com
www.objectplanet.com, www.pollpro.com, www.esurveyspro.com, 1-22
www.questionpro.com
http://oldwww.acm.org/perlman/question.html

23. Observation
• Think-aloud technique
• Diaries
• Interaction logs
1-23

24. Observation - guidelines
• Segment the g p from which y want feedback
g groups you
• Try to understand each group’s goals and interests
thoroughly.
• Record your observations. Take careful note of all
informal information gathering.
• Use open‐ended questions when you interview verbally
verbally.
• Avoid putting your own bias on observations. Consider a
neutral third party if impossible
• Allow sufficient time for observation.
1-24

25. Ethnographic Observation
• Preparation
• Field Study
• Analysis
• Reporting
R ti
1-25
3-25

26. Ethnographic Observation
1-26
3-26

27. Participatory Design
• Origin: Scandinavia,
Scandinavia
– named Cooperative Design.
‘Good systems cannot be built by design experts
who proceed with only limited input from
users…’
1-27
3-27

28. Participatory Design
Durin’s
D i ’ model of th f
d l f the four l
levels of user participation
l f ti i ti
1-28
3-28

29. Scenario Development
Day-in-the-life scenarios:
• characterize what happens when users perform typical
tasks
• can be acted out as a form of walkthrough
• may be used as basis for videotape
• useful tools
– table of user communities & tasks
– table of task sequences
– flowchart or transition diagram
1-29
3-29

30. Data Recording
• Notes, audio, video, photographs
1-30

31. Data Collection
Potential pitfalls
• Representative Sample
p p
–Small, good enough, wrong
• Bias
-Outside consultant or third party
• Wrong methodology
–QQualitative or quantitative data
•Timeline
–Be realistic
Be realistic.
1-31

32. Data Analysis
–Manual
–Desk top tools (spreadsheets & databases)
–Survey software programmes
–Statistical packages
1-32

33. Data Analysis
• Data processing or preparation plan
–T
Transcription of interviews and observation fi di
i ti fi t i d b ti findings
–Editing responses
–Coding responses
Coding
•Data entry
y
•Data analysis
1-33

34. Data Analysis
• Recording and Presenting Survey Results
Descriptive summary
•Text or tabular (including cross‐tabulation)
( g )
Descriptive statistics
•Frequency counts, ranges, measures of central tendency
Graphical
G hi l representation
t ti
•Charts, graphs, histograms
1-34

35. Quantitative Data Analysis
• Averages
• Mean: add up values and divide by number of
data points
• Median: middle value of data when ranked
• Mode: figure that appears most often in the data
• Percentages
• Graphical representations give overview of data
Number of errors made
N b f d Internet use Number of errors made
10 4.5
mber of errors made
mber of errors made
< once a day 4
8 3.5
3
6 once a day
2.5
4 2
once a week 1.5
2 1
Num
Num
0.5
2 or 3 times a week
0 0
0 5 10 15 20 1 3 5 7 9 11 13 15 17
User
once a month
User 1-35

36. Qualitative Data Analysis
“ I am thinking it’s j
g just a lot of information to absorb
from the screen. I just I don’t concentrate very well
when I’m looking at the screen . I have a very clear
idea of what I ‘ve read so far but it s because of
ve far… it’s
the headings I know OK ….there is so much
reference to all those previously said like ……maybe
it would be nice to have this navigation, extra links
…”
Verbalisations show evidence of dissatisfaction, confusions,
, ,
and that user is having problem in achieving overall task goal.
1-36

37. Summary –
Development Methodologies
User Interface Requirements
• Development methodologies help offer validated
processes with predictable schedules and meaningful
deliverables.
• Collecting User Interface Requirements can be
notoriously difficult but well-documented success stories
inform and inspire.
inspire
• Ethnographic observation can provide information to
guide task analysis.
• Scenarios are useful for managerial and customer
presentations, and helps to plan usability tests.
1-37
3-37

38. Guidelines documents and processes
– Terminology (objects and actions), abbreviations, and
capitalization
– Words, icons and graphics
– Screen-layout issues
y
– Input and output devices
– Direct-manipulation clicking, dragging, dropping, and
g
gestures
– Error handling and recovery procedures
– Online help and tutorials
– Training and reference materials
1-38
3-38

39. Conceptualize
Interaction
Interface Interaction
Metaphor
Type Type

40. Interaction Types
Interface Types
1-40

41. Interaction Types
1-41

42. Instructing
• Users give instructions to a system
– Typing commands
– Selecting options from menu
g p
– Speaking aloud commands
– Pressing buttons
– Using fn-keys
• quick, efficient, repetitive action
ff
1-42

43. Instructing - examples
1-43

44. Manipulating
The central ideas of user control:
• Visibility of Object and Actions
• Rapid, reversible, incremental actions
• Replacement of complex command-language syntax
command language
with direct, visual manipulation of the object of
interest.
1-44

45. Manipulating - examples
1-45

46. Conversing
• User & system as dialog partners
• Good for cases where user needs to find information
or discuss issues
– Advisory systems
– Help facilities
• Simple Voice recognition, menu-driven to natural
language based systems
1-46

47. Conversing-Examples
• Ik help centre
Ikea h l t
…… ………. An unedited conversation
Ben: no one does. i hate you.
Anna: If I have unintentionally offended you then I apologise If
apologise.
you think that I am not providing you with useful information about
IKEA you can contact the Customer Service at your nearest IKEA
Store.
Ben: and what will they do? hmm? they can’t sack someone that’s
not real. you get away with murder. who do you answer to? is
there a virtual boss somewhere sitting in his virtual office?
Anna: As I am only an advanced computer program, I cannot
answer more than one sentence at a time. Please simplify and
repeat the most important question within your previous input and
input,
I will try to reply as accurately as possible. I am opening a page
1-47
now which you can use if you wish to contact Customer Services.
Thank you very much!

48. Conversing - Examples
• A k , Ask jeeves – kid A k Kid
Ask A k j kids, Ask Kids
1-48

49. Exploring
• Enables users to explore and interact with
p
environment
• Users move through virtual or physical environments
• Context aware systems – based on location and/or
Context-aware
presence of people in the vicinity of sensing device.
1-49

50. Exploring - example
CAVE project
p j
http://graphics.cs.brown.edu/research/cave/home.html
1-50

51. Exploring - example
Ambient Wood project
http://www.informatics.sussex.ac.uk/research/groups/interact/projects/Equator/ambient_wood.htm
1-51

52. 1-52

53. Interface Paradigms
1980s interfaces
• 80 – single user
80s i l Command
desktop apps WIMP/GUI
1990s interfaces
Advanced graphical (multimedia, virtual reality,
information visualization)
• 90s – multimedia apps, Web
Speech (voice)
web interface Pen, gesture, and touch
Appliance
2000s interfaces
Mobile
• 2000s– robotics, Multimodal
Shareable
mobile interfaces Tangible
Augmented and mixed reality
Wearable
Robotic
1-53

54. Recent shifts
• How to enable people to access and interact with
p p
information in their work, social, and everyday lives
• Designing user experiences for people using interfaces
that are part of the environment with no controlling
devices.
• What form to provide contextually-relevant information
to people at appropriate times and places
• Ensuring that information, that is passed around via
interconnected displays devices and objects is secure
displays, devices, objects,
and trustworthy. 1-54

55. Command interfaces
• Efficient, precise, and fast
,p ,
• Large overhead to learning set of commands.
1-55
55

56. WIMP/GUI interfaces
• Windows
• Icons
• Menus
• Pointing device
1-56

57. Windows
• Windows were invented to overcome
physical constraints of a computer
display, enabling more information to be
p y g
viewed and tasks to be performed.
• Scroll bars within windows also enable
more information to be viewed.
1-57

58. Menus
Flat , drop down, pop up, contextual, and expanding.
drop-down, pop-up,
• Flat menus
– good at displaying a small number of options
at the same time and where the size of the
display is small
– Nested lists of options require several steps to
get to the desired option
1-58

59. Menus
• Contextual menu
– P id access t often-used commands th t make
Provides to ft d d that k
sense in the context of a current task.
• right-click
1-59

60. Menus
• Expanding menus
– Enables more options to be shown on a single
screen th i possible with a single fl t menu .
than is ibl ith i l flat
– More flexible navigation, allowing for selection of
options to be done in the same window
– M t popular are cascading ones
Most l di
• primary, secondary and even tertiary menus
• downside is that they require precise mouse
control
• can result in overshooting or selecting wrong
options
1-60

61. Icons
• black and white -> color, shadowing, photorealistic
images,
images 3D rendering, and animation
rendering
• very detailed and animated -> visually attractive and
informative, inviting, emotionally appealing, and f l alive
i f ti i iti ti ll li d feel li
• The mapping between the representation and underlying
referent can be:
– similar (e.g., a picture of a file to represent the object
file),
file)
– analogical (e.g., a picture of a pair of scissors to
represent ‘cut’)
– arbitrary (e.g., the use of an X to represent ‘delete’) 1-61

62. Multimedia
• Combines different media within a
single interface with various forms of
y
interactivity
– graphics, text, video, sound, and animations
1-62

63. BioBlast multimedia learning environment
1-63

64. Multimedia - Characteristics
• Facilitates rapid access to multiple representations of
p p p
information.
• Provide better ways of presenting information than can
either one alone.
• Enable easier learning, better understanding, more
engagement, and more pleasure.
• E
Encourage users t explore e.g. diff
to l different parts of a
t t f
game or story.
• Users develop tendency to play video clips and
y y
animations, while skimming through accompanying text
or diagrams.
1-64

65. Virtual reality and virtual environments
• Computer-generated g p
p g graphical simulations p providing:
g
– “the illusion of participation in a synthetic environment
rather than external observation of such an
environment
environment” (Gigante, 1993)
• provide new kinds of experience, enabling users to
interact with objects and navigate i 3D space
i t t ith bj t d i t in
• Create highly engaging user experiences
http://www.openskies.net/gorilla/ 1-65
65

66. Web interfaces
• Early websites were largely text-based,
text based,
providing hyperlinks
• Concern was with how best to structure
information at the interface to enable users to
navigate and access it easily and quickly
• Nowadays, more emphasis on making pages
distinctive, striking, and pleasurable.
1-66

67. Useit.com
1-67

68. SwimStudio
1-68
http://www.swimstudio.com/

69. Usability versus attractiveness
• Vanilla or multi-flavor design?
g
– Ease of finding something versus aesthetic and
enjoyable experience
• Users read the web like a:
– “billboard going by at 60 miles an hour” (Krug
billboard hour (Krug,
2000)
• Need to determine how to brand a web page
to catch and keep ‘eyeballs’
1-69

70. Speech interfaces
• Where a person talks with a system that has a
spoken language application, e.g., timetable, travel
planner
l
• Used most for inquiring about very specific
information, e.g., flight times or to perform a
transaction, e.g., buy a ticket
• Also used by people with disabilities
– e.g., speech recognition word processors, page
h iti d
scanners, web readers, home control systems
1-70
70

71. Speech interfaces
• Directed dialogs
– where the system is in control of the conversation
– Ask specific questions and require specific responses
• Flexible systems allow the user to take the initiative:
– e.g., “I’d like to go to Paris next Monday or two
weeks.
weeks.”
– Guided prompts can help callers back on track
• e.g., “Sorry I did not get all that. Did you say you wanted to fly
next Monday?”
Monday?
1-71

72. Mobile interfaces
• Handheld devices intended to be used while
on the move, e.g., PDAs, cell phones
• Applications running on handhelds have
greatly expanded, e.g.,
– used in restaurants to take orders
– car rentals to check in car returns
– supermarkets for checking stock
k t f h ki t k
– in the streets for multi-user gaming
1-72

73. Mobile interfaces
• Small screens, small number of keys and restricted
y
number of controls.
• Innovative designs including:
– roller wheels, rocker dials, 2-way and 4-way
directional keypads, softkeys
• Usability and preference for these control devices varies
– depends on the dexterity and commitment of the user
1-73

74. Shareable interfaces
• Shareable interfaces are designed for more than one
g
person to use
– provide multiple inputs and sometimes allow
simultaneous input by co located groups
co-located
– large wall displays where people use their own pens
or gestures
–i t
interactive tabletops where small groups i t
ti t bl t h ll interact
t
with information using their fingertips, e.g., Mitsubishi’s
DiamondTouch and Sony’s Smartskin
1-74

75. A smartboard
1-75

76. DiamondTouch Tabletop
1-76

77. Tangible interfaces
• Type of sensor-based interaction, where physical
yp , p y
objects, e.g., bricks, are coupled with digital
representations
• When a person manipulates the physical object/s it
causes a digital effect to occur, e.g. an animation
g g
• Digital effects can take place in a number of media
and places or can b embedded i th physical
d l be b dd d in the h i l
object
1-77

78. Tangible interfaces
Examples
• Chromarium cubes
– when turned over digital animations of color are mixed
on an adjacent wall
• Flow Blocks
– depict changing numbers and lights embedded in the
blocks
• Urp
– physical models of buildings moved around on
tabletop
Beat Blocks : http://www.youtube.com/watch?v=Jug3iYAuJes&feature=related 1-78
Candy Sequencer :http://www.youtube.com/watch?v=ziIdjrR_MRs&feature=related

79. Wearable interfaces
• First developments was head- and eyewear-mounted
cameras that enabled user to record what seen and to
access digital information.
• Since jewelery head mounted caps smart fabrics
Since, jewelery, head-mounted caps, fabrics,
glasses, shoes, and jackets have all been used
– provide the user with a means of interacting with digital
information while on the move
http://www.youtube.com/watch?v=LoyNqCsksdg&feature=related
http://www.youtube.com/watch?v=zr1kqL08uj4&p=F6267412D11E8EC9&playnext=1
1-79
&index=19

80. Steve Mann - pioneer of wearables
http://www.youtube.com/watch?v=DiFtmrpuwNY&p=F282F7FBBB11F57E 1-80
&playnext=1&index=2

81. Robotic interfaces
• Four types
yp
– remote robots used in hazardous settings
– domestic robots helping around the house
– pet robots as human companions
– sociable robots that work collaboratively with
humans, and communicate and socialize with them –
,
as if they were our peers
1-81

82. Which interface?
• Is multimedia better than tangible interfaces for
learning?
• Is speech as effective as a command-based interface?
• Is a multimodal interface more effective than a mono-
modal interface?
• Will wearable interfaces be better than mobile interfaces
for helping p p find information in foreign cities?
p g people g
• Are virtual environments the ultimate interface for
playing games?
• Will shareable interfaces be better at supporting
communication and collaboration compared with using
networked desktop PCs?
et o ed des top Cs
1-82

83. Summary
• Much system development for the PC platform will
continue to use advanced GUIs, in the form of multimedia,
web-based interfaces, and virtual 3D environments
• Mobile interfaces have come of age
– Increasing number of applications and software toolkits
available
• Speech interfaces also being used much more for a
variety of commercial services
• Appliance and vehicle interfaces becoming more
pp g
important
• Shareable and tangible interfaces entering our homes,
schools, public p
p places, and workplaces
p
• An important concern that underlies the design of any
kind of interface is how information is represented to
the user so they can carry out ongoing activity or
y y g g y
task. 1-83