Module1:

1.1.1 What is User Interface Design?

● UI design means the visual design of a digital product’s interface. It’s the process of
creating interfaces with a focus on looks, style, and interactivity. UI designer will design
the movement between different screens, and create the visual elements that facilitate
user interaction.
● While UI design is largely a visual discipline, UI designers work on a vast array of
projects. In order to design accessible, user-friendly interfaces, UI designers bring
 empathy into every stage of the design process—from designing screens, icons, and
interactions, to creating a style guide that ensures consistency and the proper
implementation of a visual language across an entire product
● Think about your favourite application. When you downloaded it, you did not required
training to use it—you just started using it straight away. This is because the UI designer
uses style elements like patterns, spacing, and color to guide the user in a way that feels
natural.
● There are three main types of UI design:

1 Graphical user interfaces (GUI): This is what typically comes to mind when thinking of
UI design. It concerns the visual interfaces we see on our computers and handheld
devices, such as websites and app screens. Some common visual elements include the
mouse cursor, buttons, icons, menus, scrollbars etc.

2 Voice-controlled interfaces: These interfaces require sounds, specifically voices, to

initiate action. Virtual assistants, such as Siri, Google Assistant, and Alexa, are examples
of VUIs

3 Gesture-based interfaces: These interfaces are motion-activated and used for

applications such as virtual reality games. Example smartphone, you can interact with it
without using the keypad by swiping, tapping, pinching, and scrolling. The latest smart
devices also allow for “touchless” gestures where users can scroll or click without
touching the screen. Some products come with advanced camera and sensor technology
that pick up facial expressions and eye movements to scroll, click, and interact.

1.1.3 Usability Goals

Usability is broken down into the following goals:
● effective to use (effectiveness): Effectiveness is a very general goal and refers to how
good a system is at doing what it is supposed to do.

● efficient to use (efficiency): Efficiency refers to the way a system supports users in
carrying out their tasks.

● safe to use (safety): Safety involves protecting the user from dangerous conditions and
undesirable situations.

● have good utility (utility): Utility refers to the extent to which the system provides the
right kind of functionality so that users can do what they need or want to do.

● easy to learn (learnability): Learnability refers to how easy a system is to learn to use.

easy to remember how to use (memorability): Memorability refers to how easy a system is to
remember how to use, once learned
1.2.2 Conceptualizing Design

Conceptualization is the action or process of forming a concept or idea of something. The

Conceptualization Process in UX Design involves identifying a problem and creating the
structure for a user-centred solution. It gives shape to the idea. The accurate understanding of
the problem space can help in formation of design space.
The benefits of conceptualizing the design space are as follows:
• Orientation: enables design teams to find how the conceptual model will be
understood by users
• Open-minded: prevents design teams from becoming narrowly focused
• Common ground: allows design teams to establish a set of commonly agreed terms,
reducing misunderstanding and confusion.
1.2.3 Conceptual Model
● Conceptual models refer to any model that is formed after conceptualization process.

● They are abstract representations of how tasks should be carried out. People use
conceptual models subconsciously and instinctively as a way of structuring processes.

● For example, a common mental model for creating appointments involves calendars
and diaries. Designers can design software that matches users’ conceptual models by
knowing the occurrence and power of conceptual models.

● A conceptual model visually represents how a designer understands users' mental

models. To create a conceptual model, designers use information from user research.
They then use this information to develop visual representations of how users
perceive and interact with the system or product. These representations can take many
forms, including flowcharts, diagrams, wireframes, or prototypes.
● The core components are:

1. Metaphors and analogies that convey to people how to understand what a product
is for and how to use it for an activity (e.g. browsing, bookmarking).
2. The concepts that people are exposed to through the product, including the task–
domain objects they create and manipulate, their attributes, and the operations that
can be performed on them (e.g. saving, revisiting, organizing).
3. The relationships between those concepts (e.g. whether one object contains
another, the relative importance of actions to others, and whether an object is
part of another).
4. The mappings between the concepts and the user experience the product is designed
to support or invoke (e.g. one can revisit through looking at a list of visited sites,
most-frequently visited, or saved websites).
Q1.a: Explain user’s conceptual cognition.
1.3.1 What is cognition?
● Cognition refers to the mental processes involved in acquiring knowledge and
understanding. It uses existing knowledge and generate new knowledge.
● These are higher-level functions of the brain and encompass language, imagination,
perception, and planning.
 ● Examples of cognition include paying attention to something in the environment,
learning something new, making decisions, processing language, sensing and
perceiving environmental stimuli, solving problems, and using memory.
● There are two modes of cognition:
o Experiential: we perceive, act, and react to events around us effectively and
effortlessly

o Reflective: it involves thinking, comparing and decision making. This leads to

new ideas and creativity.

1.3.2 Why do we need to understand users Cognition?

