Contents

Lec 1: Introduction................................................................................................. 2
What is Interaction Design?.............................................................................2
The User Experience (UX):...............................................................................3
Lec 2: Concept....................................................................................................... 3
Problem Spaces............................................................................................... 3
Conceptualising............................................................................................... 3
Interaction....................................................................................................... 3
LEC 3..................................................................................................................... 4
Cognitive Processes......................................................................................... 4
Lec 4...................................................................................................................... 6
Emotional Interaction......................................................................................... 6
Emotional Design Model.................................................................................. 6
Anthropomorphism.......................................................................................... 7
Social Interaction................................................................................................ 8
Lec 5...................................................................................................................... 9
Data Gathering................................................................................................... 9
Data Analysis.................................................................................................... 10
Interfaces ( Just remember the types and read for understand).......................12
Interaction Design............................................................................................ 15
Lec 6: Story, Persona........................................................................................... 16
User Story (Brief)........................................................................................... 16
Scenarios and Personas................................................................................. 16
UI/UX Requirements...................................................................................... 16
Style Guides (Branding Guidelines)...............................................................17
Card Sorting.................................................................................................. 17
Task Analysis................................................................................................. 17
Lec 7: Prototyping................................................................................................ 18
Low-Fidelity Prototyping Techniques:............................................................19
High-Fidelity Prototyping:.............................................................................. 20
Lecture 8,9: Usability Evaluation.........................................................................21
Heuristic Evaluation....................................................................................... 22
10 Usability Characteristics:..........................................................................22
Shneiderman’s 8 Golden Rules of Interface Design:......................................23
Interaction Design Foundation – Method.......................................................24
Cognitive Walkthroughs (CW):.......................................................................24
 Predictive Models.......................................................................................... 24
Lec 10 Accessibility and Special Issues in HCI.....................................................26

Green: Just read and understand

Orange: Understand and remember the main
points
Red: Very important

Lec 1: Introduction
Human-computer interaction is a discipline concerned with the design,
evaluation and implementation of interactive computing systems for human use
and with the study of major phenomena surrounding them.

What is Interaction Design?

Designing interactive products to support the way people communicate and
interact in their everyday and working lives.
 good design emphasizes intuitive and user-friendly interfaces.
 importance of considering users, activities, and interaction contexts in
design.
 Interaction design is defined as designing interactive products to support
everyday and working life interactions.
Process:
1. Establishing requirements
2. Developing alternatives
3. Prototyping
4. Evaluating
Usability Goals/Guidelines:
• Effective to use (effectiveness)
• Efficient to use (efficiency)
• Safe to use (safety)
• Having good utility (utility)
• Easy to learn (learnability)
• Easy to remember how to use (memorability)
Roles:
 interaction designers - people involved in the design of all the
interactive aspects of a product.
 usability engineers - people who focus on evaluating products, using
usability methods and principles
  web designers - people who develop and create the visual design of
websites,such as layouts
 information architects - people who come up with ideas of how to plan
andstructure interactive products
 user experience designers (UX) - people who do all the above but who
mayalso carry out field studies to inform the design of products

Characteristics of ID:
 Users should be involved through the development of the project
 Specific usability and user experience goals need to be identified, clearly
documented and agreed at the beginning of the project
 Iteration is needed through the core activities

The User Experience (UX):

(UX) is an approach to product development that incorporates direct user
feedback throughout the development cycle (human-centered design) in order to
reduce costs and create products and tools that meet user needs and have a
high level of usability (are easy to use).
 Defines UX as the users' feelings, pleasure, and satisfaction when using a
product.
 Emphasizes designing for a positive user experience from the start.
Design Principles: Covers principles like visibility, feedback, constraints,
consistency, and affordances to enhance usability and user experience.

Lec 2: Concept
Problem Spaces
Understanding the Problem Space: This entails determining what you aim to
create, identifying your assumptions, and assessing whether your design will
achieve the desired outcomes.
Assumptions and Claims: An assumption is something taken for granted that
requires further investigation, while a claim is a statement considered true but
still open to question.
Analysing the Problem Space: This involves identifying problems with existing
products or user experiences, understanding the reasons behind these problems,
and proposing design ideas to address them.

Conceptualising
Benefits of Conceptualization: Conceptualizing the design space helps teams
Orient ask specific questions, remain open-minded, and establish common
ground, facilitating the design process.
From Problem Space to Design Space: Understanding the problem space
informs the design space, but before making design decisions, it's essential to
develop a conceptual model.
Conceptual Model: A high-level description of how a system is organized and
operates, enabling designers to clarify their thinking before designing.
1. Components of a Conceptual Model: These include metaphors: and
analogies: Understanding what and how a product is used, concepts
exposed through the product: task–domain objects, their attributes, and
operations, relationships between concepts, and mappings between
concepts and user experiences.
2. Formulating a Conceptual Model: This involves determining user tasks,
how the system will support them, suitable interface metaphors,
interaction modes, and styles.
Interface Metaphors: These conceptualize activities, objects, or both, making
learning new systems easier and helping users understand the underlying model.
Benefits and Problems with Interface Metaphors:
 interface metaphors aid user understanding and makes learning easier.
