Lecture 11 - Data Gathering

This chapter focuses on Data Gathering, a vital component of user research.

It covers diverse data types and techniques for collecting and synthesizing
information to understand user behaviour and preferences. The distinction
between qualitative and quantitative data is highlighted, informing different
design aspects. The chapter explores data gathering necessities, including
probability sampling, snowball sampling, and participant relationships. It
emphasizes pilot studies, data documentation, and interview planning,
encompassing questionnaires and observations. The use of focus groups for
comprehensive user insights is also discussed.

What is data?
 Numbers
 Measurements
 Description
 Text
 Images
 Audio
 Video

Goal:
To understand
 Needs
 Behaviour
 Preferences

Quantitative:
Quantitative research focuses on gathering and analyzing numerical data
and involves statistical analysis.
E.g., Clicks to reach customer support
Qualitative
Qualitative research seeks to understand complex phenomena by exploring
subjective experiences, meanings, and perspectives
E.g., Feedback of customer support

TECHNIQUES :
 Interviews
 Questionnaires
 Observation

HOME WORK AND KEY ISSUES THAT REQUIRE ATTENTION - 5 THINSG

 GOAL SETTING
 IDENTIFYING PARTICIPANTS
 THE RELATIONSHIP BETWEEN THE DATA COLLECTOR AND THE DATA
PROVIDER
 TRIANGULATION
 PILOT STUDIES

1. REQUIREMENT / GOALS setting

 To get information about user , their behavior ad reaction to technology
 Setiing specific goals - they will directly influence the nature of data

gathered and which data techniques should be used and which analysis
should be performed
2. PARTICIPANTS
THE GOAL DETERMINES THE TYPES OF PEOPLE, FROM WHOM THE
DATA SHOULD BE GATHERED.
Study Population: People from whom specific data is required
Sampling: PROCESS OF choosing participants

Probability sampling -
• Random sampling
• Stratified sampling
Nonprobability sampling
• Convenience sampling
• Volunteer sampling
• Purposive sampling
• Snowball sampling

Probability sampling
• Random sampling- every member of the population has an equal
chance of being included in the study.
Tools such as random number generator etc are used .

• Stratified sampling- divide population into sub population or strata

who difffer in some important parameters. Gets more accurate and
ensure every sun group is represented
To use this sampling method we divide the population on charateristics
(depending on the data to be collected )
Based on overall proportions - and random smpling to select data

Nonprobability sampling - not every one in larger population can be

used to get data - random selection or specific collection
Used in explorative and qualitative studies
To understand under reaseacehed population
• Convenience sampling - the population who is very accesble to the
researcher - first primary data can be used and they maynot be any
additional requirements - easy inexpensice way to data
Its not a general representative of entire population - so we cannot
produce generalised results
Risk of sampling bias and selection bias

• Volunteer sampling
Based on each access of volunteers - responding to ads or phone call
Biased - can lead to selective biased data by researcher

• Purposive sampling
Involves researcher to purposely select participants so we will select
those samples ony
Used in qualitative research - where researcher wants to get some
detailed knowledge about a specific phenomena rather than making
some statistical inferences or population can be also limited .
Eg. Selecting disabled students and getting data on their challenges
faced during using the infrastructure .

• Snowball sampling
If the population is hard to access this method is very useful for
recuiting participants through other participants. The nuber of people
we access to snowballs as we get in contact with more people .
Negative : the researcher has no way of knowing how well the number
represents the population .
 Difference between probability and nonprobability methods

probability: The researcher can apply statistical tests and generalize to

the whole population.

Nonprobability: such generalizations are not robust.

Using statistics also requires a sufficient number of participants.

3. RELATIONSHIP WITH PARTICIPANTS

 Professional

• Respectful
• Informed consent - PROTECT THE INTRESTE OF DATA GATHERER AND
DATA PROVIDER . PRIVACY .
• Purpose of the data gathering -
• How the data will be used
The informed consent form is intended to protect the interests of both
the data gatherer and the data provider

4. TRIANGULATION :
Triangulation is a term used to refer to the investigation of a
Phenomenon from (at least) two different perspectives.

• Triangulation of data means that data is drawn from different sources

at different times, in different places, or from different people (possibly
by using a different sampling technique).
• Investigator triangulation means that different researchers
(observers, interviewers, and so on) have been involved in collecting
and interpreting the data.
• Triangulation of theories means the use of different theoretical
frameworks through which to view the data or findings.
• Methodological triangulation means employing different data
gathering techniques.
 IT HELPS RESEARCHER TO ENHANCE THE VALIDITY AND CREDIBILTY OF