● Interacting with technology is cognitive. We need to take into account cognitive
processes involved and cognitive limitations of users.
● We can provide knowledge about what users can and cannot be expected to do.
Identify and explain the nature and causes of problems users encounter. Supply
theories, modelling tools, guidance and methods that can lead to the design of better
interactive products.

1.3.3 Types of Cognitive Processes

Attention Perception Memory

Learning Language Thought

Fig 1.3.1 Types of Cognitive Processes

● There are many different types of cognitive processes. They include:

1. Attention:

● Attention is a cognitive process that allows people to focus on a specific stimulus in

the environment. It selects things to concentrate. It is a way to focus on parts of our
sensory input.
● Focussed and divided attention enables us to be selective but limits our ability to keep
track of all events.
● Information at the interface should be structured to capture users’ attention, e.g.,
use perceptual boundaries (windows), colour, reverse video, sound and flashing lights

2. Perception:
● Perception allows people to take in information through their senses, then transform it
into experiences and utilize it to respond and interact with the world.
● Vision is the most dominant sense for sighted individuals, followed by hearing and
touch.
● With respect to interaction design, it is important to present information in a way that
can be readily perceived in the manner intended.
● A general design principle is that information needs to be represented in an
appropriate form to facilitate the perception and recognition of its underlying
meaning.

3. Memory:
● Memory allows people to encode, store, and retrieve information. It is a critical
component in the learning process and allows people to retain knowledge about the
world and their personal histories.
● Memory involves recalling various kinds of knowledge that allow us to act
appropriately. It is very versatile, enabling us to do many things.
● It is not possible for us to remember everything nor would we want to, as our brains
would get completely overloaded.
● A filtering process is used to decide what information gets further processed and
memorized.
● Often, we forget things we would dearly love to remember and conversely remember
things we would love to forget.
● How does this filtering process work? Initially, encoding takes place, determining
which information is attended to in the environment and how it is interpreted. The
extent to which it takes place affects our ability to recall that information later. The
more attention that is paid to something and the more it is processed in terms of
thinking about it and comparing it with another knowledge, the more likely it is to be
remembered.
● Another factor that affects the extent to which information can be subsequently
retrieved is the context in which it is encoded.

4. Learning:
● Learning involves in taking in new things, synthesizing information, and integrating it
with prior knowledge.
● Learning can be considered in terms of:
1. How to use a computer-based application
2. Using computer-based application to understand a given topic
● It is well known that people find it hard to learn by following a set of instructions
instead, they prefer to learn by doing.
● GUIs and direct manipulation interfaces are good environments for supporting this
kind of active learning by supporting exploratory interactions.
● Benefit of interactive technologies is that they provide alternative ways of
representing and interacting with information that are not possible with traditional
technologies.

5. Language:
● Language and language development are cognitive processes that involve the ability
to understand and express thoughts through spoken and written words.
 ● Reading, speaking and listening are the three forms of language processing that have
similar and different properties. This allows us to communicate with others and plays
an important role in thought.
● One similarity is that meaning of sentences or phrases is the same regardless of the
mode in which it is conveyed.
● However, the ease with which people can read, listen, or speak differs depending on
the person, task, and context.

6. Thought:

● Thought is an essential part of every cognitive process. It allows people to engage

in decision-making, problem-solving, and higher reasoning. These are the processes
involving reflective cognition.
● They include thinking about what to do, what the options are, and what the
consequences might be of carrying out a given action.
● They often involve conscious processes, discussion with others, and the use of various
kinds of artifacts.

● Reasoning also involves working through different scenarios and deciding which one
is the best solution for the given problem.

1.4 Core Elements of User Experience

Fig. 1.4.1 Core Elements of UX

● The goal of any user experience project is to ensure users have a positive experience
with a product. Still, between the idea and the final product lies a complex web of
decisions that impact the user experience in some or the other way.
● So, the 5 elements of UX design act as a guide to provide structure and direction to
the process of making these decisions at the appropriate point in the process.
● The fig 1.4.1 shows the elements of user experience.
● They exist on 5 separate planes, stacked one above the other to create an outline of the
process which UX teams can follow for every new project they design.
● From bottom to top those planes are strategy, scope, structure, skeleton and surface.
Each one builds on the next as the project goes from abstract towards more concrete
level to get the finished product.
1. Strategy:
o What objectives the product should be designed to meet? This layer is the
most abstract of the model, takes into consideration both user needs and
business goals.

o Example: let’s say you want to build an app that helps people find charging
stations for electric cars.

▪ Product objectives: Informing electric car owners of the nearest place

to charge their cars

▪ User needs: Also provide directions to the nearest charging station,

information about how many chargers are available there and how
much it costs to charge a car at each listed charging station.

2. Scope:
o What is the product that will be created to solve the problem? Within this
layer, the team creates the set of functional requirements (what features to
build) and content requirements (written and visual information to include).