Can be innovative making systems more accessible
 they also break cultural rules, constrain designers, conflict with design
principles, and limit imagination.

Interaction
Types of Interaction:
1. Instructing: very common where Users issue commands and select
options supports quick and efficient interaction.
2. Conversing: Users interact with systems as if having a conversation.
Range from simple voice recognition to complex dialogues. Easier for new
people to interact but issues can arise when system doesn’t understand.
3. Manipulating: Users interact with objects by manipulating them like
dragging, selecting, opening, closing.
 Advantages of Direct Manipulation (DM): Novices learn basic
functionality quickly, Experienced users work rapidly, Intermittent
users retain operational concepts over time, rarely need error
messages, Immediate feedback on actions towards goals.
 Disadvantages of DM: Some users take the metaphor too literally,
Not all tasks fit the object/action model, Delegating tasks like spell
checking may be more efficient, Can consume excessive screen
space, Mouse navigation can be slower than keyboard shortcuts
4. Exploring: Users navigate through virtual or physical environments.
Choosing the appropriate interaction type depends on various factors,
including the requirements and needs of the users, budget constraints, and
 the suitability of the technology for the activity being supported. Here are
some considerations when deciding which interaction type to choose:
 User Requirements and Needs
 Budget and Constraints
 Suitability of Technology
 Designing Conceptual Models

LEC 3
Why Understand Users:
 Interacting with technology is cognitive.
 Understanding cognitive processes and limitations is essential.
 It helps identify user capabilities and potential challenges.
 Aids in recognizing and addressing user problems effectively.

Cognitive Processes
1. Attention:
 Interface should capture attention using perceptual cues.
 Multitasking efficiency varies depending heavy and light
multitasking.
 Design Implication: Make information salient when attention is
required. Use perceptual cues like color, spacing, and animation to
highlight important elements. Avoid cluttering the interface with
excessive information.
2. Perception:
 Design representations for easy perception (legible text,
distinguishable icons).
 Consider factors like color contrast, borders, and white space.
 Design Implication: Ensure text is legible and icons are easily
distinguishable. Utilize effective visual grouping techniques such as
borders and spacing. Use audible and distinguishable sounds to
enhance perception.
3. Memory:
 Encoding and retrieval of knowledge are crucial.
 Context influences information retrieval.
 Differentiate recognition and recall memory.
 Use the 7 rule: present 7 options, icons, bullets in a list etc
 Design Implication: Design interfaces that promote recognition
over recall. Provide various ways for users to encode information,
 such as categorization, color-coding, and time stamping. Avoid
overloading users' memory with complicated procedures.
4. Learning:
 Prefer learning by doing over passive methods.
 Design interfaces to encourage exploration and support learning.
 Design Implication: Design interfaces that encourage exploration
and hands-on learning. Provide clear instructions, tutorials, and
contextual guidance to support learning-by-doing. Dynamically link
concepts and representations to facilitate understanding of complex
material.
5. Reading, Speaking, Listening:
 Preferences and difficulties in reading, speaking, and listening.
 Many prefer listening to reading
 – Reading can be quicker than speaking or listening
 – Listening requires less cognitive effort than reading or Speaking
 – Dyslexics have difficulties understanding and
 Recognizing written words
 Design interfaces with speech-based options and adjustable text
sizes.
 Design Implication: Design speech-based options with short
menus and instructions. Provide options to adjust text size for
easier reading. Consider different preferences and difficulties users
may have in reading, speaking, and listening.
6. Problem-solving, Planning, Reasoning, Decision-making:
 Involve reflective cognition and conscious processes.
 Provide additional support for decision-making and planning.
 Design Implication: Provide additional information and functions
for users to understand activities more effectively. Use simple
computational aids to support rapid decision-making and planning,
especially for users on the move.
7. Mental Models:
 Concerned with explaining how we interact with External
representations (such as maps, notes, and Diagrams)
 Users develop understanding through system interaction.
 External cognition aids in task completion and memory offloading.
 Examples include the use of diaries, reminders, Calendars, notes,
shopping lists, to-do lists
  Computational offloading: When a tool is used in conjunction with
an External representation
 Annotation and cognitive tracing: Annotation involves modifying
existing Representations through making marks ie highlight
 Design Implication: Ensure clear and easy-to-use instructions to
help users build accurate mental models. Offer appropriate tutorials
and contextual guidance. Provide transparency in interface design
to make interactions intuitive. Incorporate affordances that signify
available actions clearly.

Lec 4
Emotional Interaction

Emotions and the User Experience: HCI focuses on designing interactive

systems that evoke specific emotional responses. Emotional interaction involves
how users feel and react while interacting with technology.

Emotional Design Model

 Norman, Ortony, and Revelle's (2004) model highlights how emotional
states affect thinking and behavior.
 Emotional states influence focus, tolerance, creativity, and physical
responses.
Expressive Interfaces:
 Interfaces use colors, icons, sounds, and animations to convey emotional
states.
 Reassuring feedback enhances user experience, but intrusive elements
can lead to annoyance.
Friendly Interfaces:
 Incorporates 3D metaphors and agent characters to create familiarity and
comfort for users.
Frustrating Interfaces:
 Various causes include malfunctioning applications, unmet expectations,
