HCI

Lecture 1
What is HCI:
Discipline concerned with design evaluation and implementation of
interactive computer systems.
OR
A multidisciplinary field of study that focuses on interaction
between humans and computers.

Importance of HCI:
• Computers affect everyone.
• Affects the user’s:
o Effectiveness
o Productivity
o Morale
o Safety
o Satisfaction
• Affects the application’s utility and usability.

Examples of interfaces (other than computers):

• Phone
• Watch
• Car
• Plane Cockpit
• Running Shoes
Goals of HCI:
Achieve tasks:
• Effectively
• Efficiently
• Enjoyably
• Safely

What is usability:
A very crucial part of HCI which combines:
• Ease of learning
• High speed task performance
• Low error rate
• User satisfaction and retention

How to improve interfaces:

• Educate software professionals.
• Accumulate knowledge about H-C interface design.
• Integrate UI design methods into software development.

UI Design/Develop process:
1. Analyze user’s goal.
2. Create the design.
3. Evaluate options.
4. Implement prototype.
5. Test.
6. Refine.
Before designing you need to know the user’s:
• Physical/Cognitive ability
• Personality/Culture
• Knowledge/Skills
• Motivation

Fatal mistakes in HCI:

assume all users are:
• Alike
• Like the designer

Fields of HCI:
• Design
• Computer Science
• Psychology
• Education
• Communication
• Anthropology
 Lecture 2
What is Reasoning:
The process by which we use the knowledge we have to draw
conclusions.
Deductive Reasoning Inductive Reasoning Abductive Reasoning
Derive the logically Generalizing from Reasoning from a fact
necessary conclusion cases we have seen to to the action that have
from the given premises infer information about caused it
cases we have not seen
EX: EX: EX:
All students who I am often absent from I always wear a black
attended today will get school. shirt going to school.
chocolate.

You have attended Students who don’t If you see me wearing a

today. attend get bad grades. black shirt

Therefore, you will get a I get bad grades at You will infer that I am
chocolate. school going to school

What is Problem solving:

The ability to adapt the information we have to deal with new
situations that require originality creativity

What is Gestalt theory:

The claim that problem solving is a matter of reproducing known
responses or trial and error is insufficient to account for human
problem solving behavior
What is Problem space theory:
• Problem solving centers around the problem space which is
made up of states.
• Problem solving generates states using legal state transitions
operators.
• Every problem has an initial state and a goal state that uses
state transitions to transform from the initial to the goal state.

Analogy in problem solving:

Similarities between the known domain and the new domain are
noted and the operators from the known domain are transferred to
the new domain.

Errors and mental models:

Human high capability of interpreting and manipulating information
might cause some errors and bugs some trivial and causes minor
inconvenience while others are serious and require effort to correct.

What are the levels of interaction of HCI:

• Batch processing:
minimal interaction with machine
• richer interaction:
Information appliances puts internet access on dedicated
systems

Computer System Elements:

• Input devices:
o Text entry: keyboard
o pointing: mouse
o 3D interaction devices
• Output devices:
o large display
o digital paper
• Virtual reality systems
• Various devices in the physical world:
o physical controls
o smell, sound, haptic feedback
o sensors
• Paper input/output:
o printers
o scanners

Types of memory:
• Short term memory (RAM)
• Long term memory / Disk (LTM)

File compression:
• Text
can compress factor of five and bitmap compress to 1% of
the original size.
• Video
compress each frame and make use that successive frames
are often similar we can calculate the difference between
the two frames using DCT (discrete cosine transformation)
and only store significantly different frames
Storage format and standards:
• Text storage format: ascii codes
• Documents can be stored in:
o RAM
o Magnetic/Optical disks
Storing documents like this will result in capacity problems for
documents and videos to be stored.
Providing the file with access methods which limit or help the user.

Processing and networks effects:

finite processing speed limits the interactive performance
Limiting factors:
• Computation bound
• Storage
• Channel bound
• Graphic
• Network capacity

The interaction cycle:

Can be divided into execution/evaluation cycle which can be divided
into 7 cycles (Norman Interaction Model):
1) Establishing a goal
2) Forming the intention
3) Specifying action sequence
4) Executing action
5) Perceiving the system state
6) Interpreting the system state
7) Evaluating the system state with respect to the goal
 Lecture 3
