LECTURE 1

Human Computer Interface

- The study, planning, and design of the interaction between people (users) and computers.
- Areas: input/output devices, interaction techniques, design/evaluation of traditional
interfaces.

Experiments
- Protocol to invalidate the null hypothesis, specifies how the participants perform trials.
- Apparatus to change the independent variable(s) and measure each participant score for
each dependent variable.
- First and most important step is to determine the type of research question: X > Y, X
related to Y, or X causes Y.

What do we measure in an experiment?

- Causes: does X cause Y?
o Measuring X and Y.
o Counting for the effects of other things related.
- Correlations: do X and Y co-vary?
o Measuring X and Y.
- Comparison: is X > Y?
o Measuring X and Y.
- Base rates: how often does Y occur?
o Measuring Y and verifying it against a known value.

Why do experiments?
- To come up with a global finding (means it is applicable to all humans on earth).

Experiment Design

Tasks to design and run an experiment

- Design
o Choose independent variables
o Choose dependent variables
o Develop hypothesis + null
o Choose design paradigm
▪ within/between subjects
▪ apparatus used (explain test and how to measure dependent variable)
▪ protocol (how to administer the experiment)
o Choose a sample size
o Choose control procedures
- Pilot experiment
- Run experiment
- Analyse data
- Interpret results
Participants
- Used to be called subjects (politically incorrect).
- Drawn randomly from a representative population.
- Screening is still ok but for biases.

Independent Variable: manipulated by the experimenter.

- Controllable.
- Has an effect on dependent variables.
- Level (condition): a specific value for an independent variable.
o an independent variable must have at least two levels.

Dependent Variable: measured/calculated by experimenter.

- Outcome measure.
- Affected by independent variables.
- Should depend on independent variable.
- Examples: reaction time, accuracy, recall, emotional response.

Hypothesis: a claim about causes, correlation, or base rates.

- Relationship between independent and dependent variables.
- Could be proven or rejected.
- Null Hypothesis (H0): the nullification of the hypothesis.
- Confound Hypothesis: competing hypothesis that experimenter tries to neutralize.

Control Variable: experimenter controls to avoid affecting the results (the dependent
variable values).
- Examples: lighting condition, temperature, noise.
- Control procedure
o Goal is to eliminate confound hypothesis and thereby to increase internal validity.
o Achieved by making sure there are no systematic differences between conditions
other than the independent variable.
- What to control?
o Subject characteristics
o Gender, Ability, Experience
o Task variables
o Instructions, Materials used
o Environmental variables
o Setting, Noise, light, etc.
o Order effects
o Practice, Fatigue

Trial: a combination of levels, one from each independent variable, administrated at the
same instance to the user to illicit and measure a response. T1
Block: a sequence of trials presented to the user one after the other. Block1 T2
T3
- Participant takes a break after finishing a block of trials. T3
Block2 T3
Protocol: sequence of steps to perform an experiment.
T1
Sample Size (or N): minimum number of participants required so you can claim that your
results are generalizable to the whole population.
- More participants = more confidence in results (greater statistical significance).
- Samples size is dependent on effect size.

Effect Size: way of quantifying the difference between two groups (independent variable
levels).
- For example, if one group has had an 'experimental' treatment and the other has not (the
'control'), then the effect size is a measure of the effectiveness of the treatment.
- If dependant variable is hard to measure (i.e., we need higher sample size) then
experiment has a small effect size.

How to solve undesirable effects/limitation?

- Problem of learning curve: participant’s performance is best the first time a block is
administrated.
o Solution: repeat each block the same number of times for each participant
(typically 3 times).
- Problem: participants performance is affected by order of trials in the block
o Solution: create several blocks with different order, all administered to each
participant.
- Problem: participants performance is affected by order of blocks
o Solution: randomize order of blocks between participants (latin square shuffling).
- We rotate trials on the blocks, and we rotate blocks on participants to avoid unintended
influence from a specific order of running trials and blocks.

Within Subjects: each participant is tested under all conditions in the experiment.

Between Subjects: each participant tested under only 1 random condition.

- Participants divided into groups.
- Compare performances.
- Duration. Confounding effects.
 LECTURE 2

Experiment Statistics

Analysing
1. Test for normality, normal distribution, pivotal, bell-shaped curve
- If data is not normal:
o Get more participants form random pool.
o Massage the data (take log) – allowed only with documentation of
doing it.
2. Remove outliers (>= 4 stddev from mean)
- Observation (data point) which deviates so much from the other observations
as to arouse suspicions that it was generated by a different mechanism.
- Statistics-based intuition: normal data objects follow a generating mechanism
(e.g., some statistical process).
o Abnormal objects deviate from this generating mechanism.
- Data is usually multivariate, i.e., multi-dimensional
o Basic model is univariate, i.e., 1-dimensional.
o Usually more than one generating mechanism/statistical process
underlying the data.

Tasks to select a statistical test

- Define the research question
- Know types of independent and dependent variables
- Know how the experiment was designed (how data was collected)

Types of data collected

1. Independent/groups (between subjects)
2. Paired/dependent (within subjects)
3. Matched (between subjects)

Types of variables
1. Quantitative (continuous)
o Age, Blood pressure, Performance time, Success rate, Price
2. Qualitative/Categorical
a. Nominal (we cannot rank the choices)
i. Gender (M or F),
ii. Team (Ahlee or Zamalik)
iii. Marital Status (Unmarried, Married, etc…)
b. Ordinal (we can rank the choices)
i. Income (L, H or M),
ii. Level of satisfaction (5 level likert-scale)
 iii. Preferences (order items by preferences)

Types of research question

1. Comparison: Is X greater than Y?
o All tests listed below tell us if there is a statistical difference between two (X
and Y) or more levels or not.
o The significance is the probability of the null hypothesis being true.
i. If less than 0.05 (i.e., 5%), then we reject the null hypothesis and put
forward our hypothesis as an alternative explanation of the recorded
data.
Number of IVs
Dependent 2
Variable independent Paired data >2 groups
groups
Quantitative T-test Paired T-test ANOVA
Ordinal Mann-
Wilcoxon Kruskal Wallis
Whitney
Nominal Chi-Square χ2 McNemar Chi-Square χ2

2. Correlation/Association: Is X related to Y?
o All tests listed below tell us how much is X related to Y through a computed
index (e.g., r) that varies from strong co-relation to not at all and from
positively to negatively co-related.
Types of variables
Test
DV Several IV
Categorical Categorical Chi-Square χ2
Categorical Continuous Logistic Regression
Continuous Categorical 2 outcomes → T-test
3+ outcomes → ANOVA
Continuous Continuous • Spearman
correlation
• Linear
Regression

3. Causes (Risk factor): Is X causing Y?

