Course : UI/UX

By ,

D CHAITRA

Assistant Professor
Course objectives:

● Understand user experience design requirements, with design goals, metrics and targets.

● Explore different prototyping methods, UX design principles with case examples.

● Understand the role of design thinking concepts and mental models in UX design.

Course outcome

(Course Skill Set) At the end of the course the student will be able to:

1. Explain the user experience design requirements.

2. Relate design thinking concepts and mental models to UX design.

3. Illustrate UX design in line with design goals, metrics and targets.

4. Demonstrate different prototyping in relation with software engineering.

5. Explain UX design principles with case examples.

1|Page
Module-1 Introduction: Usability to user experience, Emotional impact as part of user
experience, User experience needs a business case. Extracting Interaction Design
Requirements: Needs & Requirements, Formal requirement extraction, Methods for
requirement extraction.

Module-2 Design Thinking, Ideation, and Sketching: Design Thinking, Design Perspectives, User
Personas, Ideation, Sketching. Mental Models and Conceptual Design: Storyboards, Design
influencing user behaviour.

Module-3 Design Production: Detailed Design, Wireframes. UX Goals, Metrics and Targets: UX
Goals, UX Measures, Measurement instruments, UX Metrics.

Module-4 Prototyping: Depth & breadth of a prototype, Fidelity of prototypes, Paper

prototypes. Connections with Software Engineering: Foundations for success in SE-UX
development, The challenge of connecting SE and UX.

Module-5 UX Design Guidelines: Using and interpreting design guidelines, Human memory
limitations, UX design guidelines & examples, Planning, Translation, Physical action, Outcomes,
Assessment, Overall.

2|Page
Suggested Learning Resources:

Books

1. REX HARTSON and PARDHA S. PYLA, The UX Book-Process and Guidelines for Ensuring a
Quality

User Experience, Morgan Kaufmann, Elsevier, 2012.

Web links and Video Lectures (e-Resources):

● https://www.freecodecamp.org/news/ui-ux-design-tutorial-from-zero-to-hero-
withwireframe-

prototype-figma/

● https://www.edureka.co/blog/ui-ux-design-tutorial/

● https://www.udemy.com/course/introtoux/

Activity Based Learning (Suggested Activities in Class)/ Practical Based learning

● UI design demonstrations covering different UX design principles/concepts (specified in the

syllabus) using UI/UX tools like Lunacy, framer, penpot, visily etc.

3|Page
 MODULE 2

DESIGN THINKING, IDEATION, AND SKETCHING

4|Page
• The design-thinking paradigm is about social and cultural aspects of interaction and the
design of “embodied interaction” because it is about interaction involving our whole
bodies and spirit, not just our fingertips on a keyboard.

• A primary characteristic of the design-thinking paradigm is the importance of

emotional impact derived from design—the pure joy of use, fun, and aesthetics felt in
the user experience.

• Design Thinking : Design thinking is a mind-set in which the product concept and design
for emotional impact and the user experience are dominant. It is an approach to
creating a product to evoke a user experience that includes emotional impact,
aesthetics, and social- and value-oriented interaction.

• As a design paradigm, design thinking is an immersive, integrative, and market-oriented

eclectic blend of art, craft, science, and invention.

• Ideation : Ideation is an active, creative, exploratory, highly iterative, fast-moving

collaborative group process for forming ideas for design. With a focus on brainstorming,
ideation is applied design thinking.

• Sketching : Sketching is the rapid creation of free-hand drawings expressing preliminary

design ideas, focusing on concepts rather than details. Multiple sketches of multiple
design ideas are an essential part of ideation. A sketch is a conversation between the
sketcher or designer and the artifact.

5|Page
6|Page
 Design Thinking