FINDINGS AND LISTEN AND MITIGATE THE PRESENCE OF ANY RESEARCH
BIASES IN THEIR WORK- USED IN QUALITATIVE RESEARCH BUT CAN
ALSO BE USED IN QUATITATIVE RESEARCH.
 IF ONE DECIDED THAT BOTH QUALITATIVE AND QUATITATIVE
METHOD , THEN A METHODOLOGICAL TRIANGULATION IS MORE
APPROPRIATE

5. PILOT STUIDES :
 A pilot study is a small trial run of the main study. ISSUES CAN BE

IDENTIFIED IN ADVANCE
 Its purpose is to test and refine research methods, procedures, and

instruments to ensure their effectiveness and feasibility.

 Pilot studies are often conducted with a limited sample size, which may

or may not be representative of the target population.

Data Documentation
How the data is collected ? - depending on seriousness of reseacrh and
the way its documented will affect the detail and how intrusive the data
gathering will be

• Notes + Photographs
• Audio + Photographs
 • Video

Interviews

• Unstructured Interviews - like conversation to be consise and a little

structured
• Structured Interviews - predetermined questions
• Semi-structured Interview - structured and then explored in depth -
the answer encourages the question
 Group interviews

Focus Groups
A focus group is a qualitative research method that involves a small
group of individuals, typically 6-10 participants, who come together to
discuss a specific topic or research question under the guidance of a
moderator or facilitator.
 To get information and data about shared expereince
 Different perspectives from similar groups
Some key points about focus groups:
 Purpose
 Group Dynamics
 Moderator/Facilitator
 Sampling Data
 Collection Analysis

Planning and Conducting an Interview

 Define your objectives

 Select your participants
 Develop an interview guide
 Consider ethical considerations - consent form
 Establish the format of the interview
 Create a comfortable environment
 Active listening and probing
 Record and document
 Reflect and analyze
 Maintain communication and gratitude
 Logical sequence of questions
 Questionnaires
Similar to interview - questions to passed on - clear In wording of
questions. Gives data from large pool of population
Can be structured and non structured.
No ambigious question - pretty direct .

Observation
Direct or indirect observation of the product/user by researcher ,
prototype. Field or controlled environment. While questionnaires and
interviews gives informations , some gaps in actual behaviour can be
filled by observation on field.

Examples of direct observation:

• A researcher observing children's play behaviour in a playground,
noting their interactions, activities, and social dynamics.
• An ethnographer observes and documents the daily routines and
rituals of a specific cultural community by actively participating in their
activities.
• A usability expert observing users interacting with a website
prototype in a usability testing session, noting their navigation patterns,
feedback, and difficulties encountered.
• A wildlife biologist observing animal behaviour in their natural
habitat, noting feeding patterns, social interactions, and territorial
behaviours.
 Sometimes direct observations can be intrusive and the researcher
cannot observe someone all the time .indirect observation ca be done
Examples of indirect observation:
• Tracking Users’ Activities.
• Analysing surveillance camera footage to study customer flow and
behaviour in a retail store.
• Review medical records and patient charts to examine the treatment
outcomes and patterns of a specific medical condition.
• Analysing historical documents, such as diaries, letters, or
newspapers, to
understand social or cultural trends in a particular time period.
• Studying archival footage or photographs to examine historical
 events or social phenomena.

Other Forms of Interview

• Telephonic Interviews
• Video Interviews
• Online Surveys
• Email Interviews
• Instant Messaging and Chat Interviews

Choosing and Combining Techniques

Lecture 12 - Data Analysis

About Lesson 12: This chapter provides a comprehensive exploration of data analysis,
encompassing qualitative and quantitative approaches. It highlights their significance
in extracting valuable insights and delves into critical aspects like identifying incidents
and themes for understanding user experiences. Affinity diagrams are explored as a
tool for effective data categorization and pattern recognition. The chapter also covers
supportive tools such as software applications and sentiment analysis, aiding data
organization and interpretation. Lastly, it underscores the importance of clear and
impactful interpretation and presentation of research findings to communicate results
and draw actionable conclusions.
Data analysis is the process of examining and interpreting data using
statistical and logical methods to identify patterns, relationships, and
trends.
It involves collecting, cleaning, processing, and transforming data into
information that can be used to make informed decisions or gain
insights into a particular subject or phenomenon.
The process of data analysis typically involves the following
steps:
1. Defining the research question or problem
2. Collecting data
3. Cleaning and processing data - checking for missing values and
inconsistencies
4. Exploring and visualizing data - use descriptive statistics and
visualisations to understand the data and identify patterns or any kind
of relationships
 5. Analysing data - use of statistical methods and techniques to test the