o Example: In our car charger finding app,

▪ Functional specifications: include a feature to save previously

discovered charging stations.

▪ Content requirements: list information like images of each charging

station, maps of their locations, and details about the voltage of each
available charger.

3. Structure:
o How is the design organized and how do interactions work? This layer
includes information architecture (the structure and organization of content)
and interaction design (the interactive experience of the product).
o Example: In our car charger finding app,
▪ Information architecture: to convey the structure, we might create a
site map that shows the hierarchy of the product. This could include a
home page where users can enter a location to find car charging
stations. Then lead to a list of stations each with a link that takes users
to pages for individual stations.
 ▪ Interaction Design: we can create a user flow to show how the system
responds after a user enters their location information. It can account
for what happens if the system finds nearby charging stations and if
there is an error which prevents the system from successfully
understanding the location information provided.

4. Skeleton:
o How is information presented and arranged? This layer begins to consider UI
design (design of interface elements), navigation design (how users move
through a system), and information design (presenting information to facilitate
understanding). A common output at this stage is a set of wireframes and
prototypes.
o Example: For our car charger finder app, to explain what users will see when
they navigate to a page that describes a specific electric car charging station,
we can create a wireframe that provides a blueprint of where each component
of the page would go. We can have a header with the app logo and navigation
back to the complete list of stations, followed by an image of the charging
station, then a link to a map of the location followed by text providing
practical information about the station. This will help visualise each
functionality and content that will appear on the page and its placement.

Fig 1.4.2 Wireframe for Car charger finder app

5. Surface:
o How does the product look and feel to users? This stage emphasizes visual
design, for example, what colours and typefaces are used, and is the stage
where UI design is front and centre (though it is not exclusive to the surface).
o Example: In our electric car charger finder app, this means creating a
consistent colour palette and layout, where the logo appears at the top of the
page, the most important information appears in a wide column in the middle
of the page, and less important information is relegated to each side of the
page. This are high fidelity wireframes which are made with the help of tools.
 Fig 1.4.3 High fidelity wireframe for Car charger Finder App

Module 2:

2.1 What is User Experience Design?

 ● User experience (UX) design is the process to create products that provide meaningful
and relevant experiences to users. UX design is the design of the elements that
determine the interaction a user has with a product or service.
● UX design shape the products and services we use daily to make them easy to use,
efficient, and enjoyable for the end-users and how easy it is to accomplish their
desired tasks. This could mean anything from how a physical product feels in your
hand to how straightforward the checkout process is when buying something online.
The goal of UX design is to create easy, efficient, relevant, and all-around pleasant
experiences for the user.
● UX designers combine market research, product development, strategy, and design to
create seamless user experiences for products, services, and processes. They build a
bridge to the customer, helping the company to understand better and fulfil their needs
and expectations. Its impact is such that it can make or break a business or brand.

2.1 User Experience Design Process and Methodology

● The UX (User Experience) design process and Methodology is defined as a
systematic approach that focuses on creating meaningful and satisfying experiences
for users when interacting with a website, application, or any digital product.
● It involves understanding the users' needs, behaviours, and goals, and then using that
knowledge to design intuitive and engaging interfaces that meet those needs
effectively.
● The Stages of UX Design Process are as given in the fig 2.2.1 below.

User Research Prototype Testing

Implementation
Design Wireframing & Launch

Fig. 2.2.1 UX Design Process and Methodology

2.2.1 User research

● It is an important stage in your entire UX design process. We need to conduct this
research to understand the needs of the user.
● Designers can have biases and assumptions that influence the design solutions and so
research will help us clarify those assumptions.
 ● Research involves interacting with the product ‘s target users. The final solution
requires user testing.
● We cannot rely on assumptions based on experience. If we do so, we may not
understand user needs and hence cannot improve a service or product. User research
gives us the information we need to develop the product, hence it’s an essential
component of any UX design project.
● Techniques for conducting user research

o Interviews: Interviews are one of the primary ways of collecting data from target
users. It involves in-depth, one-to-one conversation. It is a guided conversation
where the researchers ask questions and take down the responses from the
participants. The advantage of interview lies in its flexibility and a well-structured
interview enables researchers to gain detailed information and deep insights into
the users.
o Online surveys: It is usually done when you need to collect large sample size.
Surveys are online forms or offline form with questions regarding the product.
Researchers use them to get user perspectives on a launched or a budding product.
A couple of popular tools for online surveys are Google
Forms and SurveyMonkey. These tools help keep the user responses intact and
easily accessible.
o Persona: Personas are fictional characters which represent target audience
characteristics and experiences. They are needed to create a sense of empathy
among team members and communicate user needs to stakeholders. They visually
represent user needs and expectations, ensuring that your decisions align with user
expectations.
o Card sorting: Card sorting is a user research method commonly used to aid the
design of information architecture, workflows, menu structure or website
navigation paths. Researchers use cards, sticky notes on whiteboards, or even card
sorting software like Miro to group similar user experiences, motivations, needs,
and expectations. This is helpful for creating personas, storytelling boards, affinity
maps, user journeys, etc.

