HUMAN COMPUTER

INTERACTION
(M23DES212)
School of CSA /MCA- IInd sem
Dr. Ambili P S
UNIT- III CONTENTS

User Experience Requirements - Analysis within the Usability

Engineering Lifecycle, Task Analysis, Contextual Design,
Grounded Theory Method in Human Computer Interaction and
Computer Supported Cooperative Work, An Ethnographic
Approach to Design
INTRODUCTION

• User Interfaces (UIs) serve as the bridge between users

and technology.
• Good window and control design can improve efficiency
and user satisfaction.
WINDOWS – NEW AND NAVIGATION SCHEMES

Primary windows are the main interface.

• Secondary windows include pop-ups and dialogs.
• Navigation schemes like tabbed interfaces or wizard steps
improve user flow.
• Good navigation reduces user confusion and improves task
completion time.
WINDOW SELECTION CRITERIA

• Select modal windows when immediate user attention is

needed.
Modal windows are UI elements that appear on top of the main interface and require users

to interact with them before they can return to the underlying content. They temporarily block
interaction with the main window until the user completes an action

• Use modeless windows for multitasking.

• Match window type to task complexity and available screen
space.
• Keep consistency in layout and hierarchy.
DEVICE-BASED AND SCREEN-BASED CONTROLS

• Device-based controls (mouse, touch, keyboard) determine

how users interact physically.
• Screen-based controls (buttons, sliders, text boxes) provide
visual elements.
• Controls must respond smoothly to different devices and
contexts.
DESIGNING EFFECTIVE CONTROLS

• Frequently used controls should be large and prominent.

• Group related controls logically.
• Provide adequate spacing to avoid mis-clicks.
• Always offer undo/redo options for errors.
COMPONENTS – TEXT AND MESSAGES

• Use concise, actionable text for instructions.

• Feedback messages should be immediate and clear.
• Avoid technical jargon; tailor the tone to the user group.
• Highlight errors clearly with suggestions.
COMPONENTS – ICONS AND CURSORS

• Icons should be simple and self-explanatory.

• Use consistent visual style across all icons.
• Cursors give visual cues about the system’s state (e.g.,
loading, input).
• Provide tooltip text for icons to enhance usability.
USE OF MULTIMEDIA

• Use animations to illustrate transitions or state changes.

• Audio can be used for alerts but must be optional.
• Video tutorials enhance onboarding.
• Avoid excessive multimedia to reduce load time and
distraction.
USE OF COLORS IN UI DESIGN

• Color psychology is a powerful tool in UI/UX design.

• Color guides attention and denotes meaning (e.g., red =
error).
• Use brand colors consistently for identity.
• Maintain contrast between text and background for
readability.
•
USE OF COLORS IN UI DESIGN

A quick guide to what each color communicates in branding and UI.

USE OF COLORS IN UI DESIGN
Color Meaning & Impact Example Brands
Blue Trust, reliability, professionalism Facebook, LinkedIn, Stripe
Red Urgency, excitement, power YouTube, Netflix, HubSpot

Green Growth, balance, sustainability Whole Foods

Yellow Optimism, attention, creativity Snapchat, Bumble, IKEA

Black Luxury, sophistication, minimalism Apple, Tesla, Chanel

White Simplicity, clarity, modernity Google, Airbnb, Tesla
Creativity, exclusivity, premium
Purple Twitch, Adobe, Cadbury
feel
Orange Energy, friendliness, engagement Duolingo, Fanta, Harley-Davidson
•
Pink Playfulness, boldness, uniqueness T-Mobile, Canva, Barbie
Gray Neutrality, professionalism, tech Apple, Salesforce, Mercedes-Benz
CHOOSING COLORS – GUIDELINES

• Use color schemes that support color-blind users.

• Avoid using only color to convey information.
• Test color contrast for visibility on different screens.
• Harmonize colors using analogous or complementary
palettes.
PROBLEMS IN USING COLORS

• Poor contrast can cause readability issues.

