UNIT 1- PRINCIPLES OF HUMAN-COMPUTER INTERACTION • Produce usable and safe systems, as well as functional

● Interacting with technology has become an essential part of systems.

everyday life. To fulfill that, developers must attempt to:
● Computer systems should be easy to use, easy to learn, and ● understand how people use technology.
with no errors because people are busy. ● building suitable systems.
● Developing such a system is a major concern of HCI. ● achieve efficient, effective, and safe interaction.
Human-computer Interaction ● put people first. People's needs, capabilities, and preferences
● concerned with the design, and implementation of interactive should come first.
systems for human use and with the study of major Usability System Characteristics:
phenomena surrounding them. ● easy to use.
● the study of the interaction between people and computers. ● easy to learn.
● the interaction occurs in User Interface. ● easy to remember how to use.
● golden principle in HCI is that “people should come first”. ● effective to use.
● HCI concentrates on the study of human factors. ● efficient to use.
3 Parts of HCI: ● safe to use.
● Human - an individual user or a group of users. ● enjoyable to use.
● Computer - technology like a desktop computer to a large-scale Good User-interface Can:
computer system. ● earn a company billion.
● Interaction ● increase user’s loyalty.
● - any direct or indirect communication between a human and a ● increase user’s trust.
computer. ● make users happy
HCI is NOT About: Bad User-interface Can:
● making the interface look pretty. ● be annoying and frustrating.
● only about desktop computers. ● increase mistakes in data entry and system operation
● something that would be nice to do but usually there’s no time ● makes functions become inaccessible
for it. ● system failure because of user rejection
HCI is About Why HCi is Important in the Context of WWW?
● understanding the users. ● competition is very close.
● understanding users’ tasks. ● comparison is easily possible.
● understanding the surrounding environment. ● users who can’t find the product in the shop cannot buy it.
● GUI requirements gathering analysis. ● users who are not able to fill in correctly the order form are not
● design prototype. going to buy
● evaluating the system. Basic Misconceptions:
Goals of HCI ● if the developer can use it, everyone can use it.
• Improve the safety, and usability of systems that include ● good user interfaces are applied common sense.
computers.
 (RADITO)

Disciplines Contributing to HCI:

● Cognitive Psychology
● Ergonomics and Human Factors
● Engineering
● Design
● Anthropology Introduction to User-
● Sociology Centered Approach
● Philosophy Activities throughout the development:
● Linguistics ● involving users
● Artificial Intelligence ● obtaining their feedback
● Computer Science ● providing prototypes
Importance of HCI: ● real users involved at each step of the process.
● prevent accidents ● find out about the users before requirements specification.
● health and safety concerns ● design and implementation.
● reduce the cost of customer training and support ● review with the users
● direct correlation between HCI and sales
● HCI can provide you a job Lifecycle for Interactive System (URADITO)
85% - percentage of software development projects that fails (a
fact according to Fletcher Buckley)

Reasons Why Projects, in General, Fail

● lack of senior management commitment.
● lack of user involvement
● lack of user requirements specifications
● poor project planning and team problems
Traditional Approaches to System Development
● producing software, software specification, maintainability, and
testing
● considers the interface to be just another software component
User-Centered Development
1. Data Collection
● Data recording - using media
● Interviews - stakeholders, subject matter expert, user and
customer interviews
● Questionnaires- surveys, product reviews
2. Data Analysis Visuals - are equally important to the copy since the experience
● Requirement Analysis - formal specifications of the system. suffers if the words and appearance do not complement one
● User Analysis - identifying and understanding the user. another.
● Task Analysis - steps the user take to accomplish this task Objects - create the context for interactions with the right look, feel,
● Functional Analysis – functions that the system perform to and the relationship between all on-screen elements.
help the users carry out their task Time - is what users interact within.
Behavior is how users and the interface act and react.
● The first three dimensions allow for interaction
3. Prototyping ● The last two dimensions define interaction
Advantages of Prototyping Interaction - is the essence of all user experiences. It is the
● users are actively involved in the development conversation between your user and product.
● provides a better system to users Interaction Design Disciplines (inner):
● users get a better understanding of the system being ● Invention Design
developed ● Scenario Design
● errors can be detected much earlier ● Design Simulation
● quicker user feedback is available leading to better solutions ● Sound Design
4. Design ● Usability Engineering
● Goals - achieving goals. ● Controls
● Users and Systems- understanding the raw materials. ● Ubiquitous Computing
● Limitations - accepting limitations of humans and design. ● Interactive Environments
5. Evaluation ● Media Installations
● testing the usability, functionality, and acceptability of an ● Interface Design
interactive system. ● Application Design
● expert evaluation by subject matter experts ● Navigation Design
● user evaluation by the user or customer Difference between User Interface and Interaction Design:
• User Interface is what the user sees.
Unit 2- Interaction Design Best Practices • Interaction Design is how the user engages with the UI, and how
Five Dimensions of Interaction Design: UI respond so the user knows how to accomplish their goal.
● Words User Experience Treasure Map:
● Visuals SPPSC-AUCSP-WSCPN-PPSSD
● Objects Stories - Proverbs - Personas - Scenarios - Content
● Time Inventories - Analytics - User Surveys - Concepts Maps -
● Behavior System Maps - Process Flows - Wireframes - Storyboards -
Concept Designs - Prototypes - Narrative Reports -
Words - can either enhance or cripple the foundation of interaction. Presentations - Plans - Specifications - Style Guides - Design
Patterns.
5 Pillars of Interaction Design 5. Feedback and Response Time
Good interaction design is driven by a human connection. Feedback is the heart of interaction.
1. Goal-driven Design - the artist must first acknowledge their If user interaction is a conversation between your user and the
constraints and then devise a solution. product, then your product better participates in a friendly,
• The goal of interaction design becomes people-centric interesting, and helpful manner.
when we have this discipline.