2.2.2 Design
● Once you know your users, next step is to design. UX professional should be aware
that design is more than appearance. UX design comprises UX elements from
information architecture, visual design, interaction design, content strategy to
sitemaps.
● As user requirements tend to evolve throughout the design process as you gain more
insights and feedback. It's important to remain flexible and open to the changing user
needs.
● Methods of generating and evaluating the design:
o Brainstorming or ideation: Brainstorming is a generative method where designers
collaborate with one another and generate ideas based on data collected in earlier stage.
o Sketches: Sketches are used for putting your thoughts on paper, and are another
generative technique in the design process.
o User Journey Map: It is an illustration of the interaction between a user with a company,
product or service at every stage of engagement from researching, making the decision,
purchasing to post-purchase. It involves the personas, time frame, and actions for each stage,
touch points and sales channels, emotions, and experience. A good and comprehensive user
journey map explains user experience from a user perspective.
o Storyboards: A storyboard is a comic version used to capture a user’s interaction with a
product or service. It allows researchers and stakeholders to visualize. It’s made up of a
number of squares with illustrations or pictures representing each shot, with notes about
what’s going on in the scene and what’s being said in the script during that shot.

2.2.3 Wireframing
● A wireframe is a schematic, a blueprint, useful to help you and your programmers and
designers think and communicate about the structure of the software or website you're
building.
● It allows you to define the information architecture, navigation design, and interface
design. It helps you to get an early version of your product to review.
● Many tools and applications help you in wireframing.

2.2.4 Prototyping

● The purpose of prototyping is not to create a fully functional product but to test and
validate your design decisions.
● It resembles the closet version of your final product. Prototyping allows you to create
interactive, clickable versions of your design, giving your users a realistic feel of how
the final product will function.
● It allows you to test your design, get feedback and iterate on your ideas before moving
ahead.

2.2.5 Testing

● With prototypes, user testing can be conducted with users to validate the
design flow and user experience. In some companies, testing usually
makes up a big bulk of daily routine as it allows them to continuously
improve the product.

2.2.6 Implementation & Launch

● After testing, the prototype can is converted into actual product for UAT Testing
before an official launch.
Q6.b: Write a short note on mental models.

2.6 Mental Models

● People primarily develop knowledge of how to interact with a system and how that
system works. These 2 kinds of knowledge were referred to as a user’s mental model.
● A mental model is an important concept of user interface design. It is a representation
of the world that help us understand complex concepts and make better decisions.
● Thus, they are used by people to reason about a system and to try to fathom out what
to do when something unexpected happens with the system or when encountering
unfamiliar system.
● The more someone learns about the system and how it functions, the more their
mental model develops. They provide a framework for thinking and problem-solving,
allowing us to view problems from different angles and generate creative solutions,
and help us become more effective thinkers and problem solvers.
● Mental models are created based on past experiences, beliefs, and assumptions to
understand how the world works.
● Mental models are important in creating user-friendly interfaces. Designers research
users' mental models to create designs that align with their expectations and beliefs. If
interfaces match users’ expectations, they do not have to learn new concepts or
behaviours.
● Mental Model Example: The Back and Forward Buttons
As shown in figure 2.7.1, the Back button is an icon in the shape of a left-pointing
arrow and the Forward button is an icon in the shape of a right-pointing arrow. They
are used to navigate backward and forward through the user's history – either on that
website/app or on the web browser itself.

Fig. 2.7.1 Back & Forward Buttons

● The mental model for this icon is "Left represents backward and Right represents
forward". If you think about this, why does a left arrow mean back? Culturally we are
accustomed to this, but there's no logic behind it. However, embracing this heuristic
allows users to understand that clicking this button will take them one step back in
their navigation history.
● Mental models can be conscious or unconscious, varying in accuracy and usefulness
depending on the context. However, if they are incomplete, they can also lead to bias
and errors, inaccurate, inflexible, or resistant to change.
 ● Understanding the concept of mental models can help you make sense of usability
problems in your design. When you see people make mistakes on your site, the reason
is often because they've formed an incorrect mental model.

● Example: Travel App

2.8 Visual Design Principles

● They inform us how design elements go together to create thoughtful visuals.
Graphics that take advantage of the principles of good Visual design can drive user
engagement and increase usability.

Fig 2.8.1 Visual Design Principles

● Scale
o This principle states that: “when something is big, it’s more likely to be
noticed.”
 o A visually pleasing design generally uses no more than 3 different sizes.