Design Thinking is a user-centered approach critical to UI/UX design, involving these phases:
• Empathize: Understanding the end users deeply to gather insights about their needs,
behaviors, and experiences. This can involve user interviews, surveys, and observing
users interacting with similar products.
• Define: Synthesizing the information collected during the empathize phase to define the
core problems or pain points users face. This often results in a clear problem statement.
• Ideate: Brainstorming a wide array of ideas and solutions. Techniques like mind
mapping, brainstorming sessions, and sketching are often used to encourage creative
thinking.
• Prototype: Creating low-fidelity (wireframes, paper sketches) and high-fidelity
(interactive digital prototypes) versions of the product. Prototypes help in visualizing
and refining ideas.
• Test: Evaluating the prototypes with real users to gather feedback and identify areas for
improvement. This iterative process helps in refining the design to better meet user
needs.

7|Page
DESIGN PERSPECTIVES
• Ecological Perspective
• Interaction Perspective
• Emotional Perspective

The Ecological Perspective in UI/UX design focuses on the interaction between users and the
entire environment in which the product operates. This perspective considers not only the user
interface but also the context and the environment in which the user will interact with the
product. (where, when, and how users will interact with the product eg: mob app )
• The Interaction Perspective focuses on the ways users interact with the product,
emphasizing usability, efficiency, and satisfaction in the user's interactions.
- It is a task and intention view, where user and system come together.
It is where users look at displays and manipulate controls, doing sensory, cognitive, and
physical actions.
• The Emotional Perspective in UI/UX design addresses how the design evokes emotions
and creates an emotional connection with the user. Conducting emotional mapping to
understand the emotional states of users during their interaction with the product.

Visual perspective
• Ecological Perspective: Focuses on the broader context and environment of use.
-Where: Context of use, environmental considerations.
-How: Adaptive design, system integration.
• Interaction Perspective: Emphasizes the usability and efficiency of user interactions.
-How: Usability, feedback mechanisms, consistency.
-What: User flows, wireframes, interaction testing.
• Emotional Perspective: Centers on the emotional impact and aesthetic appeal.
-Why: Emotional connections, visual design, user delight.
-What: Emotional mapping, personas, emotional design elements.

8|Page
USER PERSONAS: persona is a story and description of a specific individual who has a name, a life,
and a personality.

What Are Personas Used For? Why Do We Need Them?

User personas are essential tools in UI/UX design and various other fields where understanding the
user is critical

• Understanding Users
• Guiding Design Decisions
• Prioritizing Features
• Creating Empathy
• Aligning Teams

9|Page
Why Do We Need Personas?

• Focus on Real Users

• Informed Decision Making
• Efficiency in Design Process
• Consistency Across Teams
• Identifying User Needs and Pain Points
• Strategic Planning

Comparison Between Buxton Design Exploration

Sketches and Traditional Low-fidelity Refinement
Prototypes

10 | P a g e
 MENTAL Models and Conceptual Design

What Is a Mental Model?

• a mental model is an explanation of someone’s thought process about how something
works in the real world.”
• A designer’s mental model is a vision of how a system works as held by the designer.
• A user’s mental model is a description of how the system works, as held by the user. It is
the job of conceptual design

Mental models are internal representations of how users believe a system works. These are
formed based on prior experiences, knowledge, and expectations.

11 | P a g e
Mapping the designer’s mental model to the user’s mental model.

12 | P a g e
 Mapping the designer’s mental model to the user’s mental model.
Conceptual design is an early phase of the design process, in which the broad outlines of
function and form of something are articulated. It includes the design of interactions,
experiences, processes, and strategies.

Designer workflow and connections among the three conceptual design perspectives

13 | P a g e
 For the ecological perspective, illustrate high-
level interplay among human users, the system
as a whole, and the surrounding context.

14 | P a g e
 Design Influencing User Behavior

Behavioral Design Principles

• Persuasion: Design elements that encourage specific behaviors (e.g., calls-to-action).
• Emotion: Create emotional connections through design to enhance user engagement.
• Trust: Build trust through consistent and reliable design.

15 | P a g e