hypothesis and draw conclusions from data gathered.
6. Interpreting and presenting results- summarising and communicating
the findings in clear and concise manner

Qualitative and Quantitative Approach of Data Analysis

Quantitative Approach of Data Analysis

Quantitative data is numerical data that can be measured and

analyzed using mathematical or statistical methods. It involves
collecting data that can be quantified or expressed in numerical
form, such as age, height, weight, income, or test scores.
 Data that can be easily translated to numbers

Qualitative Approach of Data Analysis

Qualitative data is non-numerical data that is descriptive and

subjective in nature. It involves collecting data that cannot be
expressed in numerical form, such as opinions, beliefs,
attitudes, behaviours, or experiences.
 Represented in themes patterns and stories

First Steps in Analyzing Data

 INTERVIEWS
 QUESTIONAIRES -
Open ended questions are often end up as qualitative analysis.
 OBSERVATIONS - will involve lot of data hence requires synchronising
different data recordings , transcriptions and observer notes - using
qualitative approaches while photo graphs will provide us contextual
information data logs and some elements of observer's notes will
analyse quantitatively

Basic Quantitative Analysis

Two basic quantitative analysis techniques that can be used

effectively in interaction design are averages and percentages.
Percentages help in stanndardsing the data
There are three different types of
averages:
• Mean
• Median
• Mode
 Basic Qualitative Analysis
Qualitative data can be collected using various methods, such as
interviews, focus groups, observations, case studies, or
document analysis. The data is usually recorded in the form of
text, audio, or visual recordings and analyzed using techniques
such as content analysis, grounded theory, or thematic analysis.

Qualitative data can be analyzed inductively, that is, extracting

concepts from the data, or deductively, in other words using existing
theoretical or conceptual ideas to categorize data elements.

Identifying themes (thematic analysis) takes an inductive approach,

while categorizing data takes a deductive approach.

Three basic approaches to qualitative analysis are discussed in

this section:
 identifying themes,
 categorizing data, and
 analyzing critical incidents

All the three are not mutually exclusive and are rather used in combinations
Critical incident analysis is a way to isolate subsets of data for more
detailed analysis, perhaps by identifying themes or applying
categories.
Identifying Themes:
Most challenging aspect of identifying themes is determining the
meaningful quotes which do not overlap and decidingg on the
appropriate level of selection .
Thematic analysis is considered an umbrella term to cover a
variety of different approaches to examining qualitative data. It
 is a widely used analytical technique that aims to identify,
analyze, and report patterns in the data (Braun and Clarke,
2006).
A pattern or a topic that is found in a data set . Can be an unexpected
element which is considered important , related to the goals .
Themes can be events , places, behaviour .
A theme is something important about the data in relation to the study
goal.
A common technique for exploring data, identifying themes, and
looking for an overall narrative is to create an affinity diagram.
 AFFINITY DIAGRAM :
A common technique for exploring data , identifying themes, and
looking for an overall narrative .
Seeks to organise individual isead and insights in a certain hierachy
It shows common structures and themes .notes and Groups to gather
idea and categorise them .
A team work related - when one put up a theme , other searches for
similar goals and data .
Inductive study is important when its exploratory in nature
If the themes are already fixed , the analysis proceeds deductively

Categorizing Data
Case study :
‘’The screen is very difficult to read. I keep forgetting what I just read. I
cannot retain the information. The text is small and some letters do not
have clearly defined edges. I get a headache.‘’

 Interface Problems
Verbalizations show evidence of difficulty in seeing particular aspects of
the interface.
 Content Problems
Verbalizations show evidence of dissatisfaction about aspects of the
content of the electronic text.

Critical Incident Analysis

Critical incident analysis (CIA) is a structured method for examining

and reflecting on significant events or experiences that have occurred
in a particular situation or context. It involves examining these events
 in detail to identify the factors that contributed to the outcome and to
explore how the situation could have been managed differently.
 Helps us identified significant data incidents to get more detailed
analysis

Critical Incident Analysis

1. Identifying the critical incident

2. Describing the incident - a detailed account on what happened during
the incident . Context and actions
3. Identifying the factors that contributed to the incident -
4. Reflecting on the incident
5. Identifying opportunities for improvement

Which Kind of Analytic Framework to Use?

Tools to Support Data Analysis

 Mostly uses physical method but recently we can use softwares too .

Nvivo - supports annotation and coding of data . Eg . They can hold

