HCI Course at VUB: Intro, Goals, Schedule & Material

2 December 2005
Human-Computer Interaction
Introduction
Prof. Beat Signer
Department of Computer Science
Vrije Universiteit Brussel
beatsigner.com

Beat Signer - Department of Computer Science - bsigner@vub.be 2
September 29, 2023
Course Organisation
▪ Prof.Dr.Beat Signer
PL9.3.60 (Pleinlaan 9)
+32 2 629 1239
bsigner@vub.be
wise.vub.ac.be/beat-signer
▪ Ingela Rossing
+32 2 629 3749
ingela.rossing@vub.be
wise.vub.ac.be/ingela-rossing

September 29, 2023
Course Organisation …
▪ Isaac Valadez
+32 2 629 3749
jvaladez@vub.be
wise.vub.ac.be/isaac-valadez

September 29, 2023
Course Goals
▪ After attending the course Human-Computer Inter-
action, the student has an understanding of general HCI
principles and user interface design guidelines as well as
the interaction design process and its use for the human-
centred design of digital and physical products. The student
is able to reflect on the qualities and shortcomings of differ-
ent interaction styles, while placing the user at the core of
the interface design process.

September 29, 2023
Course Goals …
▪ The student can apply the theoretical background,
the human-computer interaction principles and the inter-
action design lifecycle model discussed in the course to
create interfaces with good usability and user experience.
Students are further able to explain their decisions based
on the theory as well requirements analysis and
evaluations.
▪ The student is able to assess the usability and effective-
ness of user interfaces by using the tools and principles
studied during the course. Based on these tools and princi-
ples, the student is further able to match different interface
and interaction types for a given context.

September 29, 2023
Exercises
▪ The course content is further investigated in
the exercise sessions
▪ the topics covered in the exercise sessions will
also be helpful for the assignment
▪ Additional content might be covered in exercises
▪ strongly recommended to attend all exercise sessions!
▪ exam covers content of lectures and exercises
▪ Exercise sessions
▪ assistants: Ingela Rossing (ingela.rossing@vub.be) and
Isaac Valadez (jvaladez@vub.be)
▪ 2 groups (starting on October 4)
- WPO1: Thursday 09:00–11:00 in D.3.04
- WPO2: Wednesday 16:00–18:00 in D.2.09

September 29, 2023
Course Material
▪ All material will be available on Canvas
▪ lecture slides, exercises, research papers, tutorials, ...
▪ Make sure that you are subscribed to the
Human-Computer Interaction course on Canvas
▪ https://canvas.vub.be/courses/35300
▪ Handouts are on Canvas the day before the lecture
▪ slides will also be available on the WISE website
- https://wise.vub.ac.be/course/human-computer-interaction

September 29, 2023
Lecture Schedule
Exercise 1: Discussion of Existing Interfaces and Interactions
3
4
5
6
Lecture 2: HCI and Interaction Design
Lecture 3: Requirements Analysis and Prototyping
Exercise 2: Requirements Analysis
Lecture 4: Human Perception and Cognition
Lecture 7: HCI Research Methods
Exercise 5: FIGMA
E.0.09
E.0.09
E.0.09
E.0.09
D.2.09/D.3.04
D.2.09/D.3.04
D.2.09/D.3.04
7
8
E.1.02
Lecture 1: Introduction
2
No Exercise
Exercise 3: Low-Fidelity Prototyping D.2.09/D.3.04
E.0.09
Lecture 5: Design Guidelines and Models
Exercise 4: Project Feedback (Low-Fidelity Prototype)
E.0.09
D.2.09/D.3.04
D.2.23
No Exercise
Lecture 6: Evaluation Methods E.0.09

September 29, 2023
Lecture Schedule …
No Lecture
No Exercise
10
11
12
13
14
No Lecture
No Lecture
Exercise 7: Evaluation (Usability / User Experience)
No Exercise
9
Exercise 6: Heuristic Evaluation
No Lecture
D.2.09/D.3.04
D.2.09/D.3.04
Lecture 8: Use Cases and Course Review
No Exercise
E.0.09
No Lecture
Exercise 8: Project Presentation D.2.09/D.3.04