Having a range of differently sized elements will not only create variety within
your layout, but it will also establish a visual hierarchy.
o Be sure to emphasize the most important aspect of your design by making
them bigger.

● Visual Hierarchy

o Visual hierarchy can be implemented through variations in scale, value,

colour, spacing, placement, and a variety of other signals.
o It controls the delivery of the experience. If you have a hard time figuring out
where to look on a page, it’s more than likely that its layout is missing a clear
visual hierarchy.
o To create a clear visual hierarchy, use 2–3 typeface sizes to indicate to users
what pieces of content are most important or at the highest level in the page’s
mini-information architecture. Consider using bright colours for important
items and muted colours for less important ones.
● Balance

o Just like when balancing weight, if you were to have one small design element
and one large design element on the two sides of the axis, the design would
feel a bit unbalanced. The area taken by the design element matters when
creating balance, not just the number of elements.
o Balance can be:
▪ Symmetrical: elements are symmetrically distributed relative to the
central imaginary axis
▪ Asymmetrical: elements are asymmetrically distributed relative to the
central axis
▪ Radial: elements radiate out from a central, common point in a circular
direction.
● Contrast

o Contrast provides the eye with a noticeable difference (e.g., in size or color)
between two objects (or between two sets of objects) in order to emphasize
that they are distinct.
o The principle of contrast is often applied through color. For example, red is
frequently used in UI designs, especially on iOS, to signify deleting. The
bright color signals that a red element is different from the rest.

● Gestalt
o “Gestalt” is German for “unified whole”. The first Gestalt Principles were
formulated with the aim to understand how humans typically gain meaningful
perceptions from the confused provocations around them. They identified a set
 of laws which address the natural compulsion to find order in disorder.
According to this, the mind “informs” what the eye sees by perceiving a series
of individual elements.
o Closure: States that even if an image is missing parts, your brain will fill in the
blanks and perceive a complete picture. For example, we can still see the
circle and rectangle below, even though the lines are broken. Some of the most
recognizable logos (e.g., IBM, NBC) apply this principle.

Fig.2.8.2 (a)Principle of Closure (b)Principle of Common Region

o Common Region: Grouping elements that are in the same closed region as
shown in fig 2.8.2 (b). You include related objects in the same closed area to
show that they stand apart from other groups. Example likes, comments and
other interactions in Facebook appear within the boundaries of one post and so
stand apart from others.

o Figure/Ground (Multi-stability): We dislike uncertainty, so we look for

solid, stable items. Figure/ground can be applied in many ways, but chiefly to
contrast elements. Example, light text (i.e., figure) from a dark background
(i.e., ground).

Fig. 2.8.3 (c) Principle of Figure/Ground (d) Principle of proximity

o Proximity: It refers to how close elements are to one another. The strongest
proximity relationships are those between overlapping subjects, but just
grouping objects into a single area can also have a strong proximity effect.
Q4.a: Explain the Information Design and Data Visualization
2.9 Information Design and Data Visualization
2.9.1Data Visualization:
● Data visualization can be defined as representation of data on its own and in a strictly
instructive manner highlighting trends, patterns, and relationships in a simplified and
visually engaging manner, so that readers can understand the information easily. It is
a coherent way to visually communicate quantitative content.
● In Data Visualization, depending on its attributes, the data may be represented in
many different ways using tools such as charts, graphs, maps, or other visual
elements.
● Data visualizations should be useful, visually appealing and never misleading.
Especially when working with very large data sets, developing a cohesive format is
vital to creating visualizations that are both useful and aesthetic.
● As the world is getting connected with an increasing number of electronic devices, the
volume of data is growing exponentially. It is difficult for the human brain to
comprehend this data without drawing some kind of analogy or abstraction. Data
visualization plays a vital role in creating these abstractions.
● By converting these complex numbers and other information into graphs, content
becomes easier to understand and use. That’s why data visualization plays an
important role in every field like economics, science, technology, healthcare and
human services.
● The Most Popular Types of Charts for Data Visualization:
o Line Charts: Line charts are used to compare values over time
o Bar Charts: Bar charts should be used to compare quantitative data from
several categories.
o Scatter Plots: Scatter plots should be used to display values for two variables
for a set of data.
o Pie Charts: Pie charts should be used to show parts of a whole. They can’t
display things like changes over time.
UI Elements and Widgets
2.10.1 UI Elements:

● UI elements are the core building blocks for all products. These are the most integral
part of product design, be it a web design or mobile, desktop, or Augmented Reality
or Virtual Reality application.
● They are what users interact with when they are using the product. They click on a
button to sign up, they use navigational components to switch between pages, etc.
 ● Interface elements include but are not limited to:
o Input Controls: checkboxes, radio buttons, dropdown lists, list boxes,
buttons, toggles, text fields, date field
o Navigational Components: breadcrumb, slider, search field, pagination,
slider, tags, icons
o Informational Components: tooltips, icons, progress bar, notifications,
message boxes, modal windows
o Containers: accordion

2.10.2 Widgets:

● The widget is the UI element that helps you build the layout of your page. Almost
everything that you see on the page is a widget. You build the UI by combining the
widgets in a parent-child relationship. Text, Row, Column, Stack, and Container are
the most basic types of widgets.
● Widgets in smartphones can be used to display selected bits of information that reside
in the associated applications. For example, a user might wish to see baseball scores
for only one team. The widget extracts the selected data from the app and displays it
on the screen.
● Types of widgets that can add to your page.
o Desktop widgets: They are interactive tools that are downloaded to the
computer’s desktop. This is the case of search engines, weather applications,
clocks, etc.
o Mobile widgets: Same as the previous ones, but adapted to mobile
technology. The easiest way to install them is to hold down your finger in an
area of the screen where there are no icons and we will get a drop-down with
the option of the different widgets.
o Web widgets: The parts of code that are translated into functionality or
content and that are programmed from JavaScript, Flash, Silverlight, and
Windows Media Player.
o Physical widgets: They are compact mechanisms that integrate typical
functions of widgets, such as alarms, weather, etc.

2.11 Screen Designs and layouts:

● Screen design refers to the graphic design and layout of user interfaces on displays. It
is a sub-area of user interface design but is limited to monitors and displays. In screen
design, the focus is on maximizing usability and user experience by making user
interaction as simple and efficient as possible.
● Screen design goes hand in hand with technical, psychological and of course the
practical aspects of a user interface. The goal of the UI and the framework in which it
exists must be taken into account.
● Whether website, mobile website or software application, screen design is not only
more important than the first impression of an application, but is a key factor in terms
of the graphical properties of the entire user interface. So, screen design has a
particularly important role in the areas of usability, user experience and interaction
between man and machine.
● Screen design can significantly impact the conversions of a website or an app
● Basic principles at the screen level
 o Ask: What is the user doing
o Think: What information is required
o Design: Form follows function
● Tools for layout
o Grouping and structure

o Decoration - fonts, boxes etc.

o Alignment of items

o White space between items

Example of Storyboard: Online food ordering system

 Q2.a: What are some popular UX testing methods and techniques?
Q4.b: Why do UI/UX designers use wireframes? What are the different types of
wireframes?
Q5.a: Discuss in detail, why understanding the business requirements/goals is
important

Module 3:

Q1.b: Explain the Usability Testing Process.

3.1.2 Usability Testing

Usability testing is the process of discovering ways to improve your product by observing
users as they engage with the product itself (or a prototype of the product). It’s a UX research
method specifically trained on the usability of your products. And what is Usability?
Usability is a measure of how easily users can accomplish a given task with your product.

Usability testing, when executed well, uncovers pain points in the user journey and highlights
barriers to good usability. It will also help to learn about your users’ behaviors and
preferences as these relate to your product, and to discover opportunities to design for needs
that you may have overlooked.

You can conduct usability testing at any point in the design process when you’ve turned
initial ideas into design solutions, but the earlier the better. Test early and test often! You can
conduct some kind of usability testing with low- and high- fidelity prototypes alike—and
testing should continue after you’ve got a live, out-in-the-world product.

3.1.3 Types of Usability Testing

The kind of test you want to run will help you choose the right usability testing method.
All product research and testing broadly falls into two main categories:
1. Moderated or unmoderated
2. Remote or in-person

1. Moderated or Unmoderated
● Moderated and unmoderated usability testing are two different approaches to
usability.
 ● Moderated usability testing, a moderator guides the users through the test (in-person
or remotely). They answer any questions participants may have, ask follow-up
questions, and record observations during the test.
● Unmoderated usability testing, as the name suggests, doesn’t involve a moderator.
Users’ complete tasks independently, typically using usability testing tools that record
their actions and responses.

2. Remote or In-person
● Research can be done remotely or in-person, depending on the type of product you're
testing and your research goals.
● Remote usability testing can be moderated or unmoderated, and is done using online
tools or software that allows users to share their screens, record their activity, and
provide feedback. It’s useful because your team and test participants can be based in
entirely different locations.
● In-person usability testing, on the other hand, is conducted in a physical location,
usually a usability lab or other research facility. For that reason, it can be more
expensive, time-consuming, and limiting in terms of sample size and geographic
reach. Many researchers opt for remote research, however in-person testing may be
necessary for products that require safety considerations, supervision during use, or
physical testing.

Moderated + in-Person
# Lab usability testing
This type of usability research takes place inside a specially built usability testing
lab. Test subjects complete tasks on computers/mobile devices while a trained
moderator observes and asks questions. Typically, stakeholders also watch the
proceedings and take notes behind a one-way mirror in the testing area.