document photos videos audios , notes can be searched in nvivo , help in
content analysis , quotes and themes can be explores, merged and
manipulated in several ways .
Its useful to handle large sets of data and can generate output for statistical
packages like SAS AND SPSS
Dedoose
Statistical Analysis Software (SAS) -
Statistical Package for the Social Sciences (SPSS) - are quantitative analysis
packages , that support the use of statistical tests . IT OFFERS wide range od
tests to determine the statistical significance of the data.

Interpreting and Presenting the Findings

Choosing a appropirate way to present the finding Of the study is as
important as choosing the right analytical approach.
It depends on the data gathered and the analysis technique we have used
Audience and the original goals of the study.
Use of photos , data , graphs , headlines , salient trends ,over all
implications maybe required
 Structured Notations - have been developed to analyse capture and

present information for interaction design . They follow a clear syntax

and semantics which have been developed to capture the particular
view points .
Here work models Use of simple conventions to representinf the
flowsand the breakdown
UML - UNIFIED MODELLING LANGUAGE - HAVE STRICTER AND MORE
PRECISE SYNTAX TO BE FOLLOWED AND THEY ARE OFTEN USED TO
REPRESENT THE REQUIREMENTS
 Using Stories - AN EASY INTUTIVE WAY TO COMMUNICATE IDEAS AND

EXPERIENCES . SCENARIOS ARE USED TO communicate findings and act

as basis for further development
1. With participants stories - while data gathering .
2. The story based on observation - ethnographic field studies
3. A story may be constructed from repeted incidences that we have
found In the data
 A way of rationalising and collating the data to form a representative
account of a products use and certain type of element.
Stories can be used as basis of constructing scenarios and it can be used
for requriements and other design activities
 Summarizing the Findings - presentaition style used in combinations .
Take care to ensure findings are not over emphasised
Evidence are not misrepresented.
Issues :
 Overgeneralising the results without any strong evidence .- happens
often in qualitative studies .use of words such as majority , most to be
avoided to explain final results

Lecture 13 Discovering Requirements

About Lesson 13: The process of finding needs for a product is the main
topic of this chapter, which also discusses the typical types of requirements.

Discovering Requirement
Discovering requirements focus on exploring the problem space and
defining what will be developed.
In the case of interaction design, this includes:
• understanding the target users and their capabilities
• how a new product might support users in their daily lives
• users’ current tasks, goals, and contexts
• constraints on the product’s performance etc

What, How, and Why?

What Is the Purpose of the Requirements Activity?
How to Capture Requirements Once They Are Discovered?
Why Bother? Avoiding Miscommunication.
What Is the Purpose of the Requirements Activity?
 Capturing Requirements

Requirements may be captured in several different forms. For some

products, such as an diet monitoring app, it may be appropriate to capture
requirements implicitly through a prototype or operational product.
 Is beneficial in order to make sure key requirements are not lost thro
iterations.
 Magnitude of problem is important to be measured. Important to
understand the level of complexity of the problem.

Issues due to Miscommunication

 Different perspective of different stakeholders in the product design -
 Mis communications between them - by misintepretations.

What Are Requirements?

A requirement is a statement about an intended product that specifies
what it is expected to do or how it will perform.
For example, a requirement for a smartwatch step counter feature is to be
accurate. Another less precise requirement might be for teenagers to find
the smartwatch attractive.
 GOAL : identify and clarify and capture the requirements of the user
 Discovering requirements is iterative allowing requirements and their
understanding evolve over the time
 Specifying criteria that can be used to show when the requirements are
fulfilled.
Requirements come in different forms and at different levels of abstraction.
Alternative way to capture what a product is intended to do:
user stories - can be used to capture uability and user experience goals .
 Simple structure for user stories is as follows:
• As a <role>, I want <behaviour> so that <benefit >.

 Example user stories for a healthy person might be:

• As a <fitness enthusiast>, I want <to maintain my calorie
intake> so that <I am able to maintain my weight>.

 Example user stories for a app provider might be:

• As a <Health care app provider>, I want <calorie values for new
food items> so that <I can provide my clients various options>.

SPRINT - USER STORIES ARE USED WHILE USING AGILE APPROACH FOR
PRODUCT DEVELOPMENT AND THEY FORM THE BASIS FOR PLANNING FOR
THE SPRINT. THEY ARE BUILD BLOCKS FROM WHICH THE PRODICTE IS
CONSTRUCTED.

A STORY WOULD CONSIST OF A :

 Description a
 Estimate of the time it will take to develop
 An acceptance test that determines how to measure when the requirement
has been completed or fulfilled.
It is common for a user story to be decomposed into smaller stories which
are often called tasks

Two different kinds of requirements have traditionally