September 29, 2023
Assignment
▪ New VUB website
▪ addressing different parts of a potentially new
VUB website (recreation and free time, library, Brussels Inter-
national Students, travel and exploration in Belgium, cafeteria)
- project report, videos of prototypes and final presentation
- evaluated based on creativity, application of Interaction Design process and
HCI guidelines, documentation, requirements analysis and evaluation,
prototypes and final presentation
▪ Assignment handed out in week 2
▪ group project with 3 students per group
- send an email with the 3 group members and your team name to Ingela
Rossing by Friday, October 6 (ingela.rossing@vub.be)
- final presentation (week of December 18), report and videos (December 23)
▪ assignment counts for 50% of the final grade

September 29, 2023
Exam
▪ Written closed book exam
▪ covers content of lectures and exercises
▪ counts 50% for the overall grade
▪ Overall grade = written exam (50%) + assignment (50%)
▪ for the assignment students have some flexibility in distributing
the grades (±2 points)
▪ note that the grade for the written exam as well as for the assign-
ment have to be 8/20 or higher in order to pass the exam!

September 29, 2023
Course Outline
1. Introduction
▪ history of human-computer interaction
▪ interface types
2. HCI and Interaction Design
▪ human-computer interaction, interaction design process
▪ understanding and conceptualising interaction
3. Requirements Analysis and Prototyping
▪ data gathering and analysis for requirements
▪ different types of prototyping
4. Human Perception and Cognition
▪ vision, attention, recognition, memory, …
▪ hand-eye coordination

September 29, 2023
Course Outline …
5. Design Guidelines and Models
6. Evaluation Methods
▪ DECIDE framework, usability testing, experiments, field testing,
heuristic evaluations, A/B testing, predictive models
7. HCI Research Methods
8. Use Cases and Course Review
▪ various uses cases
▪ course review and questions about exam

September 29, 2023
▪ Human-Computer Interaction is a multidisciplinary field
▪ Computer Science
▪ Design
▪ Cognitive Science
▪ Psychology
▪ …
Human-computer interaction is a discipline concerned
with the design, evaluation and implementation of
interactive computing systems for human use and with
the study of major phenomena surrounding them.
ACM SIGCHI Curricula for Human-Computer Interaction

September 29, 2023
Beyond Human-Computer Interaction
Interaction design addresses the design of interactive
products to support the way people communicate and
interact in their everyday and working lives.
Y. Rogers, H. Sharp and J. Preece, Interaction Design: Beyond Human-Computer Interaction
Interaction Design (IxD) defines the structure and
behavior of interactive systems. Interaction Designers
strive to create meaningful relationships between people
and the products and services that they use, from
computers to mobile devices to appliances and beyond.
ixd.org

September 29, 2023
Interaction Design (IxD)
[Illustration by Dan Saffer]

September 29, 2023
Analogue Computers
▪ Focus on technology and
not on human-machine
interaction (HMI)
▪ Only trained engineers
could use the machines
▪ Interaction was limited to
the programming of the
machines (e.g.punched
cards) and the printing of
results

September 29, 2023
Sketchpad (1963)
▪ Sketchpad developed as
part of Ivan Sutherland’s
PhD thesis at MIT
▪ drawing tool
▪ light pen and buttons
▪ first graphical user interface
▪ direct manipulation of
graphical objects
▪ basis for many new interface
ideas

September 29, 2023
The Mother of All Demos (1968)
▪ Douglas Engelbart and his colleagues
at the Stanford Research Institute
developed the oNLine System (NLS) as
part of the Augment Project
▪ vision about the future of interactive computing
▪ NLS was demonstrated at the Fall
Joint Computer Conference in 1968
▪ showed first practical use of hypertext
▪ computer mouse
▪ remote collaboration (connected computers)
▪ raster-scan video monitors
▪ screen windows
▪ ...
Douglas Engelbart

September 29, 2023
NLS Demo