3 fundamental tactics for designing for your target user:

● Personas - are fictional characters created from the behaviors
of the target user. Fundamentals of Language in Interaction Design:
● User Scenarios - explain how the personas act when using the It’s important to ensure that the written word doesn’t get left behind.
site. Designing a UI that fits the scenario.
● Experience Maps - experience maps chronicle all the different 4 Duties of Words in Interaction Design (GNSP):
conditions surrounding a single interaction. ● Greeting - explains what the site is and recommends a good
Following these people-centric methods for general design will help first step. I.e, suggesting signing up.
you stay focused on what’s most important for your IxD the people. ● Navigation - tells users where they are and suggest new
2. Usability - is the bare minimum of interaction design. If the user options to deepen the user’s experience.
can’t use your product, they certainly won’t desire it. ● Suggesting Actions - words in menus, on buttons, and within
3. Affordances and Signifiers instructions are all necessary to the usability of your product –
without them the user would grow frustrated figuring out the
Affordances - a function should speak for itself, and suggest mechanisms on their own.
its own use (i.e., a road affords walking.) ● Providing Service - along the same lines as the actionable
Signifiers - are what hint at the affordance (i.e., blue underline functions, the wording also plays a vital role in certain services.
signifies a link)
Without signifiers, users won’t be able to perceive Unit 3: User Scenarios and Storyboard
affordance. Example. What is a User Scenario?
● are detailed descriptions of a user – typically a persona is
describing realistic situations relevant to the design of a
solution.
The play button on a video invites you to watch it, whereas a ● it’s important to note that user scenarios are not User stories.
video with no play button might be mistaken for a static User scenarios are:
photograph. ● short narrative and they have a plot.
4. Learnability - in an ideal world, the user would remember every ● dive into motivations and barriers on how your users would use
function after only a single use. In reality, familiarity must be your design.
consciously designed into the interface. ● detail out what users would likely experience.
User stories are: ● they are meant to tell a story and illustrate the process and
● short, and usually a 1 sentence long statement that describes a experience of an event.
user’s goal. ● applied to UX, storyboarding allow us to walk through the user
journey.

What Do You Need to Create a User Scenario? Storyboard in Product Design

1. Time ● UX storyboard can help visually predict and explore the user
● 1 hour for brainstorming experience with a product.
● 2-3hrs for reviewing and refining ● UX storyboard can also help understand users’ current
● 1hr for prioritizing motivations connected to a certain problem.
● 1hr for drawing them out (optional) ● Storyboarding in UX design can start with a template that entails
2. Materials the persona, the scenario, and captions.
● whiteboard and stickies ● The caption describes the user’s actions, environment,
● pens and sharpies emotional state.
● online brainstorming tool ● Captions are concise and don’t typically exceed two bullet point
● paper and pens for drawing (optional) Important Aspect of Storyboarding
How to Create a User Scenario? ● setting the scene and the environment the character is in.
● book a meeting with participants who feel they understand your ● the user persona.
users well. ● identify the goal.
● conduct a brainstorming session. ● narrative arch.
○ three parts to user scenario: context and goal, problem When to Storyboard?
and current process, and new process. ● During the discovery phase of a new product - creating a
● prioritize them. completely new product can explain existing user stories and
● draw them out (optional). problems really well.
● document and share them. ● While building the product - model the user interaction with a
product based on data gathered from user testing.
The WHAT, WHY, & WHEN of Storyboarding in UX Design
● identifying the needs of the users through visual Drawing Skills Do Not Matter
communications tools such as a UX storyboard can bring ● before starting to craft a first UX storyboard, keep in mind it does
greater insight into what the user experience should be. NOT require a super-skilled drawing ability at all.
● storyboarding is a way to explore these scenarios: visually, ● we don’t need anything spectacular; some easily
creating an experience for the entire team, and a way to understandable sketches will do the job perfectly well.
illustrate expectations.
What is a Storyboard? UNIT 4 - COLOR THEORY IN WEB UI DESIGN
● a way of graphically organizing a story that shows the Color Theory
consequence of events presented visually.
 ● collection of rules which designers use to communicate with ● Analogous – use three colors located beside one another on