# Guerrilla testing
In guerrilla testing, test subjects are chosen at random from a public place,
usually a coffee shop, mall, or airport. They are asked to perform a quick
usability test, often in exchange for a gift card or other incentive.
Guerrilla testing is used to test a wide cross-section of people who may have no
history with a product. It's a quick way to collect large amounts of qualitative
data that validate certain design elements or functionality

#Contextual Inquiry
Contextual inquiry (CI) is a research method that can be used in conjunction
with usability testing to gain a better understanding of how users interact with
products or tasks. CI involves observing and interacting with users in their
natural environment to understand their motivations and experiences.

Moderated + Remote
# Phone interviews
In a phone usability test, a moderator verbally instructs participants to complete
tasks on their computer and collects feedback while the user's electronic
behavior is recorded remotely.
Phone interviews are an economical way to test users in a wide geographical
area. Because they are less expensive than in-person interviews, they help collect
more data in a shorter period.

Unmoderated + remote
# Session recordings
Session recordings use software to record the actions that real (but anonymized)
people take on a website such as mouse clicks, movement, and scrolling. Session
recordings are a fantastic way to spot major problems with a site's intended
functionality, watch how people interact with its page elements such as menus
and Calls-to-Action (CTAs), and see places where they stumble, u-turn (go back
to a previous page quickly after landing on a new one), or completely leave.

# Online testing tools and platforms

There are a variety of online testing tools that allow you to remotely observe user
behavior on your website; some let you pay participants to take short tests, while
others monitor the behavior of real users as they interact with your site. You
might receive audio recordings of users talking while they navigate your site or
videos of users completing a set of tasks.

Unmoderated + in-Person
#First-click
The goal of first-click testing is to evaluate whether users can easily identify
where they need to navigate to complete a given task. The participant is asked a
question like “Where would you click to buy this product?” and the software
records where they direct their mouse.
First-click testing is useful for collecting data on user expectations and
determining the prime location for menus and buttons. By measuring how long it
 takes users to make a decision, you learn how intuitive your site design and
linking structure are.

# Eye-tracking
During eye-tracking tests, researchers observe and study users' eye movements
using a special pupil-tracking device mounted on a computer. By analyzing
where users direct their attention when asked to complete a task, the machine
can create heatmaps or movement pathway diagrams.
Eye-tracking studies can be used to glean information about how users
interact visually with a page; they also help test layout and design elements and
see what may be distracting or taking someone's focus away from the main page
elements.

Q1.b: Explain the Usability Testing Process.

3.1.4 Usability Testing Process

Regardless of your resources or budget, it's possible to set up and run usability tests.
Following a consistent process is key to getting started:

1. Define a goal and target audience

2. Utilize a tool that allows for continuous testing
3. Establish evaluation criteria
4. Create a usability testing script
5. Be mindful of test length
6. Run a pilot test
7. Recruit test participants
8. Run the test with best practices
9. Analyze and report your findings
10. Iterate and repeat

1. Define a goal and target audience

● The point of testing is to deliver a product focused on providing a positive user
experience. To do that, you need to understand who your users are.
● Start by asking questions like:
o What’s your demographic (e.g. age, location, profession)?
o What specific tasks do you want to enable users to accomplish with your product
(e.g. checkout process, changing their username)?
o What are your desired timeframes for users to complete tasks and navigate the
interface?
● Once you have your answers, formulate a problem statement that makes it clear what
insights you want to gain.
● For example: "We want to assess the usability of our product for 20–30-year-old
customers to complete checkout within 3 minutes." This will help you determine the
right research methods and metrics for evaluating the users’ experience.
2. Use a tool that enables continuous testing
● It’s worth investing in a tool to facilitate your team to carry out fast, scalable usability
testing. We recommend choosing one that supports them to test early and often in the
process, including after launch.
● This continuous research can inform your design decisions, keep you updated on
evolving user needs, and will ultimately help retain users. For example, a tool like
Maze supports testing throughout the product development lifecycle, and after launch.
● Here’s what you and your team can do with Maze:
o Live website testing: Perform usability testing tasks on a live website or web-
based application
o Prototype testing: Integrate with your prototypes from Adobe XD, Figma,
Sketch, and Invision to validate design concepts early
o Usability testing templates: Hit the ground running with pre-built templates to
save time and ensure your tests are designed to capture relevant insights

3. Establish evaluation criteria

o How do you know if your team is evaluating the right thing? Establishing your
evaluation criteria will help focus your team on specific elements of the user
experience.
o Depending on the goal of your test, consider evaluating usability metrics like:
● Task completion rate
● Direct and indirect success
● Time-on-screen
● Time-on-task
● User satisfaction score
● Mis click rate
o For example, to measure user accessibility during a checkout process, you can
review metrics like the time it takes for users to complete the checkout and overall
success rate (i.e. percentage of successful purchases). It’s also a good idea to
establish benchmark test results using earlier prototypes or competitor products, so
you can track user performance as your product evolves over time.