What is interaction:
Translation of action between the user and the system and vice
versa (a wrong translation result a failed interaction)

The goal of interaction: allow the user to achieve a certain goal

What is the interaction framework:
Realistic description of interaction which consists of 4 components:
• System
• User
• Input
• Output
With each component having its own language and this framework
act as translator between them and forms a cycle where:
The system transforms itself by an operation in the execution phase
now the evaluation starts the new system state is communicated to
the user and the new system attributes is rendered as output that
the user can observe, access, and evaluate the results relative to his
goal.
This cycle can be abbreviated with four translations:
• Articulation
• Performance
• Presentation
• Observation
This framework judge the overall usability of the system.
Frameworks of HCI:
Ergonomics addresses issues on the user side like input, output,
and user context where each is concerned with:
• Input: dialog/interface design
• Output: presentation and screen design
• User Context: social/organizational context

What is ergonomics:
The study of physical characteristics of the interaction which
focuses on the user performance and how the interface enhances it

How to display controls:

• Functional controls: functionally related items grouped
together
• Sequential controls: order sequentially related items in the
way they are typically used
• Frequency controls: frequently used items organized together

Interaction physical environment:

The physical environment affects how well the system is accepted
and the health and safety of their users, which is divided into factors
that affect the quality of interaction:
• Performance: Users should reach all controls comfortably
• Temperature: Extreme hot or cold affect performance and health
• Lighting: Adequate lighting allow users to see the computer screen without eyestrain
• Noise: Noise levels should be maintained at a comfortable level
• Time: The time users spend using the system should also be controlled
• Color: Colors used in the display should be as distinct, red for emergency alarms, green
for normal activity, and yellow for standby and auxiliary function
Interaction styles:
• Command line interface (CLI)
• Menus
• Natural language
• Q/A and query dialog
• Form fill and spreadsheets
• WIMP
• Point and click
• 3D interfaces

Elements interactivity:
The actions of the system and their corresponding changes in the
interface state are separate.

Paradigms:
• Time sharing: Single computer support multiple users
• Video display units: Present the interface and allow for system manipulation
• Programming toolkits: Allow substantial computing skills to increase productivity
• Personal computing: The system should be easy to use regardless of how
powerful it is
• WIMP interface: Separate the physical and logical display spaces to keep the user
concentrated
• Hypertext: Linear text which contain links to other texts
• Multi-modality: Simultaneous use of multiple communication channels for both
input and output
• World wide web: Global WAN composed of multiple LANs
connected together to share information via TCP/IP protocol
• Ubiquitous computing: Processing information is linked with each activity or
object as encountered
 Lecture 4
What is design: achieve goals within constraints
Design basic concepts:
• Goals: the purpose of the design that tell us who is it for and why they wanted it
• Constraints: the materials, standards, the cost, time, and its health effect if any
• Trade-off: Choose goals or constraints that can be relaxed so that others can be met
• Design golden rule: understand your materials:
o Computer’s: limits, capability, tools, platforms
o Human’s: psychological, social aspects, human error

Design process simplified:

1. Achieving goals
2. Understanding materials (human/computer)
3. Accepting limitations

First step in design process: Knowing your user by finding out

who they are or talking/watching them.

How to help users navigate the system:

1. Indicate for the users where they are
2. Create structures easy to understand and fit their needs
3. Design comprehensible screens

Design complexities: iteration and prototypes to improve and

evaluate the design and theory/models to give a good starting point
The design process:
• Requirements: Find out what is happening and then establishing what is needed
• Analysis: Order the results from the interview and observation to bring key issues
• Design: Move from what you want to how to do it using rules and design principles
• Iteration and prototyping: Evaluate the design and improve it
• Implementation and deployment: done with the design create and deploy it

Scenarios:
design stories help us see what the user will want to do and its
considered the simplest design representation, can be used to:
• Communicate with others
• Validate other models
• Express dynamics of the application