Types of variables
Test
DV Several IV
Categorical Categorical Multiple Logistic
regression
Continuous Categorical ANOVA
Continuous Continuous Linear Regression
T-Test
- Compare the means of a continuous variable into samples in order to determine whether
or not the difference between the 2 means exceed the difference that would be expected
by chance (easier explanation: used in hypothesis testing to compare between two
population means (by taking sample from each one).
- Less overlap = lower possibility(H0) = the 2 populations are significantly different
(performance shifted significantly).

- Assumptions:
o Only two observations were made.
o The observations are independent.
o Drawn from normally distributed population.

- Types:
1. One Sample T-Test: test if a sample mean for a variable differs significantly from
the given population with a known mean.
2. Paired T-Test: test if the population means estimated by dependent (within)
samples differ significantly.
3. Unpaired or Independent T-Test: test if the population means estimated by
independent (between) 2 samples differ significantly.

- Condition extraction:
ANOVA: analysis of variance
- Tests the differences between dependent variables levels to see if they are significant

- Types:
1. One-way: 1 IV
o Assumes samples are independent (between subjects design).
o Tests Null hypothesis: that all group means are equal.
o Based on F distribution.
o Total variance comes from the variation within each group and the
variation between groups.

2. Repeated Measures: 1IV

o Assumes samples are dependent (within subjects design).
o Tests Null hypothesis: that all group means are equal
2. Factorial: 2+ IVs
o Each IV called a factor.
o Each factor has at least 2 levels/conditions
o The design must be complete; each level of one IV must occur with each
level of the other IV(s)
i. Described as: 2x2 or 3x5 or…2x3x4.
ii. We test for 3+ effects; one for each IV and the interaction between
them.
o Why conduct 1 experiment instead of 2 separates?
i. More efficient.
ii. More interesting: see how things relate together.
iii. More representative of the real world.

- Post hoc tests: performed after finding a significant effect (p<.05)

o ANOVAs only tell if a difference exists not where hence we use post hoc tests.
o Pairwise comparisons that examine all possible combinations of means.
 o Many types: Tukey’s HSD, Bonferroni, Scheffe’s, Kruskal-Wallis, Dunnett’s…
o Each test pairwise hypotheses.
o Each calculates a particular statistic that resembles a t-test (but it isn’t that
simple).
o Example:
o Consider the 3 level IV, where you find a significant F value
o Next need to assess all possible pairwise
o Comparison:
a. mean 1 vs. mean 2
b. mean 1 vs. mean 3
c. mean 2 vs. mean 3
o Compute pairwise comparison for each test…ascertain where the
difference(s) are statistically significant.

Regression
- Method to estimate the magnitude of the effect of one or more independent/control
variables (covariates) on a dependent variable.
- Method that indicates a mathematical relationship between a dependant and one or more
independent variables.

- R value tells us if the covariates have an impact on

the dependent variable.
o r= 0: the two variables do not vary together
at all.
o 0 > r > 1: the two variables tend to increase
or decrease together.
o r = 1.0: perfect correlation.
o -1 > r > 0: one variable increases as the other
decreases.
o r = -1.0: perfect negative or inverse
correlation.

- Several types:
o Simple linear regression and multiple regression are appropriate for continuous
variables (e.g., BP, Weight).
o Logistic regression applicable for binary response (e.g., alive/dead)
 Prototyping

Interaction design evaluation

1. Build a prototype.
2. Evaluate with users.

Why prototype?
- Rapid and economic way to materialize and evaluate user interfaces.
- Materialize concepts.
- Structure thoughts.
- Embody design ideas.
- Collaboration & participation.

Goals
- Solicit feedback.
- Iterate on design quickly.

Types
1. Wizard of Oz
o Simulation of the interface.
o E.g., a video being played in response to user interaction (instead of the
software responding to user action).
2. Software/Computer Programs/Sketches
o VisualBasic: a quick prototyping tool.
2. Paper
o Only Paper + Pen
o Fast to build (vs. programming)
o Easy to change
o Focus on the big picture
o Examples: architectural designs, utensils, wireframes
o Testing
▪ Roles: 3 + user
1. Computer: managing the UI Changes.
2. Facilitator: talks to and discusses with the user.
3. Observer: note taking (+ photos/videos/…).
4. User (average dude): conduct tasks, comment on GUI.
 ▪ Script
1. Facilitator explains general context and introduces the user to
the system.
2. Facilitator asks user to conduct tasks.
3. Facilitator assesses with user the system.
4. Facilitator presents questionnaires (if any).
▪ What to look for?
1. Functionality
a. Is it understandable?
b. Does it make sense?
c. Missing features?
2. Navigation & Task Flow
a. Is the user able to find her way?
b. Are your assumptions correct?
3. Terminology
4. Content
o Limitations
▪ Can’t test overall aesthetic look (colour, fonts, etc..).
▪ Can’t test response time.

Prototyping Fidelity
 LECTURE 3

UX Design

- User experience design (UX, UXD, UED or XD) is the process of enhancing user
satisfaction with a software by improving the usability, accessibility, and pleasure
provided in the interaction with the software.
- The best approach to design an
interface is not to design an interface.
Instead, design the user experience.
- UX development process is all about
ensuring that no aspect of the user’s
experience with your site happens
without your conscious and explicit
intent.
- In UX, the interface = content +
presentation

Presentation: everything that shows on screen: colours, layout, user interface controls,
etc…

Content: relevant content identified using layered model

- Need a process to identify most relevant content from the user perspective.
- Best source for such information is the user himself!
- All UX techniques require involving the actual users of the software in the interface
design phase.
- Created by James Garnett.

- Divides UI to stacked layers built on top of each other.

- GUI front-end layers: Surface – Skeleton – Structure – Scope – Strategy
- 5 – level approach by James Garnett

- Strategy level: main question is why are we making this GUI?

1. User needs

o Types:
a. Common ones
• a GUI that works (effective)
• a GUI they can use
• a GUI that meets their expectations
b. Project specific

o Influenced by user, goal, effectiveness, efficiency, satisfaction, context

o User research to find needs:
Qualitative Questions
(Mostly in interviews)
• Tell me about the experience with…?
• Could you describe how you…?
• What did you feel when…?
• How was it possible that…?
• What are your thoughts about…?
• Can you give me an example of…?
• What do you mean by…?
• Can you tell me more about…?
Quantitative Questions
(Mostly in questionnaires)
• How would you rate the quality of the
image on a scale from 1 to 5 (1: poor,
5: very good)
• Have you ever written a book (y/n)?
• What is your age?
• How many coffees do you drink
during a normal working day (none, 1,
2, 3-4, more than 4)?
o Steps to identify user needs: a way of understanding user’s needs by
breaking the audience down into segments based on some shared
characteristics.

a. Segment user base – Personas

• Generalized representation of user group
• Interview representative number of members of user group
• Extract most important characteristics
• Describe Persona with a character sketch
▪ Name, age, location
▪ Photo
▪ Quote
▪ Goals
▪ Motivations
▪ Lifestyle

b. Document interaction scenarios

• Formal definition: “a narrative or story that describes the
activities of one or more persons, including information
about goals, expectations, actions, and reactions” (Rosson
& Carroll).
• Informally; a scenario consists of an abstract user using a
specific set of computer facilities to achieve a specific
outcome under specified circumstances over a certain time
interval.
• A scenario contains:
▪ Name, age, location
▪ Every detail necessary to understand the user’s
current situation
o Emotional context
o Constraints
o General external conditions
 2. GUI objectives
o Business goals (e.g., increase transactions)
o Business requirements
o Success Metrics (e.g., visitor count)

- Scope level

1. Content requirements
o What information will users need/want?
o What form should it take?
o Where will it come from?
o Who’s responsible?

2. Functional specification: set of features that must be included in the site to achieve
the users needs.
o Focus on the primary action (e.g., word processor, calendar, music player,
photo editor).
o Identify your (social) objects (e.g., for Instagram it’s photos).
o Choose your core feature set (e.g., for photos it’s store, view, add to fav...).

- Structure level: defines how users will navigate through the site (reach the content) and
by which interaction technique(style).

o Information architecture
o Plan information out through architectural approaches.
o These approaches are laid out using basic units of information structures called
nodes.
o A node can represent any piece or group of information.
o Parent/child relationships.

o Types:
a. Hierarchical tree like
• Top-Down Hierarchical:
▪ Start from functionality and content.
▪ Break the categories down into subsections.
▪ Now you have an empty shell of containers.
▪ Slot the content (and functionality) into the containers.
• Bottom-Up Hierarchical:
▪ Using already-existing material and material that will exist
on launch.
▪ Items are grouped into categories.
▪ Categories are then grouped into a GUI structure.
 b. Matrix
• Helps guests with different needs but navigate through the same
information.
c. Organic
• No consistent pattern.
• Good for exploring topics with unclear or
evolving relationships.
• Works if the navigation is the topic itself.
d. Sequential
• Very common.
• Books, articles, audio, video, etc…

o Outsourcing IA choosing to the user since they have the domain knowledge: card
sorting
▪ E.g., menu structures
• Write all functionalities of a system on small cards, one function
each.
• Invite users that represent your target group.
• Let users sort cards and create categories.

- Skeleton level

o Aims for the placement of buttons, tabs, photos, and blocks of text in the site
o Aims to optimize the arrangement of these elements for maximum effect and
efficiency.
▪ Ex: making user remember the site’s logo, location of shopping cart …etc.

o Uses UI designing patterns:

▪ GUI design patterns documents best known solution for common interface
problems.
▪ Christopher Alexander.

▪ What is it?
• A set of possible ways to get to reoccurring goals a user might have
• Comparable to design patterns used in computer science such as
e.g., the “abstract factory pattern”

▪ Why using them?

• Most of the time, they are complete and let you see dependencies
• Consistency

▪ Types:
a. Information design: the presentation of information in a way that
facilitates understanding.
 • How can we present this information so that people can
understand and use it?
• Draw attention to important details?
• Communicate relationships between elements
b. Interface design: selecting and arranging interface elements to
enable users to interact with the site functionalities.
c. Navigation design: the set of screen elements that allow the user to
move through the information architecture.

▪ Pattern catalogue:

▪ BreadCrumbs: navigation UI design pattern

▪ PayWall: eCommerce UI design pattern

- Surface level
o Cares about the visual design of the site
▪ Colors, fonts, icons….
▪ UI Hueristics
▪ Gestalt principles
▪ Color selection guidelines
 LECTURE 4

Task Analysis

- Hierarchical task analysis is a structured, objective approach to describe the tasks a user
needs to perform to achieve a specific goal.

What is task analysis?

- E.g., three Questions to analyse people's jobs:
o What people do? the action.
o What things they work with? the tools.
o What they must know? the know-how.

Approaches to task analysis

1. Task decomposition: splitting task into (ordered) subtasks.
2. Knowledge based techniques: what the user knows about the task and how it is
organized.
3. Entity/object-based analysis: relationships between objects, actions and the people
who perform them.
4. General:
a. Observe
b. Collect unstructured lists of words and actions
c. Organize using notation or diagrams

Differences from other techniques?

Task decomposition
- Aims:
o Describe the actions people do.
 o Structure them within hierarchy.
o Describe order of subtasks.
- Techniques:
o Hierarchical Task Analysis (HTA); most common
o CTT (CNUCE, Pisa)

Textual HTA
1. Hierarchy description
a. Get list of tasks.
b. Group tasks into higher level tasks.
c. Decompose lowest level tasks further.
• Stopping rules? expand only relevant tasks, motor actions: lowest
sensible level.
2. Plans: denote order

Diagrammatic HTA
- Combines hierarchy description + plans in one diagram.
- Notation.
- Plans contain operators; much like logical conditions.
- Underlined tasks are called Terminal Tasks and they have no sub-tasks.

Types of operators in a plan

1. Fixed sequence: 1.1 then 1.2 then 1.3
2. Optional tasks: if the pot is full 2
 3. Wait for events: when kettle boils 1.4
4. Cycles: do 5.1 5.2 while there are still empty cups
5. Time-sharing: do 1; at the same time ...
6. Discretionary: do any of 3.1, 3.2 or 3.3 in any order
7. Mixtures: most plans involve several of the above

Task Analysis Heuristics

- Proposed by Dix, Finlay, Abowd and Beale.
- To check or improve HTA/verify we did not miss a step while doing hierarchal tasks.
- Four Heuristics:
1. Paired-Action
▪ Is there a complementary action to the current action?
▪ Is there an opposite action to the current action?
▪ E.g., In tea making, where is ‘turn on gas’?
▪ Is there an action necessary as a pre-requisite to the current action?
▪ Is there an action necessary as after the current action?
▪ Why? are we missing something?

2. Restructure
▪ Can we group a set of related tasks under one umbrella?
▪ E.g., In tea making, create a task ‘make pot’
▪ Should we split a group of related tasks to 2 or more?
▪ Why? creating a group containing several tasks creates an opportunity to
automate the execution of those steps using a single invocation mechanism
and enables reuse if this task is part of a bigger system.
3. Balance
▪ A typical task hierarchy has balance within. Few are completely skewed.
▪ If one sub-task has many sub-sub-tasks, it is unlikely other ones don’t!
▪ Check what you think are simple sub-tasks against closest complex sub-
tasks.
4. Generalize
▪ Are the steps repeatable?
▪ E.g., In making tea; make one cup is the same as making n cups
▪ Are the steps describing a specific instantiation of a task or is it everything
that is?
▪ Why? we are building the analysis based on user input. Users often
concentrate on the specific sub-tasks they do often. We need to make sure
that whatever we have been documenting is comprehensive.

Sources of information
- Documentation: manuals say what is supposed to happen but, good for key words and
prompting interviews.
- Observation: formal/informal, laboratory/field.
- Interviews: the expert? manager or worker?

Task analysis vs task design

- Task analysis is about how users currently do the task.
- Task design is about how users will in the future do the same task after introducing digital
technology.
- Three possibilities:
a. Task Analysed < Task Designed
b. Task Analysed == Task Designed
c. Task Analysed > Task Designed
- Goal? Task Analysed >= Task Designed to ensure we have actually gained efficiency.

Example After Improvement

 Input/Output Channels

- Also called a modality.

- Note: sci-fi interfaces are not necessarily accurate or representative of the state of the art
in HCI! FUIs (fictional/fantasy user interfaces) as well are only eye candy, they're
entertaining however they're not useful

Input hardware
- Keyboard
- Mouse
- Joystick
- Human body channels:
o Face expressions
▪ Using face muscles
o Leg movement
o Foot movement/gestures
o Arm movement
o Voice
o Signal in the brain
▪ Neurophone (brain to mobile interface) uses EEG signals as an input to the
phone, considered to be the first BCI
o Eye movement
▪ Using MSI or tobii for PC Gaming
o Hand movement/gestures
▪ Leap motion
▪ Gest: a wearable device used to translate or capture hand gestures
o Blowing air
▪ BLUI: Blowable user interface - through Microphone
o Full body motion tracking
▪ Motion Capture and MotionBuilder with a setup of 8 cameras vicon
system with Blade software & adding markers to the actors to capture the
motion in real time; these motions are captured into 3D software and
recorded like Autodesk for example
o Skin
▪ SkinTrack: using the body as an electrical waveguide for continuous finger
tracking on the skin by using a signal limiting ring and a sensing band
- Multi-degree of freedom input channels:
o SensAble

▪ PHANTOM Omni Haptic Device similar to a stylus pen

▪ Has a stylus tip and a phantom

o Rockin Mouse
▪ Integral 3D manipulation on a plane
▪ Publications Autodesk Research
▪ The bottom of the mouse can be tilted,
this can control an extra degree of
freedom which makes it suitable for
manipulation in 3D environments
▪ It's like a regular mouse; can sense x
and y positions and perform regular functions however, in a regular
mouse, moving objects in 3D space requires switching between
dimensions
▪ In rockin mouse, you can control 3D left & right, in & out, and tilt controls
up and down
▪ The advantage of it: control all of that simultaneously

o Digital Drawing Tape

▪ Tape drawing
▪ Used extensively in automotive
design
▪ The traditional tape drawing
doesn’t last and falls off the
wall, also it is not digitized. so
instead of taking the tape artists
to the computer, we brought the
computer to the tape artists
▪ We built two controllers; one in the left hand and another one in the right
▪ hand and by pushing a button the artist can draw a curve tape into the wall
▪ They can control the curvature by stretching out the hand

o inform
▪ Interacting with a dynamic shape display, using a remote collaborator with
Kinect camera to control objects from a far
 ▪ Also move the objects through shape change
▪ Media control through shape
▪ 3D modelling: bar charts, maths education

Output hardware
- Projector
- Tabletop displays
- Screens:
o Boom Chameleon: a display for 3D models also, Boom Chameleon with dynamic
voice and ink annotation
o Multi-surface: screen office
o Handheld projector
- Tactile displays:
o Material able (similar to inFORM) however its usage is outputting physics
simulation
o Can be used in geoscience, medical education and material science
o As assistive technology: a touchable 3D printing display for the visually impaired
- Human body channels: using computer generated signals to output directly to humans
o Signal to the brain
o Vision
o Smell (Olfactory Display: for outputting odors, inScent: a wearable Olfactory
Display as an amplification for mobile notifications)
o Vibration/pulse
o Hearing (volume sweeping displays - wireless mouse for input (controller, user
pointer)
o Controlling the wrist to draw using electronic signal
 What do HCI Researchers Do?

Create New Input Devices

- E.g., rockin mouse:
o Unlike the usual mouse, the 3D one could move through the X and Y axis as well
as up and down while the other has X and Y dimensions only

Create New Output Devices

- Microstoft hologram
o Allows you to see a 3D model for anything in front of your eyes as well as hearing
its voice
- Google glasses
o Connected to your mobile
- Reckon jet
o Navigates you and has HD camera
- Smart glasses
o Has display camera, audio output, bulti in camera and microphone, GPS and
access to internet through Bluetooth on your smart phone
o Download and use applications directly from your smart glasses
o Get directions
o Scan barcodes
o Record videos
o Allow notifications and phone calls delivered without the need of to pick up your
phone
o It views the future
- CES innovation
o A personal wearable entertainment device offers incredible videos and audio
performance with 2d and 3d as well as virtual reality
o Works with pcs, androids, iphones and tablets; any hdmi source it could work
while playing just plug and play with the ps4
o For example, you can see the match on a larger scale and noise isolating as well as
head tracking sensors as if you turn your head you will be seeing the same screen
o Can use it with drones to see a full picture of what u are recording
- VUZICX IWEAR
Enhance Popular Devices
- Touch display keyboards:
o Transforming keyboards into interactive
surface
o Integrated with input and output space of
the graphical user interface
o The keyboard contains sensors and is
used in prototyping as graphical output and
mouse input extends across the keyboard
o Point and select techniques established
o You can put whatever you want on the keyboard and have continuous control, like
the volume of sound and context menu and pie menu like arrows and its types
o You can put containers as the pages opened on the internet and you can put
pictures or customize it as u want

Enhance Popular Interfaces

- Windows:
o Flood n’ drop
o Transient folders
o Flooding windows
o Discarding windows
o Unflooding
o Multiple flooding
o Leafing through windows

Enhance Tools Used by Specialists

- I/O brush (tangible media group):
o Allows you to get the exact colour you want to paint
with from any tangible thing you have or any
captured moment (painting with moments)
o Painting with patterns or with letters written on any
thing
Propose Novel Interfaces/Interaction Techniques to Support Collaboration
- Multiple computer user interfaces (pick and drop):
o Seamlessly integrating different
computers, a direct manipulation
technique for transferring data among
multiple computers
o Drag and drop; you can transfer data or
items from one computer to another by
the same method
o Drag and drop to exchange data among
nearby computers; each pen of a
computer has a defined ID and network is responsible for pen IDs and transfer of
data
o It can be used with white board digital systems; this could be very useful for
giving lectures or presentations and can put active computers that move on the
white screen
▪ One could make any changes in the computer and reflect it on the screen
and could send and attach pictures for example from the computer to the
white screen

- Air link:
o Sharing files between multiple
devices using in-air gestures, you
can share info with others
o You can directly transfer things
from one mobile to another by
moving your hands
o Broadcasts could be sent through
this
▪ You just need to also have microphones and speakers which exist in most
of tablets and smart phones

Propose Novel Devices to Support Collaboration

- Flash touch:
o People exchange their personal data via their mobile using electronic parts as
photo transistor and micro controller and relay switch
o Really fast and smart way for information transfer
o Two ways; reader and writer for mobile online settlement and telepresence robot
controller using flash touch communication
Augment Proven Devices/Tools for User Advantage
- Extended hand on the wheel chair:
o The user can point on whatever they want needing only the screen he is moving
his hands on as well as the presence of reflecting mirror if the user wants to shift
from one screen to another
o It can also control the path of the user on the ground to move the wheel chair in
the wanted direction
o Could control the cleaning robot and targeting it to the place he should clean by
his gestures

Embed Computers of all Sizes/Forms Everywhere (Ubiquitous Computing)

- Sketch and stitch:
o Interactive embroidery for e-textile
o The system needs a smart phone, computer and home embroidery machine to
capture, confirm and stitch

- Illuminated interactive paper (illumipaper):

o You write on paper and it is reflected on the tablet
o You do anything on paper solving equations or doing
exercising and it guides you to the right answers or help
you

- Squama:
o A programmable window and wall for
future physical architectures
o Used for buildings to save people from
noise, damage, wind and earthquakes
o The windows could be transparent or not
according to the programming as all of this
should be static as well as strong
o It could prevent someone from seeing something inside a room even if he tried to
move along the transparent window; the part that corresponds to his level of sight
becomes not transparent and blurry by changing the body of the person to 3d and
tracking his head area while his movement
o If someone does not like to see specific thing in the street from his window, we
could hide it or we can control the light entering from the window in specific
areas to target certain things
o The squama contains reconfigurable window or wall, dynamic changeable
transparency and modular
o Programmable
 LECTURE 5

HCI Basic Tasks

Input tasks
Desktop Cell Phone
Text Text field+ physical keyboard Text field +soft keyboard
A single value Slider +mouse/keyboard Picker+touch
Single value field +
mouse/keyboard

Cursor position Point with mouse No cursor → Tap

Path Press and drag with mouse Drag finger on screen

- Input text
- Input a single value
- Input cursor position
- Input a path
- In a desktop system:
o Input text: text-field/text area + physical keyboard.

o Input a single value:

▪ slider + mouse/keyboard

▪ single value field + mouse/keyboard.

o Input cursor position: pointing with mouse.

o Input a path: mouse pressed and dragged.
- In an android phone:
o Input text: text-field/text area + soft keyboard.
▪ A big problem on cell phones is that inputting text on cell phones is much
slower compared to desktops. Most users type one letter a time on cell
phones.
o Input a single value: picker + touch.
o Input cursor position: no cursor, replaced with tap.
o Input a path: drag finger on screen.
Selection tasks
Single Selection
Fixed-size set
• Limited set of options
• Static
• UI: Drop-down menus,
radio buttons, checkboxes
Variable-size set:
• Dynamic
• UI: Combo box

Multiple Selection
Grouping
• UI: drag to select

Intervals
UI: drag to mark

Individual distance objects

UI: Move items from one list to
another

Menus
Linear Menus
• Menu bar & pull-down menus
• Hierarchical menus
• Fixed palettes (like toolbars)

Pie menu
• Has equal access time for all elements
• Faster than linear menus
• Less distance
• Bigger target
• Limited number of options
can also be hierarchal

- Choose one or several items from a fixed-size or variable-size set of items.

- In a desktop system:
o Fixed-size set: menu, check boxes, radio buttons.
o Variable-size set: drag mouse on items to select, list, text input.
o Multiple selection: by group, by interval, add/remove, combine techniques (point
element in list / use keyboard to input prefix).
o Linear menus for selection in desktops:
▪ Menu bar + pull-down menu.
▪ Fixed palette.
▪ Popup (contextual) menu.
▪ Hierarchal menus.
▪ Pull off menus.
o Pie menu
▪ Has equal access time for all elements
▪ Faster than linear menus
▪ Less distance
▪ Bigger target
▪ Limited number of options
- In an android phone:
o Fixed-size set & variable-size
▪ Check boxes or radio buttons.
▪ No menus on cell phone because screen size does not allow for menu
display.
▪ No mouse and hence no drag to multi-select.
- In research frontiers:
o Selection in a volumetric display
▪ A new hardware, such as a 3D display, will need
new interaction techniques to do all of the basic
input tasks.
▪ Track position and orientation. Thus, having 6
degrees of freadom.
▪ 3D point cursor. Need to determine where the
point is.
▪ Ray line cursor. It’s like pointing with laser ray. Needs to only intersect
the object.
▪ Depth ray: Augmenting the ray with a marker. Marker moves along the
line of the ray and selects whatever closest that is intersected by the depth
ray. Marker doesn’t need to be actually inside the object to select it.
▪ Lock ray: Similar to Depth ray but doesn’t do tasks simultaneously. When
you have the desired orientation of the ray, you lock it by pressing a button
then you can choose the position of the marker on the locked ray. Closest
intersected object is selected.
▪ Flower ray: Also, a two-step process. First, select the ray. Then, click and
hold the button. Intersected objects animate into a flower like shape
(marking menu), select your desired object from them by lifting your
finger of the button to complete the selection.
 ▪Smart ray: Predicts selected object by assigning weights to each target of
interest. Weight increases whenever your ray is closer to an object. Target
with highest weight of the intersected objects is selected.
▪ A device that controls the mouse or pointer in a 3D model
▪ It can be a cursor that points and move with the direct movement of the
device
▪ When it is on the target the target color changes
▪ The pointer could be a ray
▪ Problem: you can select more than one object while targeting a specific
object because of the density of the place (intersected objects)
a. Solution: insert a marker in the ray so this marker could be changed
to select the object you want and if it approaches another object
this object will be red indicating that it could be selected and the
marker does not need to be inside the target it’s enough to be close
to it another solution is to lock the position of the ray and start
moving the marker in it till it reaches the needed object and if the
object I selected is not the one selected I can move my hands to
remove the selection step
o Using Deformation for Browsing Volumetric Data:
▪ Volumetric data can have many layers underneath each other.
▪ Explorative view.
▪ Pulling out an individual layer.
▪ Flipping over layers like dominos.
▪ Briefing through layers like pages of a book.
▪ Fanning open layers like cards.
▪ Compressing upper layers to reveal lower layers.
▪ Pealing back layers.

Trigger tasks
- We need a way to instruct the computer to execute a function. This is called triggering.
- Examples: pressing an icon, pressing ok or cancel, selecting shutdown, pressing start
button in a computer case.
- In a desktop system:
o Buttons and Menus
o Drag and drop
▪ Action depends on: source + destination.
o Gestural input
▪ Specifies object and command simultaneously
- In a cell phone:
o Tapping, double taping and holding proposed.
o Not all implemented yet.
- In research frontiers:
o CrossY: a new interaction technique to trigger an action.

Navigation tasks
- Examples: a document with pages, a map of a place that is too large and does not fit on
screen.
- In a desktop system:
o Scrollbars
▪ Direction of scrolling
o Direct scrolling
▪ Scroll by dragging hand icon using mouse up/down.
o Zooming
▪ Zooming in to see details
▪ Zooming out to see context
- In a cell phone:
o Scrollbars
o Direct scrolling
▪ Swipe up/down gesture to scroll list
▪ Swipe left/right to move from one view to another

o Zooming
▪ Pinch and un-pinch to zoom-out/in
- In research frontiers:
o OthroZoom scrolling
o 1D Multi-Scale Navigation MSToC
o Zooms out as you scroll to enable faster scrolling through long lists.
o Panning is performed along the slider dimension while zooming is along the
orthogonal one (right or left movement of the mouse)
o Problem: a very low scale factor turns a textual document into a narrow illegible
line
▪ Solution: a multi scale table of contents overcomes the problem where
each section entry of the multi scale is displayed at a constant size but is
aligned vertically with the position it has in the text, guiding the user
during navigation
o Advantage: the multi scale provides snapping to facilitate navigation, the higher-
level entry aligned with the cursor is highlighted scrolls the view at its exact
position
o In case the text does not have a multi-scale structure the MSToC always displays
snappable page numbers.
o When the view-scale change the step of the displayed page numbers changes:
every page, every two games etc.
o It allows to quickly get an overview.
o Pressing and releasing the mouse scales down the document according to the
current location of the cursor
Parameter specification or property setting tasks
- We need to be able to change properties of displayed object(s), how objects behave or
how interface behave.
- In a desktop system:
o Dialog boxes
▪ Fields + ok / Apply / Cancel buttons (con: can’t see effect immediately)
▪ Modal or non-modal
▪ Problem: temporal and spatial decoupling between the specification, its
parameter and execution
- In a cell phone:
o Drawer
▪ Slide drawer in view to manipulate settings

Transformation tasks
- We need to be able to manipulate curves to create 3d objects and 2d drawings.
- In a desktop system:
o Manipulation handles attached to facilitate
manipulation.
- In research frontiers:
o Manipulation handles for 3D transformation.

Interaction Styles

- In designing a new interface, we can use more than one interaction style.

Conversational
- Command language; dialog imposed by system.
o Pros:
▪ Suitable for repetitive tasks
▪ Offers direct access to system functionality
▪ Low visual load
o Cons:
▪ Frustrating for novice users
▪ Difficult to remember (especially for infrequent users)
▪ Inflexible (command syntax)
- Menus, forms: system guide the user dialog controlled by system.
Direct manipulation
- Continuous representation of the object of interest.
- Physical actions rather than complex syntax.
- Quick, incremental, reversible operations whose effect on the objects of interest is
immediately visible.
- Layered approach to facilitate learning.
- Users perform actions directly on visible objects.
- Continuously change how it looks based on your actions.
- Examples:
o Document editing; interaction controlled by the user.
o Iconic interaction
o WIMP
- Cues:
a. Affordance: perceived and actual properties of a thing that determine how the
thing could be used (e.g., handles)
b. Natural mapping: physical arrangement of controls should match arrangement of
function; best mapping is direct, but don’t have to be direct
c. Visibility: relevant parts of system should be visible
d. Feedback: actions should have immediate, visible effects (e.g., push buttons,
scroll bars, drag and drop)
▪ Kinds of feedback include: visual, haptic, and audio.
- Research frontiers:
• Bumptop: adding physics to the desktop.

Gesture based interaction

- Pen, touch, or mouse based.
- 3D gestures (KINECT), camera based.
- Research frontiers:
o Abracadabra

Multi-modal interaction
- Use more than one input channel (e.g., talking, pointing, gesturing and blinking).
- Gaze + touch:
o Old approach: gaze-touch allows input while
holding, less accurate, marginally slower, has
less physical effort
o New:
▪ Tap on the gaze to activate the cursor
▪ Drag to position the cursor
▪ Tap to click and leave the cursor
▪ Can be used while typing, while mapping
- Speech + gesture.
VR interaction: immersion of the user in a virtual world.
- Augmented virtuality: the representation of real-world elements in a virtual world.
o People in the screenshot are fishing and another
part they are moving the chairs and inside the
virtual world they are trying to collect things
dropping from the ceiling by a basket
o Human actuation is the idea of using people to
provide large-scale force feedback to users. The
Haptic Turk system for example, used four
human actuators to lift and push a virtual reality
user; TurkDeck used ten humans.

Augmented reality: objects that reside in the real-world are "augmented" by computer
generated perceptual information, sometimes across multiple sensory modalities, including
visual, auditory, haptic, somatosensory, and olfactory
- E.g., digital desk:
o Instead of having a computer workstation we have a
physical one (digital desk); contains a camera on the
top of the desk that can make the same things done
by the computer, people can use their figures instead
of the mouse (like using calculator)
o They can take notes by putting a book under the
camera and then they start pointing and dragging
and dropping.
o They can type using the keyboard under the camera and automatically it will
update the document.

- Mixed Reality (MR): augments the real world with virtual objects that aim to look as if
they are really placed within that world.
o E.g., holoportation:
o Virtual 3D teleportation in real-time
(Microsoft Research)
o You can see someone in 3D in front of
you and communicate with each other as
if you are sitting together
o A person is surrounded with cameras from
different angles; each one capturing a picture and trying to concatenate all
to gather to give a full 3D image for the person used to connect with
families away from you
o It could record the scenes so you can see it again as a memory

Emotional agents: the interface is a 3D human model behaving like a secretary or

assistant, emotional in reaction, smart in understanding, helpful in behaviour (Siri).
- Not available yet because of challenges yet to be solved by AI research community.
- Personal assistant.
- AI, speech recognition, natural language processing and text-to-speech.

Physiological interaction:
- Detect signals from the body and does actions.
- E.g., Brain-Computer Interfaces (BCI):
o You can interact with the game using your
brain EEG just by thinking that you want to
do something and it will automatically be
done in the game
o When you change the state of an organ in
your body for example the signals sent from
your leg movement to your brain indicates that the player wants the character in
the game to move, so the brain acts as a mouse and a keyboard
- E.g., EMG:
o People sometimes are not able to hold a
physical device and control from it so instead
we used the muscles signals
o For example, a man could play a game of
playing guitar as if he is really playing it
instead of pressing buttons of using joy sticks
o We can recognize gestures with empty hands

Human-robot interaction
- Research frontiers:
o Social Greetings: an example of studying and reproducing human social behaviour
in robots for better integration of robots into human society.
o Ethical issues in human robot interaction.

Tangible Interaction (TUI): physically embodied in some way be it in physical

artefacts or in environments.
- E.g., MetaDesk:
o When placing a tangible object on the metadesk a
map appears and by placing another one you can
move them together to zoom in and zoom out or
rotate the map
o There is a passive lens that could be put in order to
see another layer of the map like windows
o Problem: how the map will respond if the two
tangible objects are rotating in a different way
 o Solution: use a 2 metal objects connected to each other with a glass stick
that guarantees the movement of the two objects in a complementary way
solving the problem of ambiguity.

- E.g., inform: interacting with a dynamic shape display

o The ball is put on a table full of digital shapes
that moves downward or upward and the man
starts to play with this ball virtually
o When he moves his hands the cubes on the table
starts to move upwards making the shape of his
hands as if he is moving the ball
o For example, if the man wants to hold up the ball all the cubes under the ball will
move upward in response to his hand movements
o Not only the ball but any other object like a dish for example; moving a dish in the
place containing the sensors will cause the cubes to move as well
o inFORM is a Dynamic Shape Display that can render 3D content physically, so
users can interact with digital information in a tangible way.
o inFORM can also interact with the physical world around it, for example moving
objects on the table's surface.
o Remote participants in a video conference can be displayed physically, allowing
for a strong sense of presence and the ability to interact physically at a distance.
 LECTURE 6

Heuristic Analysis

- A heuristic evaluation is a usability inspection method that helps to identify usability

problems in the user interface design.
- It specifically involves evaluators examining the interface and judging its compliance
with recognized usability principles (the "heuristics").
- Nielsen heuristics are the most popular usability heuristics.
- It has been shown that 5 usability experts are enough to uncover majority of problems in
an interface.

Usability
- Usability is the extent to which a product can be used by specified users to achieve
specified goals with effectiveness, efficiency and satisfaction in a specified context of
use.

Usability vs Usefulness
- HCI has dual concerns
o Usefulness — The extent to which a system’s functionality meets the needs of
users and supports their tasks
o Usability — The degree to which an interface is easy to learn, is easy to use,
protects against catastrophic errors, and provides user support

- Not usable or useful:

Usability Heuristics
- Technology-independent set of rules for design and decision-making based on prior
experience
- When are they used?
o When designing a new system checking designs on compliance
 o For evaluation of existing systems on compliance with heuristics

Nielson’s Heuristics
- H1: Visibility of system status
o Rule: Keep users informed about what is going on

o Rule: Be as specific as possible

o Rule: Pay attention to response time

▪ 0.1 sec: no special indicators needed
▪ 1.0 sec: user tends to lose track of data
▪ 10 sec: max. duration if user to stay focused on action

▪ For longer delays, use percent-done progress bars

- H2: Match between system and the real world
o Rule: Speak the users’ language

o Rule: Follow real world conventions

- H3: User control and freedom

o Rule: Users should not be trapped by the interface!
▪ How?
a. Trapped in Action
b. Trapped after Action
c. Trapped during Execution
▪ E.g., home button in phones
▪ Example of bad representation:
- H4: Consistency and Standards
o Rule: Maintain internal consistency
▪ Principle of Least Surprise

▪ Follow platform standards

 o Rule: Maintain metaphorical consistency
▪ What is a metaphor?
a. A type of analogy
b. One way to make an interface intuitive

- H5: Error Prevention

o Rule: Prefer selection to typing
▪ Selection is less error-prone than typing

- H6: Minimize user’s memory load

o Rule: Present 7 +/- 2 “small chunks” of info
▪ Example of bad representation:

o Rule: Prefer recognition to recall

▪ Recall: info reproduced from memory
▪ Recognition: presentation of info provides knowledge that info has been
seen before easier because of cues to retrieval

▪ Examples:

▪ Which feature exists in Browsers that encourage recognition rather than

recall?
- H7: Flexibility and efficiency of use
o Rule: Allow users to quickly do frequent actions
▪ Example: shortcuts

o Rule: Allow users to tailor frequent actions

▪ Example: macros

o Rule: Allow users to see actions history

▪ Example: photoshop actions
- H8: Aesthetic and minimalist design
o Rule: Present User with as little complete info as possible
▪ Less is more.

o Rule: Use few well-chosen colours and fonts

o Rule: Avoid redundant animations

- H9: Help users recognize, diagnose and recover from errors

o Rule: put error messages in plain language
o Rule: precisely indicate the problem
o Rule: constructively suggest a solution

- H10: Help and documentation

o Rule: Provide help
▪ Users do not read manuals!
▪ Context sensitive
▪ Searchable
▪ Task-oriented
▪ Concrete steps
▪ Short

Phases of Heuristic Evaluation

1. Pre-evaluation: give evaluators needed domain knowledge and information on the
scenario
2. Evaluation: individuals evaluate and then aggregate results
▪ At least two passes for each evaluator
 ▪ If system is walk-up-and-use or evaluators are domain experts, no assistance
needed
• Otherwise, might supply evaluators with scenarios
▪ Each evaluator produces list of problems
• Explain why with reference to heuristic or other information
• Be specific and list each problem separately
3. Severity rating: determine how severe each problem is (priority)
▪ Do this first individually and then as a group
▪ Used to allocate resources to fix problems
• Estimates of need for more usability efforts
▪ Combination of
• Frequency
• Impact
• Persistence (one time or repeating)
▪ Scale:
• 0 = I don't agree that this is a usability problem at all
• 1 = Cosmetic problem only: need not be fixed unless extra time is
available on project
• 2 = Minor usability problem: fixing this should be given low priority
• 3 = Major usability problem: important to fix, so should be given high
priority
• 4 = Usability catastrophe: imperative to fix this before product can be
released
▪ Example:
• [H1-4 Consistency and standards] [Severity 3] The interface used the
string "Save" on the first screen for saving the user's file, but used the
string "Write file" on the second screen. Users may be confused by this
different terminology for the same function.
4. Debriefing: discuss the outcome with design team

How Many Evaluators Are Enough?

- Landauer-Nielsen Model

o Every tested user finds a fraction L of usability problems (typical L= 31%)

o If user tests are independent, then n users will find a fraction 1 - (1-L)^n
o So, 5 users will find 85% of the problems!
- Criticism of Landauer-Nielsen Model:
o Spool & Schroeder study of CD-purchasing website found L=8%, so 5 users will
only find 35% of problems.
o Needs further investigation but still using HE is beneficial
▪ Benefit-cost ratio (Usability Eng, Nielsen 94): cost was $10,500 for benefit
of $500,000
▪ How was this calculated?
a. in-house -> productivity
b. open market -> sales
c. customer calls to your customer service center
o Still, don’t overdo it as it leads to decreasing returns

GOMS Analysis
- Keystroke Level Model Operators:
o + R - system response time estimated/measured.

o To determine M:
▪ User think of commands first and not data
▪ I want to delete (command) this file (data/argument)

- RULE 0:
o Insert M’s in front of all K’s or B’s that are not part of argument (i.e. data).
o Insert M’s in front of all P that select commands (not arguments to commands) or
P that begin a sequence of direct-manipulation operations belonging to a cognitive
unit.
▪ Pointing to a cell on a spreadsheet is pointing to an argument => no M
▪ Pointing to a icon on a toolbar is pointing to a command => M
▪ Pointing to the label of a drop-down menu is pointing to a command => M
- RULE 1:
o If an operator following an M is fully anticipated in an operator just previous to
M, then delete the M (e.g., PMK => PK or PMBB => PBB).
o That is, the “M” drops out because the “P” and “BB” belong together in a chunk --
mental unit
- RULE 2:
o If a string of MK’s or MB’s belongs to a cognitive unit (e.g., the name of a
command), then delete all M’s but the first.
o Works with command names -- but what is a command name in a GUI interface?
▪ Physical actions: P[File]+ B + P[Save] + B
a. RULE 0: (M+P) + (M+B) + (M+P) + (M+B)
b. RULE 1: (M+P+B) + (M+P+B)
▪ Does rule 2 apply to eliminate the middle mental? M+P+B+P+B ? No!
- RULE 3:
o If a K is a redundant terminator (e.g., the terminator of a command immediately
following the terminator of its argument), then delete the M in front of it.
o Applies to clicking OKAY in dialog buttons after you select a command; pointing
to and clicking on OKAY is PBB, not MPBB
- RULE 4:
o If a K terminates a constant string (e.g., a command name such ls in a shell), then
delete the M in front of it; but if the K terminates a variable string (e.g., your
password), then keep the M in front of it.

- GOMS is worth the effort when?

o Want quantitative estimates of human performance without having to:
▪ Build a working system
▪ Train people to use the system to measure performance
▪ Measure performance for many users

- Pros:
o Predict human performance before committing to a specific design in code or
running empirical studies
o No special skills required
o Many studies have validated the model (it works)
- Cons:
o Assumes error-free, skilled behavior
o No formal recipe for how to perform decomposition

- Other Notable GOMS Models:

o Touch Level Model (TLM)
▪ Model human task performance on a constrained input touchscreen device
▪ Operators: Gesture (G), Pinch (P), Zoom (Z), Tap (T), Swipe (S), Tilt
(L(d)), Rotate (O(d)), Drag (D)
o Blind Finger-Stroke Level Model (B-FLM)
o Sociotechnical GOMS (SGOMS)
▪ Allow GOMS to model work in complex sociotechnical systems

Flow Theory and Analysis

- A heuristic evaluation is a usability inspection method that helps to identify usability

problems in the user interface design.
- It specifically involves evaluators examining the interface and judging its compliance
with recognized usability principles (the "heuristics").
- Nielsen heuristics are the most popular usability heuristics.
- It has been shown that 5 usability experts are enough to uncover majority of problems in
an interface.

Flow (in the Zone)

- “Flow” coined by a psychologist, Mihaly Csikszentmihalyi, in 1975
 o “The opposite state from the condition of psychic entropy is optimal experience.
When the information that keeps coming into awareness is congruent with goals,
psychic energy flows effortlessly. There is no need to worry, no reason to question
one’s adequacy. But whenever one does stop to think about oneself, the evidence
is encouraging: “You are doing all right.” The positive feedback strengthens the
self, and more attention is freed to deal with the outer and inner environment.”
- Mental state of operation in which a person performing an activity is fully immersed in a
feeling of energized focus, full involvement, and enjoyment in the process of the activity
- Positive aspects of human experience
o Joy
o Creativity
o The process of total involvement with life
- Flow was first noticed in playing sports, music and educational contexts
- Can happen ANYWHERE to ANYONE – no training, but, it happens the easiest (and
generally most studied in sports).

Components of Flow
1. Challenge-Skill Balance: a balance between demands of the situation and personal skills.

▪ making it too hard leads to user anxiety

▪ making it too easy leads to user boredom
2. Action-Awareness Merging: deep involvement that makes actions seem automatic.
3. Clear Goals: certainty about what one is going to do.
4. Unambiguous Feedback: immediate and clear feedback that reaffirms actions.
5. Concentration on Task at Hand: feeling focused.
6. Sense of Control: happens without conscious effort.
7. Loss of Self-Consciousness: concern for self disappears as person becomes one with
activity.
▪ Example: sportsmen doing dangerous movements which they would not do if they
calculated the risk of injury
8. Transformation of Time: Time passes faster, slower, or there is unawareness of time.
9. Autotelic Experience: feeling of doing something for its own sake, with no expectation of
future reward.
- A software can make the user experience flow if the 9 components of flow are built into
the interface and interaction of the software.

Neural Basis of Flow

- Activation of the right superior temporal gyrus

o Associated with intuitive leaps and sudden insight.

- All neuronal resources are focused on sensory cortex (occipital, temporal)
- Feeling of losing oneself:

o Inactivation of self-related areas:

o Medial PFC, dorsolateral PFC, anterior and posterior cingulate cortex, inferior
parietal cortex
- Rapid sensorimotor task abolishes subjective self-awareness experience
- Elevated alpha-wave levels in the brain
o Can retain cognitive consciousness for far longer
- Gamma-aminobutyric acid produced
 o Neurotransmitter that blocks unwanted stimuli
- Shifting attention causes release of dopamine (DA) into midbrain
- High and sustained levels of DA cause feelings of pleasure and elevation
- DA release high with rapid onset
o Conscious state of pleasure or ‘high’ is reported.
- Brain shuts down introspection as it enters flow state. (Goldberg 2006)
- Consciousness as a “dialogue between specific self-related prefrontal regions and sensory
cortex.” (Baars et. al)
- (Crick & Koch; 2003) Front of the brain has a “homunculus” like function where it
observes the sensory back of the brain

How to Measure Flow?

- Use a validated questionnaire
- What is a Questionnaire?

o A set of pre-determined questions with a choice of answers, devised for the

purposes of a survey or statistical study.
o Questionnaires are hard to get right. Everything matters: words used, order of
questions, answers user select from
o Likert Scale: a scale used to represent people's attitudes to a topic.

- What is a validated Questionnaire?

o External validity: if we administer the same questionnaire twice to the same
people, we should get roughly the same answers
o Internal validity: the questionnaire covers the topic at hand accurately and
comprehensively
o External & Internal validity are required for accepting a questionnaire as a useful
measurement tool/instrument.
o There are 1000s of validated questionnaires covering topics from HCI to
consumer behavior (for business studied) to political science. Use them.
o Only make your own questionnaire if there is no validated one to use!
 Usability Questionnaires

- There are many usability questionnaires, use one when subjectively evaluating a standard
interface.
- You must administer the questionnaire verbatim as specified by its designer. An
underlying assumption is that the user will comprehend what the words mean. Otherwise,
you will have to use a validated translated version.
- After collecting the data from filling a questionnaire, you use descriptive statistics (mean,
mode, standard deviation, etc..), as well as inferential statistics (ANOVA, Kruskal wallis,
chi-square, etc...) to draw conclusions based on your questionnaire.

System Usability Scale (SUS)

- Focus on perceived usability
- Most popular, free
- https://www.measuringux.com/SUS.pdf
- https://usabilityscale.com/

Software Usability Measurement Inventory (SUMI)

- Focus on efficiency, affect, helpfulness, control and learnability of a system
- Commercial ($x00/mth)

Post-Study Usability Questionnaire (PSSUQ)

- Focus on user satisfaction
- Free
 LECTURE 7

Background on the Eye

Human Vision and the Use of Colors

- Why study color?
o Color can be a powerful tool to improve user interfaces, but its inappropriate use
can severely reduce the performance of the systems you build
- Vision depends on:
a. Wavelength of light absorbed or reflected by the object which we see
b. Eye photoreceptor type stimulated by light
- Visible spectrum:
o Electromagnetic Spectrum: contains all radiation on Earth, from Cosmic rays to
Radio rays.

o The Human Eye can see only Rays ranging from 400 nm to 780 nm, which is
called “Visible Light”
▪ Visible Light is actually 7 colored lights (rainbow!)
▪ Remember “White” Light is a mix of 7 colors.
▪ The 7 colors are arranged from shorter wave length to longer;
a. Violet
b. Blue
c. Indigo
d. Green
e. Yellow
f. Orange
g. Red
▪ The shorter wave length color light as ultraviolet, < 400nm, (the less
penetrance) reaches only cornea & lens, not reaches the retina.
▪ The longer wave length color light (as the 7 colors) can reach the retina.
 ▪ The shorter the wavelength, the higher the frequency, the less penetrance

Eye Anatomy
- Retina is where it all happens
o Retina is covered with light-sensitive photoreceptors

1. Rods:
▪ Recognize dim light (sensitive to only 6 photons); so for night
vision.
▪ Intensity or shades of gray; no color seen by them = no color vision
in dim light!
▪ Perceiving movement.
2. Cones:
▪ Recognize color.
▪ Sensitive to bright light; this is means recognize only the day light.
▪ NB: Color vision occurs only in bright light!
▪ 3 Cone types: blue (or S cone), green(or M cone), red (or L cone)
• Each sensitive to different band of spectrum
• Ratio of neural activity of the 3 colors
• Other colors are perceived by combining stimulation

o Rods & Cones Spatial Distribution:

▪ Center of retina has most of the cones
 • allows for high acuity of objects focused at center
▪ Edge of retina is dominated by rods
• enables detecting motion in periphery
▪ R-G-B cones not distributed evenly!
• Reds (64%), green(32%), blues (4%)
• Fovea has very small number of blue cones!

- Macula is located roughly in center of retina

o Fovea is in the center of Macula

o Responsible for central and sharpest vision

- Lens focusing:
o Different wavelengths of light focused at different distances behind eye’s
crystalline lens
▪ need for constant refocusing by crystalline lens to be seen clearing
o Causes fatigue
o With aging lens cannot refocus easily
o E.g.,

- Color sensitivity:
o The eye is not equally sensitive to all colors
o Reds (64%), green(32%), blues (4%)
o Highest sensitivity to yellow
- Seeing an object:

o We see an object because it reflects light into our eyes

o If an object absorbs all light waves, it is black
o If an object reflects all light waves, it is white

Colors

- Can affect the user experience and usability.

- Take care of:
o Colors selection (background & foreground )
o Colors saturation
o Colors brightness

Trichromatic Theory
- Primary colors are sets of colors that can be combined to make a useful range of colors.
- For human applications, three primary colors are usually used, since human color vision
is trichromatic.
- The primary colors normally used are red, green, and blue.
- The fact that most humans have trichromatic color vision explains why computer
monitors and televisions mix just three primary colors, red, green, and blue, in order to
produce colors that match almost all those seen in the real world.
- Likewise, if humans were tetrachromatic, having four cone photopigments, televisions
with four primaries would be required.

Color Model
- Primary colors:
- 3 Primary + 3 Secondary (Complementary) colors:

- Primary + Secondary + Tertiary colors (Trichromatic Model):

- HSV color model:

o Hue: dominant wavelength
o Value: how dark a color is
▪ Color lightness/darkness;
o Saturation; dominance of hue in a color
▪ Outer edge is pure hues
▪ Center is no hue
▪ fully saturated to fully desaturated

o Mixing HSV with vision:

▪ When only one type of cone cells is stimulated, the range of perceived
colors is limited therefore requires re(focusing)
Color Choices

- Use saturated colors only when you need something to standout as they require more
focusing compared to de-saturated colors.
o Simulate less cones
o Require more focusing so more eye stretching hence stress the eye
o Eye works more hence the brain works less
o Use it to attract attention; slow user down
o E.g., stop sign, cursor, warning, attention-grabber, etc.

- Use de-saturated colors as a color theme as they put less stress on the eye
o Stimulate more cones
o Less stress to the eye
o Eye works less so brain works more
o Professional, keep user moving
 o Dark: serious
o Bright: friendly
o E.g., menus, headers, panels, and backgrounds

- Avoid pure blue for text, lines, & small shapes

o Fovea has small number of blue cones so hard to see
- Blue is fine for backgrounds
- Definitely avoid blue on dark colors because as we age, fluid between lens and retina
absorbs more light perceive a lower level of brightness

- Avoid spectrally distant saturated colors

o Careful in combining colors from the spectrum
o Avoid simultaneous display of highly saturated, spectrally extreme colors because
excessive lens focusing will tire the eye.

- Use yellow to attract attention as yellow is the first color we see

- Avoid color in the peripheral field of view

o Why?
▪ Lack of R & G cones
▪ Blue cones are more in the periphery but very few still
▪ Mostly rods in the periphery

- Make sure your color selection process takes the cultural dimension into consideration.

- Use color selection online tools (do not reinvent wheels!)

o http://www.colorhunt.co/
o https://coolors.co/
o Just make sure to follow color take-aways + cultural dimension of colors.

Color Deficiency (Color Blindness)

- Trouble discriminating colors
o Besets about 9% of population (North American stats)
- Two main types
o different photopigment response most common
▪ reduces capability to discern small color diffs
o red-green deficiency is best known
▪ lack of either green or red photopigment therefore can’t discriminate
colors dependent on R & G
- Partial color blindness: blue + yellow color blind
- Total color blindness: equivalent to monochromacy simulation
- Do not use colors to communicate information to the user
o 10% of population has some form of color blindness
Color Meaning
- Colors can subconsciously give rise to certain meanings in the individual brain and affect
mood
- Those meanings change from one culture to another.
- Color psychology:
- Colors for HCI:

- Blue: trustworthy
- Red: dynamic, agile, news everywhere
- Black: formal, serious
 LECTURE 8

Background on the Brain

The Brain
- How it works? Getting beyond the gray matter
- How it is recorded? EEG (electroencephalogram)

Brain Waves
- The brain waves are divided to 5 types based on frequency range: delta, theta, alpha, beta
and gamma.

- Each wave type is associated with a specific set of tasks, functionalities, modes, etc..
- From one electrode, we get one complex signal

Brain Lobes

- Brain has 4 distinct lobes + special motor area called central sulcus
- Each area is responsible for certain functionality.
- Each area has many processing centers, each responsible for a task.
- Performing a complex task might involve activating more than 1 brain processing center
- Frontal Lobe:
o Cognition and memory
o Ability to concentrate and attend, elaboration of thought.
o Personality and emotional traits.
o Reasoning
o Motor skills
- Parietal Lobe:
o Processing of sensory input
o Sensory discrimination.
o Body orientation.
- Temporal Lobe:
o Auditory receptive area and association areas.
o Expressed behavior.
o Language: Receptive speech.
o Memory: Information retrieval.
- Occipital Lobe:
o Primary visual reception area
o Allows for visual interpretation.

- Electrode placement:

Motor Cortex
- Where all the actions start
- Located at the back of the frontal lobe
- Receives info from various lobes & utilizes this info to carry out body movements.
Brain Specialization
- Functional specialization suggests that different areas in the brain are specialized for
different functions.

- Example: procession of words and numbers

Left vs Right Brain
- Most actions are either left biased or right biased

EEG Experiment Setup

- Measuring electrical activates of the brain using electrodes

- Produces low signal quality but it’s a safe technique (non-invasive BCI)
- Any EEG experiment must take into consideration the user brain state when not doing
any task – that’s called the baseline condition or level.
- Any other task we are going to study must be compared to baseline.

BCI Applications
- BrainBall:
o Game measures two players’ brain waves
o If tense, ball moves towards you
o If relaxed, ball moves away
- Moving around/controlling artificial limbs:
o Quadruple paraplegic users: moving wheelchair using brain signals to select from
menu showing directions
o Quadruple paraplegic users: moving arm by thinking of intended motion
- Controlling characters in a game
- Detecting emotions/mental state:
o Detecting mental and emotional state in a certain task
- NeuroPhone
- BCI Speller:

o Quadruple paraplegic users: Typing text by thinking of letter to be typed

o Uses ERP P300
o Noticeably slow
- Image from the brain:
o Recall brain recording devices have very low resolution compared to the number
of neurons in the brain.
o Steps:
1. Display image, record brain signal during that (let us call that training)
2. Repeat above step for several images.
3. Use machine learning to find characteristic/properties of every data set for
a given image
4. Display same image again, record brain signal.
5. Ask machine learning algorithm which training dataset that this new data
set matches best!
o Japan: ATR Lab, Prof. Kamitani

▪
May soon make it possible to view other people's dreams while they sleep
▪
By analyzing changes in their cerebral blood flow.
▪
Using a functional magnetic resonance imaging (fMRI) machine, the
researchers first mapped the blood flow changes that occurred in the
cerebral visual cortex as subjects viewed various images held in front of
their eyes.
▪ System is only able to reproduce simple black-and-white images
o UC Berkley: Prof Gallant
 ▪ Lots of machine learning
▪ A system to capture visual activity in human brains and reconstruct it as
digital video clips.
▪ Eventually, this process will allow you to record and reconstruct your own
dreams on a computer screen.
▪ fMRI system recorded the brain's blood flow through their brains' visual
cortex
▪ This process effectively decodes the brain signals generated by moving
pictures, connecting the shape and motion information from the movies to
specific brain actions.
▪ As the sessions progressed, the computer learned more and more about
how the visual activity presented on the screen corresponded to the brain
activity
▪ The resulting video is low resolution and blurry
- Beaming data to the brain (in the future):
o Sony Patent
▪ Computer games in which you get to smell, taste and perhaps even feel
things
▪ A device for transmitting sensory data directly into the human brain
▪ The technique suggested is entirely non-invasive.
▪ It describes a device that fires pulses of ultrasound at the head to modify
firing patterns in targeted parts of the brain, creating “sensory experiences”
ranging from moving images to tastes and sounds.
▪ This could give blind or deaf people the chance to see
o Usage in social sciences
o Usage in nutrition science
o Usage in criminology (minority report)
- Neurofeedback to control anger:
o BCI using consciously generated affective state as input
o Brian activity measured with functional near-infrared spectroscopy (fNIRS)
o Signal:
▪ Left-asymmetric activation in the prefrontal cortex; associated to
approach-related affective states
o User can make a character on screen disappear by mentally expressing anger
towards them
o System provides continuous neurofeedback based on the asymmetry signal

EEG Analysis
- There are four types of EEG analysis that are possible.
- Each type is useful in uncovering what happens in the brain but from a different
perspective
- A brain-computer-interface could be designed to use one or more type of analysis to
derive the interaction with the digital system
1. Power Analysis:
o The first step in EEG analysis is called signal decomposition.
o Signal decomposition decompose the captured composite signal from each
electrode to constituent frequencies.
o Each frequency’s power is calculated from composite signal. The power tells us
how much of that frequency exist in the composite signal.
o We are more interested in the 5 brain bands – not the individual frequencies, so
we add the powers to get the power of delta, theta, alpha,…
o Epoch:
▪ An EEG recording session could last from minutes to hours.
▪ Doing the signal decomposition on a lengthy data stream weakens the
analysis because lots of things could be happening in the brain and signals
average out each other.
▪ Instead, we pick 4-to-5 snapshots each 1-to-3 minute intervals (called
epochs), do the signal decomposition on them and take the average of the
found power.
o Power analysis per electrode:
▪ We are interested in statistical difference between power of same band
across conditions for every electrode, for example, baseline delta vs.
condition1 delta in electrode F2 for all participants
▪ We do a t-test comparing baseline delta of all participants to baseline
condition 1 for all participants for single electrode (e.g.. F3) and so on…

▪The table shows the computed power for every band for every electrode
for every participant
▪ In this case, of N electrodes, with two levels (baseline and condition1), we
will conduct, 5N t-tests (5 for 5 bands, N for electrodes).
o Power analysis reporting:
▪ When we report, we must report power ratio as well
▪ Note that the table below summarizes the overall performance for all
participants (taking averages of all).
▪ Power ratio is the ratio of specific band to total power.
▪ The table below shows that the participants were relaxing
 o Power analysis heat maps:

▪ When we have lots of electrodes, reporting the power as numbers is one

way, another way is to use heat maps to show which brain centers had
more power
▪ The color ranges from red to green to blue (highest power values are red,
lowest are blue).

2. Coherence Analysis:
o Another type of analysis we can do after the power analysis is coherence analysis.
o Since many brain centers work together to achieve a task, we compare the power
of every electrode pair in every band across conditions
o This is called coherence analysis -- to find which brain centers were working
together.
o E1, E2, … (below table) are symbolic for electrodes. In an experiment, these
would be F1, F2, etc..
o Each cell in below table is a number ranging from 0 to 1 (1 means complete
coherent. 0 means none)
 o Because tables with lots of numbers tend to be less cognitively exciting,
coherence is often presented as a figure with dotted lines showing which brain
centers were coherent.

3. Symmetry Analysis:
o We said lateralization is very common in brain, i.e., either your left or right brain
side is working more at any one point.
o Symmetry analysis evaluates the difference between activity in left vs. right sides.
o Each cell in the table below shows how much difference between left and right
sides was there
o The simplest way to do symmetry analysis is to calculate (Left-Power+Right-
Power)/Left-Power
o Note that to get Left-Power we will average the power of all electrodes in a
specific band in the left side and same for right

4. Region/Lobe Analysis:
o A fourth type of analysis is to consider the statistical difference in power between
the brain lobes.
o The power of all electrodes in a lobe in a specific band is compared across
conditions.
o Thus, we compare power of say delta in frontal in baseline to delta in frontal in
condition 1
o To do the statistical analysis, we prepare a table like below.
 o In this case, we are going to conduct 6 t-tests between the two conditions: baseline
and condition1

Event-Related-Potential (ERP) Signals and BCI

- Historically, 90% of BCI works used ERPs
- This is rapidly changing now.
- More research and applications using full EEG recordings not just the primitive ERP.
- A brain response that is the direct result of a specific sensory, cognitive, or motor event.
- A distinct transient signature signal that is the result of a group of neurons working
closely together
- Handful of ERPs have been discovered.
- An ERP is primitive signal that is evoked due to an external event. They are the easiest to
evoke and detect. Should be your first attempt when building a BCI system.

- ERP: P2 (P200)
o Temporality:
▪ Between 150ms and 275ms
o Localization:
▪ Around the centro-frontal and parieto-occipital region
o Event that makes it appear?
▪ Elicited as part of the normal response to visual stimuli
o Stimulus Design Guidelines:
▪ Color, size, and orientation of the stimulus have a necessary role in
eliciting the P2 effect seen during trials of efficient search.
▪ P2 may be a part of cognitive matching system that compares sensory
inputs with stored memory
▪ Generally related to higher-order perceptual processing, modulated by
attention
o Applications:
▪ Has been studied in relation to visual search and attention, language
context information, and memory.
- ERP: P3 (P300)
o Temporality:
▪ 250ms and 500ms
o Localization:
▪ Strongest over 1) parietal, 2) frontal
o Event that makes it appear?
▪ Generally, reflect processes involved in stimulus evaluation or
categorization
o Stimulus Design Guidelines:
▪ Oddball paradigm (or simply missed opportunity)