been identified:
• Functional requirements- that descibes what the product will do
• Non-functional requirements- describes the characteristics of the product.
Or the constraints the product will offer .

Six of the most common types of requirements are:

1. Functional
2. Data
3. Environment
4. User
5. Usability
6. User experience
 1. Functional requirements capture what the product will do.
For example, a functional requirement for a robot working in a personal
computer assembly plant might be that it is able to place and seal the
components accurately.
Understanding the functional requirements for an interactive product is
fundamental.

2. Data requirements capture the type, volatility, size/amount, persistence,

accuracy, and value of the required data. All interactive products have to
handle some data.
For example, if an application for buying and selling foreign currency is
being developed, then the data must be up-to-date and accurate, and it is
likely to change many times a day. In the personal banking domain, data
must be accurate and persist over many months and probably years.

3. Environmental requirements, or context of use, refer to the

circumstances in which the interactive product will operate.
Four aspects of the environment lead to different types of
requirements.
• Physical Environment - factors like light , dust , movement , in the
operational environment of the product
• Social Environment -
• Organizational Environment - how good is user support system . Facilities
for training , which will ensure how efficient and stable the communication
infratstuture
• Technical Environment - what kind of technology will product will be
compactible with and the limitations needed to be tackled by the product.

4. User characteristics capture the key attributes of the intended user

group, such as the users’ abilities and skills, and depending on the product,
also their educational background, preferences, personal circumstances,
physical or mental disabilities, and so on.
In addition, a user may be a beginner, an expert, a casual user, or a frequent
user. This affects the ways in which interaction is designed.
 Find a user profile
5. Usability goals
Usability engineering is an approach in which specific measures for the
usability goals for the product are agreed upon , which happens early in the
development process. And they are used to track the progress
 As the debvelopment of procuct proceeds is given priority and it facilitates
progress tracking
6. User experience goals
Same as before .

These are another kind of requirement, and they should be captured

together with appropriate measures.

Lecture 14 User Personas and Scenarios

About Lesson 14: This chapter explores the necessity of user personas, user scenarios, and
storyboarding as well as the many forms, uses, and procedures involved in creating each of these
topics.

User Personas

Two techniques that are commonly used to augment the basic

requirements information and to bring requirements to life are
• Personas
• Scenarios

Personas are rich descriptions of typical users of the

product under development on which the designers can
focus and for which they can design products.
• They don’t describe specific people, but rather they are
realistic, and not idealized.
• Any one persona represents a synthesis of a number of
real users who have been involved in data gathering, and
it is based on a set of user profiles.
Each persona is characterized by a unique set of goals
relating to the particular product under development,
rather than a job description or a simple demographic.
• Goals often differ among people within the same job role or
the same demographic
• In addition to their goals, a persona will include a
description of the user’s behaviour, attitudes,
activities, and environment.

Four Different Types of Personas

1. Goal-directed Personas
2. Role-Based Personas
3. Engaging Personas
4. Fictional Personas
What are User Scenarios?
User scenarios are usually stories or narratives
that describe how a user might interact with a
product or system in a particular context or
situation. User scenarios are used to identify user
needs, goals, and behaviours, and to design user
interfaces that meet those needs and goals.

Scenarios, Personas and Roles

Creating user scenarios involves several steps, which include:

1. Identify the user
2. Define the context
3. Determine the user's goals
4. Outline the steps
5. Consider obstacles and challenges
6. Describe the outcome
7. Iterate and refine.
Overall, creating user scenarios requires a deep
understanding of the user's needs, behaviours, and goals, as
well as the context in which they will be using the product
or system. By following these steps, designers can create
scenarios that accurately reflect user needs and behaviours,
and use them to design interfaces that are intuitive,
effective, and engaging.
Storyboard

Storyboarding is a technique used in interaction design to

visually represent user scenarios and interactions. Storyboards
are typically a series of illustrations or sketches that depict the
different steps in a user scenario, showing how the user
interacts with a product or system.
Storyboarding can be used to:
1. Communicate design concepts: Storyboards can be used to
communicate design concepts to stakeholders and team
members, helping to illustrate how a product or system will work
in practice.
2. Test and refine designs: By visualizing different user scenarios and
interactions, designers can identify potential issues and refine the
design to better meet user needs.
3. Create a shared vision: Storyboarding can help to
create a shared vision among team members,
ensuring that everyone is working towards
the same goal.
To create a storyboard, designers typically follow these steps:

1. Define the scenario: Identify the user scenario or interaction that will
be depicted in the storyboard.
2. Sketch the frames: Sketch a series of frames or panels that depict the

different steps in the user scenario. Each frame should be a self-