Navigation Design:
process of accurately ascertaining one's position and planning the
following a route, which can be done by several ways:
• Widgets: help you know how to use buttons and menus
• Screens/Windows: understand the logical grouping of buttons
• Navigation: understand what will happen when a button is pressed

Each state in the system should tell the user:

• Where you have been
• Where you are
• Where you are going
• What you can do

Hierarchical organization: Hierarchy links screens, pages or

states in diagram used to help during design
Screen design:
• Grouping and structure: If things logically belong together, then we should
normally physically group them
• Order Groups: Match the order of the screen with the natural order for the user
• Decoration: Features like font style or background color emphasize groupings
• Alignment: For left to right users’ text should be aligned to left, while numbers to right
• Whitespace: Help separate text or paragraphs from other elements on the screen can
be created with return, spacebar, and tab keys

User action and control:

• Knowing what to do: Labels and icons on menus should be clear and use standard
Icons and labels for common actions
• Affordances: For non-standard icons their shape and attribute should indicate what
they do where you can mimic real world objects or their critical aspects

Appropriate appearance:
• Presenting information: Presenting information on screen depends on the kind of
information
• Aesthetics and utility: Beauty and utility may sometimes be at odds
• Localization / internationalization: making software suitable for different
languages and cultures
 Lecture 5
Usability engineering:
Forming specifications that concentrates on features of interaction,
which improve usability

Attributes for testing usability:

• Measuring concept: describe attribute of the actual product
• Measuring method: how the attribute will be measured
• Now level: the value of the measurement to the system
• Planned level: target level of the design
• Worst case: the lowest value acceptable of the measurement
• Best case: the best level possible for the measurement

How to determine the measuring method:

• Time to complete a task
• Percentage of task completed
• Percentage/time
• Success to failure ratio
• Time to solve errors
• number of errors
• number of better competitors
• number of commands
• frequency of help used
• ratio of favorable to unfavorable comments
• number of repeated failed commands
• number of successful/failed runs
• number of times the interface misleads the user
• number of good/bad features
 • number of uninvoked commands
• number of regressive behavior
• number of users that prefer the system
• number of times users work around the problem
• number of times user’s task is distributed
• number of times user lose control of the system
• number of times user express frustration/satisfaction

Usability engineering main feature:

assertion of usability metrics early to judge the system when its
delivered

Problems of usability metrics/usability engineering:

usability metrics build more usable systems because it determines
usability by measuring and observing user performance, but:
• it relies on measurements of specific user actions in specific
situations
• satisfies usability specifications and not necessarily usability

Iterative design and prototyping:

Iterative design: correcting assumptions revealed in testing to
overcome incomplete requirement specification by cycling through
designs and improve the final product
Prototype: artifact that simulate some features of the system
Main approaches of prototyping:
• Throw-away: the prototype is built and tested and the knowledge gained is used to
build the final product, but the prototype is discarded
• Incremental: the final product is built as independent separate smaller components
that combined into one system, each release includes one more component until the final
product is released as series of products
• Evolutionary: the system evolves from its limited initial version to its final release
prototype is not discarded and serves as the basis for the next design iteration

Non-functional features: Most important feature of system

which are features that affect how the system do not what it does

Contracts: Binding agreement between the designer and the

customer which serves as a governed contractual agreement in the
form of documentation

Prototyping techniques: Simplest type of prototypes are

storyboard which is a graphical representation of the system
without any functionality

Limited functionality simulation: The designers must build

graphical objects with behavior that mimics the system functionality

High-level programming support: High-level languages

allow the programmer to abstract away hardware specifics and
attach functional behaviors to user interactions

Warning about interactive design:

• If the design decisions made at the beginning of prototyping
process are wrong
• If a usability problem is diagnosed we should understand the
cause of the problem not just the symptom
Design rationale:
Information that explain why a system the way it is including its
structural, architectural, functional, and behavioral description, it
relates to reflection (doing design rationale) and documentation
(creating design rationale)

Process-oriented design rationale:

Based on IBIS (issue based information system) which is a style for
representing design and planning dialog, where a root issue is
identified and it has positions that respond to that issue with an
argument that support or objects to it then the issue is broken to sub
issues and the cycle is repeated

Design space analysis:

More deliberate approach than IBIS which emphasize post hoc
structuring embodied in QOC (questions-options-criteria) where
questions are similar to issues except in their capturing method,
options provide solutions to the questions and criteria assist
options to provide the best option which is drawn by solid line and
the less favorable is drawn with dashed lines
Psychological design rationale:
Tries to make explicit psychological claims of usability in order to
better suit the product

Design rules:
Standards and guidelines that provide a general and a concrete
direction for the design that enhances the system interactivity

Principles to support usability:

• Learnability: the ease of new users to use the system effectively
• Flexibility: multiplicity of ways the system and user can exchange information
• Robustness: support provided to the user for goal assessment
• Predictability: the system deterministic from the user perspective
• Synthesizability: when an internal state change the change must be seen by the user
• Familiarity: correlation between the user’s existing knowledge and the knowledge
required for effective interaction
• Generalizability: consistency that leads to more complete predictive model
• Dialog initiative: system initiates all dialogs and the user simply responds to
requests for information
• Multi-threading: allows for interaction to support more than one task at a time
• Observability: allow user to evaluate system internal state by its perceivable
representation
• Recoverability: ability to reach a goal after an error in the previous interaction

ISO standards for hardware:

1. Introduction
2. Body size
3. Body strength/stamina
4. Workplace design
5. Stress/hazards
 6. Vision/lighting
7. Visual display
8. Auditory information
9. Voice communication
10. Controls
11. Design for maintainability
12. Systems

ISO definition for:

• Usability: effectiveness with which user achieve goals
• Effectiveness: completeness with which user achieve goals
• Efficiency: resources expended in relation to accuracy of goals
• Satisfaction: comfort of users affected by its use

Guidelines:
There must be guidelines which affect the way the user
communicates the input to the system

Golden rules and heuristics:

Used to evaluate the system during the design using consistency as
a measure
Evaluation guidelines Expert analysis evaluation guidelines
• Test usability/functionality of the system • Cognitive walkthrough
• Occur with lab/field/collaboration with users • Heuristic evaluation
• Evaluate the design/implementation • The use of models
• Considered at all design cycle stages • Use of previous work

Goals of evaluation:
• Assess accessibility of the system
• Assess user experience
• Identify problems in the system
 Lecture 6
Cognitive complexity theory (CCT):
Begins with decomposition of the goal using goal operation method
selection (GOMS) which provides the model more predictive power,
has two descriptions user goals and the system/device

Task action grammar (TAG):

Deals with problems by adding parametrized grammar rules to
emphasize consistency and encoding user’s previous knowledge

Keystroke-level model (KLM):

Basis detailed predictions about user performance in interactive
tasks

Phases of Keystroke-level model:

• Acquisition: user builds a mental representation of the task
• Execution: doing the task using system facilities
 KLM operators:
• K: Keystroking/striking keys on the keyboard
• B: Pressing/clicking a mouse button
• P: Pointing/moving the mouse
• H: Homing/switching between mouse and keyboard
• D: Drawing lines with mouse
• M: Mental preparation of an action
• R: System response

Draw three state model:

Knowledge-level system:
System that exhibit rational behavior and contains agent that
behave in an environment, the agent will have knowledge about
itself, its goals and its environment

Stakeholders requirement issues:

• Free rider problem
• Critical mass
CUSTOM OSTA SSM
Socio-technical methodology Open system task analysis Soft system
based on user skill task a socio-technical approach methodology have the
match (USTM) practical for that describe what happens same tradition but view
small organizations and allow when an organizational task people and technology
designers to understand and is introduced technical as components of the
document user requirements system system
SSM elements or CATWOE for short:
• Clients: receive the output/benefit of the system
• Actors: perform activities within the system
• Transformations: changes effected by the system

Participatory design:
Philosophy that involves the user as a member of the design team
not only part of an experiment

Participatory design methods:

• Brainstorming
• Storyboarding
• Workshops
• Pencil and paper exercises
• Consultative

Face-to-face communication:
Most primitive yet most sophisticated form of communication
because it interplays between different channels and productivity

Types of context in a conversation:

• Internal: depend on earlier utterances
• External: depend on the environment

Types of textual communication:

• Discrete: directed message where no connection is between messages
• Linear: messages are added in order to form a single transcript
• Non-linear: messages linked in hypertext fashion
• Spatial: messages arranged in 2D form
Grounding constraints properties:
• Cotemporality: utterance is heard as its said
• Simultaneity: participants can send/receive at the same time
• Sequence: utterance ordered

Animation:
Adding motion to images as the time passes (ex: digital clocks)

Applications of animation:
• Video/audio
• Rapid prototyping
• Education
• Collaboration
• E-commerce

Web content issues:

• Bandwidth: amount of information that pass in a given time
• Latency: time for a message to go across network from the user to server and back
• Lossy

User view issues in the web:

• What changes
• Who changed it
• How often it changes

Dynamic content diagram:

 Lecture 7
Mobile ecosystem:

Operators:
The base layer of the ecosystem also known as mobile network
operators (MNO) such as service providers, carriers and cellular
companies they install cellular towers and operate the cellular
networks and overall make services available for mobile subscribers
the operator’s role id to create and maintain set of wireless services
over cellular network
Networks:
Cellular technology which is just a radio that receive signals from an antenna (ex: GSM 2G/ UMTS 3G)

Platforms:
Provide access to the device to run software and services
Types of platforms:
• Licensed: sold to device makers for nonexclusive distribution to create an API that work
across multiple devices with minimal effort (ex: Java micro edition (Java ME) most common,
binary runtime environment for wireless (BREW), windows phone, LiMo)
• Proprietary: designed by device makers to use on their devices and not available for
competitive devices (ex: palm, blackberry, iPhone)
• Open source: platforms freely available for all users to download alter and edit
(ex: Android)

Operating systems:
Have core services that enables the applications to talk to each
other and share data and services without it the application will be
walled (ex: symbian, windows mobile, palm OS, linux, Mac os x, android)

Application framework:
Run on top of OS and provide core services like communications,
messaging, graphics, location, security, and authentication (ex: S60,
javaME, android SDK)

Types of applications and services:

• SMS
o Pros
▪ Work on any mobile instantly
▪ Useful for sending alerts
▪ Can be integrated with any application
▪ Simple to set up and manage
o Cons
▪ Limited to 160 characters
▪ Provide limited text-based experience
▪ Very expensive
 • Mobile websites:
o Pros
▪ Easy to create, maintain, and publish
▪ Can use all the same tools as desktop sites
▪ All mobile devices can view them
o Cons
▪ Difficult to support across multiple devices
▪ Offer users limited experience
▪ Most of them are reformatted desktop sites
▪ Pages can load slowly due to latency
• Mobile web widgets:
Standalone chunk of HTML executed by the user, they are small and must run on top of
other applications like opera widgets, adobe flash or nokia web runtime (WRT)
o Pros
▪ Easy to create using HTML, CSS, and JavaScript
▪ Simple to deploy
▪ Offer improved user experience
o Cons
▪ Require compatible widget platform
▪ Cannot run in any mobile web browser
▪ Require learning additional proprietary techniques
• Native/Platform applications:
Mobile app/widget that targets or uses native features of the device, they are built
specifically for devices that run the same platform

Context: Surroundings in which information is processed

Types of context:
• Application context
• Utility context
• Locale context
Mobile information architecture:
Organization of data within an informational space
OR
How the user will get the information within the application

Types of mobile information architecture:

• Interaction design: how the user will interact with the system to create a
meaningful experience OR how users participate with the information presented
• Information design: how the user will assess meaning to the information presented
to them OR the visual layout of information
• Navigation design: labels and triggers used to tell the user what something is OR
words that describe the information spaces
• Interface design: design of visual paradigms to create an understanding

Clickstream:
Showing the behavior of the user on the website by displaying how
the user navigate the site based on logs from the server or heatmaps

Wireframes (information design):

A way to layout information on the page

Color Palettes
Set of predefined colors that are used to maintain consistency

Ways to choose a color palette:

• Sequential: the brand color is used as a primary color and the secondary and tertiary
colors are complementary colors picked using a color wheel
• Adaptive: use most common color present in supporting graphic/image to look native
to the device and achieve consistency within the targeted platform
• Inspired