• Misuse of bright or flashing colors can cause eye strain.
• Cultural interpretations of colors vary — red may signal
danger in one culture, but prosperity in another.
USER EXPERIENCE REQUIREMENTS
1. User experience (UX) refers to how a user interacts with and experiences a
product, system, or service, encompassing their perceptions, emotions, and
responses throughout the interaction.
2. As web capabilities have increased, graphic design has become a key quality of
the UX.
3. In the case of e-Commerce websites, a relatively new quality of the UX design
has emerged: persuasiveness.
4. Persuasiveness in UX is the intentional use of design, content, and
interaction elements to guide, influence, or motivate users toward certain
behaviors or decisions, often aligned with business goals.
5. Any e-Commerce designer or developer needs to recognize the importance of
the following five different qualities of the total website UX:
Utility , Functional integrity, Usability , Persuasiveness and Graphic design
ANALYSIS WITHIN THE USABILITY ENGINEERING LIFECYCLE
• Mayhew, 1999 documented a structured and systematic
approach to addressing usability within the product-development
process.
• It consists of a set of usability engineering tasks applied in a
particular order at specified points in an overall product-
development lifecycle.
The overall lifecycle is cast in three phases:
• Requirements Analysis
• Design/Testing/Development
• Installation.
 The user interface capabilities and constraints
PHASE 1: REQUIREMENTS ANALYSIS (e.g., windowing, direct manipulation, screen
size, color, etc.) inherent in the technology
platform chosen for the product (e.g., Apple
Macintosh, MS Windows, product-unique
platforms) are determined and documented.
A description of the specific user These will define the scope of possibilities for
characteristics relevant to user user interface design.
interface design (e.g., computer
literacy, expected frequency of
use, level of job experience)
obtained
for the intended user population.
This will drive tailored user
interface design decisions and
Specific qualitative goals reflecting
identify major user categories for usability requirements are
study in the Contextual Task A study of users’ current developed, extracted from the User
Analysis task. tasks, workflow patterns, and Profile and Contextual Task
conceptual frameworks is Analysis. In addition, quantitative
made, goals (based on a subset of high-
resulting in a description of priority qualitative goals) are
current tasks and workflow, and developed, defining minimal
understanding and specification acceptable user performance and
of underlying user goals. satisfaction criteria.
PHASE 2:
DESIGN/TESTING/
DEVELOPMENT
LEVEL 1 DESIGN Based on all requirements-analysis data and

(HIGH LEVEL DESIGN)

the usability goals extracted from it, user tasks
are redesigned at the level of organization and
workflow to streamline work and exploit the
capabilities of automation. No user interface
design is involved in this task, just abstract
organization of Work reengineering.
Conceptual model design: Based on all
the previous tasks, initial high-level design
alternatives are generated. At this level,
navigational pathways and major displays Conceptual model mockups: Paper-
are identified, and rules for the consistent and-pencil or prototype mockups of high-
presentation of work products, processes, level design ideas generated in the
and actions are established. previous task are prepared, representing
ideas about high-level functional
organization and Conceptual Model
Design.
The mockups are evaluated and modified
through iterative evaluation techniques such
as formal usability testing, in which real,
representative end users attempt to perform
real, representative tasks with minimal
training and intervention, imagining that the
mockups are a real product user interface.
LEVEL 2 DESIGN
(DETAILED / INTERFACE DESIGN)
• A set of product-specific standards and conventions
for all aspects of detailed screen design is developed,
based on any industry and/or corporate standards
that have been mandated (e.g., Microsoft Windows,
Apple Macintosh, etc.), the data generated in the
Requirements Analysis phase, and the product-
unique Conceptual Model Design arrived at during
Level 1 Design.
• At the end of the design/evaluate iterations in Design
Levels 1 and 2, you have a validated and stabilized
Conceptual Model Design, and a validated and
stabilized set of standards and conventions for all
aspects of detailed Screen Design.
LEVEL 3 DESIGN
(IMPLEMENTATION / PRODUCTION DESIGN)
• Detailed design of the complete product user interface
is carried out based on the re fined and validated
Conceptual Model and Screen Design Standards
documented in the product Style Guide.
• Iterative DUID Evaluation: After the detailed UI is built
and tested, it undergoes usability evaluation with
actual or representative users. This is iterative, the
design is tested, problems are fixed and then retested,
until it meets the goals.
• Once the final UI passes usability checks, it becomes
part of the style guide for the product. Acts as a
reference point for maintaining usability standards.
• This style guide ensures: Consistency in future
updates or related products.
 PHASE 3: INSTALLATION