4. Create a usability testing script

● A well-crafted usability testing script outlines the tasks to be performed,
instructions to be given, and questions to be asked.
● It serves as a roadmap for the test participant and provides an opportunity to
identify any potential problems or areas of improvement.

5. Be mindful of length
● Keep your tests short and sweet.
● When it comes to test duration, it depends on factors like the product's complexity,
the scope of the testing objectives, and participant engagement level. But, as a
general guideline, usability tests are an average duration of 15–20 minutes with 5
—10 tasks.
● It should be short enough to maintain participants' focus, while giving your team
sufficient time to gather meaningful insights.
6. Run a pilot test
● If you want to nail usability testing, getting your team to do a pilot run is a smart
move.
● Ideally, your test participant should be someone inside your organization, but not
directly involved in your project, as they might have preconceived notions about
how the product works.
● Otherwise, you could test a small batch of participants who represent your target
user.
● The pilot test is where you evaluate the clarity and effectiveness of your testing
materials, like the script, tasks, and instructions.
● You can also validate the feasibility of your chosen testing methods, tools, and
environment.

7. Recruit test participants

● “No matter how much time you spend on ideation and prototyping your design
solution, you should always test it with real people,” says Nick Babich, Editor-in-
chief of UX Planet. You must recruit participants that represent your target
audience and have similar backgrounds, preferences, and experiences as your
intended users.
● Here's how you can hire participants in three easy ways:
● Invite them: You can invite participants directly from your website or
browser-based products using popover invites.
● Recruit existing users: If you’re testing an existing product, you can
source testers from your current user base. With recruitment tools, you can
directly create participant databases from your CRM, segment them, and
send personalized emails.
● Recruit from a panel: You can also hire participants quickly from service
providers.
● When recruiting participants, consider their availability and willingness to
participate in the session. Screen participants based on your criteria and avoid those
who aren’t a good fit for the test.

8. Create a positive testing environment

● Usability testing should feel like an interactive conversation, not an interrogation.
● To get the most out of your usability test, be sure to brief your team on how to
interact with participants and reduce bias.
● Your researchers should avoid leading questions that might influence participants'
behavior—and each participant should feel comfortable providing honest feedback.

9. Analyze and report your findings

● When you transform raw data and participant feedback into actionable insights,
you'll be able to identify user pain points, prioritize UX improvements and
communicate them effectively within your team.
● Some metrics you should be tracking include:
 o Usability metrics like total testers, bounce rate, mis click rate, and average
duration
o Mission paths for how participants interacted, and optimal path analysis
o Success metrics based on how many testers deviated from the intended flow
o Closed and open questions with a visual representation of responses

10. Iterate and repeat

● Usability testing is an ongoing process that requires iteration, feedback loops, and
revisions throughout the product lifecycle.
● You can test different versions of a design and analyze the results to determine
which one works best. As your product and audience grow, it's important to re-
evaluate your usability testing process and adapt it to accommodate new goals, user
segments, and market conditions.

Q1.e: What is an interactive digital prototype?

Q6.a: Write a short note on the benefits of creating a usability test plan.
Q6.c: Write a short note on prototyping and its types.

Module 4: UX Design Process – Iterate/Improve and Deliver

Q5.b: Consider a Healthcare Information Portal: What methods and tools would you
use to gather user feedback and identify usability issues? How would you prioritize
these issues for improvement?

Module 5: Introduction to Virtual Reality

Q1.d: Define the interface to the virtual world — input & output — visual, aural, and
haptic displays.

Q2.b: Discuss the various key elements of virtual reality experience.

Q3.b: What is aural representation and haptic representation in VR?

Module 6: Applying Virtual Reality

Q1.c: Demonstrate the benefits of virtual reality.

Q3.a: Explain 5 visual design principles that impact UX.

Q6.d: Write a short note on applications of virtual reality.

 Consider healthcare Information Portal: In context to this, what methods and tools would
you use to gather user feedback and identify usability issues?

 Suppose you are developing a VR game. How would you apply spatial audio
techniques to create a more immersive audio environment?

 Apply knowledge of human physiology to design a virtual reality experience that

minimizes motion sickness. What physiological factors need to be considered, and
how can they be addressed in the design?

 Apply the concept of presence in virtual reality to design an educational VR

experience. How does a strong sense of presence enhance the learning environment
in VR?

 You are a UX researcher working on a website redesign project for an e-commerce

company. Apply the usability test and specify the issues identified during the test?

 Apply the criteria for identifying a good candidate for VR to a specific application,
such as architectural visualization or employee training. Justify the selection based
on the unique qualities of virtual reality.