o Applications:
▪ Lie detection
▪ BCI Speller
▪ Cognitive workload

- ERP: P6 (P600)
o Temporality:
▪ Between 500ms and 700ms
o Localization:
▪ Strongest over 1) centro-parietal, 2) frontal
o Event that makes it appear?
▪ Elicited by hearing or reading grammatical errors and other syntactic
anomalies.
o Stimulus Design Guidelines:
▪ Phrase structure violations
▪ Disagreements in tense, gender, number, and case,
▪ A sentence contains no outright grammatical error, but must be parsed in a
different way than the reader originally expects.
▪ E.g., The broker persuaded to sell the stock was tall.
▪ E.g., As a breakfast, I ate my bicycle.
o Applications:
▪ Study in neuro-linguistic experiments investigating sentence processing in
the human brain.
 LECTURE 9

Background on Human Psychology

The Model Human Processor (HMA)

- Developed by Card, Moran, & Newell (’83)
o Based on empirical data
o Perceptual System + Cognitive System + Motor System = Human performance
while working with an interface

- Considered as a high-level look at the human’s abilities.

- Consists of three subsystems:

A human response to an interface

stimulus cannot be faster than 240ms
1. Perceptual processing: organization, identification, and interpretation of sensory
information to represent and understand the environment
2. Cognitive processing: determine the action needed based on the input and what
you have compared in the LTM
3. Motor processing: perform the response
o Each subsystem has a cycle time
- MHP abstracts the human interaction with a computer system:

Vision vs. Perception vs. Cognition

- Vision is just what get through your eyes to the optic nerve
- The perceptual processor and cognitive processor act as are two independents, yet highly
synchronized CPUs…
- Cognition works on what you perceive (output from perceptual processor) and using what
you previously learned (memory)
- 2 Pathways from perceptual processor to cognitive processor
- Impossible shapes:
o You are perceiving what you see below correctly. Your cognitive processor just
can't make sense of it.

Perceptual Processor

- Sensory Processing
o Perception: become aware of something through the senses
 ▪ what you see + hear + smell + touch + taste

- Perceptual psychology is subfield of cognitive psychology that is concerned specifically

with the preconscious innate aspects of perception.

- Understanding it helps us find suitable interface design and organization

- In highly interactive interfaces (e.g., games), it is important to support both perceptual

fusion and perceptual causality to avoid affecting user experience in a negative way.
- The brain uses both; bottom-up and top-down perception
o The perceptual processor supports both bottom-up and top-down processing of
input.
o Standard interface relies on top-down processing to save learning time.

- Applications:
o Instant response
o Talking-head sync
o Animation

Perceptual Processor Characteristics

- Discrete (sequential) and limited (by cycle time)
- Cycle time = 100 ms
o i.e., shortest single operation inside perceptual processor takes 100ms.

Perceptual Fusion
- Two stimuli within a cycle (100ms) appear fused
o Perceive animation as smooth on if > 10 fps
▪ 10 fps (1 frame per 100ms) as 1 sec is 1000 ms
- GUI Responses feels instantaneous only if < 1 cycle

Perceptual Causality
- Two distinct stimuli are perceived as related if the two events occur in the same cycle
- Detected by the user
- The first event appears to cause the other
Top-Down Processing
- Constructive perception
- Driven by experience, expectation, and knowledge
- Works like pattern-matching; brain looks for similarities between things you see and the
things stored in your memory.
- Your knowledge or expectations will influence perception

Bottom-Up Processing
- Ecological perception
- All information needed is stored in environment (size, shape, orientation, color, texture,
etc.) processing happens only in one direction
- Interpretation emerges from the data; brain tries to figure out things based on the
environmental input

Gestalt Theory
- Gestalt “essence or shape of an entity's complete form”
- Focus on perceptual organization
- Argues organization is a fundamental building block of perception
- “The whole of something is more important to our understanding than the individual
parts”
- Laws directly applicable to UI design

- Grouping:
o Law of proximity: stimuli that are close together will be seen as a group
o Law of similarity: items that share some property or attribute are perceived as
belonging together
▪ Associate related interface elements with each other using visuals such as
common background color
o Law of continuity: dots that form a single continuous grouping are seen as a
pattern
▪ Organize user interface elements one after the other in a continuous
fashion (e.g., toolbar)
▪ Continuity overrules influence of proximity
 o Law of Pragnanz: reality is organized or reduced to the simplest form possible
▪ To provide the user with an
overview of information/data,
you donnot need to use high
resolution rendering.
▪ Low resolution will suffice to
make the user recognize
content
o Law of symmetry: elements that are symmetrical to each other tend to be
perceived as a unified group
▪ Organize your interface taking symmetry into consideration; horizontally
and vertically
o Law of common fate: items that share some property or attribute are perceived as
belonging together

▪ To communicate to the user that a functionality will be applied to a

number of objects, attach a distinguishing feature to all of them

- Feature extraction:
o Law of figure/ground: division of input into foreground and
background
▪ To direct user attention to a specific user interface
element (e.g., login dialog), disable and dim
background and show the element on top.
o Law of closure: brain tend to ignore gaps and complete contour lines
▪ when short on screen real estate, you can
show partial content and user will complete
the picture

- Example: apply gestalt to transform a boring excel table to a perceptually interesting one
o Remove colors
o Remove gridlines
o Remove fills
o Remove border
o Remove bolding
o Left align text
o Right align numbers
o Align titles with data
o Resize columns to data
 o Put whitespace to work (group similar rows together by adding spacing)
o Remove repetition of cell entries by making it one
o Use consistent number precision
o Round the numbers
o Do not use calibri font

- Global beautification of layouts using gestalt layout organization:

o Used to specify precise relationship among graphic elements (e.g., align photos)
o With traditional tools, the editing process is tedious and error-prone
▪ Snap dragging: many repeated actions
▪ Align top: no visual cues
o Global beautification with Interactive Ambiguity Resolution is more suitable for
layout refinement
o Potential interface: apply beautification after each operation
▪ Flickering effect disturbs process of layout design
▪ Falsely inferred constraints prevent editing of elements
▪ Shows inferred constraints
▪ Provides gestural interface for editing constraints:
a. Add/remove appropriate alignment constraint
b. Add/remove equal spacing constraints
▪ Evaluation of interface:
a. With vs. without preview window

b. Compare against traditional tools

Visual Information Store
- Discrete Encoded as a physical image
- Decay ~ 200ms (70-1000ms)