• The product is delivered and
installed in the target
environment (could be
software installation, hardware
setup, or deployment to a
server).This is the real-world
launch, not just a lab test.
• The loop continues until:
• No significant usability or
functional issues remain.
• The product meets the
agreed usability goals in
the real-world
environment.
ETHNOGRAPHIC APPROACH TO DESIGN

• Ethnography is a qualitative research method that involves studying

people in their natural environments to understand their behaviors,
needs, and interactions with products, technology, and spaces.

• Ethnographic approach to design focuses on observing and

participating in the daily lives of users to uncover deep insights
about how they use and experience design elements within their
cultural and social contexts.

• This approach helps designers create user-centered, culturally

sensitive, and practical solutions that truly fit the real-world needs of
people.
ETHNOGRAPHIC APPROACH VS TRADITIONAL USABILITY TESTING

Aspect Ethnographic Design Approach Traditional Usability Testing

Understand user’s real-world context, Test how easily a user can perform
Purpose
culture, and behavior tasks on a product or prototype
User’s natural environment (home,
Setting Controlled lab or testing room
workplace, public spaces)
Deep insights into habits, motivations, Performance metrics like task
Focus
and social factors completion time, error rate
Observation, in-context interviews, Structured tasks, observation, think-
Method
shadowing, participation aloud protocols
Design decisions grounded in real-life Refinements to improve efficiency,
Outcome
needs and constraints usability, and interface clarity
Spending a week with farmers to design Bringing farmers into a lab to test a
Example
an agricultural app prototype app’s navigation
TASK ANALYSIS

• Task analysis means understanding users’ work.

• Task analysis is a systematic process of studying the way users

perform their activities to achieve specific goals, focusing on the
tasks, subtasks, information needs, and environmental constraints
involved.

• It serves as a bridge between understanding user requirements and

designing usable systems.
TASK ANALYSIS

Task analysis goes hand in hand with

understanding users (user analysis) and
understanding the users’ physical,
technological, cultural, social,
and political environments
(environmental analysis).
FOUR PRINCIPLES THAT UNDERLIE TASK ANALYSIS

• Task analysis is an integral part of a broader analysis that

includes understanding users and their environments.
• Task analysis includes understanding users’ goals.
• Although the focus, methods, granularity, and presentation of
information may differ at different times, task analysis is relevant
at all stages of the design and development process.
• The practical reality is that task analysis for a given project
depends on many factors.
TYPES OF TASK ANALYSIS

There are several task analysis methods, such as

Hierarchical Task Analysis (HTA) - which breaks down tasks into
goals, operations, and plans;
Cognitive Task Analysis (CTA) - which focuses on mental
processes and decision-making;
Contextual Task Analysis, which accounts for environmental, social,
and organizational factors.
REAL CASE STUDY

Consider the online flight booking process on a travel website.

The main task is purchasing a flight ticket.
Subtasks include searching for flights, comparing options, selecting
dates, entering passenger details, choosing seats, adding extras,
and completing payment.
Task Analysis
A task analysis here would reveal bottlenecks—for example, users
abandoning the process when seat selection loads slowly or when
date flexibility options are hidden.
Through this analysis, designers could streamline the interface by
showing flexible date prices upfront, reducing page load times, and
grouping related fields, improving both efficiency and satisfaction.
GROUNDED THEORY METHOD
• Grounded Theory Method (GTM) is presented as one of the qualitative
research approaches that are particularly valuable in HCI and
Computer Supported Cooperative Work (CSCW).
• Instead of testing a pre-existing hypothesis, it builds theory inductively
from data through systematic coding, categorization, and comparison.
• Grounded Theory Methods involve the simultaneous collection and
analysis of data, where each step informs and focuses the other
throughout the research process.
• Theories are grounded in real-world practices and contexts.
• GTM helps uncover patterns of use, user needs, and interaction
breakdowns.
ADVANTAGES OF GROUNDED THEORY METHOD IN HCI
• Theories are built from the ground up, based on actual data, not
preconceived assumptions. This makes findings authentic and
unbiased.
• GTM does not require a fixed hypothesis at the beginning. The
process can adapt as new insights emerge during data collection.
• In-Depth Understanding Provides deep insights into human
experiences, behaviors, and social processes.
• Unlike many qualitative methods that only describe, GTM actually
develops new theories that explain how and why phenomena occur.
• Practical Relevance : GTM has structured steps (coding →
categorization → constant comparison → theory building), which make
the research process organized and transparent.
GROUNDED THEORY METHOD IN COMPUTER SUPPORTED COOPERATIVE WORK (CSCW)