September 29, 2023
Xerox Alto and Xerox Star (1981)
▪ Personal workstation
▪ LAN to share resources
▪ Desktop metaphor
▪ windows, icons, menus,
pointer (WIMP) interaction
▪ "filing cabinets" with
hierarchical folders
▪ seeing and pointing rather
than remembering and
typing
▪ "What You See Is What You
Get" (WYSIWYG)
Xerox Star 8010 [http://www.digibarn.com/collections/systems/xerox-8010/]

September 29, 2023
Apple Macintosh (1984)
▪ Successor of Apple Lisa
▪ corrected some mistakes
▪ aggressive pricing
▪ Old ideas (e.g.Xerox Star)
but well executed
▪ Domination in the desktop
publishing sector
▪ excellent graphics
▪ affordable laser printers

September 29, 2023
"Evolution" of Interfaces
date January 1984 February 2022 + 38 years
price $2500 $3199 x 1.28
CPU 68000 Motorola
8 MHz
0.7 MIPS
8-core Intel Core i7
3.8 GHz
238 310 MIPS
x 450
x 340000
memory 128 kB 16 GB x 132000
storage 400 kB floppy drive 1 TB SSD drive x 2684000
monitor 9" black and white
512 x 342
68 dpi
27" colour
5120 x 2880
218 dpi
x 3
x 84
x 3.2
devices mouse
keyboard
mouse
keyboard
same
same
GUI desktop WIMP desktop WIMP same
[partly based on Beaudouin-Lafon 2004]
original Macintosh 27-inch iMac comparison

September 29, 2023
Recent Changes and Opportunities in HCI
▪ Advances in graphical interfaces, speech, gesture and
handwriting recognition
▪ Emergence of the Internet, cell phones, wireless
networks, sensor technologies as well as large and small
screens
▪ innovative interaction with digital information and services
▪ combining the physical and digital in new ways
- mixed reality, cross-media spaces, tangible interfaces, wearable computing, ...
▪ collaborative interfaces with social interaction

September 29, 2023
Interface Types
▪ Command-based
▪ WIMP and GUI
▪ Multimedia
▪ Virtual reality
▪ Web
▪ Consumer electronics
▪ Mobile
▪ Speech (Voice)
▪ Pen
▪ Touch
▪ Gesture
▪ Haptic
▪ Gaze-based
▪ Multimodal
▪ Shareable
▪ Tangible
▪ Augmented and mixed reality
▪ Wearable
▪ Robots
▪ Brain-computer
▪ Smart
▪ …

September 29, 2023
Command-based Interfaces
▪ Typing commands such as
ls or rm in command line
▪ Combination of keys such
as Ctrl + c and Ctrl + v
▪ Superseded by GUIs
▪ Still used by experts
▪ batch processing
▪ Alternative to GUIs for
visually impaired users
▪ e.g.command-line interface
for Second Life
▪ Syntax (e.g. how to combine
commands)
▪ Which names can be
remembered best
▪ Consistency in labeling and
naming of commands

September 29, 2023
WIMP and GUI
▪ Originated from Xerox
Star interface
▪ Windows
▪ scroll, stretch, overlap, open,
close, move
▪ Icons
▪ representing applications,
objects or commands
▪ Menus
▪ scrollable list of options
▪ Pointer/Pointing Device
▪ mouse controlling the cursor
Original 1984 Mac OS desktop
Comodore 64, Magic Desk, 1983

September 29, 2023
Windows
▪ Overcome physical screen
constraints
▪ view more information
▪ perform multiple tasks
▪ Various forms to navigate
through windows
▪ Dialogue boxes
▪ can be modal to control the
interaction
▪ how to control interaction in
post-WIMP or non-graphical
interfaces?
▪ Window management to move
between different windows
and screens
▪ Design principles of spacing,
grouping and simplicity to
present information

September 29, 2023
Icons
▪ Easier to learn and re-
member than text labels
▪ objects and operations
▪ Can easily be arranged on
screen
▪ Different styles
▪ photo-realistic images
▪ logo-style images
▪ Also used in consumer
products (e.g.digital
cameras)
▪ Various guidelines and style
guides for icon design
▪ Icons can be used in
combination with labels
▪ e.g. for toolbars with small icons

September 29, 2023
Menus
▪ Different menu interface
styles
▪ flat lists, drop-down, pop-up,
scrolling, contextual,
expanding, …
▪ Often nested list of options
▪ Scrolling through long lists
can be frustrating
▪ new controls such as mouse
scroll wheel
▪ Carefully think about the best
terms for menu options
▪ Choose menu type based on
application and display size
▪ flat menus vs. expanding menus

September 29, 2023
Multimedia Interfaces
▪ Combines different media
▪ graphics, text, video, sound
and animation
▪ Rapid access to multiple
representations of
information
▪ multimedia encyclopaedias
or digital libraries
▪ training, education and
entertainment
▪ danger of fragmented
interactions
▪ Guidelines on how to best
combine multiple media for
different kinds of tasks
▪ e.g. audio for stimmulating imagi-
nation, movies for action infor-
mation and text to provide details
BioBLAST multimedia project

September 29, 2023
Virtual Reality Interfaces
▪ Computer-generated
graphical simulations
▪ illusion of participation in a
virtual environment (VE)
▪ Use of CAVEs (Cave
Automatic Virtual
Environment) or headsets
▪ New ways of navigating in
3D space
▪ First-person view or third-
person perspective
▪ How to prevent users from
experiencing nausea
▪ Identify most effective ways for
navigation
▪ Best ways to interact with
information
Oculus Quest virtual reality headset

September 29, 2023
Web Interfaces
▪ Website should be
▪ aesthetically pleasing
▪ usable
▪ easy to maintain
▪ Users do often not read all
the content on a page
before following a link
▪ Bring the desktop to the
browser
▪ HTML5 and JavaScript
▪ AJAX
▪ …
▪ Emphasis on content and the
use of links for navigation
▪ Where am I? What’s here?
Where can I go?
▪ Web Content Accessibility
Guidelines (WCAG)

September 29, 2023
Consumer Electronics and Appliances
▪ Machines and devices for
everyday use in the home,
public place, car, …
▪ remote controls
▪ digital clocks
▪ DVD players
▪ washing machines
▪ …
▪ Get specific tasks done in
a short period of time
▪ less time to read a manual or
explore the interface
▪ Interfaces for short interactions
▪ Simplicity
▪ Visibility of status information
▪ Physical controls vs.touch
screens

September 29, 2023
Mobile Interfaces
▪ Main difference in size
and portability
▪ ready at hand 24/7
▪ Real-time access to
contextual information
▪ scanning product barcodes
while shopping
▪ scanning QR codes
▪ Location-based services
and recommendations
▪ Small screen and limited
control space
▪ Various guidelines on how to
design mobile interfaces
▪ Privacy issues
▪ location sharing applications

September 29, 2023
Speech (Voice) Interfaces
▪ Various applications
▪ flight times or buying a ticket
▪ replace touchtone navigation
▪ real-time translators
▪ Supports visually impaired
users
▪ Voice recognition and text-
to-speech technology
▪ specific grammars to improve
recognition rate
▪ barge-in
▪ Natural interfaces vs.voice-
based menu navigation
▪ Type of voice actor
▪ Immediate confirmation of
requests

September 29, 2023
Pen Interfaces
▪ Based on writing skills
developed from childhood
▪ digitalisation of handwriting
▪ Stylus on screen vs. digital
pen and paper
▪ Quick and easy way to
annotate documents
▪ Intuitive interfaces to
integrate physical paper
with digital information
and services
▪ Switching from writing,
annotating or sketching to the
execution of commands
▪ context-sensitive menus
▪ Feedback for digital pen and
paper interfaces
EdFest, Global Information Systems Group, ETH Zurich

September 29, 2023
Touch Interfaces
▪ Already in use for quite
some time
▪ ticket machines, museum
guides, ATMs
▪ More recently muIti-touch
interfaces for smartphones
▪ swiping, tapping, pinching, …
▪ Use of gestures for
interacting with digital
content
▪ New forms of consuming,
creating and searching digital
content compared to mouse
and keyboard
▪ e.g.swiping virtual keyboards
Microsoft PixelSense technology

September 29, 2023
Gesture-based Interfaces
▪ Tracking of people’s body,
arm and hand gestures
▪ Nintendo Wiimote
▪ Microsoft Kinect
▪ …
▪ Mid-air gestures also used
for controlling home
appliances
▪ Sign language interpreters
▪ Detection (start/end) and
recognition of mid-air gestures
▪ continous input stream
▪ Gestures vs.unconscious
gesticulation
▪ Control device vs.hands-free
Microsoft Kinect

September 29, 2023
Haptic Interfaces
▪ Various forms of haptic
feedback
▪ vibrating phone
▪ actuators in clothing
▪ Used for tactile feedback
in learning and sports
training
▪ Improves experience in
games
▪ force feedback steering
wheel
▪ …
▪ Various issues regarding the
actuators
▪ where to place them on the body
▪ single vs.sequence of tactile
feeback
▪ intensity and frequency
PHANTOM Omni haptic device

September 29, 2023
Gaze-based Interfaces
▪ Control computer by
simply looking at it
▪ Very fast and accurate
hands-free input
▪ Good for pointing but less
suited for smooth drawing
▪ Useful for evaluations
in HCI
▪ Increasing use in Virtual
and Mixed Reality
▪ Often needs some initial
calibration
▪ How to distinguish deliberate
gazing from accidental
glancing?
Canon EOS R3 Eye Control AF

September 29, 2023
Multimodal Interfaces
▪ Enriched user experience
by using multiple input
and output modalities
▪ speech and gesture
▪ eye-gaze and gesture
▪ pen input and speech
▪ …
▪ Multiple modalities might
be used simultaneously or
alternately
▪ Recognition and calibration of
different aspects of a user’s
behaviour is more difficult
▪ Identify gains of combining
different input and output
modalities
SpeeG2, WISE research lab

September 29, 2023
Shareable Interfaces
▪ Multi-user interfaces for
flexible group work and
content creation
▪ Shared point of reference
▪ Some interfaces have
become an integrated part
of furniture ▪ New forms of collaborative
interaction based on large
shareable surfaces
▪ Effect of size, shape and
orientation of surface
▪ Shared vs.private space
DiamondTouch tabletop

September 29, 2023
Tangible Interfaces
▪ Physical objects are
coupled with digital
representations
▪ Sensing of physical
objects and feedback in
digital or physical space
▪ Interplay of different
devices and objects
▪ no enforced sequencing and
no modal interaction
▪ Affordances of interface
objects guide the user
▪ Coupling between physical
action and effect
▪ where to provide digital feedback
▪ What kind of physical artefacts
should be used
▪ bricks, cubes, sticky notes, …
ArtVis, WISE research lab

September 29, 2023
Augmented and Mixed Reality
▪ Augmentation of the
physical environment with
digital information and
services
▪ Information can be
visualised (overlaid) in
different ways
▪ head-mounted displays
(HMDs)
▪ handheld displays
▪ fixed installations
Microsoft HoloLens
▪ Form of the digital
augmentation and when and
where it should be applied
▪ Very different designs
▪ playful learning experience
▪ medical application

September 29, 2023
Wearable Interfaces
▪ Various new materials
▪ flexible display technologies
▪ e-textiles
▪ Glasses, jewellery, shoes
or jackets as user
interfaces
▪ Wearable technology for
remote awareness
▪ Hug Shirt by CuteCircuit for
mobile phone calls
▪ Wearable interfaces have to
be comfortable
▪ Hygiene is an issue
▪ washing of e-textiles
▪ Social acceptance and privacy
Smart contact lens

September 29, 2023
Robots
▪ Originally used in
manufacturing assembly
lines and to investigate
hazardous locations
▪ More recently domestic
robots for cleaning and
gardening
▪ e.g.Roomba iRobot
▪ Pet robots and human-like
robots used in therapies
▪ Ethical concerns
▪ robots with human- or animal-like
behaviour
▪ Communication with robots
▪ human-”human” vs.human-
machine interaction
Kismet, MIT A.I lab

September 29, 2023
Brain Computer Interfaces
▪ Communication between
a user’s brain waves and
an external device
▪ electrodes detect electric
signals moving between
neurons
▪ Brain computer interfaces
(BCI) can also help
disabled user’s
▪ interaction with computers
▪ reconnect brain to muscles
EPOC, emotiv
▪ Brain computer interfaces
should be comfortable
▪ Number of different
actions/commands that can be
executed

September 29, 2023
Smart Interfaces
▪ Smart devices commu-
nicating with users and
other devices
▪ often learn the context and
user behaviour (AI)
▪ implicit interactions do not
have to be triggered by user
▪ Smart environments such
as smart homes or offices
Home automation
▪ Minimise mismatch between
user expectations and actions
triggered by the system
▪ Intelligibility offers users
insights about the system
behaviour

September 29, 2023
Which Interface Should We Use?
▪ In the last few years there is a significant increase in the
number of user interface types
▪ How to decide which interface is preferable for a given
task or activity?
▪ multimedia vs.tangible interface for learning
▪ speech vs.command-based interface
▪ multimodal vs.monomodal interface
▪ wearable vs.mobile interface
▪ virtual reality vs.augmented reality
▪ Many of these questions are currently being researched
▪ this course will provide you some more insights about the design
process and human-computer interaction-related issues

September 29, 2023
Exercise 1
▪ Discussion of existing human-computer interfaces
and interactions

September 29, 2023
Further Reading
▪ Parts of this lecture are based on the
book Interaction Design: Beyond
▪ chapter 7
- Interface Types

September 29, 2023
References
▪ Interaction Design: Beyond Human-Computer
Interaction, Yvonne Rogers, Helen Sharp and
Jenny Preece, Wiley (6th edition), April 2023
ISBN-13: 978-1119901099
▪ Designing with the Mind in Mind: Simple Guide to
Understanding User Interface Design Guidelines,
Jeff Johnson, Morgan Kaufmann (3rd edition),
November 2020, 978-0128182024
▪ Human-Computer Interaction, Alan Dix,
Janet E. Finlay, Gregory D. Abowd and Russell
Beale, Prentice Hall (3rd edition), December 2003
ISBN-13: 978-0130461094

September 29, 2023
References …
▪ Research Methods in Human-Computer Inter-
action, Jonathan Lazar, Jinjuan Heidi Feng and
Harry Hochheiser, Morgan Kaufmann (2nd edition),
May 2019, ISBN-13: 978-0128053904
▪ Designing for Interaction: Creating Innovative
Applications and Devices, Dan Saffer, New Riders
(2nd edition), August 2009
ISBN-13: 978-0321643391
▪ The Design of Everyday Things, Don Norman,
Basic Books (revised and expanded edition),
November 2013, ISBN-13: 978-0465050659

September 29, 2023
References ...
▪ M.C. Norrie, B. Signer, M. Grossniklaus, R. Belotti,
C. Decurtins and N. Weibel, Context-Aware Platform for
Mobile Data Management, Wireless Networks (WINET),
13(6), Springer, December 2007
▪ https://beatsigner.com/publications/norrie_WINET2007.pdf
▪ L. Hoste and B. Signer, SpeeG2: A Speech- and
Gesture-based Interface for Efficient Controller-free Text
Entry, Proceedings of the 15th International Conference
on Multimodal Interaction (ICMI 2013), Sydney,
Australia, December 2013
▪ https://beatsigner.com/publications/hoste_ICMI2013.pdf

September 29, 2023
References ...
▪ B. Dumas, B. Moerman, S. Trullemans and B. Signer,
ArtVis: Combining Advanced Visualisation and Tangible
Interaction for the Exploration, Analysis and Browsing of
Digital Artwork Collections, Proceedings of the International
Working Conference on Advanced Visual Interfaces
(AVI 2014), Como, Italy, May 2014
▪ https://beatsigner.com/publications/dumas_AVI2014.pdf
▪ B. Signer, Towards Cross-Media Information Spaces and
Architectures, Proceedings of the 13th International Con-
ference on Research Challenges in Information Science
(RCIS 2019), Brussels, Belgium, May 2019
▪ https://beatsigner.com/publications/signer_RCIS2019.pdf

September 29, 2023
References ...
▪ Sketchpad Demo
▪ https://www.youtube.com/watch?v=6orsmFndx_o
▪ Videos of the NLS demo
▪ https://www.youtube.com/watch?v=yJDv-zdhzMY

2 December 2005
Next Lecture
HCI and Interaction Design

HCI Course at VUB: Intro, Goals, Schedule & Material

Recommended

Recommended

More Related Content

Similar to HCI Course at VUB: Intro, Goals, Schedule & Material

Similar to HCI Course at VUB: Intro, Goals, Schedule & Material (20)

More from Beat Signer

More from Beat Signer (20)

Recently uploaded

Recently uploaded (20)

HCI Course at VUB: Intro, Goals, Schedule & Material