Auditory Information Stores

- Discrete Encoded as a physical sound
- Decay ~ 1500ms (900-3500ms)

Lateralization of Image/Text Processing

- Position images and graphics on the left

o “…a stimulus presented in the left visual field (LVF) is initially received and
processed by the right hemisphere (RH), and a stimulus presented in the right
visual field (RVF) is initially projected to and processed by the left hemisphere
(LH)…” (Bourne, 2006, pp. 374)
o “Because the right hemisphere is better suited to process pictorial information and
the left one is more logical and verbal, placing the image on the left-hand side of
the text enhances the processing of the whole message…” (Grobelny & Michalski,
2015, pp. 87)
- Position titles towards right
o “…placing a brand name to the right of attended pictorial information should send
it to the less activated left hemisphere, where it will receive a greater degree of
subconscious processing than if sent to the right hemisphere…increasing the
amount of subconscious processing should increase affect toward the brand
name..” (Janiszewski, 1990, pp. 54 – 55)
 LECTURE 10

Cognitive Processing/Cognition

- Cognitive psychology is the scientific study of mind and mental function, including
learning, memory, attention, reasoning, language, conceptual development, and decision
making.
- The modern study of cognition rests on the premise that the brain can be understood as a
complex computing system.
- Uses contents of WM and LTM to make decisions and schedule actions with motor
system.
- Humans always have a current general model in mind that drives their behavior in a very
systematic way.
- Mental models set expectations which drive and shape behavior
- A primary goal of UI design is to collect data on and understand the user’s mental mode.

Memory
- Many individual units (letter, number, symbol, etc) stored in a neuron
- Think computer memory with 1s and 0s

- Linked Neurons
o To form a concept through pattern of activation (represents meaning)
o To connect concepts (e.g., form hierarchies and relationships)
o Partially distributed
▪ A neuron participates in storage of many items
▪ An item is stored across many neurons

- Long-term memory (LTM):

o Huge capacity;
▪ holds mass of knowledge
▪ facts, procedures, skills,
o Little decay
o Access time: ~100 ms
o Fast read, slow write
o Elaborative rehearsal moves chunks from working memory into LTM by making
connections with other chunks

- Working/Short-term memory (WM):

o Holds intermediate products of thoughts
o Small capacity 7 +/-2 chunks
o Fast decay rate (~7 [5-226] sec)
o Passes info to LTM after a few seconds of continued storage
 o Maintenance rehearsal fends off delay (decreases decay rate)
o Interference causes faster delay
o Note: when you interrupt the user (to display a message or alert) while working on
a task, the user tends to forget what he was working on. The longer the
interruption, the more he forgets.

Chunking Theory
- Chunking: a process by which individual pieces of information are bound together into a
meaningful who
- Our short-term memory performs best when holding 7 +/- 2 chunks
o More than 9 chunks, we would make errors remembering
o Occasionally been referred to as Miller's law
▪ Performance is nearly perfect up to five or six different stimuli but
declines as the number of different stimuli is increased
▪ The second cognitive limitation Miller discusses is memory span. Memory
span refers to the longest list of items (e.g., digits, letters, words) that a
person can repeat back in correct order on 50% of trials immediately after
presentation
▪ Miller recognized that the correspondence between the limits of one-
dimensional absolute judgment and of short-term memory span was only a
coincidence, because only the first limit, not the second, can be
characterized in information-theoretic terms (i.e., as a roughly constant
number of bits)
▪ The number seven constitutes a useful heuristic, reminding us that lists that
are much longer than that become significantly harder to remember and
process simultaneously
o A memory chunk is a small grouping of data
▪ 6174591765 vs. (617) 459-1765
▪ DECIBMGMC vs. DEC IBM GMC
- Always chunk the information presented to the user and chunk the entries the user needs
to fill.

Thinking
- Spread of activation:
o Current thought activates pattern (concept) which activates associated concepts,
and so on
- Chain of activation influenced by:
o Location of initial activation
o Strength of associations between concepts
o Radius of activation
- Can we think without language? Not really…
o Words are very important in communication!!
o Being precise in communication means using right word!
 o Colloquial is inaccurate. Words are overloaded for speed.
- Quality of thinking depends on accuracy of understanding which depends on accuracy (do
not use informal -colloquial- language) and clarity (use words user can understand; do not
use technical jargon) of message to the user.
o Messages displayed to the user should be precise, accurate and in proper (formal)
language.

Cognition Principles
- Encoding specificity:
o Memory better when context available at encoding is also available at retrieval
▪ Location, time, mood, sounds, etc.
▪ Your files as a life stream!
o Forget because of too few or ineffective retrieval cues
o Think primary key in a relational table!

- Discrimination:
o Recall determined by candidates that exist in LTM relative to the cues
▪ too few cues: cannot recall
▪ too many candidates: false memory
o When displaying history of previous performed actions, show the user all the
details associated with each action to be able to distinguish between them.

- Uncertainty:
o Decision time increases with level of uncertainty

Hick's Law
- Models human reaction time under uncertainty.
- Time it takes for a user to make a decision.
- Given n equally probable choices, the average reaction time T required to choose among
them:

- Reduce options to the basics

- Do not overwhelm the user with options.
Conceptual/Mental Models
- “The most important thing to design is the user’s conceptual model. Everything else
should be subordinated to making that model clear, and substantial. That is almost exactly
the opposite of how most software interfaces is designed” (David Liddle, 1996)
- A conceptual model is a description of the proposed system in terms of a set of integrated
ideas and concepts about what it should do, behave and look like, that will be understood
by the users in the manner intended.

- Types:
o Activity focused
1. Instructing
a. User instruct the system what to do
b. Suited to repetitive kinds of actions performed on multiple objects
2. Conversing
a. System responds in a way similar to a human
b. Suited when users’ needs to find out specific kinds of information
or want to discuss issues
3. Manipulating and Navigating
a. User manipulate objects
b. Exploit user’s knowledge of how they do this in the physical world
4. Exploring and Browsing
a. Allow user to explore and browse info
o Object focused
▪ Focus on the way a particular object is used in a particular context

- Metaphor usage:
o Advantage of metaphor is that you’re using a conceptual model that the user
already has experience with, so the user can quickly recognize what he is dealing
with…
o It’s a notebook. It’s a CD case. It’s a desktop. It’s a trash can..
o Benefits of using an existing conceptual model:
▪ Familiarity
 ▪ Simplicity

▪ Improve Accuracy
▪ More Efficient
o Pioneers:
▪ Xerox Star Desktop Environment
a. Extensive research into an appropriate conceptual model led to the
desktop metaphor -- to provide familiarity – based entirely on
physical desktop organization: papers, folders, trash bin
• minimised the need to understand how computers work
• use of icons to represent object
• desktop metaphor with direct manipulation interface
• window containing multimedia objects
• drag, drop functions remains unsurpassed
▪ VisiCalc: first ever electronic spreadsheet.
a. Was an instant success with accountants since it is mimics an
accountant ledger/balance-sheet.
b. Short for visual calculator
c. Programmed and designed for apple 2 computer, was the reason
apple made so much sales then (propelled success of apple)
d. Same basic structure as excel
e. Same functions as excel (sum, add, etc)
o Dangerous of metaphors:
▪ Deceptive
▪ Constraining
▪ Breaking the metaphor
o Utilizing an appropriate conceptual/mental model via a metaphor in an interface
increases efficiency and effectiveness

- Implications of mental models on UI design:

o Depict icons to encourage mental interaction

▪ “…when participants have their dominant hand available, the

corresponding visual product depiction leads to higher purchase intentions;
 however, when the dominant hand is occupied, the effects are reversed.”
(Elder & Krishna, 2012, pg. 9)
o Design objects (physical and virtual) with right affordance. Form implies
Function.

▪ What is affordance? Perceived signal or clue that an object may be used to

perform a particular action
▪ Affordance of shape? The shape of an object (physical or virtual) either
encourages or discourages interaction
▪ Affordance of an object invoke the related mental model of how to operate
it.
▪ Perceived signal or clue that an object may be used to perform a particular
action (e.g., you need a handle to pull not to push)

Attention

- Taking note of something or someone

Focal Attention
- Sustained Attention:
o Sustained attention is the ability to focus on one specific task for a continuous
amount of time without being distracted.
- Selective Attention:
o Selective attention is the ability to select from many factors or stimuli and to focus
on only the one that you want while filtering out other distractions.
o How to support selective attention in a GUI?
▪ Display non-overlapping user interface elements in different visible
locations to enable the user to quickly select what he wants.

o Example: Microsoft switched from old menu design to ribbon menu to enable
faster selective attention

o Example 1: build a whole desktop gui

▪ Inserts an explicit interaction layer above existing UI components and a
layer above the wallpaper which displays persistent information and
implicitly observes interactions with the rest of the window system.
▪ Individuals can switch between tasks using menu bar control or evoking
the activity switcher.
▪ Specially organize activity desktops. Prioritizes activities to facilitate
multitasking.
▪ Jump easily from an activity to another or create an empty desktop as a
starting point to a new task.
▪ The GUI switches the activity contacts in the contact palette and the files
stored on the desktop when activity transitions occur which provides a
consistent means of association content with each activity
▪ The contact palette contains the contacts associated with the current
activity and indicates the number of unread emails from this contact.
 o Example 2: build a whole desktop gui

▪ Create activities along a timeline with continuous zooming. Every activity

has a dedicated desktop environment.
▪ Overview screen available to easily switch to other activities.
▪ Interruptions such as emails arrive in a side todo list.

- Alternating Attention:
o Alternating attention is the ability to switch your focus back and forth between
tasks that require different cognitive demands.
o How to support alternating attention in a GUI?
▪ Provide a way to quickly switch between tasks/apps
a. The faster the user can switch, the less distracting to the user
▪ Provide a way to share content/data between apps
a. E.g., Drag and Drop, Copy and paste.

Divided Attention
- Divided attention is the ability to process two or more responses or react to two or more
different demands simultaneously.
- Divided attention is often referred to as multi-tasking.
- Example 1: utilization of transparency

o Provides a mouse for the dominant hand of the user and a roller ball for the user’s
other hand. Both can control the location of UI elements in the GUI.
o The example mentioned is editing of colours of text, fill color of images or
clipboards.

- Example 2: utilization of transparency

o Utilizing transparency to speed up moving files from one window to the other for
example.
o Full transparency with opaque windows were confusing when content from both
windows overlapped. Also, all semi-transparent windows were confusing as well
to determine which content belonged to which window
o Fixed that with windows fully opaque where there is content in a window and
fades out into transparency where there is no content to show windows underneath
(content aware free space transparency).

- Example 3: focus+ context

o A large low-resolution display enhanced
with a high-resolution region in the
center
o It’s a big projector screen installed
around a normal screen, where the
projector gives the low-resolution part
and the normal desktop screen provides
the high-resolution bit.
 o Gives an overview of many objects while enabling the user to focus on one part of
the screen. Whenever there is an object of interest in the context area, the user
pans the focus area onto that object of interest.

- Divided verses focused attention proof:

o Stroop Effect: delay in reaction time between congruent and incongruent stimuli
▪ Ex: naming the font color of a printed word is an easier and quicker task if
word meaning and font color are congruent

o A demonstration of interference in a divided attention

o Reaction time decrease when color/text mismatch - proofs interference - proofs
divided attention

Peripheral Attention
- Being aware of changes in the periphery.
- Peripheral vision and attention work closely
- Utilize peripheral attention when you want to communicate change in status of some
information source in a salient non-intrusive way
- Visual field: what your eyes can see; entire area that can be seen when an eye is fixed
straight at a point
- Example: desktop notification

- Example: ambient interfaces

o Beads hung on the side of the desktop and
their elevation level represents different
meanings. Example a yellow bead is high
means it’s close to lunch time, etc.
o Glow lamp with colored lights that indicate
different information like for example if the
weather is good, the light will be green.
o Ambient garden: A flower garden with
lights, and the faster the lights rotate in the
flowers, the more emails you’ve received for example.
o You can request more information for example you can request the system to read
you your emails.
o This is constructed using fidget sensors and motors to control the devices.
o The flower garden is constructed using LED lights controlled with a
microcontroller.

- Example: ambient interfaces (Dino)

o Listens to conversations on MSN messenger
and reacts to the emotions contained in the
words being exchanged through Kinetic,
Chromatic and Acoustic methods.
o Example: Angry words make it rock harder;
love words cause it to make certain sounds with
color changes according to each mood
- Example: interactive public ambient display
o A vertical bar on a display follows an
individual as they move. The less attention
the individual pays to the vertical line the
thinner the line gets.
o Whenever there is a notification for an
individual arrives, a fag appears on their
vertical line. The fag moves out of phase a
bit with the line to grab the attention of the
individual. The more urgent the notification the more saturated the colour of the
fag and the more out of phase it moves with the line.
o Facing the screen and stopping causes the bar to widen and additional details
presented to each notification fag. Could also include the user’s private
information such as calendar.
o Interact using gestures. If user is in front of the display for a while doing nothing,
the help mode is initiated.
o Stepping closer allows using touch screen input.

Spatial Attention/Memory
- Source of attention
- Attention is targeted to a location in space (top, left, right, bottom, right of, below, above,
etc…)
- Part of the long-term memory is dedicated to storing spatial information _ called spatial
memory

- Examples:
o Desk in my bedroom is below the window.
o I parked my car beside the university main entrance
o Costa is on the left beside the mall entrance

- Example: in Apple interface, menu bar always appears at the top of the screen

- Example: virtual shelves

o You can navigate through your phone by changing the phone’s location in space.
7 regions horizontally (left and right). 4 regions vertically (up and down).
 o This decreases the time the user spends looking at the screen to do a certain
functionality.
o Can be also applied to web browsing through a mobile device.

- Example: use your phone without taking it out of your pocket

o Taps on the palm of your hand correspond to
taps on the phone. So, you can do all
functionalities by just tapping on your palm.
o Done by wearing a depth camera that
observes touch and sends touch events to the
phone.
 LECTURE 11

Motor Processing

- Controls movements of body

o Movement composed of discrete micro-movements
o Micro-movement lasts about 70ms
▪ Cycle time of motor processor about 70ms

- Translates thoughts into actions

- Consists of:
o Motor Processor: caches common motor acts
▪ E.g., typing, speaking, playing tennis/squash/…, driving car, jogging,
swimming
o Kinesthetic Memory

Kinesthetic Store/Memory
- Update motor acts to achieve better precision
- Responsible for remembering muscles movements, weight, resistance, and position of the
body or parts of the body.

- Example: gesture recognition in marking menu

o User learns to perform the motor action and keeps getting faster and more
accurate at it.
o Replacing selection from a linear menu with a motor action that the user learns.
o Up to 10 times faster selection.
o Movements are scale independent (large or small moves will be recognized)
Power Law of Practice

- Many Task time on the nth trial: You get faster the more times you do it!
- Can be used to find the approximate time to perform a mechanical task at the nth time
- Task time on the nth trial

- Applies to skilled behavior

o Sensory (perceptual processing) & motor processing.
- Not applicable to knowledge acquisition or improving quality

Fitts Law
- Empirical model explaining speed-accuracy tradeoff characteristics of human muscle
movement in rapid, aimed movement (not drawing or writing)

- Models human motor performance

o Aimed at hand/arm movement based on a series of micro corrections
- Finds the time T (movement time) to reach a target of width S that is D distance away
using constants a and b.
- Time T to move your hand to a target of size S at distance D away is divided to two parts;
o Reaction time (RT) + movement time (MT)
o Assume moving in a straight forward horizontal path
o T = RT + MT = a + b log (D/S +1)

o a & b are device dependent.

o a is start/stop time of device. b is speed of device.
o log (D/S +1) is called the index of difficulty.

- More movement time so more distance so less width so low error tolerance
- Less movement time so less distance so more width so high error tolerance

- Implications of Fitts’s Law:

o To decrease target acquisition time, either decrease distance to target or increase
width of target, or both.
- Example: pie menu is faster as it has bigger targets and less distance

- Guided by Fitts
o Apple’s docking menu:
▪ Apple doc menu item gets bigger as user approaches with mouse.
Increasing item width speeds up acquisition.

o Enhancing selection by reducing travel distance:

▪ Bubble cursor continuously grows and shrinks such that there is always
exactly one object within its target boundaries.
▪ Two main problems with standard area cursors:
a. They’re usually square or rectangular, so further objects can be
selected before closer ones. Solved by using a circular area cursor.
b. Area cursor size, too large multiple objects inside its bounds, too
small no objects might be included in its bounds. Solved by
dynamically changing the size of the cursor accordingly.

o Enhancing selection in crowded spaces for users with motor impairments:

▪
 ▪ Small targets are difficult for users with motor impairments, yet they are
very common in GUI.
▪ This GUI:
a. Reduces the need for corrective phase pointing
b. Lessens the effect of small target size.
c. Reduces the need for accurate steady clicking
▪ The solution of this GUI is that whenever the circular area of the cursor is
over a crowded space, the buttons within the cursor area spread out and the
user can select from them. Two variations,
a. Click and Cross: U have to click to activate the cursor (the
spreading out)
b. Cross and Cross: u don’t need to click u just need to stop the mouse
pointer for a bit.
▪ (Visual-Motor Magnifier): Another solution is the area magnifier:
Increases visual and motor space whenever activated (more room for
selection)
▪ (Motor Magnifier): Another solution: Motor Magnification cursor. Mouse
click to activate the area cursor. Then, mouse speed decreases allowing
user to select with another mouse click.
o Large Displays: attempting to solve the reachability problem
▪ Large displays are huge screens typically 72inch or more
▪ These are becoming cost-effective and are deployed with an increasing
rate in public and open spaces (malls, museums, parks, etc..)
▪ Challenges:
a. Input: assumptions of using keyboard and/or mouse are unrealistic
b. Reachability: a big percentage of a large display are unreachable by
hand
c. Privacy: large displays have no privacy by design
• Everyone can see what you see
d. We need new interaction techniques and interface controls to be
able to interact with content displayed on a large display
▪ Utilizes hover to enable quick access to
items on an area of a display that are
difficult to reach
▪ The vacuums is a circular widget with an
angle of influence controllable by the user,
such that proxies items in the
field/extension of this angle are brought
closer to the user.
▪ Proxies are mini scale of the objects such that the user can select the
objects he wants to reach.
▪ The angle is controlled by the user by dragging the curser through the
center of the circular vacuum.
Steering Law
- Fits Law focuses on moving in one dimension.
- Steering law is about moving in 2 dimensions.
- Finds the time to navigate through a path of N tunnels

- Extension of Fitt’s law:

o Multi-dimensional movement tasks
o Vertical or diagonal movements to targets

- A predictive model of human movement that describes the time required to navigate,
or steer, through a 2-dimensional tunnel.
- The tunnel can be thought of as a path or trajectory on a plane that has an associated
thickness or width, where the width can vary along the tunnel.
- The goal of a steering task is to navigate from one end of the tunnel to the other as
quickly as possible, without touching the boundaries of the tunnel.
- A real-world example that approximates this task is driving a car down a road that may
have twists and turns, where the car must navigate the road as quickly as possible without
touching the sides of the road.
- The steering law predicts both the instantaneous speed at which we may navigate the
tunnel, and the total time required to navigate the entire tunnel.

- Derived/Extension from Fitts Law:

 The Human: Muscles

- 642 muscles
- Onion structure (layers)
- Role of tendons: Range of motion…
- Working against gravity
Big vs Small Muscles

- Small muscles are represented with larger area in the brain lead to accurate computation
for fine movement.

Muscle Usage Guidelines

- Small muscles can be used to do fine movement
o E.g., mouse movement with hand
o Moving small muscles large distance should be avoided
- Big Muscles can be used to do coarse movement
o E.g., foot-based interface
o Moving large muscles small distance should be avoided
- Working against gravity affects performance leading to fatigue (from carrying arm
weight) hence increased error rate as it decreases accuracy of movement
o Gesture should be done infrequently if against gravity
o Gesture based interfaces are best suited to short-duration interactions
- Repetitive movement cause exhaustion to muscle lead to nerve saturation (inability to
control muscle) hence increased error rate
o Gestures should be separated by inactive time lapses
- Rotational movement requires fine dexterity and lots of muscles working together

Questions to Ask While Designing Gestures

- What is the amount of time users spend on the task for which you are designing the
gesture (casual or all day?)
- Does the gesture map naturally to the task at hand?
- Can you substitute moving big muscles with smaller muscles?
- Does the gesture require fine control of a property or a value or is it a trigger gesture?
- Are you enabling the use of the kinesthetic store?
- Are you enabling the use of spatial memory?
- Are the gestures different enough to enable recall by user and detection by software?
Muscle Activation
- A muscle is controlled physiologically by a minute electric signal which causes
contraction/relaxation of muscle
- We can activate a muscle externally by placing electrodes and sending a signal to move
the ions inside, this creates a potential difference and contracts/relax muscle
- Severed frog legs move when you put salt on them

- Muscle vibrations:
o When a muscle moves, it vibrates (because of flexible tendons attaching it to
skeleton)
o This vibration can be captured and recorded as waves.

- Example: moving hand muscles involuntary to write the results of digital computations
o User writes with “an Anoto pen” something they want to plot (example: wind
tunnel lines), and the muscle of the user is controlled by the muscle plotter by
actuating the user’s wrist via electrical muscle stimulation.
o Implementation:
▪ Strokes sent to OCR
software which is
Tesseract and runs on
the system’s backend.
▪ Keywords like “plot”
are recognized and
following input is
parsed character by
character.
▪ Output is sent to the actuators that stimulate the muscles of the user to
draw the desired output. Whenever the user lags behind, the actuator
increases the stimulation.
o Further Applications:
▪ Statistics, zooming, optics, interactive forms (to see which of the EMS
channels are active), mathematics, filter design.

- Example: controlling someone’s hand via your nerve signal

o Electrodes on person A’s arm that can read the signals from person A’s nerves.
o If another person, B, is hooked up to other electrodes that can also reach person
B’s arm nerves and both electrodes are connected together so that the electrodes
on A read the signal from A’s brain and transmit it to the electrodes on B, then the
electrodes on B will prompt B’s arm to copy A’s arm movement.

- Example: thorax muscle vibration as input channel

o with AlterEgo, a user is able to converse with the
system without speaking out loud. Subtle internal
movements are read by the device and responded to.
o This system aims at combining humans and
computers to augment human cognition and abilities.
- Example: arm muscle vibration as input channel
o As computers continue to expand of the
desktop, we increasingly need to interact
with technology without physical artifact.
Because, either physical control is not
accessible or our hands are busy.
o This system allows users to interact with
hand and finger input without physical
input devices
o 4 finger electromyography (EMG) is used to decode muscle signals from the
surface of the skin
o Muscle data is collected using sensors to build a gesture recognizer
o Applications can be controlling music player while jogging, or controlling a car
door without reaching for one’s keys.
 LECTURE 12

Background on the Skin

- Your skin, and much of the rest

of your body for that matter,
conducts electricity.
- This ability to allow electricity
to pass (conduction) varies and
is called Galvanic Skin
Response (GSR)
- Ability to conduct electric
current is due to the sweat
glands
- Sweat chemical composition
o Minerals: Sodium (0.9
gram/liter), Potassium
(0.2 g/l), Calcium (0.015
g/l), Magnesium (0.0013
g/l)
o Traces of: Zinc (0.4 milligrams/liter), Copper (0.3–0.8 mg/l), Iron (1 mg/l),
Chromium (0.1 mg/l), Nickel (0.05 mg/l), Lead (0.05 mg/l)
o Sweat has free moving ions
- Vigouroux was the first researcher to uncover a link between mental state and GSR
activity,
o He found an association with the level of sedation in patients and skin resistance.
o This connection of emotional response to GSR signal has been explored in
thousands of articles in the 120+ years since this seminal finding.
- While sweat secretion plays a major role for thermoregulation and sensory discrimination,
changes in skin conductance are also triggered robustly by emotional stimulation: the
higher the arousal, the higher the skin conductance.
- The amount of sweat glands varies
across the human body, but is the
highest in hand and foot regions
(200–600 sweat glands per cm2),
where the GSR signal is typically
collected from.
- Sweating is controlled by the
sympathetic nervous system.
- Skin conductance is not under
conscious control. Instead, it is
modulated autonomously by
sympathetic activity which drives
aspects of human behavior, as well
 as cognitive and emotional states. Skin conductance offers direct insights into
autonomous emotional regulation.

- Utilizing skin conductance:

o Example: an interface for smart watches

▪
SkinTrack
▪
Uses body as an electrical waveguide for continuous finger tracking on the
skin
▪ Works even if skin is covered
▪ Simulating ring and sensing band
▪ When finger touches the skin, high frequency electrical signal propagates
into arm
▪ Phase changes as finger position changes due to change in distance to red
rods
▪ Interaction modalities: swipe gesture, discrete touch, tracking
▪ Applications: app navigation, right swipe for selection, scroll, confirm etc
▪ Hover location is used to help
o Example: skin as an interface to the brain

Galvanic Skin Response (GSR)

- GSR measurements work by detecting the changes in electrical (ionic) activity resulting
from changes in sweat gland activity.
- The electrodes must be sensitive to these changes
- Most modern GSR electrodes have an Ag/AgCl (silver-chloride) contact point with the
skin.
- Ag/AgCl electrodes are used as they are cheap, robust, safe for human contact, and of
course are able to accurately transmit the signal from the ionic activity.