contained scene that shows a specific action or interaction.

3. Add annotations: Add annotations to each frame that provide

additional information about the user's actions, the
system's response, and any relevant contextual
information.
4. Refine the storyboard: Refine the storyboard based
on feedback from users or team members, and
use it to inform the design of the product or system.

Lecture 15 Design and prototyping (Part 01)

Design, prototyping, and construction fall within the Develop phase of the
double diamond of design,
introduced in “The Process of Interaction Design”

There are several steps involved in creating a prototyping model in design,

including:
1. Ideation: Brainstorming and generating ideas for the product or system.
2. Moodboard: a visual tool used to collect and organize ideas, concepts, colors,
textures, images, and other visual elements that represent a particular theme,
mood, or design direction.
3. Sketching: Creating rough sketches or drawings of the design.
4. Information Architecture: It refers to the way information is organized,
structured, and presented within a system, website, application, or any other
information-based environment. It involves designing the
organization, navigation, labelling, and categorization of
information to facilitate user understanding and
efficient access to content.
5. Low-fidelity prototyping: Creating a basic, low-cost model of the product or
system, such as a paper or cardboard mockup.
6. Testing and feedback: Testing the low-fidelity prototype with users and
stakeholders to gather feedback and identify potential design issues.

7. Iteration: Refining the design based on feedback and creating a higher-

fidelity prototype.

8. High-fidelity prototyping: Creating a more detailed and functional model of

the product or system, using materials such as 3D printing, CAD software, or
other tools.
9. User testing and final feedback: Testing the
high-fidelity prototype with users and stakeholders
to gather final feedback and make any necessary
design revisions before moving on to final production.

Ideation
 Mind mapping
 Brainstorming
 Brain writing
 Storyboarding
 Provocation
 Others

Moodboard
Sketching

INFORMATION ARCHITECTURE
LOW FIDILITY PROTOTYPING
TESTING AND FEEDBACK
HIGH FIDILITY PROTOTYPING
USER TESTING AND FEEDBACK
Lecture 16 Design and Prototyping (Part 02)

To gain a clearer understanding, let's examine a case study

involving the website design for promoting tourism in
Uttarakhand.

REFER THE PDF FOR MORE

Lecture 17 Visual Interface Design

Art, Visual Interface Design, and Other Design Disciplines

Art is a means of self-expression on topics of emotional or intellectual
concern to the artist and, sometimes, to society at large.
Few constraints are imposed on the artist; and the more singular and unique
the product of the artist’s exertions, the more highly it is valued.

Designers, on the other hand, create artefacts for people other than
themselves. Whereas the concern of contemporary artists is primarily self-
 expression, visual designers are concerned with clear communication.

Visual interface designers are concerned with finding representations best

suited to communicating the specific behaviour of the interactive product
that they are designing.

The design of user interfaces should not entirely exclude aesthetic concerns
but rather should place such concerns within a functional framework.

The Building Blocks of Visual Interface Design

Interface design is concerned with the treatment and arrangement of visual
elements to communicate behaviour and information.
Every element in a visual composition has a number of properties, such as
shape and colour, that work together to create meaning.

ELEMENTS OF VISUAL DESIGN

 SHAPE
 SIZE
 VALUE
 HUE
 ORIENTATION
 TEXTURE
 POSITION

SHAPE : Shape is the primary way we recognize what an object is.

 SIZE -
Larger items draw our attention more, particularly when they’re
much larger than similar things around them.
 VALUE -
Value, also known as lightness or brightness, describes the perceived
ntensity of lightness or darkness in a colour.
(ALBER COLOR STUDIES )
Value can also be used to show movement or to make a viewer’s eye travel
around a composition. Making some objects within a composition darker
 and others lighter will cause a viewer to first look at what stands out mosT
and then at what stands out least.

 HUE :
Hue represents the dominant wavelength of light perceived by the human
eye and is responsible for the basic color categories such as red, orange,
yellow, green, blue, and violet.

 ORIENTATION
It involves the direction in which elements in the design are placed relative
to a reference point, such as horizontal, vertical, diagonal, or a combination
of these orientations.
 TEXTURE
Texture in digital design is seldom useful for conveying differences or calling
attention, since it requires a lot of attention to distinguish. Texture also
takes a fair number of pixels to convey.
 POSITION
Refers to the deliberate arrangement and placement of elements within a
composition or layout.
Principles of Visual Interface Design

Visual interfaces should:

• Use visual properties to group elements and create a clear hierarchy
• Provide visual structure and flow at each level of organization
• Use cohesive, consistent, and contextually appropriate imagery
• Integrate style and function comprehensively and purposefully
• Avoid visual noise and clutter