unclear instructions, and garish designs.
 Gimmicky elements, such as under-construction pages, add to frustration.
Error Messages:
 Shneiderman's guidelines advocate for clear, concise, and helpful error
messages.
 Avoid technical jargon, use precise language, and provide context-
sensitive help.
Apologies from Computers:
  Reeves and Nass propose computers should apologize for errors.
 Questions arise about sincerity and effectiveness compared to human
apologies.
Facial Coding:
 Measures user emotions through facial expressions during computer
interactions.
 Analyzes expressions like sadness, happiness, disgust, fear, surprise, and
anger.
Using Emotional Data:
 Emotional data can adapt website content based on user reactions.
 Indirect emotion detection, like analyzing tweets, is emerging to predict
behaviour.
Tracking Devices:
 Mobile apps track behaviour (fitness, sleep, weight) and provide
comparisons with peers.
 Reflection-oriented apps aim to enhance well-being and happiness.

Anthropomorphism
 Attributing human-like qualities to inanimate objects.
 Common in advertising and human-computer interaction.
 Aimed at making user experiences more enjoyable, motivating, and
anxiety-reducing.
Preference in Messages:
 Users often prefer personalized and friendly messages over impersonal
ones.
 Feedback and communication style can affect user engagement and
motivation.
Evidence for Anthropomorphism:
 Positive feedback in educational software has been found to have a
beneficial impact on users' motivation.
 Personalized feedback can increase user willingness to continue with
tasks.
Criticism of Anthropomorphism:
 Some users find anthropomorphized interfaces deceptive or anxiety-
inducing.
 Personalized feedback may be perceived as less honest and reduce user
responsibility.
Virtual Characters:
  Virtual agents, such as sales agents or learning companions, provide
welcoming and engaging personas.
 They can elicit emotional responses and influence user trust and
interaction styles.
Disadvantages of Virtual Agents:
 Users may confide personal secrets with chatterbots, leading to privacy
concerns.
 Some virtual agents can be annoying or frustrating, like Clippy.
 Trustworthiness of virtual shop assistants may be questioned.
Believability of Virtual Agents:
 Appearance and behaviour are crucial for the believability of virtual
agents.
 Realistic appearance and behaviour, including facial expressions,
contribute to believability.
Implications:
 Designers may need to create products that adapt to users' emotional
states.
 Aesthetically pleasing and well-designed interfaces can enhance user
experience.
 Emotional technologies can persuade users to change behaviors or
attitudes.

Social Interaction
Conversational Mechanisms:
 Conversations follow various rules, including mutual greetings and turn-
taking.
 Rules facilitate coordination and flow in dialogue.
Being Social
 Social media interactions raise questions about the shift from face-to-face
conversations.
 Comparison between online and offline friendships and interactions.
 Examination of changing social norms and etiquette.
Conversational Rules:
 Sacks et al. (1978) identified three basic conversational rules: speaker
selection, turn-taking, and continuation.
 Turn-taking helps coordinate dialogue, while back-channeling signals
engagement.
  Farewell rituals and implicit/explicit cues contribute to conversation flow.
 Breakdowns occur when there's misunderstanding, typically resolved
through repetition or tokens.
Remote Conversations:


 Various applications developed, such as email, videoconferencing, and

chatrooms.
Facebook and Twitter:
 Widely used platforms with implications for information sharing and rumor
propagation.
 Utilized in emergencies but can also spread misinformation.
Coordination Mechanisms:
 Groups need to coordinate actions and interactions, such as playing
football or navigating a ship.
 Coordination involves verbal and non-verbal communication, schedules,
rules, and shared representations.
Co-presence:
 Technologies facilitate effective collaboration for co-located groups,
whether working, learning, or socializing.
 Examples include Smartboards, Surfaces, Wii, and Kinect.
Face-to-Face (F2F) Coordinating Mechanisms:
 Talk is central, supplemented by non-verbal cues like nods, gestures, and
hand-raising.
 Formal meetings use explicit structures like agendas and minutes.
Awareness Mechanisms:
 Involves knowing who is present, what is happening, and who is
interacting with whom.
 Peripheral awareness allows tracking activities in the periphery of ibilion.
Designing Technologies to Support Awareness:
 Technologies provide awareness of remote collaborators and workspace
interactions.
 Examples include ReacTable, Reflect Table, and Dynamo system.
Lec 5
Data Gathering

Techniques for Data Gathering:

1. Business Documents: Analysing documents related to business
processes and operations using diagrams like UML or software like logging
keystrokes.
2. Observation: Directly or indirectly observing and documenting business
processes and tasks, either in the field or controlled environments.
Combining document analysis with direct observation to understand
business processes.
 Planning and Conducting Observation: Deciding observation
levels, gaining acceptance, handling sensitive topics, and structuring
observations.
 Structuring Frameworks: Frameworks like "Who, Where, what"
and space, actors, activities, objects, acts, events, time, goals,
feelings framework to guide observation.
 Observation in Controlled Environments: Direct and indirect
observation methods, including think-aloud techniques and tracking
user activities through diaries logs etc.
 Key issues: Setting goals, Identifying participants, Relationship &