- Sample rate:
o Data is acquired with sampling rates between 1 – 10 Hz and is measured in units
of micro-Siemens (μS).
o 10 Hz, means we try to pass current 10 times per second and measure how much
in each time passed through. In other words, what was the resistance in each time
and then we average that.

- Device:

- Applications:
o Psychological research
o Clinical research & psychotherapy
o Media & advertising testing
o Consumer neuroscience & marketing
o Usability testing & UX design
o And most famously
▪ Legal Courts (Russia, Japan, and China). recently in Airports (Hungary,
Latvia and Greece, etc..)
- Signal Composition:

o Phase difference:

o Typical GSR Signal:

▪ The time course of the signal is considered to be the result of two additive
processes:
a. A base-line conductance (often called tonic level), which fluctuates
very slowly (seconds to minutes), and
b. A faster-varying phasic component (fluctuating within seconds).
▪ Changes in phasic activity can be identified in the continuous data stream
as these bursts have a steep incline to a distinctive peak and a slow decline
relative to the baseline level.
 ▪ Researchers focus on the latency and amplitudes of the phasic bursts with
respect to stimulus onset when investigating GSR signal changes in
response to sensory stimuli (images, videos, sounds).
▪ When there are significant changes in GSR activity in response to a
stimulus, it is referred to as an Event-Related Skin Conductance Response
(ER-SCR). These responses, otherwise known as GSR peaks, can provide
information about emotional arousal to stimuli.

o GSR Signal Example:

- Using GSR to measure emotional response:

o Valence: describes the extent to which an emotion is positive or negative

o Arousal: refers to its intensity, i.e., the strength of the associated emotional state
- GSR and machine learning:
o Using machine learning in classifying emotions:

o First preparatory step: collecting data

o Second running step: classifying signals
 Midterm and Final Questions

Design Patterns

1. List four types of GUI Design Patterns and name and describe one pattern from each
category.
Solution
- Categories include: Input, Navigation, Searching, Data, Social, Shopping, Interactions,
etc....
- Answers from the two specified websites in lecture 2: http://uipatterns.com/patterns and
http://www.welie.com/patterns/ are acceptable.

Experiment Design

1. The bezel is the black glass area usually around the rim of the
cell phone screen. Several companies have added touch sensing
to this area. Pages 12 and 13 contain an excerpt from a research
paper describing an experiment on using cell phone bezel as an
input surface.

a) What is/are the independent variable(s)? List the levels in each independent variable.
Solution
- One independent variable: menu layouts, with 2 levels: L8x4 and L4x8

b) What is/are the dependent variables?

Solution
- Two dependent variables: accuracy and errors

c) What is the hypothesis?

Solution
- Menu layout L8x4 is better than L4x8 in terms of accuracy and error performed.

d) Which statistical test was used? Justify your answer.

Solution
- Statistical test: t-test
- Justification: we have 1 independent variable and only 2 levels in that and the research
question was X > Y.

e) Did the experiment show significance? Label on the text where the significance
results are being presented.
Solution
- Yes. See image in next page.
2. Give an example when you would use logistical regression as a statistical test to analyse
an experiment data. Do not try to copy from the lecture slides when to use the test.
Instead come up with a simple experiment description whose hypothesis, independent and
dependent variables require you to use the test.

a) Experiment description
Sample Solution
An experiment to investigate the acidity of coffee on user palatability of espresso
drinks. Each participant drinks several 6 shots of espresso, each made of a
different coffee type with a different acidity. After each drink, the participant fills
in a questionnaire about palatability.

b) Hypothesis
Sample Solution
The increase in acidity of coffee is related to the decrease in palatability of espresso.

c) independent variable(s)
Sample Solution acidity of coffee

d) Dependent variable(s)
Sample Solution answers to palatability questionnaire

3. The following is a paragraph describing a research paper results. An experiment was

conducted on expert Buddhist monks to study the changes in their brain using EEG. Read
the abstract below and answer the following questions to the best of your knowledge from
the abstract. If in your opinion, the abstract does not have enough information, write
CANNOT TELL as an answer.

Practitioners understand ‘‘meditation,’’ or mental training, to be a process of

familiarization with one’s own mental life leading to long-lasting changes in cognition
and emotion. Little is known about this process and its impact on the brain. Here we find
that long-term Buddhist practitioners self-induce sustained electroencephalographic
(EEG) high-amplitude gamma-band oscillations and phase-synchrony during meditation.
These electroencephalogram patterns differ from those of controls, in particular over
lateral frontoparietal electrodes. In addition, the ratio of gamma-band activity (25–42 Hz)
to slow oscillatory activity (4–13 Hz) is initially higher in the resting baseline before
meditation for the practitioners than the controls over medial frontoparietal electrodes.
This difference increases sharply during meditation over most of the scalp electrodes and
remains higher than the initial baseline in the post-meditation baseline. These data
suggest that mental training involves temporal integrative mechanisms and may induce
short term and long-term neural changes.

a) What is the null hypothesis of the reported experiment?

Solution: Null Hypothesis: There is no difference in EEG recording of Buddhist
practitioners from that of non-practitioners.

b) What is/are the independent variable(s)? And how many levels each had?
Solution: from the abstract, there is one independent variable user-type with 2 levels
practitioners and control.
 c) What is the dependent variable?
Solution: from the abstract, two types of dependent variables were evaluated: EEG power
and phase-synchrony

d) What’s the experiment design (within or between subjects)?

Solution: between subjects

e) Would you expect this experiment to have been conducted on a large number of
participants or a small one?
Solution: a small number of participants since the effect size is large

4. A company invented two new mouse designs as shown below. Your task is to design
an experiment to find which is more efficient to use.

a) Describe a trial in your experiment.

Solution:
The user task in each trial is to select an object by moving the mouse to that object
and clicking on it. Each trail will have the object location and the mouse cursor
starting location in a different place to cover all movement directions and locations
on screen.

b) What is your hypothesis? And what is the null hypothesis?

Solution:
Hypothesis: mouse in left picture is going to be faster than one in right picture.
Null hypothesis: the two mice types will yield similar performance.

c) Name and describe the independent and the dependent variables?

Solution:
Independent variable: mouse type (2 levels: mouse 1, mouse 2)
Dependent variable: response time

d) Which statistical test would be used? Justify your answer.

Solution:
T-test because there is only one independent variable and it has two levels only.

5. Design an experiment to find which of the following tasks can be done faster by humans:
Time for a user’s eyeball to move from focusing on one word to the next word.
Time to tap a key.
Time to decide which key to tap.
 a) [15 marks] Describe your experiment in detail. Identify your variables, hypothesis, task
or tasks, trial counts, block counts, and experiment design.
Task(s) description:
Trial description:
Hypothesis:
Trials count:
Block count:
Experiment design:
Marking:
• 2 marks for DV
• 3 marks for IVs
• 2 marks for the hypotheses
• 2 marks for experiment design
• 2 marks for trials/block count
• 4 marks for the task/trial description

b) [5 marks] Identify the statistical test you are going to use to analyse the data and
explain why did you chose that test.
Marking:
• Based on student’s assumptions in part (i)
• Student won’t be able to earn the grade in case of choosing wrong/inappropriate
statistical test

6. (a) Suppose that we are trying to determine if using on-line course evaluation forms is
faster for students than using paper and pencil forms, and we plan to conduct an
experiment in which students are recruited as participants to fill out two identical course
evaluation forms, one on-line and one paper base. We will measure the time required to
complete each type of form.

i. is this design between subjects or within subjects?

Answer:
within subjects

ii. Describe a single trial in this experiment?

Answer:
Participant filling in an evaluation form

iii. For accurate results, we are going to repeat each trial 3 times and take the
average. Would the same form be administrated or a different form in each of the 3
times? Justify your answer.
Answer:
If we give the same form 3 times, the second time will be filled faster by
the participant since she learnt the answer, the third time will be even
faster. That will create a learning bias in the results. We are not
investigating how fast a participant can fill a form. If we want to
administer the form 3 times, we should create 3 different forms with the
same topics covered but the questions stated slightly differently.

iv. List independent variable(s).

Answer:
Form type: online and paper.

v. List dependent variable(s).

Answer:
Time to fill a form.

vi. What is the null hypothesis?

Answer:
Online form filling and paper form filling will take the same time.
vii. Which statistical analysis technique would you use to analyse the
data? Justify your answer.
Answer:
Paired t-test, the research question here is: is X > Y. The dependent
variable is quantitative. We only have two levels in the single independent
variable. Thus, the test is a t-test. The question statement mentions that
each participant will fill the form twice, so it is within subjects’ design,
thus, it is a paired t-test.
Note: If the answer given by the student includes an assumption on the number
of participants, his answer should be marked accordingly.

(b) Which statistical technique to use while analysing the data in each of the following
experiments;

i. an experiment to investigate the impact of drinking coffee on user’s

performance while playing computer games. The performance is measured by how fast a
user reaches a known level.
Answer: regression
Note: the research question here is:is X causing Y. the independent variable (amount of
coffee) is quantitative, the dependent variable (time to reach to
a specific level) is also quantitative. Thus, the statistical test is linear
regression. We will accept just regression as an answer.

ii. an experiment to find which is the fastest mouse to use from among 4
different mice designs.
Answer: ANOVA or repeated measures ANOVA.
Note: the research question here is: is X > Y. The dependent variable (speed of
use) is quantitative. Thus, the test is ANOVA. If the experiment design is
within subjects, it is going to be repeated measures ANOVA.
iii. an experiment to investigate if gender (male or female) and marital status
(married, unmarried, or divorced) is associated with the number of times per week a user
logins in to facebook.
Answer: ANOVA
Note: the research question here is: is X related to Y. The independent variables
(gender & marital status) are categorical. The dependent variable (number
of logins) is quantitative. Thus the test is either a t-test (2 outcomes) or
ANOVA (3+ outcomes). If we were testing just gender, it would have
been t-test - to compare the logins count of females to males. But, we also
 have marital status. Thus it is ANOVA.

Prototyping

1. For each of the following projects, mention the best prototyping technique. Justify your
answer.

a) An interface for a drive sharing (uber-like) cell phone app.

Solution
- Prototyping technique: paper prototype.
- Justification: paper prototype is the simplest and fastest to build. There is nothing
requiring you to invest additional time and money in a more sophisticated technique.
Your target user is basically everyone who uses a cell phone. Using a paper prototype will
suffice to evaluate the interface by inviting representative user(s) and ask them to perform
the tasks at focus.

b) An interface for website for a local pharmacy.

Solution
- Prototyping technique: software prototype.
- Justification: Your target user is a pharmacist. That’s a not a general user performing a
typical task. Pharmacists have their own lingua, terms, procedures, and constraints. You
would want to show them the software (aka the interface) working to be able to get
accurate feedback from them about the usability of the interface.

c) An interface for a device to be used by divers to help them navigate while night diving.
Solution
- Prototyping technique: wizard of oz
- Justification: what you want here is to show the interaction in context. Whenever, the
usage context is special and atypical, you want to demo the interface/interaction in the
real usage environment to uncover any hindering constraints or missing features. Unless
you want to spend lots of money to build it for real and test the actual thing in the actual
environment, your second-best alternative is to fake the whole experience/interaction
using wizard of oz.

Information Architecture

1. The following screen capture is from pinterest.com a

social platform for collecting, showing and sharing
ideas through pictures. The interface utilizes organic
information architecture. Once the user login,
pictures from different users and covering various
un-related topics are displayed in a grid. The user
can click on an image to learn more about it, and
while doing that will also see at the bottom of the
 page further related and un-related images. How would you change the design of pinterest
to hierarchal information architecture? You can answer by drawing or otherwise.

Solution
- When the user logins, he should be presented with high-level categories to choose from,
next, he is presented with more specific categories underneath the one he selected in first
step and this continues on…. Ultimately, user is presented with only those images that are
under the very specific sub-category she is currently in.

Interaction Styles

1. Tele-operation, also known as remote control, has many applications, from flying
unmanned military aircraft to performing surgery remotely. How is teleoperation similar
to direct manipulation? How is it different?
Solution
1. Similarities both of them apply actions on the object of interest
2. Difference direct manipulation applies actions directly on the object but
Teleoperation makes proxies for the actions to be applied on the object of interest

2. a) List and briefly describe the 9 interaction styles.

Solution:
- Conversational: issue commands to the system in the system language
- Direction Manipulation: hold an object typically using a proxy and directly doing the
action with the object
- Gesture-based Interaction: perform an abstract movement which when detected by the
system initiates a pre-determined functionality.
- Multi-model Interaction: using more than one channel modality, for example,
using speech and pointing with finger
- Virtual reality Interaction: displaying 3D output through googles to each eye separately
which creates an elusive 3D experience.
- Mixed and Augmented Reality Interaction: overlaying virtual information on physical
objects
- Emotional Agents: the interfaces become a talking virtual avatar which communicates
using human language
- Physiological Interaction: using biological markers such as heart beat brain signal or the
like to take input from user and sometimes receive output as well.
- Human-Robot Interaction: the interface is a talking robot with electromechanical
capabilities which interact in a human like way with
users.

b) Pick one application and discuss how would you build an interface
using each of the interaction styles. You can draw a sketch to illustrate your
answer. Make sure to also describe how is each interactions style is supported in the
interface. Note: it has to be the same application that you use through out to answer this
question.
Marking:
 An application with 1 or 2 functionalities at most must be clearly identified. For each
interaction style, the student must describe how to utilize the interaction to perform 1 of
those 2 functionalities. Efficiency and effectiveness are not important.
What is important is that the student can demonstrate a correct understanding of the
interaction style and an ability to utilize it.
- Ignoring an interaction style is deducted one mark
- Wrong utilization of an interaction style is deducted one mark

3. Try to match each image below showing a user in usage context (i.e. the user will be
using some software while doing what is shown) with the least appropriate interaction
style. You can draw a line to connect the interaction-style/user pair. Each interaction style
should be connected only once. If there is no in-appropriate interaction style for a context
-- do not connect it.
Interaction Style
Direction manipulation, Gesture-based, Multi-modal, Virtual reality, Mixed and
augmented reality, Physiological, Tangible interaction
Solution
Car assembly + virtual reality
Cycling + tangible/none
Instructor + none
Scuba diving + direct manipulation/none

4. Identify the best interaction style for each of the following scenarios;

a) A system for Astronauts in a space shuttle to check email;

Solution:
- It is clear from the picture that one astronaut hand would be busy trying to
stay in place, while the other hand might be used (note the chess board) -
this should have been a hint to you that using one hand is possible. With
one hand, an astronaut can make gestures to perform email related
operations, or he can touch a screen to do that. However, it is very
challenging to type in space, so we will have to resort to voice dictation.
Thus, it is a multimodal interaction.

b) Tennis player training using a ball throwing electro-mechanical

machine and trying to control the machine, while standing in the other side of the
court, to adjust the speed/angle of thrown balls;
Solution:
- Physiological Interaction is best. An EMG arm-mounted sensor could be
used to control the machine remotely.
- Gesture interaction is also possible but the machine is too far and will
require special camera on the machine side and enough processing
capability to do the image processing, so will give 2 marks to this answer.
- If we were building this as a commercial product, a remote control would
be the best alternative since it is the cheapest option but this is not what the
question asked and it is not one of the interaction styles.
 c) A system targeted to farmers to teach them agriculture related
information. The system must take into consideration that the farmer might be
illiterate.
Solution:
- Since the farmer might not be able to read/write, this directs us to use
icons and images in the interface. However, there is a limited set of icons
that such a farmer would have been already exposed to, so most likely we
will run out of icons and illustrations quickly and won’t be able to
communicate all the information we want to him. The alternative is to use an
emotional agent that talks to the farmer and use natural language
processing to try to understand what the farmer is saying.
- Note that if we were building this as a commercial product, we would have
been challenged by the limitations of NLP to understand human language,
but this is not what the question asked about.

5. (a) What is a conceptual model? Why is it important?

Answer:
description of an interface in terms of integrated ideas and concepts about what it should
do, behave and look like, as understood by the user. In other words, it is what the user
understand of the interface when she encounters it and start using it.

(b) What is multi-modal interaction?

Answer:
Using more than channel between the interface and the user. For example, typing and
issuing voice commands at the same time, or pointing to an object with hand and clicking
the mouse.

(d) [6 marks] In each of the following a good use or bad use of metaphors? Justify your
answer.

i. [3 marks] Playing piano on ipad. The application interface is a piano and the user
interacts with it the same way as with a physical piano.
Answer:
It is a good use of the metaphor. What is a better interface for an app playing a piano than
showing the piano? There is no learning required at all to use the program (which is the
motivation behind using a metaphor). A critical issue that determines the successful
utilization of a metaphor or not is whether the main functionality that a user (in the real
world) would do with this device is supported or not. In the real world, pressing each key
in the piano produces a different sound. That’s is supported by the app. Note that there
are some interaction concerns related to size of piano and whether it supports multi touch
or not. The metaphor use is good but the interaction is lacking behind.

i. [3 marks] Kia Photo Editor and Painting Desktop Program. The photo editing and
painting tools are in the shape of physical objects presented as icons around the image.
When the user selects an icon, the cursor is an enlarged version of that object.
Answer:
 It is a bad use of the metaphor. The designer is trying to import the canvas and drawing
toolset metaphor used by painters; a brush, a pencil, a gum, etc... This could have been a
good use of metaphor if those virtual objects behaved like their physical counterparts.
Again, the basic functionality needs to be supported. Considering the brush as an
example, the basic functionality of a brush is not just that it draws a colour, but that it can
be pressed to flatten the bristles to get different artistic rendering, it can be used to draw
thin lines by using it’s narrow edge, etc... The question states that it is a desktop app, so
the user is using the mouse. Hence, when the user selects an object (the brush above), it is
just a big cursor that looks like a brush but does not behave like one. The user cannot
twist the brush to create a specific artistic rendering effect, immerse the brush in painting
oil, etc… it is just a big icon. Due to hardware limitations, the developer is unable to
import into the software the basic functionality that is part of the metaphor. There is no
real benefit compared to using small meaningful icons like in traditional painting
programs (e.g. Adobe Photoshop). The designer wasted lots of screen real-estate without
decreasing the time needed to learn the interface. Though the interface looks nice and a
bit fancy, it is an incomplete use of the metaphor. That renders it as a bad metaphor use.

Research Frontiers

1. What is the research problem that each of the below works was trying to solve?

a) curvature dial

Solution: how to scroll on a large screen given that the scrollbar thumb is unreachable in
most screen area.

b) abracadabra
 Solution: how to interact with user interface elements on a smart swatch screen given that
the screen size is too small to accommodate a single finger touching.

2. a) Put-that-there is an HCI classic work that introduced the concept of multimodal

interaction. Describe the modalities utilized and presented in the work.

Solution
Gesture (pointing) + voice command

b) Which video image of the below 4 uses a different type of interaction than the other 3.
Mark the image.

Solution
Last image is not physiological interaction. It is gesture-based interaction.
 c) [4 marks] If you were given the following wall display by Jun Rekimoto, would you
use it as the walls of your washroom? Justify your answer.

Solution
Answer should be no! Justification is that the blocks, being a screen, are semi-transparent
at best which does not provide enough required privacy. Plus, if power goes off, screen
won’t help at all!

3. a) Airlink and flashtouch and are two interaction techniques for supporting collaboration
through cell phones.

i. [2 marks] How does Airlink support the transfer of a file from one cell phone to
another?
Solution:
Airlink record the microphone input and detects the different gestures from the
turbulence in the air waves as they hit the microphone. The direction of
movement is identified from the gesture/air direction. The transfer is carried from
originator to destination based on direction of movement. What is transferred is
what is currently visible on the screen.

ii. [2 marks] How does flashtouch support the transfer of a file from one cell phone to
another.
Solution:
A pen-like device is used as an intermediary storage. The file to be transferred is
beam as a set of light flashes emitting from the source (where the file is stored),
the pen-like device reads the light flashes and re-encode them to the file content.
To paste the file on another device, the pen-like device flashes the file content
which is read by the light sensor available behind most cell phone screens.

iii. [2 marks] which of the two techniques is more secure? (i.e. it is more difficult for an
intruder to capture the data being communicated).
 Solution:
flashtouch is more secure since an attacker must have access to the pen-like
device to get access to the content being transferred.

b) [6 marks] Bubble cursor was proposed as a more efficient alternative to point cursor as
it reduces travel distance to target, especially in crowded scenes, and hence decrease
acquisition time. The vacuum was proposed to solve the reachability problem in large
displays. How can we combine
both to work efficiently and effectively in a large display context with a crowded scene?
You can assume that the large screen is touch-sensitive and hence can be operated using a
pen. Explain the interaction and provide a simple drawing/sketch of how it will work.

Solution:
The user starts with the vacuum tool and in the target selection phase (after going
outside the vacuum circle, a bubble cursor is shown and the user navigates with
the bubble cursor among the items who brought from far away to select one from.

4. a) For each of the following works, list the interaction style (or styles) utilized.

Bumptop
Answer: direct manipulation and gesture-based

Boom Chamelon
Answer: direct manipulation
Note: this is not mixed/augmented reality because the chameleon does not overlay
information on physical objects. What was displayed on the screen is a virtual model of a
car and the direct interaction with the chameleon enabled zooming in/out of the model.

Digital Desk
Answer:direct manipulation, mixed/augmented reality, and gesture-based

I/O Brush
Answer:direct manipulation and mixed/augmented reality.

b) Briefly describe two research works that were attempting to provide a usable
interface control for large displays. Mention the work name, what specific problem it was
trying to solve, and how did it solve it.
Answer:
1) Vacum. Attempts to solve the problem of accessing distant objects on a large screen. A
 circular widget control with a radiating beam whose angle is modifiable – once activated
proxies of the windows in the scope of the beam are displayed close to the control for
selection.
2) Vision Wand. Attempts to solve the problem of menu selection on a large display
without
touching the display. A passive stick with color markers on both ends. A camera tracks
the two colored points and displays menus as the user is rotating the stick enabling
selection of menu items.

c) Several works used a lasso gesture leading to a menu activation and subsequently
selection. Sketch a lasso selection gesture with the activated menu.
Answer: the below screen shots from bumptop and Scriboli works show a lasso and the
menu that pops out when the gesture is detected. Once the user makes a lasso, the menu
items are displayed in a radial fashion around the user pen for the user to select one of
the items.

5. For each of the below research works, describe

1) the research problem being addressed by the researcher
2) the solution proposed by the researcher – including description of the software,
hardware and interaction
Marking:
• 2.5 marks for each
• Underlined should be visible in student answer.
a) [5 marks]

Solution
1. Problem finding an interaction technique to utilize the usage of handheld projectors
and track users’ actions when operating the handheld projector
2. Solution:
a. Video has presented an interaction framework for the handheld projectors by dealing
with multiple virtual info spaces embedded in users’ physical environment
b. Using handled projector & a pen tracked by a vicon real-time 3D tracking system

b) [5 marks]
 Solution
1. Problem _ visualization and analysis of time series data.
2. Solution _ Kronominer combined multi-foci navigation techniques with analytical tools
to support the visual exploration of multiple time series datasets.

c) [5 marks]

Solution
1. Problem _ performing selection of a character by using the brain signals
2. Solution _ Using P300 (ERP), by highlighting the letters horizontally and vertically
quickly and wait for a P300 indicating the user wanted that letter.

6. a) For each of the below research works, describe

1) the interface design (hardware and software)
2) the specific interaction style used
3) the interaction technique (how the user uses the system)
4) the advantage of the interaction technique

i. [5 marks] Digital tape

Solution:
1) the interface design: hardware: a flexible tape with embedded sensors
which detects bending inside software: a 3D modeling program which
receives input from the tape and uses the tape movement to draw curves.
2) the specific interaction style used: direct manipulation + gesture
interaction
3) the interaction technique (how the user uses the system) : the user
manipulated the tape by bending, twisting it to draw and using it as marker
to make gestures
4) the advantage of the interaction technique: does not require any learning.
If you can use a flexible tape, then you can use the program to draw curves.
ii. Muscle interface
Solution:
1) the interface design: hardware: set of EMG sensors mounted on user arm
to detect muscle movement. Software: a program that performs signal
processing on EMG data and identify gesture made by the user and control
another hardware accordingly.
2) the specific interaction style used: physiological interaction
3) the interaction technique (how the user uses the system): the user perform
gestures using his hands or arms to control his ipod or his car
4) the advantage of the interaction technique: does not require interrupting
the task the user is performing , allows for hands-free interaction, and does
not require carrying dedicated devices.

b) For each of the below research works, describe

1) What problem the researchers were trying to solve?
2) How did they solve it? Relate your answer to the HCI laws discussed in
class.

i. Bubble cursor
Solution:
1) How to perform selection fast in a crowded space of objects.
2) The cursor becomes a bubble (circle) which expands and shrinks (i.e.
change radius) to include nearest object to it based on direction of
movement. If an object is selected, the visual effect used is like a bubble
expanding from the circle to encompass the object.
3) Fitt’s Law: this interaction technique reduces the distance required to
travel to an object by having the cursor expanding.

ii. Throw and Catch

Solution:
1) How to perform copy/cut without dragging mouse.
2) The user throws the desired object using a flick gesture. Next, the user
clicks to paste it.
3) Steering Law: this interaction technique eliminates the need to steer
through a tunnel to reach a destination.