HIERARCHY

ESTABLISHING RELATIONSHIPS

ALIGNMENT AND THE GRID

SYMMETRICAL AND ASMMETRICAL BALANCE

CREATING LOGICAL PATH

Lecture 18 Elements of User Interface

Components of User Interfaces

• Button
• Menus
• Icons
• Progress Indicators
• Accordions
• Navigation Bars
• Tabs
• Radio Buttons
• Check Boxes
• Modals
• Text Fields
• Date Pickers nd more

TYPES OF MENUS

Pop-up menu
Graphical drop-down menu
Cascading menu
Pull-down menu
Moving bar menu
Tear-off menu

DROP- DOWN LISTS

In their simplest form, dropdown lists contain four main parts: a container
box, a downward-facing arrow button, a list of items, and a label.
• Users can click on the down-arrow to display a list of mutually-exclusive
items from which they can select only one.
• With dropdown lists, the selected option or default value remains visible in
the container box, while the other list items appear only after clicking on the
down- arrow.

BUTTONS
A button is an interactive element that enables to get the expected
interactive feedback from the system following a particular command.
• Basically, a button is a control that allows a user to directly communicate
with the digital product and send the necessary commands to achieve a
particular goal.

 MAKE SURE IT STAYS TOP OF MIND

 EMPASIZE THE PRIMARY CONVERSION
 SHOWCASE OPPURTUNITIES

ICONS

Small graphical representation of a program, feature, or file. An icon can

resonate with a real-life object like a lock to denote that it will unlock and
lock the particular feature of an application

PROGRESS INDICATORS AND METERS

A progress indicator is a way of informing the user of the system status and
provide immediate feedback.
Meters are visual representations of a quantity or an achievement. Their
progress is determined by user actions, rather than system actions.

ACCORDION
An accordion is a menu composed of vertically stacked headers that reveal
more details when triggered (often by a mouse click).

ACCORDION UI
Headers: They contain section titles. These are meant to be brief but
descriptive enough to indicate what the reader can expect to learn more
about by clicking.

Panels: Panels are sections of content associated with each header. By

default, panels are typically hidden and revealed when a user clicks on a
header or icon in the menu.
Icons : Icons, which typically appear to the left or right of the section titles,
indicate there’s more content available if clicked.
Switches, Radio Buttons & Checkboxes :

Modal windows

Text Fields

Date Pickers

LECTURE 19 - Affordances and UI Transformations

(open the pdf to read )

Affordances
• An affordance is what a user can do with an object based on the user’s
capabilities.
• An affordance is defined in the relation between the user and the object: A
door affords opening if you can reach the handle. For a toddler, the door
does not afford opening if she cannot reach the handle.
• In essence, it is an action possibility in the relation between user and an
object.
Types of Affordances
1. Explicit affordances
2. Hidden affordances
3. Pattern affordances
4. Metaphorical affordances
5. False affordances
6. Negative affordances

1. Explicit Affordances
Explicit affordances are obvious, perceptual features of an item that clue
you in on how it is to be used.
2. Hidden Affordances
Hidden affordances are implicit features of an object. A common example of
hidden affordance is a drop down menu or other clickable feature that only
appears when the user is hovering over it.
3. Pattern Affordances
Pattern affordances are based on previously established conventions that
indicate
function.
4. Metaphorical Affordances
Metaphorical affordances rely on the imagery of real or original objects to
convey purpose.
5. False Affordances
False affordances occur when a feature of an item suggests a use that
the item can’t actually perform.
6. Negative Affordances
Negative affordances are used when conveying a lack of function or
interactivity.

Affordances in UX Design
Buttons
• Buttons are one of the core elements used to suggest interactivity in an
interface.
• It can be easy to accidentally create a hidden affordance by creating a
button that doesn’t look clickable.

Animations
• Animated affordances often imitate actions or movements in the real
world (swiping, pushing, pulling, dragging, etc.) and range from simple to
quite
complex.
• Toggle buttons are simple animated affordances that show a user when
something is turned on by the presence or change in colour when the toggle
is dragged.

Notifications
• Notifications are used to draw the user’s attention to something or to
indicate a change.
Input Fields
• Input fields indicate that a user can enter data. These are often conveyed
by the shape of the field and the contrast between the field and its
background.
Icons
• Icons often rely on a pattern or metaphorical affordance to help a user
navigate through an interface.
Photos
• They are quick visual cues that help users understand what they can do
with a product.

Animation in User Interface

Interaction trigger
How is animation caused: mouse, tap, swipe etc