triangulation.
3. Interviews:
 Structure: Unstructured, Structured, Semi-structured, Focus groups
 One-on-one Interviews: Conducting interviews individually to
gather insights and perspectives.
 Group Interviews (Focus Groups): Organizing group discussions
to gather collective opinions and feedback.
 Techniques:
1. Interview Questions: Types of questions (closed and open),
Avoid long, compound, jargon, leading questions, and running
the interview process by introduction, warm-up, main body,
cool off, closure.
2. Advantages of Interviews: Feedback opportunities, probing
complex answers, flexibility with unstructured questions, and
the use of props and visual aids.
3. Disadvantages of Interviews: Cost, lack of anonymity,
variance effects, dishonesty, personal style influence, and
global considerations.
4. Enhancing Interviews: Techniques like "Tell me more,"
"Why?" and using silence effectively.
 4. Questionnaires: Administering surveys with structured questions to
collect data from a large population.
 Question Types and Formats: Open and closed questions, various
response formats like checkboxes, dropdown lists, and rating scales.
 Advantages of Questionnaires: Wide reach, quick distribution,
fast responses, and ease of data collection and analysis.
 Disadvantages of Questionnaires: Sampling issues,
questionnaire design challenges, participant reliability, and impact of
question order.
 Encouraging a Good Response: Clarity of purpose, anonymity
assurance, well-designed questionnaire, providing incentives, and
follow-up strategies.
5. Use Case Analysis: Analysing specific scenarios to understand user
interactions and system requirements.
6. Brainstorming Sessions: Collaborative sessions to generate ideas and
insights from participants.
7. Requests for Information/Proposals/Tenders/Quotations: Soliciting
formal responses from stakeholders for specific information or proposals.
Choosing and Combining Techniques: Decision factors include focus,
participant type, nature of techniques, available resources, and time constraints.

Data Analysis
Quantitative and Qualitative Data:
 Quantitative Data: Expressed as numbers. Involves
measurements or counts, such as word count to measure
dissatisfaction.
 Qualitative Data: Non-numeric in nature. Analysed using
numerical methods to identify themes, patterns, and stories.
Quantitative Analysis:
 Involves statistical measures like mean, median, mode, and percentages.
 Graphical representations provide an overview of data.
 Identifies recurring patterns or themes emerging from the data.
 Categorizes data based on emergent or pre-specified schemes.
 Looks for critical incidents to focus on key events.
Tools for Data Analysis:
 Spreadsheet software for basic analysis and graphs.
 Statistical packages like SPSS and R.
 Qualitative data analysis tools such as NVivo and Atlas.ti for categorization
and theme-based analysis.
Presenting Findings:
 Claims should be supported by data.
 Presentation methods depend on the audience, purpose, and analysis
undertaken.
 Graphical representations are useful for presentations.
Use Case Description:

User Story:
 Less structured than a use case, commonly used in Agile and Design
Thinking.
 One-sentence description of a user's task to achieve a goal.
 Includes acceptance criteria specifying features required for task
completion.
FRUPS+:
 A way of categorizing requirements:
 Functionality
 Usability
 Reliability
 Performance
 Security
 Plus additional constraints or standards.
Interfaces ( Just remember the types and read for
understand)
Discusses various interface types, highlighting design and research issues for
each. Considers the suitability of different interfaces for various applications or
activities.
Types:
1. Command-based:
 Involves typing commands at a prompt for system response.
 Efficient but has a learning curve due to memorizing commands.
 Form, name types and structure are key. Consistency is important. Popular
for web scripting
2. WIMP and GUI (Graphical User Interface):
 Originated with Xerox Star, GUIs provide visual elements like icons,
menus, and windows and pointing devices.
 Evolved to include color, 3D, sound, animation, and varied graphical
elements.
 Challenges include designing GUIs for different devices like tablets and
smartphones.
 Window: Overcome constraint of display, scroll bars help more
info, multiple windows can make it difficult to find 1.
 Challenges: window management, switching and spacing
grouping etc
 Menu: flat lists, drop-down, pop-up.
 Flat: Good at displaying less options but have to nest options
making it lengthy
 Expanding: Enables more option to be shown on 1 screen
more flexible most popular cascading.
 Contextual: Provide access to commands that make sense
in current context, appears when pressing control key while
clicking at an element
 Challenges: Deciding best name/labels etc, Placement, and
choice of menu for app and device
 Icon: Easier to learn and remember, are compact.
 Types: Similar, Analogical: scissors to cut, arbitrary: x to
delete
 Challenges: Extensive resources, text labels to help identify,
use rollovers
3. Multimedia:
 Integrates various media types (graphics, text, video, sound) with
interactivity.
 Pros: rapid access, better presentation, easier learning and understanding,
encourages explorations
4. Virtual Reality (VR):
 Computer-generated simulations providing immersive experiences.
 Pros & Cons: Offers high fidelity, different pov’s and sense of presence but
can cause discomfort like motion sickness.
 Issues: navigation, interactions and movements and realism
5. Information Visualization and Dashboards:
 Interactive graphics representing complex data for better understanding
and decision-making.
 Dashboards provide real-time snapshots of data, aiding quick analysis.
6. Web:
 Initially text-based, now emphasizes aesthetics and user experience.
 Challenges include balancing usability with attractiveness and dealing with