iii. Vacum
Solution:
1) How to perform selection fast on distant objects in a large display.
2) Once the user touches the display, a pie menu appears at the location of
touch. As the user moves in a specific direction, a miniature screenshot of all
the objects at or near by that direction get displayed close to the pie menu.
Next, the user selects one of them. If the user want to have other near by
objects displayed close to the pie menu he manipulate the focus
3) Fitt’s Law: this interaction technique reduces the distance required to travel
 to an object by bringing the object closer to the starting point of movement.

Task Analysis

1. Check each of the below images against the four direct manipulation ques. Explain how
the object design satisfies or violates one (or more) of the ques.

a) stove
Solution: satisfies natural mapping

b) Pencil
Solution: satisfies affordance and feedback

c) Wall clock
Solution: violates natural mapping

d) iMac
Solution: satisfies affordance
(bonus question since many students did not understand the image)

HCI Design

1. In this question, you are going to design a system for connecting an expatriate member of
a family with his/her family back home. An expatriate is someone who lives and works
for a while in another country (for example, from Egypt and lives/works in Saudi Arabia).
Expatriates often would like to know everything happening at his/her home and provide
input on family matters. You can use any interaction style. You can use any hardware.
You can augment any home furniture with hardware. The goal is to create a shared living
environment as if the expatriate member is not really far away. He/she might be far away
physically but your system will bridge the physical distance. On the next page, there are
two apartment plans. Assume that the one in the top is for the expatriate. You can add
labels or modify the plan any way you like. Your answer will be marked based on
creativity and innovation.
Marking:
• Using cameras ,microphones, and loud speakers to transmit actions to the
expatriate without augmenting anything 10 marks
• Using cameras ,microphones, and loud speakers to transmit actions to the
expatriate plus using augmented reality 12 marks
• Using a robot/ emotional agents / holograms plus any of the above 14 Marks

2. Design a system to be used by a GUC vision-challenged (aka blind) student. The system
should enable the student to do the following:
1. navigate in campus
 2. retrieve today's schedule
3. learn about time, date and location of quizzes, midterms and exams.
4. record lectures and take notes
5. communicate with family members
6. assist in boarding the GUC bus
7. order beverages in pronto (assume pronto has a system the student system can connect
to).
The system should be light weight and portable with minimum battery requirement and
can be mounted on student jacket (wearable type of interface).

a) What is the minimum set of basic input tasks your system must support? Identify
and justify each.
Solution & marking
- [+2 marks] Input tasks to record notes, communicate with family, etc...
- [+2 marks] Selection tasks to identify the course of interest when the students’ needs to
learn about a course specific detail (quiz, lecture time, etc...)
- [+2 marks] Trigger task to start and stop an action

b) What is the interaction style of your system?

Solution
- Gesture based + multimodal

c) Specify the hardware and software design of your system. You can provide an
illustration of your system and make sure to label the components.
Marking
- This will be judged based on completeness of hardware and software description.

3. a) The popular linear cascading menu (shown below) has the disadvantage that it takes
more time to reach to target menu item at the bottom of the menu compared to one at the
top of the menu. Design an alternative user interface control that would replace linear
cascading menus and that utilizes 1) user spatial memory and 2) your knowledge of fitts
law to achieve target acquisition faster for all menu items, and 3) multimodal interaction.
You can draw the user interface control as well as describe and label it.
Solution
- To satisfy requirement one, directions (at a minimum top, left, right, bottom) must be
utilized.
- To satisfy requirement two, each item must be at the same distance from cursor when
the menu opens, which means it has two be a variation of pie menus.
- To satisfy requirement three, another modality should be used, for example, voice or
pointing with hand.
Here is an example menu layout to achieve requirement 1 and 2. To achieve requirement
3, the selection of a menu item will be done using voice.

b) Suppose you have been hired by a car company to design an interface for a self-driving
car computer system. The typical driving controls do not exist anymore! Sensors and
cameras are placed in the ceiling of the car cabinet and an accurate tracking system exists
which detects the user hand movements and gestures. Passengers will be sitting facing
each other which creates opportunities for collaboration and interaction. Your task is to
design an interface using gesture-based interaction style to issue commands to the car and
to interact with its computer system.

i. List 5 relevant functionalities a typical user will be interested to do in a self-driving

car.
Solution
1. Start/stop the car
2. Specify/amend Destination
3. Learn expected time to arrival (ETA)
4. Run the diagnostic program on car software and hardware
5. Collaborate with fellow passengers in some activity
 ii. Identify any additional computer hardware you will be want to add.
Solution
- Screen or table top with screen or projector.

ii. Identify the input task or tasks associated with each of the 5 functionalities. Draw an
illustration of a screen (an interface mock-up) for each of the 5 functionalities showing
where the input task is required. Note: you need to refer to the basic input tasks discussed
in lecture.
#1: Solution [Start/stop the car]
To start/stop the car, the user will point to the screen, presumably a button that is placed
in an always visible area and by performing a gesture stop or start the car. Hence, this a
triggering task.
#2: Solution [Specify/amend Destination]
To specify a destination, the user needs to either input an address via text or select from
map. The first one is a text input task. The second is a navigation task.
#3: Solution [ Learn expected time to arrival (ETA)]
This is also a trigger task.
#4: Solution [Run the diagnostic program on car software and hardware]
Another trigger task.
#5: Solution [Collaborate with fellow passengers in some activity]
This is an open question.

iii. [5 marks] Describe in text or by simple drawing how each of the 5 functionalities is
performed using gesture-based interaction. Note: you need to take into consideration the
gesture design guidelines discussed in class.
Gesture A for #1: Solution [Start/stop the car]
Gesture B for #2: Solution [Learn expected time to arrival (ETA)]
Gesture C for #3: Solution [Learn expected time to arrival (ETA)]
Gesture D for #4: Solution [Run the diagnostic program on car software and hardware]
Gesture E for #5: Solution [Collaborate with fellow passengers in some activity]

4. You have been commissioned to design an interface system for a solider in an army’s
Special Forces. A processing power (aka computer board) will be integrated in the solider
suit. The constraints on interface design are:
- The soldier’s hands will be busy all the time carrying weapons.
- The solider must operates in maximum silence.
- The solider must make minimal movement to avoid revealing location.
- The system should be light and usable in various field types.

a) What is the best interaction style or styles for such a system? (you can but do not have
to use more than one interaction style). Justify your answer.
Solution:
Augmented and mixed reality. The constraints greatly limit the kind of interface we can
build. Since he cannot use his hand, then performing gestures with hands or otherwise is
not possible. Since he must operate in maximum silence, then using voice or sound
output is also unacceptable. Since the system should be light, then having any kind of
handheld or mounted screen is also unacceptable. The only solution would be to use a
smart glass like google glass with images displayed on transparent glass. To interact, the
 solider would use his eyes to derive the interaction. Placing a small camera to track the
soldier’s eyes are feasible.

b) Design interaction techniques that follows your selected interaction style in a) for
supporting the following HCI basic tasks. Describe in detail how each of tasks will be
accomplished using your interface. You can support your answer with illustrations
(simple clear drawing suffices).

i. input task: input a cursor position

Solution: the solider would move his eye which is being tracked that causes a cursor to
move accordingly

ii selection task: one-a-time variable-size set selection (i.e., having a number of

items/targets and the goal is a to select a subset of them in any particular order).
Solution: the solider would fixate his eye on the item to be selected for a short duration
which cause the item to be selected?

iii. trigger task

Solution: the solider would close and open one eye (eye flickr) to simulate pressing a
mouse button or enter key.

iv. navigation task (no zooming functionality required).

Solution: the solider would close and open his two eyes in a known pattern along with
eye movement to derive navigation.

UX

1. The BBC (British Broadcasting Corporation) has an world-wide reputation as a first-rate TV and
Radio broadcasting organization. In December 2007, it launched a new online video-on-demand
service, which it called BBC iPlayer. This service allowed UK audiences to watch and listen to BBC
programs online for up to seven days after their initial broadcast date. Clearly, this service had to
appeal to a very wide range of users. The BBC iPlayer project began in 2004, a time of intense
technological change and when it was not at all clear which methods would be best used to
deliver this video-on-demand service (for example, conventional computers with Internet
browsers, top-of-TV boxes, cable service, etc.). By mid-2007, and having cost double-digit
millions, the iPlayer wasn’t ready. At this point, the head of BBC’s Head of Future Media and
Technology, recruited a specialist from South Africa, named Anthony Rose to lead the troubled
iPlayer team. Rose adopted a simple philosophy: “It had to appeal to Mrs Smith, aged 65, who
wants to watch Eastenders (a famous, long running TV drama series), as well as the Twitterati
(people who use applications like Twitter regularly)”. To this end, he was careful to make sure
the development team paid particular attention to making the service easy to use. By December
2008, a year after the iPlayer was launched on schedule, it was clear that Rose and his team had
succeeded. The new service was easy to use that it attracted almost 10% of the UK online traffic,
putting it in third place after Google and Micorosft. With a million users everyday accessing 1.5
 million TV and Radio shows, it was clear that the British public found the new service extremely
easy to use, leading one commentator to suggest that iPlayer had redefined TV and how we use
it.

a) [2 marks] What is the user research technique that Anthony Rose employed in the iPlayer case
above to inspire his team to focus on the users’ interaction needs?
Solution: Anthony Rose used the Persona technique

b) [3 marks] Write down three benefits from using the user research technique you have
identified above in a).
Solution:
The use of Personas gives the following benefits (only three are required), or similar
ones:
1. Psychologically more “real” for the designers.
2. Each persona is concrete and specific to focus the design.
3. Integrates information from three types of profiles.
4. Distinguishes between developer desires and user needs.
5. Focuses design efforts on users: “Make Sally love our system!”
6. Facilitates communication within the design/ implementation team.
7. A small set of personas helps team conceptually manage a large list of requirements

GOMS Analysis

1. Apply GOMS analysis on the below dialog box which converts between Celsius and Fahrenheit to
find the time it takes to perform the task.

Solution
2. Perform a complete GOMS analysis on the task of replacing a word with another in a document
editor (e.g. winword). Following is a screen capture of the interaction to be analysed.
First, user clicks on Find option top right
Next, a pop dialog appears with Find tab shown, user clicks on Replace to get the replace tab
Next, user enters word to search for and the word to replace
Solution:
Steps:
Reach for Mouse
Move pointer to Find icon
Click on Find icon
Move pointer to replace button
Click on replace tab
Home on Keyboard
Specify word to be replaced
Reach for mouse
Point to field
Click on field
Home on Keyboard
Type new word
Reach for mouse
Move pointer to replace
Click on replace
Note: we will accept different usage of keyboard and mouse

3. a) The Stroop experiment has been discussed in the cognition lecture as a proof of the
human cognitive ability to work in divided attention mode.

i. What is/are the independent variable(s) in the Stroop experiment? and what
are the levels in each independent variable?
Solution & marking
- [+1 mark] 1 independent variable (its name is unimportant, often called in psych
literature: stroop condition).
- [+3 marks] Has 3 levels: congruent (word is name of a colour and it agrees with
colour it is displayed in), incongruent (word is a name of a colour that is not the one
the word id displayed in), neutral (word is not the name of a colour)

ii. [2 marks] What is/are the dependent variable(s)?

Solution & marking
- [+2 marks] 2 dependent variables: time it takes to say the colour of the word and
error (i.e., whether the participant answer is correct or incorrect)

iii. [2 marks] What is the hypothesis? And what is the null hypothesis?
Solution & marking
- [+1 mark] hypothesis: divided attention between colour and name of colour will
delay the user response in the incongruent level and make him do more errors
compared to congruent and neutral levels.
- [+1 mark] null hypothesis: performance of user in the 3 levels will be the same.

vi. [3 marks] Which statistical test would be used to analyse the data if the design was
within-subjects design? Justify your answer.
Solution & marking
- [+1 mark] repeated measures ANOVA
- [+2 mark] because we have 3 levels and it is within-subject and quantitative
Data

b) GOMS KLM was discussed in class as a model to predict the average user
performance while working on a standard Windows-based interface using keyboard and mouse.
The model proposes the following values for each action:
K – keystroke 0.28 sec
B - Press or release mouse button 0.1 sec
BB - click mouse button 0.2 sec
P - point with a mouse to a target 1.1sec
H - home hands to keyboard or mouse 0.4sec
M - mentally prepare to do an action (.6-1.35 sec, use1.2)
Suppose you are asked to produce a similar model with values for every meaningful operator for
cell phones (note that there is no keyboard or mouse used, so you have to come up with new
operators).

i. Describe what operators will you have in your model.

Solution & marking
- [+1 mark] P - point with finger to a target on screen
- [+1 mark] T - touch target on screen
- [+1 mark] PV – point with finger on volume control buttons
- [+1 mark] V – Press on volume control
- [+1 mark] PP – point with finger on power button
- [+1 mark] PO – Press on power button
Notes:
- Any 4 will do.

ii. Pick any one of the operators and describe in detail the design of an
experiment to get the average amount of time it takes the user to execute the operator. In
your answer, provide the following:
- What is the operator the experiment is on?
P - point with finger to a target on screen

- What is a trial in your experiment?

Candidate Solution
- user holding phone in hand, a blank screen, a target suddenly appears,
user task is to place finger on top of target and next he says a voice
command such as “done”. Note that we are not going to let the user touch
the target since that is another operator according to the GOMS way of
thinking!
 - What is/are the independent variable(s) and what are the levels in
each independent variable?
Candidate Solution
- screen will be divided to 4 quadrants, and times to move finger to each of
the 4 quadrants will be compared with each other.

- What is/are the dependent variable(s)?

Candidate Solution
- time to move the finger on the top of a target

- Which statistical test you would use? Justify your answer.

Candidate Solution
- repeated measures ANOVA if we within-subject design

Interface Design/Analysis
1. An elevator panel requires buttons for four floors (parking, main floor, second and third floor),
door open, door close, stop, and activate emergency intercom.
a) [6 marks] which gestalts can be used to propose a design that helps users to map their
intentions into actions? (Justify your answer)
Answer:
• Similarity: buttons with the same shape and color perform similar functions
• Proximity: buttons with a similar function are closer together than buttons with dissimilar
functions so that they form visual groups; floor navigation (selection) buttons, door control
buttons, and emergency control buttons
• Pragnanz: Symbol used for buttons (Abstraction of reality) to make the user realize the actions
of the buttons easier.

b) [9 marks] Using the principle(s) that you stated in (a), propose a design for these buttons.
Draw and label your design clearly.
Answer:
Sample design:

2. Check each of the below images against the four direct manipulation ques. Explain how the
object design satisfies or violates one (or more) of the ques
Heuristic/Subject Interface Evaluation + Flow Analysis
1. a) [5 marks] Assume you are asked to evaluate 3 new mouse designs. You want to find
the fastest mouse
to use. You decide to use Fits law in the evaluation. How would you find the intercept a ,
b for each of
the 3 devices.
Solution:
For each device separately, we run a study consisting of many trials, where in each trial
we measure the time (movement time MT) it takes to move from some starting point on
the screen to some designated target. We vary D and S (Width W). With each
combination of D and S, we get an index of Difficult (ID) value. Next, we plot ID against
MT. Find the line that goes through these plotted points. The intercept with time axis is a
and the slop of the line is b.
 b) [5 marks] In reporting the results of EEG studies, why is it important to mention both;
the ratio of each band to the total power and the 5 brain waves power?
Solution
- The ratio of each brain wave band to the total differ based on user state. For example,
between awake and sleep states, delta changes from between dominant in brain (during
sleep) to being marginal while awake. An increase of even 100% of a particular brain
band is only valuable if that brain band represents a significant percentage of the total
brain activity. But, if a brain band only represents a minute value of total brain activity,
even a doubling of its power is not scientifically interesting.

1. For each of the below tasks, state if the experience can induce flow or not. If your answer is NO
to any of the below, justify your answer using the components of flow as discussed in lecture. If
your answer is YES, then no need for justification.
a) [2.5 marks] Inspecting a painting in a museum
Solution
- No. Flow is an immersive experience which requires cognitive, emotional and
psychological participation from the user side. While someone might enjoy a painting
and keeps looking at it in a museum– it is a passive one-side experience which lacks
almost all components of flow.

b) [2.5 marks] Playing squash for the first time in your life.
Solution
- No. There is always a missing balance between challenge and skill level when one
plays a sport for the first time ever. So, flow cannot be experienced then.

c) [2.5 marks] Sitting on the beach

Solution
- No. similar to a) flow is an immersive experience which requires cognitive, emotional
and psychological participation from the user side. When someone sits on the beach for
a while, he relaxes – but not in flow.

d) [2.5 marks] Writing an email

Solution
- No. Writing an email is a short-time experience. There is no chance for getting in flow
when the experience last for few seconds or minutes.

2. Each of the below images shows a design that is complying with a specific heuristic. Write down
the name of that heuristic (only 1 heuristic answer per question)
a) [4 marks]

Solution
- Help users recognize, diagnose, and recover from errors
 b) [3 marks]

Solution
- Error Prevention

c) [3 marks]

Solution
- Visibility of System Status

3. By default the Android Twitter app shows users notifications about all sorts of things like if they
were mentioned in a tweet, if someone likes their tweet, if they get a new follower, etc... Some
users like these notifications but others find them annoying. Figure 1 on the following page
shows the sequence of screens necessary to disable notifications for “Mentions, replies, and
photo tags”. There are six screen captures labeled a) to f). Use Heuristic Evaluation with
Nielsen’s 10 Heuristics to identify five positive or negative aspects of this interaction sequence.
Solution:
Several answers are possible, the following is an example for each possible heuristic.
Visibility of system status Good: for check boxes with more than two options screen e shows
the name of the selected item below the setting name. This makes the system status visible.
Match between system and the real world Good: Screen e uses checkboxes that are similar to
buttons. It is easy for a person to realize that clicking here will change the state.
User control and freedom Good: All screens have a back button that allows a user to go forward
or back to change settings in whatever order they prefer.
Consistency and standards Issue: Screen f shows three options but they are not ordered from
most permissive to least permissive. This is confusing for people who may think that moving to
“from anyone” will decrease the number of notifications.
Error prevention Good: The visibility of system state helps prevent errors from occuring and the
clear indication of what can be clicked on and what cannot helps here as well.
Recognition rather than recall Good: The system does not force the user to recall anything, they
only need to recognize the setting that they need.
Flexibility and efficiency of use Issue: there are no real accelorators for this task. As people may
want to turn on or off notifications at set times this is potentially a problem.
Aesthetic and minimalist design Issue: Screens c-e all have a large number of options. They
really are not minimalistic and are instead a bit overwhelming for some users.
Help users recognize, diagnose, and recover from errors Issue: If the notification itself is viewed
as an “error” or at least as an unwanted system state then it is not obvious from screen a how to
go about changing the notifications. The answer is to click on the user’s icon, but that is not
clear.
Help and documentation Issue: Screen f has no clear description of “Tailored for you” and no
clear way to find out what that means.

b) [6 marks] Metaphor Usage

One of the most wide-spread interface metaphors on the internet is that of the “shopping cart.”
This metaphor is used on most if not all e-commerce sites and has become a recognizable
feature for anyone who has shopped online. Extending the shopping cart metaphor further is
the notion of “check out,” as at a brick and mortar retail store. The online shopping cart
metaphor relates to a realworld
shopping cart in that you (the shopper) can put an item into it that you intend to buy, and then
continue shopping. You are able to put multiple items into the shopping cart and purchase them
all at once. The “check out” metaphor is related to the real-world action of wheeling your
shopping cart to
the checkout stand and completing the purchasing process. Metaphors help users in their use of
a UI, but can also be problematical if the correspondence between the real world and the
computer metaphor is not always directly analogous to the real world (as in dragging a floppy
disk to the trash can to eject, rather than to erase/delete it). In what ways does the shopping
cart metaphor break down, in the sense of not being directly analogous to the real world?
Solution:
- Can’t just glance into online shopping cart and see what you have in it. Have to click “View my
cart”, click through pages, etc.
- Socially inappropriate to just abandon your shopping card in brick-and-mortar store and walk
away
- Can often “save” shopping carts online
- In real life, not all stores have shopping carts.
- In real life, can’t remove an item any time you want. Have to walk around and put item back.
- Finite capacity of real shopping carts
- Can abandon check-out process online, but socially inappropriate to let cashier scan items and
then walk-out in real life.
- In real life can give item you don’t want to purchase to cashier, but online all items checked out
at once instantaneously.
- Quantity of items is represented differently

c) [6 marks] Critique
A company has just designed a user interface that was an utter disaster. You have been brought
in as an HCI consultant to explain what they did wrong. For each of the below quotes from the
companies engineers, respond and explain what they should have done. Which heuristic did
they violate? Be specific.
 i. “We wanted to save on screen real estate so we used 9 point text throughout the user
interface. Well, now it turns out that all these Senior Citizens homes bought our software. They
seem to be having trouble reading the text”.
Solution: if user can’t change size _ lack of flexibility
Too much content in one page_ violation of Aesthetic and minimalist design
ii. “All of us felt that OK and Cancel buttons in the lower right hand corner were boring. So
instead, if you click at the top of the dialog box, it closes as if you did “OK,” and if you click at the
bottom, it closes as if you clicked “Cancel.” Labels just take up screen real estate.”
Solution: violates consistency
User won’t know how to deal with the interface _ violation of visibility
iii. “The users seem to be getting stuck on one screen even though the information they need to
answer questions was two screens back. Can’t they just remember things?”
Solution: increases rather than reduces short term memory load

4. Which Nelson’s heuristic(s) is being applied or violated in each of the following figures? (mention
whether its applied or violated along with the heuristic)
a) [2 marks] spreadsheet formula entry

Solution:
- User control and freedom: user is always free to choose whether to save, or cancel the
submitted function. (User is not trapped and can abort at anytime)
_ Comply
- System Visibility: Selected cells are marked with color and mapped into the function insertion
area (I always know the cells that contribute in forming the formula) _ Comply

b) [2 marks] dialog shown upon completion of file download

Solution:
User control and freedom: user is always free to choose whether to save, open, or cancel the
download task. (User is not trapped and can abort at anytime)

c) [2 marks] page not found webpage

 Solution:
Error reporting, diagnosis & recovery: Clear description of error & proposing solutions (user is
not left alone) _ Comply

d) [2 marks] tooltip that pop ups when user hover over

Solution:
Help and documentations: Input field details are described precisely (short and leads directly to
the point)

5. a) [12 marks] Neilsen’s Heuristics

i. [6 marks] One of Nielsen heuristics is H3: User control and freedom. An associated
rule to comply with this heuristic is that users should not be trapped by the interface!
Trapping a user can be in action, after action, or during execution. Provide an example of
an interface that has the 3 together: trapping in, after and during an action. You can
provide an illustration of an interface as part of your answer but make sure to include
textual description. Note: it is not necessary that you have seen such an interface before,
you can draw or describe a custom one that has the three traps.
Candidate Solution & marking
- One possible solution is an online wizard/form which asks the user to fill it in,
without giving the user the ability to cancel (that’s trapping in action, + 2 marks),
and when the user finishes filling in the form, he presses ok or finish. Next, he is
trapped while uploading the form data to the server (trapping after action, + 2
marks). Next, a process starts as a result of the data arriving successfully to the
server, and user has to wait not being able to cancel the running transaction while
it is running on the server (trapping during execution, + 2 marks).
ii. [6 marks] Another rule is H4: Consistency and Standards. Provide an example of a
user interface control (a widget such as a menu of your own invention) that violates both
internal and external consistency at the same time.
Solution & marking
- One possible solution is a triangle menu design which violates external
consistency (+ 3 marks) since there is no desktop or cell phone platform with
such menu design.
- Inside this triangle menu, each item is selected using an associated check box
but also the ok button and cancel buttons are replaced with check-boxes + label.
Thus, creating an internal consistency violation (+ 3 marks).

b) [10 marks] Flow Theory

Under what conditions would a car driver experience flow? Consider the 9 flow components,
and explain how each relates to driving and whether it is possible to experience that while
driving or not? and for what type of driver? In your answer, consider the 2 extreme cases:
proficient in driving vs. new to driving (for every component). Hint: the context (place, nature
of driving, purpose of driving, etc…) is important to answering this question correctly. So,
mention the context and you can refer to the same context in more than one component
answer.
Solution & marking
- Full mark should be given to those describing car racing as the context in which all the
9 flow components will be experienced.
- Considering the 9 flow components, the below table documents the absence or presence
for each of the 9 components. Only in car racing the challenge-skill balance and loss of
self conscious will be achieved. Below table should be used in marking student
answers.
6. Every one of us experienced flow in some way or another. In this question, you are going to
perform self-introspection and describe one of the flow experiences you had in terms of the flow
components.
Pick any 5 flow components and provide a detailed description how you experienced those.
What is the experience you are describing?
Solution:
examples; watching a movie in the cinema, or playing a sport
The 5 flow components are:
Solution:
if we use watching a movie in the cinema
Concentration on Task at Hand: you watch movie with concentration
Loss of Self-Consciousness: you stop being aware of yourself (one reason why
they have the cinema hall dark actually so you get into the movie flow... not your
personal issues or worries)
Transformation of Time: you are generally not aware of how much time
you have been watching the movie
Autotelic Experience: you sit and watch the movie, no physical reward for you
(infact you might have just paid a decent amount of money to get into the
cinema).
Action-Awareness Merging: deep involvement that makes actions seem
automatic, if you are eating during the movie, you do not notice your eating
practice