Response
How do elements react: flip, decrease, increase, change colour etc

Timing
Duration of animation [micro animations - eg hover : 300ms]
How long after trigger animation begins (Delay)

Easing
Smoothness
Seamlessness

Creating Depth

UI Animations
UI animation involves incorporating movement into user interface elements
to elevate the interactivity and overall quality of a product.

Animation VS. Motion Graphics

Animation is a broad concept that encompasses the application of
movement to visual elements. While it is commonly associated with UX/UI
design, it extends its influence to various other domains like film, gaming,
and VR.
Motion graphics specifically involve infusing motion into graphic design
components. In simpler terms, motion graphics can be considered a subset
of animation.
Importance of UI Animation
By imitating the sensation of engaging with a tangible object in the physical
realm, animation imparts a crucial human element to digital interfaces.

Types of UI Animations
1. Micro-interactions
2. Loading and progress
3. Navigation
4. Storytelling and branding

Micro-Interactions
They are widely employed in digital interfaces. These subtle animations play
a key role in providing visual feedback to users, indicating successful or
unsuccessful completion of an action.
Aid users in comprehending and visualizing the outcomes of their
interactions.
Loading and Progress
• Loading and progress animations visually depict ongoing processes or
estimated completion time, ensuring users are informed and engaged.
Navigation
• Navigational animations play a pivotal role in guiding users through the
interface, particularly on complex or extensive websites.
Storytelling and Branding
• Animation effectively grabs user attention, highlighting brand elements
and presenting products in an engaging and entertaining fashion.
• An animated logo demonstrates the powerful fusion of storytelling and
branding, instantly communicating a brand's essence and identity to
viewers.

UI Animation Principles
• Squash and stretch: Objects can change shape when interacting with other
objects, exhibiting squash and stretch animations.
• Anticipation: Micro-animations preceding significant actions build
anticipation.
• Staging: Organizing and arranging elements strategically to guide users
towards specific actions or buttons.
 Follow through and overlapping action: UI elements can exhibit natural
movement by having different speeds and overshooting their action before
settling.
 Easing: Gradual and smooth movements of UI elements replicate real-life
motion, providing a more natural and comforting user experience.
 Arcs: Utilizing curved paths, such as arcs, can highlight element transitions in
responsive designs, deviating from rigid grid-based layouts.
 Secondary action: Supporting primary actions, secondary actions like pulsing
buttons enhance Micro -animations and add visual interest.
 Timing: The order and sequence of animated elements impact the
interface's
 mood and user focus, striking a balance between speed and comprehension.
 Exaggeration: Some UI animations can be creatively exaggerated to capture
 attention and infuse stylized elements into the design.
 Appeal: Micro-animations, even subtle ones, should be visually appealing to
 engage users, with color playing a significant role.
 Solid drawing & straight-ahead vs. pose-to-pose: These principles are less
 relevant to UI animation, involving 3D animation and the difference in
creating
 frames between key poses.

Animation Tools for UI Designers

Adobe After Effects: A powerful industry-standard tool for UI animation and
visual
effects, offering a wide range of effects and seamless integration with other
Adobe
software.
Motion UI: An easy-to-use tool with pre-made animations and transitions,
along with
the ability to create custom animations and code tutorials for prototyping.
Flinto: A prototyping and animation tool specifically designed for creating
interactive
transition-based animations for apps and websites.

Application of UI Animation
• Launch Screen Animation
• Onboarding Tour Animation
• Login Screen Animation
 • Explainer Animations
• Icon Animations

 Launch screen animation: Utilize in-app animations on the launch screen to

enhance brand recognition and create a strong first impression.
 Onboarding tour animation: Implement engaging animations for onboarding
tours, as they play a crucial role in user interactions after app installation.
 Login screen animation: Ensure that animated login screens align with the
brand, utilizing brand colors, mascots, and visually setting the desired mood,
while maintaining subtlety to avoid distracting users from the main objective
of conversion.
 Explainer animations: Use explainer animations to break down essential
content into easily understandable and digestible portions, offering a more
user-friendly alternative to lengthy blocks of text.
 Icon animations: Employ icon animations as vital elements of the UI
foundation, facilitating intuitive navigation within mobile apps.

Lecture 20 Component-Based Design Systems

Component Based Design System

 Design Systems
 Visual and functional consistency
 Brand Identity
 Design language
 Voice and tone
 Writing
 Pattern Libraries

Material Theming
Colour
Typography
Shape

Advantages of a Design System

 Empathetic workflow
 Efficient Testing
 Speed
 ConsistentA shared vocabulary
 Education

 Building a reusable component system