intrusive advertising.
7. Consumer Electronics and Appliances:
 Everyday devices with simple interfaces for short interactions.
 Design should prioritize simplicity and ease of use, consider between soft
and hard controls.
8. Mobile:
 Handheld devices used on the go, with apps for various tasks.
 Challenges include limited screen space and varied physical controls,
usability and preferences, difficult for people with fat fingers.
9. Speech:
 Allows users to interact with systems using spoken language.
 Mainly used for specific inquiries and transactions, often in call routing
systems.
 Format: directed dialogs asking specific questions and responses. More
flexible has more chance of error.
 Challenges: How to design systems to keep people on track, voice actor
10. Pen:
 Enables writing, drawing, and object manipulation using styluses or digital
pens.
  Allows quick annotation but may be difficult to see options and
responsiveness issues.
11. Touch Interfaces:
 Used in touch screens for dynamic interactions, with option for multi
touch.
 Challenges include gesture recognition, size orientation and shape of
display and virtual keyboard usability error rate.
12. Air-based Gestures:
 Recognizes body and hand gestures for interaction through camera which
are mapped to motions.
 Challenges include accurate gesture recognition and control methods.
13. Haptic Interfaces:
 Provides tactile feedback for enhanced user experience and also simulate
sense of touch.
 Challenges include determining appropriate feedback, location intensity
and integration.
14. Multi-modal Interfaces:
 Integrates multiple modes of interaction (touch, sight, sound, speech).
 Research focuses on analysing user inputs, benifits and designing
seamless interactions.
15. Shareable Interfaces:
 Designed for multiple users, promoting collaboration like a touchboard.
 Challenges include designing for equitable participation and intuitive
interaction.
16. Tangible Interfaces:
 Physical objects interact with digital representations.
 Encourages creativity and new perspectives.
 Challenges: developing new frameworks and what kinds of physical
artifacts
17. Augmented and Mixed Reality:
 Combines virtual and real-world environments.
 Challenges include device selection and integration with the physical
world.
18. Wearables:
 Devices integrated into clothing or accessories.
 Challenges include comfort, Hygiene, usability, and control.
19. Robots and Drones:
 Utilized in various domains for assistance and exploration like remote,
domestic, pet and sociable.
  Design considerations include human-robot interaction and user
acceptance.
20. Brain-Computer Interfaces (BCI):
 Allows direct communication between the brain and external devices.
 Challenges include training users and interpreting neural signals.

Interaction Design
Why, What, Where, and When to Evaluate: Evaluation is iterative,
examining why (user requirements), what (conceptual models and prototypes),
where (settings), and when (throughout design).
Bruce Tognazzini on Evaluation: Iterative design, incorporating user testing,
consistently produces successful results.
Types of Evaluation:
 Controlled settings (usability testing, lab experiments).
 Natural settings (field studies, in-the-wild studies).
 Settings not involving users (analytics, modeling).
Living Labs:
 Evaluate technology use in everyday life.
 Difficult to replicate in traditional usability labs.
Evaluation Case Studies:
 Experiment on a collaborative game.
 Field study of skiers.
 Crowdsourcing.
Evaluation Methods:
 Controlled settings: observing, asking users, testing.
 Natural settings: observing, asking users.
 Without users: observing, asking experts, modeling.
Language of Evaluation: Terms such as analytics, ecological validity, heuristic
evaluation.
Participants' Rights and Consent: Participants must understand the
evaluation purpose and their rights, typically through informed consent forms.
Interpreting Data: Consider reliability, validity, ecological validity, biases, and
scope when interpreting results.
Lec 6: Story, Persona
User Story (Brief)
 Definition: A user story is a concise description of a task performed by a
user to achieve a specific goal, typically used in agile development and
design thinking methodologies.
 Structure: User stories follow a template: "As a [role], I want to [goal] so
that [benefit]." They are less structured than use cases and focus on the
user's perspective.
 Acceptance Criteria: These criteria outline the features that must be
present upon completion of the task, ensuring that user needs are met.
Considerations in Interaction Design
 Importance of Involving Users: Realistic expectations, timely training,
and communication are key. Making users active stakeholders enhances
product acceptance and success.
 Ownership and Degree of Involvement: Users can be primary,
secondary, or tertiary stakeholders, each with varying levels of interaction
with the product.
 Identifying Users/Stakeholders: Users include direct interactors,
managers, recipients of output, decision-makers, and even users of
competitor products.
 Understanding User Needs: Users may not always know what they
need, so examining existing tasks, contexts, and collaborations is crucial.
Better Brainstorming and Choosing Alternatives
 Focus on Questions: Instead of seeking immediate answers, focus on
asking insightful questions to generate breakthrough insights.
 Alternative Solutions: Users often default to what they know; designers
must propose different designs and concepts to explore new possibilities.
 Evaluating Alternatives: Prototypes help evaluate solutions, considering
technical feasibility, quality thresholds, and usability goals.

Scenarios and Personas

 Scenarios: Narrative stories depicting how users achieve goals or
perform actions in a planned system. They capture user motivations and
processes.
 Personas: Fictional characters representing different user types based on
research. They help designers empathize with users and inform design
decisions.
 Task Descriptions: Scenarios are informal narratives, while use cases