7. Describe ten usability problems in the online UI in the following page. Label each violation with
 a number on the figure and make a list of violations. For each problem, you must discuss which
guideline is violated and why. You should also suggest a solution for each of these problems.
Use Nielsen’s second set of heuristics below to label each violation. Remember to list each
violation separately. If the same violation occurs in multiple places, it is still one violation, but
the same interface element may cause several violations.

Solution

8. Which UX evaluation technique to use in each of the following scenarios? Write the name of the
technique and justify why it is the best option.
a) [2 marks] Comparing the following two alternatives for an online questionnaire
Solution
- Technique: GOMS is best to compare the interfaces o A/B testing is also an acceptable answer –
although not best option
- Justification: the 2 interfaces are identical except for the user interface controls they use.
Heuristic analysis is not a useful tool here because it is a static questionnaire/interface. In fact,
we could ask the same question (which of the two is better) even if the questionnaires were
printed on paper. A/B testing could be used if we are testing the hypothesis that a radio button
interface is more enticing to the user to fill-in the answer compared to a drop down.
b) [2 marks] Determining the usefulness of using vibration as a notification mechanism in cell
phones
Solution
- Technique: Questionnaire
- Justification: A questionnaire is the only viable alternative here since the questions will be
tailored to various aspects specific to vibration. We cannot apply heuristic analysis since
vibration is perceived but not seen. We cannot use GOMS because it is an output technique not
input (so the user is not moving the mouse or typing etc…). We cannot use A/B testing because
we do not have alternatives – the question is about usefulness.

c) [2 marks] Comparing different fonts, colors and message options for a link to download a
free copy of a software program

Solution
- Technique: Multivarite testing.
- Justification: We have here 3 independent variables: font, color, and message. Each has several
levels. Since we have more than 2 levels, we can not use A/B testing. We cannot use heuristic
analysis because it can only tell us the problems of each of the 12 combinations separately but
will not tell us which is best.
 d) [2 marks] Finding problems with the current Google search interface

Solution
- Technique: Heuristic Analysis
- Justification: It is a standard interface and a single instance of it. The experience is transient, so
can’t use flow. Only Heuristic Analysis could be used here. GOMS is not useful since it will us on
average how many seconds will it take the user to fill the form – so what?

e) [2 marks] Comparing Mercedes and Mazda dashboards

Solution
- Technique: Flow Analysis
- Justification: Driving is all about flow. We get immersed in the driving experience. All the
components of flow are actually manifested during a trip with a car (perhaps not in Cairo ).
So, flow analysis will reveal which dashboard engages the user more in the experience.

Questionnaires
1. Suppose you administrated the following usability questionnaire to evaluate user satisfaction
with 2 specific software: software A and software B. Each participant in your study performed an
exercise using each of the software. The two exercises were similar but not identical. After each
exercise, the participant was asked to fill in the questionnaire. The task name and the software
names were replaced by xxx below.
How would you analyze the data collected from this questionnaire to proof the following two
hypothesis: software A is better than software B in performing task x. expert users finds
software A is better than software B in performing task x.
Solution
- A key to start answering this question is to realize that user answers will be translated to fixed
numbers. For example, when translating a 5-point likert scale as above, strongly agree could be
assigned 2, agree 1, neutral 0, disagree -1, strong disagree is -2. Since you will be picking a
statistical test for categorical data, those numbers are treated in the stats a symbols not actual
values on a scale…!
- For hypothesis: software A is better than software B in performing task x.
 o Part D focuses on the difference between the two software, so we use that to check if A>B.
o To determine the statistical test type, we need to determine
Type of data: since a Likert scale answers can be ordered, the data collected is ordinal.
Type of research question: A > B
Experiment design: since every participant tried both software, it is within subject
design
o Since we have 1 independent variable (software type) with 2 levels (A and B), we are going
to use Wilcoxon statistical test.
- For hypothesis: expert users finds software A is better than software B in performing task x.
o Part D focuses on the difference between the two software, while Part A focuses o,
difference between participants’ skill. We are going to classify participants to 3 groups:
expert, average and naïve based on their answers to part A.
o To determine the statistical test type, we need to determine
Type of data: part A answers are ordingal, and same is part D.
Type of research question: A > B
Experiment design: since every participant tried both software, it is within subject
design
o Since we have 2 independent variables; software type with 2 levels A and B, and user type
with 3 levels: expert, average and naïve, we are going to use Kruskal wallis statistical test.

Experiment Desgin
1. a) [11 marks] The Stroop experiment has been discussed in the cognition lecture as a proof of
the human cognitive ability to work in divided attention mode.
i. [4 marks] What is/are the independent variable(s) in the Stroop experiment? and what are the
levels in each independent variable?
Solution & marking
- [+1 mark] 1 independent variable (its name is unimportant, often called in psych literature:
stroop condition).
- [+3 marks] Has 3 levels: congruent (word is name of a color and it agrees with color it is
displayed in), incongruent( word is a name of a color that is not the one the word id displayed
in), neutral (word is not the name of a color)
ii. [2 marks] What is/are the dependent variable(s)?
Solution & marking
- [+2 marks] 2 dependent variables: time it takes to say the color of the word and error (i.e.
whether the participant answer is correct or incorrect)
iii. [2 marks] What is the hypothesis? And what is the null hypothesis?
Solution & marking
- [+1 mark] hypothesis: divided attention between color and name of color will delay the user
response in the incongruent level and make him do more errors compared to congruent and
neutral levels.
- [+1 mark] null hypothesis: performance of user in the 3 levels will be the same.
vi. [3 marks] Which statistical test would be used to analyze the data if the design was within-
subjects design? Justify your answer.
Solution & marking
- [+1 mark] repeated measures ANOVA
- [+2 mark] because we have 3 levels and it is within-subject and quantitative data
b) [14 marks] GOMS KLM was discussed in class as a model to predict the average user
performance while working on a standard Windows-based interface using keyboard and mouse.
The model proposes the following values for each action:
K – keystroke 0.28 sec
B - Press or release mouse button 0.1 sec
BB - click mouse button 0.2 sec
P - point with a mouse to a target 1.1sec
H - home hands to keyboard or mouse 0.4sec
M - mentally prepare to do an action (.6-1.35 sec, use1.2)
Suppose you are asked to produce a similar model with values for every meaningful operator for
cell phones (note that there is no keyboard or mouse used, so you have to come up with new
operators).
i. [4 marks] Describe what operators will you have in your model.
Solution & marking
- [+1 mark] P - point with finger to a target on screen
- [+1 mark] T - touch target on screen
- [+1 mark] PV – point with finger on volume control buttons
- [+1 mark] V – Press on volume control
- [+1 mark] PP – point with finger on power button
- [+1 mark] PO – Press on power button
Notes:
- Any 4 will do.
ii. [10 marks] Pick any one of the operators and describe in detail the design of an
experiment to get the average amount of time it takes the user to execute the operator. In
your answer, provide the following:
- What is the operator the experiment is on?
P - point with finger to a target on screen
- [3 marks] What is a trial in your experiment?
Candidate Solution
- user holding phone in hand, a blank screen, a target suddenly appears,
user task is to place finger on top of target and next he says a voice
command such as “done”. Note that we are not going to let the user touch
the target since that is another operator according to the GOMS way of
thinking!
- [3 marks] What is/are the independent variable(s) and what are the levels in
each independent variable?
Candidate Solution
- screen will be divided to 4 quadrants, and times to move finger to each of
the 4 quadrants will be compared with each other.
- [2 marks] What is/are the dependent variable(s)?
Candidate Solution
- time to move the finger on the top of a target
- [2 marks] Which statistical test you would use? Justify your answer.
Candidate Solution
- repeated measures ANOVA if we within-subject design
Experiment Analysis
1. A researcher conducts a within-subject experiment on 400 participants and after checking the
collected data for normality, he discovers that the data is not normally distributed. Having taken
a programming course, he writes a program to experiment with various subsets of the data. He
figures two ways to normalize the data;
1) Select a specific sub-set of 287 participants whose data is normally distributed and use
those in his statistical analysis (and ignore the remaining 113 participants).
2) Keep the 400 participants but multiply each participant data by x and next divide by
1.68 where x is the average of all participants.
Which of the two approaches is better – if any? Justify your answer.
Solution
- Both approaches are invalid and unethical.
- Justification:
o the first cheats by selecting data points and ignoring others. We discussed that the only data
points that would be ignored are the outliers and those are the ones outside the range of [mean
+/- (3 *standard deviation)]. Outliers represent a small percentage of data (not 28.5% of the
data which is the case of 113/400). Also, those 113 points were not outliers because they helped
make the data normalized. The researcher most likely picked this sample size (N=400), because
that’s the norm in his research field (due to the expected effect size). He should not go back and
omit data when it is not normally distributed, instead, he should have got more participants.
o the second is even worse, it is called fudging the data, where the researcher changes the
number to fit his wish. We discussed that the only allowed technique to normalize the data is to
apply the log functions on all the data points, which squeezes or stretches the points to turn the
curve to normal distribution. Any other wishy washy technique is unethical.
1.
2. Instead of moving the hand back and forth between the keyboard and mouse, a designer
envisions using the foot as alternative. He builds a system where by a camera is mounted on the
inside of the desk the user is sitting on to accurately capture the feet movement. Assume the
capturing is done accurately and the system can always detect where the foot is.
This way the hand is always placed on the keyboard.
The interaction will be as follows:
- When the user wants to move the cursor, he slide one of his feet in the four directions:
right, left, forward and backward.
- When the user wants to initiate a double click he taps on the ground using his foot twice.
- When the user wants to initiate a multiple selection, the user is required to move his feet
together thus the system can identify the top-left and bottom-right of selection rectangle.
Next, the user taps to on ground twice to activate pop-up menu (similar to what you when
you drag the mouse by pressing left button and then right click to get a popup menu)
Provide a Critique of this interaction technique.
Solution:
- This is a faulty interaction design since big muscles are not good in making small fine
movements. They are more suited to large coarse movements. In this case, the big muscle
is the leg muscles controlling the feet.

3. a) [10 marks] One publication company would like to study how the text style, size and line
space affect people’s reading speed. Their books cover a big range of reader population from
school children to elderly people. A lab experiment was carried out. The experimenters selected
 3 different text styles, 4 different text sizes and 3 different line spaces to test. They divided the
readers’ age into four groups, 9 to 12, 20 to 40, 50 to 60 and 70 to 80. They got 8 subjects from
each age group to participate the tests. The same length of texts (but with different stories) for
each group were printed with different styles, text sizes and line spaces according to the test
conditions and asked each subject to read them and their reading speed was recorded. After
each reading, the subject was asked to answer some subjective questions.
i. [2 marks] What are the hypotheses for this study?
Solution
• H0: Text size, style and line spaces don’t affect readers reading speed.
• H1: Text size, style and line spaces have an effect on readers reading speed.
ii. [3 marks] What are the independent variables? Identify the levels in each independent
variable.
Solution
• Text style, size and line space
• Age (acceptable)
iii. [2 marks] What are the dependent variables?
Solution
• Readers reading speed
vi. [3 marks] In this study, they used mixed within-group design and between group design.
Which part is within subject design and which part is between subject design?
Solution
• Between Dividing participants into groups by age.
• Within All participants from each group had read stories in all levels of the IVs

b) [10 marks] Design an experiment to find which of the following tasks can be done faster by
humans:
Time for a user’s eyeball to move from focusing on one word to the next word.
Time to tap a key.
Time to decide which key to tap.
i. [7 marks] Describe your experiment in detail. Identify your variables, hypothesis, task or tasks,
trial counts, block counts, and experiment design (within/between).
Marking:
• 1 mark for DV
• 2 marks for IVs
• 1 mark for the hypotheses
• 1 mark for subject design
• 2 marks for the task/trial description
ii. [3 marks] Identify the statistical test you are going to use to analyze the data and explain why
did you chose that test.
Marking:
• Based on student’s assumptions in part (i)
• Student won’t be able to earn the grad in case of choosing wrong/inappropriate statistical test

4. A researcher conducts a within-subject experiment on 400 participants and after checking the
collected data for normality, he discovers that the data is not normally distributed. Having taken
a programming course, he writes a program to experiment with various subsets of the data. He
figures two ways to normalize the data;
 1) Select a specific sub-set of 287 participants whose data is normallydistributed and use those
in his statistical analysis (and ignore the remaining 113 participants).
2) Keep the 400 participants but multiply each participant data by x and next divide by 1.68
where x is the average of all participants. Which of the two approaches is better – if any? Justify
your answer.
Solution
- Both approaches are invalid and unethical.
- Justification:
o The first cheats by selecting data points and ignoring others. We discussed that the only data
points that would be ignored are the outliers and those are the ones outside the range of [mean
+/- (3 *standard deviation)]. Outliers represent a small percentage of data (not 28.5% of the
data which is the case of 113/400). Also, those 113 points were not outliers because they helped
make the data normalized. The researcher most likely picked this sample size (N=400), because
that’s the norm in his research field (due to the expected effect size). He should not go back and
omit data when it is not normally distributed, instead, he should have got more participants.
o The second is even worse, it is called fudging the data, where the researcher changes the
number to fit his wish. We discussed that the only allowed technique to normalize the data is to
apply the log functions on all the data points, which squeezes or stretches the points to turn the
curve to normal distribution. Any other wishy washy technique is unethical.

Concepts/Conceptual Models
1. (a) [3 marks] What is a conceptual model? Why is it important?
Answer:
description of an interface in terms of integrated ideas and concepts about what it should do,
behave and look like, as understood by the user. In other words, it is what the user understandof
the interface when she encounters it and start using it.

(b) [3 marks] What is multi-modal interaction?

Answer:
Using more than channel between the interface and the user. For example, typing and issuing
voice commands at the same time, or pointing to an object with hand and clicking the mouse.

(c) [3 marks] What’s the industry standard when it comes to the acceptable number of
expertusers doing Heuristic Evaluation? What’s the assumption behind that number?
Answer:
5 is a common number. Assumption is that each discovers about 31% of the violations and in
total they together find 85% of violations in the interface

(d) [6 marks] In each of the following a good use or bad use of metaphors? Justify your answer.
i. [3 marks] Playing piano on ipad. The application interface is a piano and the user
interacts with it the same way as with a physical piano.
Answer:
It is a good use of the metaphor. What is a better interface for an app playing a piano than
showing the piano? There is no learning required at all to use the program (which is the
motivation behind using a metaphor). A critical issue that determines the successful
utilization of a metaphor or not is whether the main functionality that a user (in the real
 world) would do with this device is supported or not. In the real world, pressing each key
in the piano produces a different sound. That’s is supported by the app. Note that there
are some interaction concerns related to size of piano and whether it supports multi touch
or not. The metaphor use is good but the interaction is lacking behind.
i. [3 marks] Kia Photo Editor and Painting Desktop Program. The photo editing and
painting tools are in the shape of physical objects presented as icons around the image.
When the user selects an icon, the cursor is an enlarged version of that object.
Answer:
It is a bad use of the metaphor. The designer is trying to import the canvas and drawing
toolset metaphor used by painters; a brush, a pencil, a gum, etc... This could have been a
good use of metaphor if those virtual objects behaved like their physical counterparts.
Again the basic functionality needs to be supported. Considering the brush as an
example, the basic functionality of a brush is not just that it draws a color, but that it can
be pressed to flatten the bristles to get different artistic rendering, it can be used to draw
thin lines by using it’s narrow edge, etc... The question states that it is a desktop app, so
the user is using the mouse. Hence, when the user selects an object (the brush above), it is
just a big cursor that looks like a brush but does not behave like one. The user cannot
twist the brush to create a specific artistic rendering effect, immerse the brush in painting
oil, etc… it is just a big icon. Due to hardware limitations, the developer is unable to
import into the software the basic functionality that is part of the metaphor. There is no
real benefit compared to using small meaningful icons like in traditional painting
programs (e.g. Adobe Photoshop). The designer wasted lots of screen real-estate without
decreasing the time needed to learn the interface. Though the interface looks nice and a
bit fancy, it is an incomplete use of the metaphor. That renders it as a bad metaphor use.

BCI
1. Identify which ERP would you use for each of the below tasks
a) [5 marks] task related to image matching
Solution: P200
b) [5 marks] a system to control a wheel chair movement
Solution: P300
c) [5 marks] task related to language understanding
Solution: P600
d) [5 marks] task related to audio processing
Solution: N100

Human Psychology and Physiology

1. a) [4 marks] Ahmed and Hussein are designing a web site for electricians. Part of their site will
display detailed wiring diagrams. Hussein wants the diagram page to use different shades of
blue, like a blueprint. Ahmed wants to use black and white, with red where additional color is
needed. Who has the better design, and why?
Solution
 Ahmed’s idea is better because blue is not appropriate for small lines and shaped. Also, our eyes
is not sensitive to the blue due to the lack of blue cones (we only have 4% blue cones)

b) [4 marks] For each of the user tasks below, indicate whether it’s an example of using long-
term memory, short term memory, or just attentive processing.
i. An on-line restaurant menu lists appetizers, main dishes, drinks, and desserts, each in a
separate column.
Solution: attentive processing
ii. A web-based video rental sit displays a positive-digit product number for a movie; to rent it,
the user has to type that number on the next screen.
Solution: short-term
iii. An instructor tells a class that the midterm will be postponed two days.
Solution: long-term
vi. Registration on a web site assigns a new user an initial password, but the user can’t log in
until he or she responds to a registration-confirmation e-mail message, which isn’t sent for at
least an hour.
Solution: attentive processing

c) [4 marks] Use discussed processing theories and gestalts to back up the following statement:
It is possible that the same information presented to a homogenous group
of individuals to be perceived differently
Solution
Define & discuss briefly the perception processing theories & gestalt principles

d) [3 marks] Part of the protocol done before any EEG recording is to ensure that the
participants
did not drink coffee. How does coffee affect brain signal?
Solution
Coffee contains caffeine which makes us more awake & alert. Also, an increase in the higher
frequency bands will occur (beta & gamma).

2. a) Which Gestalt(s) is/are invoked in the user brain as part of the perception of the below
figures? Justify your answer
i. [2 marks]

Solution: Similarity + Pragranz

ii. [2 marks]
Solution: Figure/ground
iii. [2 marks]

Solution: closure
iv. [2 marks]

Solution: continuity

b) [4 marks] The two renderings below of a text field with + and – buttons show a conflict
between natural mapping and Fitts Law. Explain why there is a conflict.

Solution:
[2 marks] The left image complies with natural mapping. A numeric scale would
have the numbers increasing as we go to the right and the numbers decreasing as
we go to the left. Placing the + on the right and the – on th left invites thinking of
this field as a numeric value on a scale.
[2 marks] The right image complies with Fitts law. If we need to go back and
forth between the two buttons + and - , Fitts law teaches that the time to acquire a
target is dependent partially on travel distance. It is more efficient to work with
right setup since the travel distance is smaller compared to left setup.
This is an example of tension between natural mapping and Fitts law – either we
pick design or the other.
3. a) [10 marks] Identify the most relevant gestalt that will be invoked in the perceptual processor
as a result of looking at each of the below images. Write the name of the gestalt (only 1) beside
the image.
i. [2 marks]

Solution & marking

- Gestalt: closure
ii. [2 marks]

Solution & marking

- Gestalt: symmetry
iii. [2 marks]

Solution & marking

- Gestalt: closure
iv. [2 marks]

Solution & marking

- Gestalt: continuity
v. [2 marks]
Solution & marking
- Gestalt: common fate

b) [5 marks] In EEG analysis, why do researchers evaluate the coherence between every
electrode
pair? In other words, when an increase in coherence is found between a pair of electrodes, what
does
that signifies?
Solution
- If 2 electrodes show a statistically significant change in coherence from baseline
recording, then the brain centers underneath are believed to be working together
somehow or working on a related task.
c) [5 marks] Why is the HSV (hue-saturation-value) color model is considered superior to RGB
(redgreen-
blue) color model? Justify your answer using human vision system.
Solution
- Because the light receptors (rods & cones) in the eye’s retina are sensitive to
saturation/brightness/darkness of a color. The RGB model does not have
representation for such while the HSV does

d) [5 marks] The below image is for a cell-phone assembly factory. Suppose we are going to
create a foot-based interface where a set of 3 floor buttons are placed on the ground under the
feet of each worker and he/she can trigger actions such as reporting faulty components or
malfunction equipment by pressing on 1 or more of those floor buttons.
 Following are 4 designs for such floor buttons. In each design, there are 3 floor buttons. The size,
in cm, of a button is written and the space between each two buttons is also shown. Which
design is the correct one? Justify your answer using human motor skills.

Solution & marking

- [+2 marks] Design 4 is the correct answer.
- [+3 marks] Justification is that a leg is moved using big muscles and big muscles are
good for coarse low resolution movement _ the bigger the distance between the
buttons and the bigger the buttons, the easier it is to click a button with feet.

4. a) [10 marks] List and explain the guidelines for selecting colors for an interface.
Solution:
- Use saturated colors only when you need something to standout
- Use de-saturated colors as a color theme
- Avoid pure blue for text, lines, & small shapes
- In Combining colors from the spectrum should avoid straining the eye from excessive lens
refocusing.
- Use Yellow to attract attention
- Avoid red & green in the periphery
- Utilize the psychological impact of color
- Design for color-blindness

b) [6 marks] Which lobes/areas in the brain might be considered for EEG recording if you are
evaluating each of the following HCI experiments using EEG?
i. [3 marks] You are evaluating two keyboards and you would like to know which requires less
hand movement per unit time.
Solution:
Motor cortox in central suclus
ii. [3 marks] You are evaluating two LCD screens, a curved one and a straight one and would like
to understand the impact of each on human vision.
Solution:
Occipital lobe

c) [4 marks] Describe the brain signature of someone who is intensely focused on a task.
Solution:
 - An increase in higher frequency bands (beta then gamma) and a decrease in lower ones (theta
then alpha).
- Increased synchronization/coherence between different brain areas involved in the task at
hand.

c) [5 marks] Sketch an interface that would be used to select items from a menu in a restaurant
using the P300 ERP signal.
Solution:
A grid of menu items with a flashing visual effect continuously running on one item at a time.

d) [5 marks] What can you conclude from the below EEG data?

Solution:
In base line, participants were lightly sleeping or drowsy (since the delta is that high in terms of
power ratio). In condition 1, they started to be awake or be more alert (since delta decreased and
theta, alpha, and beta are increasing in power ratio)

Physiology of the Brain (Brain and HCI)

1. a) [10 marks] List the brain lobes and the main functions each is responsible for.
Solution:
- Frontal lobe: Cognition and memory, Ability to concentrate and attend, elaboration of thought.
Personality and emotional traits.
- Temporal lobe: Auditory receptive area and association areas. Expressed behavior. Language.
Receptive speech. Memory: Information retrieval.
- parietal lobe: Processing of sensory input, sensory discrimination. Body orientation.
- occipital lobe: Primary visual reception area, Primary visual association area, allows for visual
interpretation.

b) [10 marks] How can you detect if a user is concentrating or not from a brain signal recording.
Briefly describe the role of the different brain waves in finding concentration level.
Solution: There are 5 brains waves in order: Delta, Theta, Alpha, Beta and Gamma. Each brain
wave type labels a range of frequencies. Concentrating involves an increase in the
 activity/power in the frontal lobe. The more neurons are engaged in communication between
each other, the higher the frequency. Detecting concentration involves looking for a shift in
power from lower frequencies (Delta, Theta, Alpha) to higher ones (Beta and Gamma).

2. a) [8 marks] Following is a 10/20 montage. What does each electrode family name refer to (e.g.
Fx, FCx)?

Solution& marking
- Student can pick one electrode from every sub-group and mention what it stands for.
F _ recording from frontal lobe [0.5 mark]
FC _ Fronto-central recording from the area on the border between frontal and motorcortex [1
mark]
C _ centro or motor cortex [1 mark]
P _ recording from pariatel [0.5 mark]
CP _ centro parietal; recording from area on the border between motor cortex and pariatel [1
mark]
T _ temporal lobe recording [0.5 mark]
FT _ fronto-temporal; area on border between frontal and temporal [1 mark]
O _ occipital lobe [0.5 mark]
PO _ parieto-occiptal [1 mark]
Nz _ inion, reference electrode [0.5 mark]
I2 _ nasion, reference electrode [0.5 mark]

b) [12 marks] Some people get too afraid too easily. Describe the general concept of a
neurofeedback system that aims to assist such users to control their fear. Your description must
be as detailed as possible, and includes how it operates, what you record, where you record
from in the brain, etc…

Solution& marking
- The user must be exposed to 2 situations, baseline where he is relaxed, and the second is
a context which initiates fear, for example, show him a scary movie [3 marks], read a scary
novel, etc.. . In both situations, a brain EEG recording from the fear area is performed [3 marks].
Next, show him the two signals divided to the 5 bands [3 marks], and ask him to try to control
his feelings to return to normal baseline case [3 marks].
- Solutions showing similar experiments get full grade.
 - Solutions missing mentioning recording normal baseline gets 3 marks deduction.