users. the color wheel.
● designers use a color wheel to refer to extensive collected ● Complementary – use “opposite color” pairs.
knowledge about human optical ability, psychology, and more. ● Split-Complementary (Compound Harmony) – add colors from
either side of your complementary color pair to soften the
contrast.
● Triadic - take three colors that are equally distant on the color
Color Wheel wheel.
● Tetradic – take four colors that are two sets of complementary
pairs and choose one dominant color.
● Square - a variant of tetradic; you find four colors evenly spaced
on the color wheel.

Primary: Blue, Red, Yellow

Secondary: Violet, Orange, Green
Full Color Wheel: Blue, Blue-Violet, Violet, Red-Violet, Red, Red-
Orange, Orange, Yellow-Orange, Yellow, Yellow-Green, Green, Blue-
Green

Properties of Colors • Your colors must reflect your design’s goal and the brand’s
● Hue – how it appears (e.g., “is green”) personality.
● Chroma – how pure it is, i.e., if it has shades (black added), • You should also apply color theory to optimize a positive
tints (white added), or tones (grey added). psychological impact on users.
● Lighting – how pale or saturated it appears. Use Color Theory to Match What Users Want to See
● The right contrast is vital to catching users’ attention.
Use of Color Scheme and Color Temperature for Design ● The vibrancy you choose for your design is crucial to provoking
Harmony desired emotional responses from users.
● in screen design, designers use the additive color model, where ● In all cases, you should design for accessibility.
RGB is the primary color. The Emotional Impact of Each Color
● the color choices should optimize the user’s experience in Colors are divided into warm colors (reds, oranges, and
attractive interfaces that have high usability. yellows), cool colors (blues and purples), and neutral colors (black,
white, gray).
Main Color Schemes Warm colors are more stimulating, while cool ones feel more
● Monochromatic – take one hue and create other elements calming
from different shades and tints of it.
 ● Reds - are the most stimulating color, and are used to catch ● Conducting user testing
attention. UX Designer are not typically responsible for the visual design of a
● Oranges - retain some of the red energizing properties, but to product.
a less degree, making it a bit calmer. Used to show cheerfulness They focus on the journey that the user takes and how the product is
and playfulness. structured to facilitate this journey.
● Yellows - in general, it is usually warming and energetic.
● Green - the bridge between warm and dark colors, is a pleasing Typical Tasks or Processes of a UX Designer
mix of energy and relaxation. Signifies growth, money, and 1. Conducting User Research
environmental themes. ● The initial stage in the UX design process is where the research
● Light Blue - is friendly and inviting, but also safe. happens.
● Dark Blue - is still calming, but it intends to be more sober and ● UX designer will get a brief from the client asking them to do
reliable than light blue. some project research.
● Purples - the color of royalty. It conjures a sensation of luxury, ● The user research phase is when you scope out the project,
sometimes even decadence. identifying exactly who you’re designing.
● Black - is the strongest color, which is why it’s used for the font 2. Personas and Information Architecture
color of the text. ● Based on extensive user research, a UX designer might then
● White - gives off an air of cleanliness, purity, and virtue. create user personas.
● Gray - gives the impression of neutrality. ● Start thinking about the kind of content needed and how it will
be structured.
UNIT 5 - WHAT DOES A UX DESIGNER ACTUALLY DO ● A good information structure makes sure that the user can
UX Design easily find what they’re looking for without too much thought.
● Focuses on the interaction between real human users and 3. User Flows and Wireframes
everyday products, such as apps, and even coffee machines. ● User flows are basic flowcharts that visualize the complete path
● User experience - to encompass all of the different elements a user takes when using a product.
that determine how a user feels while interacting with a product. 4. Prototyping and User Testing
What does a UX Designer Do? ● A prototype is simply a scaled-down version of your product.
● To make products usable, and accessible for humans. ● A simulation that enables you to test your designs before they
● To advocate for the end user or customer. get developed.
● Designing websites, and software, or even designing for voice, ● Prototypes range from paper models to high-fidelity interactive
and VR devices. prototypes.
Some general functions that a UX designer can be expected to ● Testing your prototypes on real users helps to highlight any
perform: design flaws.
● Conducting user research ● Several rounds of testing could take place before the design is
● Creating user personas completely right.
● Determining the information architecture of a digital product ● After that, the new product is finally ready to go into
● Designing user flows and wireframes development.
● Creating prototypes 5. Visual Design
 ● The final imagery, color schemes, icons, and typography will
usually be taken care of by a UI designer.
● UX designer’s work is rarely finished after the product launch.
There will be refinements, small changes, and analytics to
discuss with the team.
● The UX design process is highly iterative, and a career in UX is
as much about collaboration and coordination as it is about
design.

What Skills does a UX Designer Need?

Besides technical and design skills like wireframing, prototyping, and
interpreting data and feedback, UX designers also need certain soft
skills:
● Adaptability
● Communication
● Empathy
● Problem-solving
● Teamwork