assume interaction with a system. Essential use cases abstract away
details and focus on core functionalities.
UI/UX Requirements
 Functional Requirements: Specify what the system should display or do
for the user.
 Non-functional Requirements: Include aspects like security, response
time, and scalability.
 Data Requirements: Define what data the system needs to collect and
store, and how it will be stored.
 Environment/Context of Use: Consider physical, social, and
organizational factors that impact user interaction, such as environmental
conditions and organizational hierarchies.

Style Guides (Branding Guidelines)

 Definition: Style guides are documents that detail the visual and tonal
elements of a brand, including colors, fonts, logos, imagery, patterns, and
tone of communication.
 Purpose: They ensure consistency in interface designs across an
organization or team, helping to maintain brand identity and coherence.

Card Sorting
 Definition: Card sorting is a method used in the early design phase of a
project to define the architecture of a system by gathering information
about the associations and grouping of specific data items.
 Technology: It can be conducted using low-tech methods like index cards
or post-it notes, or high-tech solutions such as OptimalWorkshop or
UserZoom.
 Approaches: Card sorting can be done individually, in small groups, or
using a mixed approach combining individual and group discussions.
 Types: Open card sorting allows participants to create their own
categories, while closed card sorting provides predefined categories.

Task Analysis
 Hierarchical Task Analysis (HTA): This method involves breaking down
a task into subtasks and further sub-dividing them into plans that specify
how the tasks might be performed in practice.
  Focus: HTA focuses on physical and observable actions, including those
not directly related to software or interaction devices.
 Process: It starts with identifying user goals, then breaks them down into
main tasks and subtasks, ultimately creating a hierarchical structure of
tasks.
 Example: An example of HTA involves buying a DVD, with tasks such as
locating the DVD, adding it to the shopping basket, entering payment
details, completing the address, and confirming the order.

Lec 7: Prototyping
Design, Prototyping, and Construction:
 Conceptual Design: Transforming user requirements into a conceptual
model.
 Concrete Design: Refining aspects like colors, icons, buttons, etc.
 Using Scenarios: Employing scenarios to understand how users interact
with the product.
 Generating Prototypes: Creating prototypes to visualize and test design
ideas.
 Construction: Building the final product based on the prototype.
Process:
 Research
 Lo-Fi
 Lo-Fi Testing
 Hi-Fi
 Hi-Fi Testing
 Delivery
Prototyping:
  Definition: A prototype in interaction design can take various forms such
as screen sketches, storyboards, PowerPoint presentations, videos, or
software with limited functionality.
 Purpose: Prototyping facilitates evaluation, feedback, effective
communication among team members, idea testing, reflection, and
decision-making.
 What to Prototype: Technical issues, workflow, task design, screen
layouts, information display, critical areas, etc.
Types of Prototypes:
 Low-Fidelity (Lo-Fi): Utilizes mediums unlike the final product, such as
paper or cardboard. Examples include sketches, post-it notes, or
storyboards.
 Advantages: Quick, cheap, easily changed, less attachment by
designers, stakeholders recognize work in progress.
 Disadvantages: Uncertainty during testing, requires user
imagination, limited interactivity.
 High-Fidelity (Hi-Fi): Represents the final product closely, often using
digital tools to simulate interactions and visuals.

Low-Fidelity Prototyping Techniques:

 Sketching: Practice simple symbols to represent interface elements.
 Wireframes: 2D illustrations focusing on space allocation, functions,
content sections, and intended behaviors. Traditionally lacks styling, color,
and graphics.
 Value: identify functionality, space allocation, consistency and links
between architecture and design
 Card-Based Prototypes: Each card represents one screen or part of the
screen, useful for generating prototypes from use cases.
 Storyboards: Illustrate interactions between users and products through
drawings, sketches, or pictures, creating meaning beyond technical
drawings.
How to do Paper Prototyping:
 Sketch interface prototypes on paper.
 Build interaction flow charts.
 Users walk through task scenarios using paper interface.
 Designers modify design on-the-fly.
Which Part of Software to Prototype:
 Focus on frequently performed tasks by important users.
 Prototype until other tasks are similar.
Constructing the Paper Model of GUI:
 Set deadline and draw window frame.
 Use cards for screen regions and ready responses.
 Use photocopier to create multiple versions.
Interaction Flow Chart:
 Diagram with directed arrows denoting user interaction steps.
 Each node represents a GUI element.
How to do a Walk Through: Goal is to discover usability problems. Use
heuristic evaluation or testing with priority user group.
Potential Difficulties: Large focus on content or dynamic interfaces may pose
challenges. Prototype main interactions; complex features may require real
testing.

High-Fidelity Prototyping:
Definition: High-fidelity prototyping involves using materials and components
that closely resemble those expected in the final product, including visual
design, content, and interactivity.
Advantages:
 Complete Functionality: Can demonstrate full system capabilities.
 Interactivity: Allows testing of workflow and user interaction.
 User-Driven: Provides a clearer understanding of the user's experience.
 Navigation Scheme: Clearly defines the navigational flow of the final
product.
 Exploration and Testing: Useful for exploring design alternatives and
conducting testing.
 Living Specification: Serves as a detailed specification of the final