- Solutions missing a part were the output is shown to the user gets 3 marks deduction.

Psychology of Perception and Cognition (Vision/Perception and HCI)

1. a) [7 marks] Below is a screen capture of the new Micorosft Desktop interface. Which metaphor
and conceptuel model it is based on ? Which type of memory it tries to make use of ? Justify
your answers.

Solution
- The interface layout is based on the metaphor of a showcase shelves or gallery where
one can easily inspect or pick the desired item because it is fully visible and placed
with its front towards the user. That’s unlike a library where items are stacked to save
space. Much like the below images ;
- The conceptual model being congnitively invoked is that the user is in a gallery of
visible items or in a magazine shop with visible products. So, it is not any more files
and folders and a physical desktop metaphor. Instead, it is about items laid out directly
infront of the user on open shelfs for easy picking or touching.
- The designer is utilizing spatial memory because she placed common accessed
programs : microsoft office on a spatially differentiated column on the right so the user
will use location as a cue to find the office programs : word, excel, etc.. whenever he
needs so.

b) [8 marks] Below is the Human brain spatialization map. Circle which areas will be involved in
reading, understanding, answering and writing down the answer to this question?
Solution

2. a) [12 marks] Below are pairs of screen shots for an interface – where each pair shows before
and after using a gestalt. Which gestalt is being introduced in each pair? and is the application of
the gestalt in the left or in the right layout? Circle the layout from the two where the gestalt is
being used and write down the name of the gestalt.
i.[3 marks]

Solution
- Similarity gestalt. Shown in left design. After applying the gestalt, the 4 product
quadrants are perceptually similar but distinguishable. On the right, they look alike and
are non-distinguishable. Using same color, background, font, etc… (similarity), we are
able to distinguish between different elements of UI.
ii. [3 marks]

Solution
- Proximity gestalt. Shown in right design. By introducing white space to separate
different products (proximity), the designer created 6 visually distinct product
rectangles.
iii. [3 marks]

Solution
- Continuity gestalt. Shown in right design. The menu items share the same background
to perceptually guide the user that they belong to the same menu. Hence, continuity is
utilized in the connecting background.
iv. [3 marks]

Solution
- Symmetry gestalt. Shown in left design. The menu on the right has more stability and
order because of symmetry on both left and right side of the star.
 b) [8 marks] Why is the HSV color model is superior to the RGB color model? Relate your answer
to
the anatomy of the human eye.
Solution & marking
- [4 marks] HSV is superior because of 2 reasons: 1) it has a representation of saturation,
which is how much white a color has, 2) it has a representation for darkness, which is
how much black a color has.
- [4 marks] The human eye cones and rods are not binary switches sending 1 or 0 to the
brain. Instead, the electrical current sent along the optic nerve is more of an analogue
signal whose strength is correlated in the case of the cones to the saturation of the color
and in the case of the rods to the level of darkness. Hence, the HSV colors can be related
and described in terms of their impact on the human eye reaction.

3. Using 6 circles of the same size, layout them out to illicit each of the following gestalts in the
user perception of the scene.
a) [2 marks] proximity
Solution

b) [2 marks] similarity
Solution

c) [2 marks] continuity
Solution

d) [2 marks] pragnanz
Solution

e) [2 marks] symmetry
Solution
 f) [2 marks] common fate
Solution

g) [2 marks] figure/ground
Solution

h) [2 marks] closure
Solution

4. Try to match each of the interfaces on the right below to the most appropriate color choice on
the left.You can draw a line to connect the desired color/interface pair. Each color or interface
should be connected only once. If there is no appropriate color for an interface -- do not connect
it. Refer to thebelow chart of HSV values to guide you in choosing the answer.H stands for Hue,
S for Saturation, V for Value.Hint: refer to color selection guidelines including cultural dimension
of colors, and also observe the intent/purpose of the interface before answering!

Solution
5. Identify which gestalt was utilized in each of the below images;

Solution: similarity – Closure in the statue

Solution: continuation

Solution: closure

Solution: proximity

Solution: figure and ground – Similarity in grouping each fish category together in
 one group

Solution: pragnanz

6. a) [5 marks] Ahmed and Hussein are designing a web site for architects. Part of their site will
display detailed architectural layouts. Hussein wants the layout to be displayed in different
shades of blue. Ahmed wants to use black and white, with red where additional color is needed.
Who has the better design, and why?
Solution: Ahmed choice is better than Hussein’s. Blue is difficult for the eye since only 4% of
cones are blue. Architectural layouts are made of thin fine lines which is going to be even harder
to see in blue.

b) [5 marks] For each of the user tasks below, indicate whether it’s an example of using long-
term memory or short term memory.
i. [2.5 marks] A web-based video rental sit displays a positive-digit product number for a movie;
to rent it, the user has to type that number on the next screen.
Solution: short term memory
ii. [2.5 marks] An instructor tells a class that the midterm will be postponed two days.
Solution: long term memory

c) [10 marks] Is there any problem with the below interfaces? If there is, identify the problem -
else
mention any advantage you find. Use principles and laws discussed in course – not your
intuition. DO NOT USE or REFER to GESTALTS in your answer.
i. [2.5 marks] A program for bulk renaming of files (i.e. renaming many files one shot)

Solution: violates both Hicks law and chunking theory.

ii. [2.5 marks] message box displaying a warning to the user.
Solution: violates message language guidelines, should be clear (OutofMemoryError!), in user
language (IDE!) and formal (seems to be!).
iii. [2.5 marks] Calculator

Solution: good use of metaphor.

iii. [2.5 marks] Apple’s spotlight search tool displaying categorized search result

Solution: good use of encoding specificity principle.

d) [5 marks] Which gestalt is being used in each of the below interfaces? Specify only one. If
there is
more than one, chose the prominent one.
i. [2.5 marks] website intro page

Solution:
Similarity
ii. [2.5 marks] set of icons in a folder.
 Solution
Similarity

7. a) [5 marks] Perceptual causality and Perceptual Fusion are two important concepts utilized in
3D games with lots of computingrequirements due to animations, textures, and various
character models existing in the game. Describe how such gaming companies ensures that the
user experience is notaffected by lack of either perceptual phenomena.
Solution& marking
- With perceptual fusion, the higher the frame rate, the better. A higher frame rate (e.g. 30
frames per second - fps) ensures fusion between frames, which results in smooth animation
which in turn supports the user experience positively. However, note that the hardware needs
to be able to produce 30 fps (some hardware simply can’t because they were not designed to do
so). To support perceptual causality, the frame rate must be increased to the point that the
reaction to the action is displayed to the user within the 100ms (as discussed in lecture). This
ensures that the user is convinced that the reaction to his action in the game makes senses, or in
other words, whatever he sees happening, it is because of him. However, on limited capability
hardware (e.g. a 1.2 GHz centrio laptop), the rendering capabilities will be limited and a
requirement like 30 fps is not guaranteed. If gaming companies leave it to chance, their games
might not perform well on some models. Instead, “good” gaming companies calibrate the user
machine during installation [2 marks] to find the capabilities of the underlying hardware they are
running on. Next, they adjust the frame rate [1.5 marks] so that the user is still having a
smoothexperience in the game without any flickering (due to lack of fusion). However, when
they drop the frame rate too much, they might run into a problem with causality. So, they can
only drop to the fps whereby both as supported: causality and fusion [1.5 marks].That will differ
based on nature and requirement of the game: cartoon-style vs. 3d photorealistic animation,
etc…

b) [15 marks] Produce 5 designs for a login screen containing the following
- email and password text fields
- sign-in and sign-up buttons
- reset password link
In each question below, your goal is to produce the named gestalt. Do not worry about the
esthetics (beauty) of your design or whether the gestalt is the best for this type of screen.
i.[3 marks] similarity
Sample Solution
- Below sample solution has the similarity between the label and text fieldcombination in both
Email and Password
- Students can come up with other possible organization to invoke the gestalt.
ii.[3 marks] symmetry
Sample Solution
- Below sample solution has symmetry as the login screen can be divided to 2 sides using a mid-
line into left side and right side. On both sides, the controls are the same, label mirrored to label,
text field mirrored to text field, button mirrored to button, etc..

- Students can come up with other possible organization to invoke the gestalt.
iii.[3 marks] proximity
Sample Solution
- Below sample solution has proximity in having the label and its associated text field very close
to each other compared to other components.

- Students can come up with other possible organization to invoke the gestalt.
iv.[3 marks] Figure/ground
Sample Solution
- Below first sample solution has figure/ground by manipulating a transparency later on the user
interface control

Or
 - Below second sample solution has figure/ground by manipulating the size of the user interface
control, the one currently active is displayed at standard size while the rest are shrinked down.
This would also give the illusion of being closer vs. far.

- Students can come up with other possible organization to invoke the gestalt.
v.[3 marks] Continuity
Sample Solution
- Below sample solution has continuity in the line for writing both email and password. These
would be css styled text fields to only show the bottom line.

- Students can come up with other possible organization to invoke the gestalt.

8. a) [10 marks] Below is a cell phone screen. Re-organize the icons so that the user uses her spatial
memory while interacting with the interface. You can draw arrows to show the location of each
icon.
Sample Solution
- The key to the solution is to recognize that invoking spatial memory will occur if the
information is presented spatially to the user. To achieve that, we divide the screen to four
quadrants, top left, top right, bottom left, and bottom right [5 marks]. Next, we place the related
icons together [5 marks]. This way, the user can remember that media is top right, while
connection tools are bottom left, and so on. this is what is referred to as utilizing spatial
memory.
- Students can come up with other possible organization to invoke spatial memory but the two
steps mentioned above must be included.
- Not all organizations are equall!, for example top and bottom although spatial, is not really
helpful to the user since that is mostly what is in the left image above.
- Chunking theory plays a role here. Any number of divisions between 4 and 9 is acceptable as
correct answer.

b) [5 marks] Below is the human vision visual field chart. Mark on the chart where would you put
an ambient display to notify the user of changes in temperature outside the building(in relation
to the human visual field)

Solution
 c) [5 marks] Below is a screen capture from a research work utilizing transparency. What’s the
problem it was trying to solve?

Solution
- The windows in desktop systems are rectangular!, so a lot of screen real-estate are wasted to
empty space.

9. a) [10 marks] Below are the color sensitivity charts for two colors: cadmium yellow and cobalt
blue. Assume we mix them with equal proportions to create a new color. Draw the color
sensitivity chart of that new color.

Solution

b) [10 marks] Below is the distribution of rods and cones in the human eye (cones curve is the
one labeled in center with the word Fovea).

Let us assume that the rods and cones were interchanged in the chart above (i.e. distribution of
rods and cones in our eyes switched with each other).
i.[5 marks] What kind of display would you prefer using then?
Solution& marking
 - Since the rods will be close to the center, the display should be rendering shades of grey
(black/white) mainly [5 marks] because the human this case will not be able to see colors well
except those positioned in the periphery.
Another possible answer:
- In case of a very large display, which span the peripheral and focal vision of the user (e.g. 68
inch display placed on a typical desktop where the user is sitting at an arm’s length, the display
could be made of two types of pixels, in the focal pixels rendering shades of grey and in the
periphery pixels rendering colors [5 marks].
- Answers mentioning a display based on difference in light intensities only without mentioning
greyscale of black/white will be getting a partial grade.
ii.[5 marks] How would that impact the HSV color model?
Solution& marking
- To describe colors presented in the focal vision of the user, we do not need the hue anymore [5
marks]. So, remove the hue from the model since color perception will only be in the periphery.
- Answers suggesting removing hue AND saturation will be getting a partial grade.

Psychology of Motor and Muscles

1. Below is an empty screen box and a cursor. Draw 2 targets where the closer target will take
more time to acquire than the far away target. Add labels to your target to identify sizes of each
target. Justify your answer by using Fitts law.
Solution

Marking
- Student answer has to be accurate to get full mark. For example, in changing above
width of big rectangle to 8 instead of 10, the 2 times will be the same (0.8). If the width
is 7, it will be faster to reach to smaller rectangle. Students need to show that he
considered such cases.
- Those will just say make one big in width and the other very small in width without
mentioning specific sizes -4.
2. a) [10 marks] The pictures below show initial pointer positions and target regions. By using Fitt’s
law, which task would be faster? Use measurements reported on chart with Fitt’s Law. Assume a
= 5 and b = 2. Explain your answer.

Solution
1. Using fitt’s law _ MT= a +b * log2 (D/W +1) – Assume a = 5 & b = 2
2. Task (a) _ MT = 5 + 2 * log2 (5/10 +1)
3. Task (b) _ MT = 5 + 2* log2 (10/5 +1)
4. Task (a) is faster

b) [4 marks] The picture below is for signs on a high way supposedly guiding car and truck driving
on the different routes ahead. Use Hicks law to find the time it takes to make a decision where
to go – assume b = 0.53

Solution
1. Hick’s Law: T = b * log2 (n+1)
2. T = 0.53 * log2 (10+1) = 1.83 seconds

b) [5 marks] The picture below shows the tunnel the user travel through to navigate to a target
application. From the start button, the user picked 560 Developer Tools in the second column of
the Start menu and continued to 3rd Edition FPG SDK then to 1.0 then to Tools. Label on the
image the different goals in the path/tunnel the user must cross and write down their number.
 Solution
# of goals is 5 as labeled on image.

c) [10 marks] Which of these gesture designs are good and which are bad. Justify your answer
using muscles principles and gesture design guidelines.
i. [5 marks] using hand movement to control TV menu

Solution:
This is a good design. First, controlling a TV is a task that is done for a short duration, so no
muscle will be tired from extended usage since there is none. Second the hand is good for fine
control and TV screen menus could have lots of options which calls for fine dexterity and the
hand has that.
Marking: 2 for choice. 3 for justification.
ii. [5 marks] using hand and arm movement to control an interface displaying x-ray in a
surgery.

Solution
This is a bad design. Arm muscles are big, so have lower resolution and will get tired faster than
smaller muscles. During an operation, the surgeon is using hands and arms to do the operation.
By asking him to use them to control an interface, we are using muscles that are being used and
hence will get tired even faster. It really boils down to if the surgeon is going to use the interface
a lot or infrequently. When X-rays are used in operations, they are used through the operation
because they guide the surgeon work, which means the surgeon will be going back and forth
between operating table and X-ray. That’s why, it is a bad design.

3. a) [6 marks] Suppose the user is required to travel with the mouse starting from where it say
starts below and ends where it says end, according to steering law, how many goals he had to
pass?

Solution
- 4 or 5 goals are accepted.
b) [6 marks] The below screen capture is from the marking menus research work. One of the
advantages of this approach is that it is scale invariant. What does that mean? And how is that
possible that humans can make the gesture scale invariant?

Solution
- Scale invariant means a human can make the same gesture but with several different sizes [3
marks] – as shown below. The reason why it is possible is that the instructions saved in the
kinesthetic memory store in the brain are not size dependent [3 marks].

c) [8 marks] The below screen capture is from bull-eyes menu research work. Which law the
researcher relied on to enhance the performance of the acquisition task and how does she do it?

Solution
- Fitts law [3 marks]. The researcher decreased the distance (D) to the target to be acquired by
flying far away objects and landing near the user hand to select from [5 marks].
HCI Laws
1. a) [4 marks] Calculate the amount of time ittakesa user to click on the sorting icon(enclosed in
rectangle) starting from the cell below value 56. Start/stop time of used mouse is 0.3. Speed of
mouse is 0.8. Icon size is 32x32pixels. Distance from cell below value 56 to edge of icon is 120.
The line drawn in the screen-capture below is the path the user takesusing the mouse to click on
the icon to sort the values.

Solution
Use fitts law
T = a + b log (D/S +1)
a = start/stop time of device = 0.3
b = speed of device = 0.8
D = 120+16 = 136
S = 32
T = 0.3 + 0.8 x log(136/32 + 1)

b) [4 marks] A company invented a new type of joystick for gameplayers

(shownbelow). The
company engineers are experimenting with a circular gestureusing the
joystick (where the joystick ismoved 360 degreesaroundits vertical axis) to
trigger some action. You arrive to the company as the HCI expert and are
asked if this circular gesture should be supported by the device! You
measure the time it takes you to perform the gesture for the first time and
you find that it is 2.1 seconds. You learn from the device specification that
the a constant for the device is 0.75 and the start/stop time is 0.8.
i. [2 marks] How much time it twill take you to perform the circular gesture
using the joystick in the 50th trial ?
Solution
Use power law of practice
Tn = T1 n-a + c
n = 50
a = 0.75
c = 0.8
T50th = 2.1 x 50-0.75 + 0.8
ii. [2 marks] Would you recommend supporting this gesture using this device or would you
recommend to the company to abandon support for the gesture ?
Solution
No, it is too slow.
 c) [4 marks] Calculate the average amount of time that will lapse before the user selects an
option from the last open sub-menuin the screen capture below. The constant associated with
this type of menu is 0.453

Solution
Use Hicks law
T = b log2(n + 1)
b = 0.453
n = 12
T = 0.453 x log2(12 + 1) = 0.453 x log2(13)

2. a) [10 marks] Assume that we were interested in analyzing how fast the user can perform the
same task using three different interfaces A, B, and C (example task: answering a customer
query in a call center). For each design, we asked participants to complete the task several times
and we measured the task time for every trial. Then we plotted the average task time
corresponding to each repetition and we obtained three performance curves shown below. On
the chart below, X-axis is for time in seconds while Y-axis is for the repetitions count (i.e. 10
means 10 repetitions, etc...)

Three performance curves for the three different interfaces for the same task.
i. [2.5 marks] What’s the HCI concept/law that can be used here to compare between the three
designs?
Solution: power law of practice
ii. [2.5 marks] Which design is the fastest to learn? Justify your answer.
Solution:
• In the first trial participants take roughly the same amount of time with all designs.
But by the second repetition, design A is much faster than designs B or C. By the
3rd repetition design A speeds up even more, and after the 4th repetition the reaction
times reach a plateau: the curve flattens out and the users have learned the interface as
much as possible. There are no more improvements to be expected, and extra
repetitions will only decrease the reaction time insignificantly. We can say that, with
design A, learning is saturated after the 4th repetition
• The learning curve for design C also flattens, but the plateau is reached later, by
approximately the 10th or 11th repetition. So design C requires more practice to
stabilize the performance. In other words, it takes people more trials to learn how to
use design C than design A.
iii. [2.5 marks] Comparing design A with design B, which one has more improvement on the
task time (X-axis) once it has been learnt?
Solution:
• The expected task time after the interface has been learned is lower for design B than
for design A (1s vs. 2s). In other words, design B takes longer to learn than design A,
but once it has been learned, people are faster at using it.
• The choice between A and B depends on whether in real life users will be exposed to
enough repetitions to reach the saturation plateau. If, for instance, you expect people
to use the interface every day as part of their work, then it makes sense to go with
design B, because in the long run it will save more time. (During the first week of
use, A will be better, but halfway through the second week of use; B becomes better,
and then it stays better forever.) However, if your users will use the design
occasionally, with large intervals of time between two different sessions, then design
A will be better because it will help people learn the interface faster.
iv. [2.5 marks] Comparing design A with design C, Which one exhibits more improvement on
the task time?
Solution:
• Design A exhibits more improvement; the difference between the highest and the
lowest points on the learning curve is approximately 20s (22 for repetition 1 and 2 for
repetition 15), whereas for design C this difference is approximately 19s. So with
design C participants don’t speed up as much as they do with design A.

b) [10 marks] Assume that we have 64 items to fit in a menu. The UI designer has suggested
three alternatives:
Design A: Linear menu with the 64 items listed one after the other

Note: above is an example of linear menu with just 3 items

Design B: 2-level hierarchical linear menu that has 4 items in the first level and 16
items in the second level
Note: above is an example of a 2-level hierarchical linear menu with 3 items first and second
levels
Design C: 3-level hierarchical linear menu that has 4 items in the first level, 2 items in
the second level, and 28 items in the third level

Note: above is an example of a 3-level hierarchical linear menu with 3 items in each level
Our task is comparing between those alternatives to identify which one gives the fastest
access/selection time between the items? And which one leads to the fastest navigation time
through the menu itself.
For each question, mention the following points:
1) HCI law used in the research question
2) Calculations needed to solve the research questions
Use the following assumptions:
• Movement distance is 500 pixels for all alternatives
• Target width is 150 pixels.
• a= 30 & b= 45
• The target item is the last item for all alternatives.
• For the hierarchical menus, the tunnel width is fixed and goals to the target are not
aligned on the same line.
i) [6 marks] Design calculations
Solution:
Fastest selection time can be determined by Hick’s Law
Fastest Navigation time can be determined by Fitt’s Law or Steering Law
Design A:
Solution:
- Selection:
T = b * log2 (n+1) = 45 * log2 (64 +1)) = 271.006 ms
- Navigation:
Using Fitt’s law _ MT = a + b * log2 ((d/w)+1)
MT= 30 + 45 * log2 ((500/150)+1) = 125.196 ms
Design B:
Solution:
- Selection:
1. Time for 1st level:
o T1 = b * log2 (n+1) = 45 * log2 (4+1) = 104.486 ms
2. Time for 2nd level:
o T2 = b * log2 (n+1) = 45 * log2 (16+1) = 183.93 ms
3. Total time = T1 + T2 = 288.24 ms
 - Navigation:
• Using Steering law _ MT = a + b *N* log2 ((d/N*w)+1)
• MT = 30 + 45 * 2 * log2 ((500/2*150)+1) = 157.353 ms
Design C:
Solution:
- Selection:
1. Time for 1st level:
o T1 = b * log2 (n+1) = 45 * log2 (4+1) = 104.486 ms
2. Time for 2nd level:
o T2 = b * log2 (n+1) = 45 * log2 (2+1) = 71.323 ms
3. Time for 3rd level:
o T3 = b * log2 (n+1) = 45 * log2 (28+1) = 218.609 ms
4. Total time = T1 + T2 + T3 = 394.418 ms
- Navigation:
• Using Steering law _ MT = a + b *N* log2 ((d/N*w)+1)
• MT = 30 + 45 * 4 * log2 ((500/4*150)+1) = 187.404 ms
ii) [2 marks] which design gives the fastest access/selection time between the items?
Solution: design A
iii) [2 marks] which design leads to the fastest navigation time through the menu itself?
Solution: design A

3. a) [8 marks] If you hold your pen in the center of the black box below, which ant is fastest to hit?
Justify your answer using an HCI law and show how you used the law to reach to an answer.
Note: you can assume that each square in the illustration is 1cm x 1cm

Solution & marking

- [+2 marks] This is an acquisition task, hence, Fitts law T = a + b log (D/S +1) is the correct law to
use.
- [+2 marks] Since a, b are not given, we will assume them constant with value 1 to simplify
calculation. S is the width of the target. D is the distance from the starting point to the center of
the target.
- Students were asked to bring a ruler, so it is expected from those who realized that it is a Fitts
law calculation, to have measured the distances. The D and S as measured on the exam paper
booklet are:
[+ 4 marks] Applying Fitts law
o Ant bottom right T = a + b log (D/S +1) = 1 + 1 x log (4.5/1 + 1) = 0.74
o Ant top right T = a + b log (D/S +1) = 1 + 1 x log (6.8/2 + 1) = 0.64
o Ant top left T = a + b log (D/S +1) = 1 + 1 x log (5.1/2 + 1) = 0.55
o Ant bottom left T = a + b log (D/S +1) = 1 + 1 x log (5.1/3 + 1) = 0.43
Notes
- Some students might calculate the hypotenuse based on the given square info _ ok
- Student’s answer should show that he/she calculated the center point of the squares
containing the ant.
- They must have drawn a straight line or taken measurements from the center of the
squares containing the ant to the center of the black squares.
- Student’s answer should incorporate the width of the target.
- There also should be a clear unambiguous reference to Fitts law. Those referring to
any other law should be given zero.
- Guessing the answer and saying that it is bottom left ant without actually doing the
calculations but with mentioning Fitts law should be given 4/8. If Fitts law is not
mentioned but they guessed correctly, should be given 2/8.
- Those who measured S from the center of the black area to the edge (not the center)
of the squares containing the ant or from the edge (not the center) of the black area
should have -2 marks deducted.

b) [7 marks] If you are required to navigate using a mouse in each of the below mazes, starting
from the entry at the top, and finishing at the exit at the bottom. Which of the two mazes you
would expect to finish faster or would they take the same time? (assume that the only
difference
is between the 2 mazes, everything else is the same). Justify your answer using an HCI law and
show how you used the law to reach to an answer.

Solution & marking

- [+3 marks] Using the mouse and moving from start to finish is a steering/mousenavigation
task. Hence, Steering law is the correct law to use:
T = N log (D/NW + 1)
- [+ 4 marks] To find the N, the student must draw the path connecting the start to the
end as below. The puzzles on the right has 23 tunnels, the puzzle on the left has 25
tunnels. Hence, the puzzle on the right should be finished faster (given everything
else is the same between the 2 puzzles – which is stated in the question header).
Notes
- Student’s answer should show that he/she counted the tunnels, in correct counting of
tunnels should be penalized by -3 marks.
- There also should be a clear unambiguous reference to Steering law. Those referring
to any other law should be given zero.
- Guessing the answer and saying that it is right puzzle without actually doing the
calculations but with mentioning Steering law should be given 4/7. If Steering law is
not mentioned but they guessed correctly, should be given 2/7.