• CSCW studies collaborative work practices mediated by technology

(e.g., groupware, shared workspaces, virtual meetings).
• These practices are complex, situated, and evolving—making GTM
highly valuable.
• Shows how people interact with technology collaboratively.
• Applications in CSCW
• Understanding how teams coordinate work across time zones.
• Discovering implicit social norms in online communities.
• Building theories about distributed collaboration and technology
adoption.
CONTEXTUAL DESIGN
• Contextual Design is a customer-centered design process that takes a
cross-functional team from collecting data about users in the field, through
interpretation and consolidation of that data, to the design of product
concepts and a tested product structure.
• It involves observing and interviewing users in their real work environments
(contextual inquiry), modeling their workflows, consolidating findings, and
then designing and prototyping systems that naturally support how people
actually work.

• Contextual Design → Task-focused, structured, leads directly to product

design.
• Ethnographic Design → Culture-focused, exploratory, provides deep
understanding that guides design thinking.
CONTEXTUAL DESIGN PROCESS
CONTEXTUAL DESIGN

• Contextual Inquiry
• A field data collection method where designers/researchers observe and
interview users in their natural environment while they perform their real tasks.
• To understand the users’ work practices, problems, goals, and context.
• Raw data about user behavior, workflows, challenges, and needs are the
outcomes.
Context—While people are working, gather data in the
workplace and focus on the activities they are doing.
CONTEXTUAL DESIGN
• In CD, the cross-functional design team conducts one-on one field interviews with
customers in their workplaces (or life spaces) focusing on the aspects of the
practice that matter for the project scope.
• The number of people that should be interviewed is directly related to the project
scope.

Interpretation Sessions and Work Modeling— Creating a Shared Understanding

• Contextual Interviews produce large amounts of customer data, all of which must
be shared among the core design team and with the larger, cross-functional team
of user interface designers, engineers, documentation people, internal business
users, and marketers.
• After collecting field data, the design team meets to interpret and discuss findings.
• Working as a distributed team: More and more companies are expecting their
teams to be distributed. Distributed teams have the advantage that data can be
collected from different locations with less travel, which saves time and cost.
CONTEXTUAL DESIGN – WORK MODELS AND AFFINITY
DIAGRAMS
• In CD, we consolidate the notes from
the interpretation session into the
affinity diagram and the sequences into
consolidated sequence models to see
patterns.
• Affinity diagrams are hierarchical
pictures of user data.
• They are produced inductively by
grouping similar data elements together
into categories and then grouping the
categories together.
• The team prints the notes captured in
the interpretation session onto labels
that are sticky notes.
AFFINITY DIAGRAMS
• The affinity diagram brings issues and insights
across all customers together into a wall-sized
hierarchical diagram.
VISIONING
• Visioning is about invention.
• Design of technology is first design of the story showing how manual practices,
human interactions, other tools come together with your product or system to
better support the whole practice. Visioning is the CD technique help teams tell
that story.
• Visioning is a vehicle to identify needed function in the context of the larger
practice.
• Visioning ensures that teams put off lower-level decisions about
implementation, platform, and user interface until they have a clear picture of
how their solution will fit into the whole of the practice.
• During the visioning session, the team will pick a starting point and build
a story of the new practice.
• After a set of visions is created, the team evaluates each vision in turn, listing
both the positive and negative points of the vision from the point of view of
customer value, engineering effort, technical possibility, and corporate value.
CONTEXTUAL DESIGN PROCESS – DEFINE AND VALIDATE
CONCEPTS

• Storyboarding is working out the details

of tasks and roles by visually mapping
out user journeys. It tells a story of how
users will interact with the system.
 CONTEXTUAL DESIGN PROCESS – DEFINE AND VALIDATE
CONCEPTS
• User Environment Design: Designing
the system to support the actual work
environment and context in which users
will interact with the product.
• Paper Mock-Up Interviews: Creating
quick, low-cost paper prototypes of the
interface and testing them with users. It
helps in understanding how people
would interact with the system before
investing in actual development.
• Interaction & Visual Design: Designing
and testing the final look and feel of the
product — interaction flow, colors, fonts,
usability, accessibility, and overall user
experience.