product.
 Marketing and Sales Tool: Can be used to showcase the product to
stakeholders, investors, or potential clients.
Disadvantages:
 Cost: Development costs are higher due to the resources required.
 Resource Intensive: Requires more resources and time to develop.
 Time-Consuming: Creation process is slower compared to low-fidelity
prototyping.
 Inefficient for Proof-of-Concept: Not suitable for quick proof-of-concept
designs.
  Not Effective for Requirements Gathering: Less effective for
gathering initial requirements due to the level of detail involved.
Using Scenarios:
 Scenarios are used to express proposed or imagined situations throughout
the design process.
 They serve as the basis for overall design, scripts for user evaluation of
prototypes, concrete examples of tasks, and facilitate cooperation across
professional boundaries.
 Plus and minus scenarios can be used to explore extreme cases and edge
conditions.
Exploring the User's Experience:
 User experiences can be modelled Susing personas, card-based
prototypes, or post-it-notes.
 Visual representations such as design maps, customer/user journey maps,
and experience maps help understand the user's journey.
 Common representations include the wheel and timeline formats.

Testable Prototype:
 A testable prototype is a candidate design solution that allows users to
interact with an actual example of the system.
 Options include single-page vs. multipage prototypes, realistic and
detailed vs. hand-sketched, and interactive vs. static prototypes.
Example Tools: Axure RP Adobe XD Balsamiq JustInMind UXPin Mockplus Pencil
Construction: Physical Computing:
  Prototypes can be built and coded using electronic components such as
Arduino, LilyPad, Raspberry Pi, etc.
 These toolkits are designed for use by a wide range of people and allow
for the integration of physical elements into the design process.

Lecture 8,9: Usability Evaluation

Usability Evaluation Methods (UEMs):
 Quick and Dirty Evaluations
 Informal Usability Testing
 Field Studies
 Predictive Evaluation
 Expert-Based Evaluation
 Theory-Based Evaluation
User-Based Evaluation:
 Focuses on performance, non-verbal behavior, attitude, cognition, stress,
and motivation.
 Emphasizes user experience and the interconnectivity between usability
and user experience.
Expert-Based Evaluation:
 Involves expert reviews guided by knowledge of users and technology.
 Expert critiques can be formal (heuristic evaluation) or informal
(walkthroughs).
Evaluation Methods:
 Observing, asking users, asking experts, testing, modeling.
 Testing in natural settings can be challenging but possible.

Heuristic Evaluation
 Experts evaluate software usability based on a set of heuristics.
 Heuristics are guidelines distilled from empirical analysis.
 Jakob Nielsen's ten usability characteristics form the basis for heuristic
evaluation.
Advantages of Heuristic Evaluation:
 Focuses attention on specific issues.
 Does not involve ethical and practical issues of real user testing.
 Helps identify usability problems with individual elements.
Issues with Heuristic Evaluations:
 Difficulty in finding appropriate experts.
 Time-consuming compared to other methods.
 Based on preconceived ideas of usability.
 Experts may have biases and miss important problems.
Stages for Heuristic Evaluation:
1. Briefing session for experts.
2. Evaluation period where experts work separately.
3. Debriefing session to prioritize problems collaboratively.

10 Usability Characteristics:
1. Visibility of system status: The system should always keep users
informed about what is going on, through appropriate feedback within
reasonable time.
2. Match between system and the real world: The system should speak
the users' language, with words, phrases and concepts familiar to the
user, rather than systemoriented terms. Follow real-world conventions,
making information appear in a natural and logical order.
3. User control and freedom: Users often choose system functions by
mistake and will need a clearly marked "emergency exit" to leave the
unwanted state without having to go through an extended dialogue.
Support undo and redo.
4. Consistency and standards: Users should not have to wonder whether
different words, situations, or actions mean the same thing. Follow
platform conventions.
5. Error prevention: Even better than good error messages is a careful
design which prevents a problem from occurring in the first place. Either
eliminate error-prone conditions or check for them and present users with
a confirmation option before they commit to the action.
6. Recognition rather than recall: Minimize the user's memory load by
making objects, actions, and options visible. The user should not have to
remember information from one part of the dialogue to another.
Instructions for use of the system should be visible or easily retrievable
whenever appropriate.
7. Flexibility and efficiency of use: Accelerators -- unseen by the novice
user -- may often speed up the interaction for the expert user such that
the system can cater to both inexperienced and experienced users. Allow
users to tailor frequent actions.
8. Aesthetic and minimalist design Dialogues should not contain information
which is irrelevant or rarely needed. Every extra unit of information in a
dialogue competes with the relevant units of information and diminishes
their relative visibility.
 9. Help users recognize, diagnose, and recover from errors: Error
messages should be expressed in plain language (no codes), precisely
indicate the problem, and constructively suggest a solution.
10. Help and documentation: Even though it is better if the system
can be used without documentation, it may be necessary to provide help
and documentation. Any such information should be easy to search,
focused on the user's task, list concrete steps to be carried out, and not be
too large.
Nielsen suggests that on average 5 evaluators identify 75- 80% of usability
problems.

Shneiderman’s 8 Golden Rules of Interface Design:

1. Strive for consistency.
2. Enable frequent users to use shortcuts.
3. Offer informative feedback.
4. Design dialogue to yield closure.
5. Offer simple error handling.
6. Permit easy reversal of actions.
7. Support internal locus of control.
8. Reduce short-term memory load.
Heuristics for Websites: Focus on key criteria such as clarity, minimizing
complexity, providing context, and promoting positive user experiences.

Interaction Design Foundation – Method

1. Establish an appropriate list of heuristics.
2. Select your evaluators.
3. Brief your evaluators so they know exactly what they are meant to do and
cover during their evaluation.
4. First evaluation phase
5. Second evaluation phase
6. Record problems.
7. Debriefing session

Cognitive Walkthroughs (CW):

 Task-specific approach focusing on ease of learning.
 Experts walk through design prototypes with scenarios, guided by three
questions.
1. Will the correct action be sufficiently evident to the user?
2. Will the user notice that the correct action is available?
3. Will the user associate and interpret the response from the action
correctly?
  Cognitive Walkthrough for the Web (CWW) adapts the method for web
development.
Pluralistic Walkthrough:
 Variation on the cognitive walkthrough
 Performed by a carefully managed team.
 The panel of experts begins by working separately.
 Then there is managed discussion that leads to agreed decisions
 The approach lends itself well to participatory design

Predictive Models
 Evaluate systems without user involvement.
 Use formulas to predict user performance.
 Examples include the GOMS model and the Keystroke Level Model (KLM).
Goms:
 Goals
 Operators: cognitive processes and physical actions
 Methods: - learned procedures for accomplishing the goals
 Selection Rules: determine which method to select when there is more
than one available.

Versions:
 CMN-GOMS – Card, Moran, and Newell
 KLM – Keystroke Level Model
 NGOMSL
 CPM-GOMS

Keystroke Level Model (KLM)

 The Keystroke Level Model (KLM) is a quantitative modelling tool designed to
predict how long a user would take to complete a task without errors. It
assigns specific times for various physical and mental operators involved in
interacting with a system, such as keystrokes, button clicks, mouse
movements, keyboard to mouse movements, and mental operations
(thinking).
 Prior Historical Research:
 Homing: Moving hand to keyboard or mouse - 360ms
 Clicking: Mouse - 230ms
 Pointing: With the mouse - 1100ms
 Mental Operations: Deciding what to do - 1350ms
 The KLM formula for calculating the expected time for a task is: Texpected
=TK+TP+TH+TD+TM+TR
 Fitts’ Law: Fitts’ Law predicts that the time to point at an object using a
device is a function of the distance from the target object and the object’s
size. It is useful for evaluating systems where the time to locate an object is
important, such as cell phones and handheld devices.
Benefits of GOMS:
 Allows for comparative analysis of different interfaces.
 Can be adapted for new and innovative products.
Limitations of GOMS:
 Narrow focus on efficiency and time.
 Limited practicality in real-world scenarios.
 Lack of user involvement.
 Applicable primarily to routine data-entry tasks.
 Predicts idealized performance and does not model errors.
 Does not consider the user’s state, such as fatigue or multitasking.

Main Limitation: Predictive models like GOMS and KLM can only make
predictions about predictable behaviors, making it difficult to evaluate how
systems will work in real-world contexts.

Lec 10 Accessibility and Special Issues in

HCI
Who do we need to consider?
Accessibility is crucial in human-computer interaction (HCI) to ensure that digital
products and services are usable by as many people as possible, regardless of
their abilities or disabilities. It's important to consider various groups of people,
including those with:
1. Visual impairments (e.g., blindness, low vision, color blindness)
2. Hearing disabilities
3. Speech impairments
4. Mobility impairments
5. Cognitive impairments
6. Literacy challenges
Assistive Technologies
Assistive technologies play a significant role in enhancing accessibility for
individuals with disabilities. These technologies include both hardware and
software solutions that provide support for various needs. Some examples of
assistive technologies include:
 Screen readers
 Screen magnifiers
 Braille displays
 Eye-tracking devices
 Alternative input devices (e.g., adaptive keyboards, joysticks)
 Alternative output devices (e.g., screen enlargers, Braille embossers)

Built-in Accessibility Features

Many operating systems and software applications include built-in accessibility
features to support users with disabilities. For example:
 Microsoft offers a range of accessibility features for Windows users,
including screen readers and magnification tools.
 Apple provides accessibility features in its macOS and iOS devices, such as
VoiceOver and display accommodations.
 Android devices also include accessibility options like screen readers and
magnification gestures.

Web Accessibility Standards

Web accessibility is critical for ensuring that online content is usable by
everyone, including people with disabilities. Key standards and guidelines
include:
 WCAG (Web Content Accessibility Guidelines): A set of guidelines
developed by the Web Accessibility Initiative (WAI) to ensure web content
is accessible. WCAG 2.1 provides criteria organized under four principles:
perceivable, operable, understandable, and robust.
 Section 508: A US law that requires federal agencies to make their
electronic and information technology accessible to people with
disabilities. It sets standards for accessibility in federal procurement
practices.
 EN 301 549: A European standard for accessibility of ICT products and
services, ensuring they are usable by people with a wide range of
characteristics and capabilities.