REVIEWER

HUMAN-COMPUTER INTERACTION, USABILITY, AND USER INTERFACE

BS Information Technology 1I | PROF. S. HERBILLA | SEM 1 2024

translating them into interactive

LESSON 1 designs, and ensuring an
enjoyable user experience.
USABILITY
User-Friendliness
- UI design focuses on the look
EASE OF USE
and feel of the interface,
Usability refers to how easily users can
including visual elements like
learn, use, and achieve their goals with
color palettes, typography, and
a product or system. It's a core
layout.
concept in HCI and essential for user
- It also considers the usability of
satisfaction and product success.
the interface, ensuring that
users can easily navigate, find
USER-CENTERED DESIGN
information, and complete their
High usability means a product is
tasks.
effective, efficient, engaging, and
error-free. It prioritizes user needs and
preferences, leading to a positive user GOALS OF HCI
experience.

User-Centered Design
INTRO TO HCI - To create systems that prioritize
user needs and preferences,
resulting in effective, efficient,
Human-Computer Interaction (HCI) is
and enjoyable experiences.
a fascinating field that explores the
relationship between people and
Intuitive Interaction
technology.
- To develop systems that are
easy to learn and use,
It delves into how users interact with
minimizing user effort and
computer systems and examines how
confusion.
these interactions can be optimized for
efficiency, effectiveness, and user
Adaptable Solutions
satisfaction.
- To design systems that can
accommodate diverse user
Itencompasses a wide range of
needs and abilities, fostering
disciplines, including psychology,
inclusivity and accessibility.
computer science, design, and
cognitive science, all working together
to create seamless and intuitive user USABILITY INTERFACE
experiences.
PRINCIPLES (NIELSEN)

USER INTERFACE (UI) Visibility of System Status

Provide clear feedback to users about
Visual Appeal the system's state. This helps them
- User-interface (UI) design is the understand what's happening and
process of creating visually what to expect next, reducing
appealing and user-friendly confusion and anxiety.
interfaces for software, websites,
and other digital products. Match Between System and the Real
- It involves understanding user World
needs and behaviors,

ORDANIEL 1
REVIEWER
HUMAN-COMPUTER INTERACTION, USABILITY, AND USER INTERFACE
BS Information Technology 1I | PROF. S. HERBILLA | SEM 1 2024

Use familiar language and present Provide clear and helpful error
information logically. This makes the messages with solutions. This
system feel intuitive and natural to use, empowers users to understand and fix
minimizing the learning curve. errors independently, minimizing
frustration and reliance on support.
User Control and Freedom
Enable easy undo/redo and provide Help and Documentation
clear ways to exit actions. This Make the system easy to use without
empowers users to explore and needing instructions, but provide clear
experiment without fear of making documentation when necessary. This
irreversible mistakes. balances usability with the need for
detailed information, ensuring
Consistency and Standards accessibility for all users.
Maintain consistent design
conventions for a predictable
TAO OF UI DESIGN/DEVELOP
experience. This helps users learn and
remember how to interact with the PROCESS
system, improving efficiency and
reducing errors. User Research & Analysis
Understanding users, their tasks, and
Error Prevention their context
Prioritize preventing errors rather than
displaying error messages. This Iterative Design & Development
creates a more seamless Designing, developing, and testing
andenjoyable experience, minimizing solutions
frustration and interruptions.
User Testing & Feedback
Recognition Rather Than Recall Ensuring usability, effectiveness, and
Make information easy to find and see, enjoyment
reducing reliance on memory. This
simplifies the interaction, allowing
users to focus on their tasks rather ABOVE ALL ELSE..
than remembering details. Know the User!
You must understand the goals, skills,
Flexibility and Efficiency of Use and context of your target users. This
Offer customization options for involves conducting user research and
common actions to cater to different identifying user needs, pain points, and
user needs. This allows users to tailor expectations.
the system to their individual
preferences and workstyles, improving Two Fatal Mistakes:
productivity and satisfaction. 1. Assuming you know the user without
conducting proper research.
Aesthetic and Minimalist Design 2. Focusing on your own preferences
Avoid information overload and rather than user needs.
prioritize simplicity and focus. This
creates a visually appealing and easy- Don't just ask users, but observe
to-understand interface, enhancing them!
usability and engagement. Ethnographic research involves
observing users in their natural
Help Users Recognize, Diagnose, and environment to understand their
Recover From Errors behaviors and context.

ORDANIEL 2
REVIEWER
HUMAN-COMPUTER INTERACTION, USABILITY, AND USER INTERFACE
BS Information Technology 1I | PROF. S. HERBILLA | SEM 1 2024

transforming information sharing and

collaboration.
PARADIGMS OF HCI
Graphical display
Command-Line Interfaces Introduced visual interfaces for users,
- Early HCI paradigms focused on making computers more accessible
command-line interfaces, which and user- friendly.
required users to learn specific
commands to interact with Microprocessor
computers. Led to the development of personal
- This approach was often computers, revolutionizing computing
cumbersome and inaccessible power and accessibility.
to non-technical users.
WWW
Graphical User Interfaces The World Wide Web brought about a
- The advent of graphical user decentralized information network,
interfaces (GUIs) revolutionized connecting people and resources
the field of HCI. globally.
- GUIs introduced a more intuitive
and visual approach, using Ubiquitous computing
icons, menus, and windows to Embraces the idea of computing being
facilitate interaction. seamlessly integrated into our
everyday lives, through devices like
Modern Interfaces smartphones and wearables.
- The evolution of HCI continues
with advancements like Cloud computing
touchscreens, voice interfaces, Shifts computing resources to remote
and virtual reality. servers, allowing for greater scalability
- These technologies have and access.
introduced new paradigms for
interacting with computers, Artificial intelligence (AI)
allowing for more immersive Enables computers to learn and
and personalized experiences. perform tasks that were previously
thought to be exclusive to humans.

PARADIGMS SHIFTS EXAMPLE

Internet of things (IoT)
Connects everyday objects to the
Batch processing internet, enabling data collection and
This involved processing data in automation.
batches, with no interaction during
execution. Each job required a Augmented reality (AR)
complete run of the system. Overlays digital information onto the
real world, enhancing our perception
Timesharing of reality.
Allowed multiple users to share a
single computer, leading to more Virtual reality (VR)
efficient resource usage. Immersive experiences that simulate
real-world environments, creating new
Networking possibilities for entertainment and
Enabled communication and resource training.
sharing between computers,

ORDANIEL 3
REVIEWER
HUMAN-COMPUTER INTERACTION, USABILITY, AND USER INTERFACE
BS Information Technology 1I | PROF. S. HERBILLA | SEM 1 2024

LESSON 2 - visual, auditory, haptic,

movement
HUMAN-COMPUTER Information stored in memory
- sensory, short-term, long-term
INTERACTION
Information processed and applied
- reasoning, problem solving, skill,
TWO SPECIES
error
● Emotion influences
Humans (aka Homo Sapiens) human capabilities
- Complex, Intelligent, Animate, ● Each person is different
Free will, Range of emotions,
Make mistakes

Computer Species HUMAN CAPABILITIES

- Dumb, Unintelligent, Inanimate,
Only do what they are told to do,
Don’t make mistakes
SENSES

Sight, hearing, touch important for

TERMS
current HCI

Human
SIGHT
- the end-user of a program
- the others they work or SENSES
communicate with - Visual System workings
- Color - color blindness: 8%
Computer males, 1% females
- the machine the program runs - Much done by context &
on grouping
- split between clients & servers
EYES
Interaction - Retina receives image
- user tells the computer what - Light sensitive cells
they want - Two types:
- computer communicates - Rods
results - Monochrome
- Sensitive to entire
visible spectrum
HUMAN
- Small
Users are humans: a very complex - Fast-acting
system. Different humans have - Distributed
different: throughout Retina
- Capabilities
- Cultures EYES - RETINA
- Backgrounds - Retina Cells: Cones
- Usage contexts - Three types
- - Red, Green, Blue
THE HUMAN: - Each type sensitive to
Information i/o ... limited range of visible
light

ORDANIEL 4
REVIEWER
HUMAN-COMPUTER INTERACTION, USABILITY, AND USER INTERFACE
BS Information Technology 1I | PROF. S. HERBILLA | SEM 1 2024

- Cones are larger cells

COMPUTER
than rods
- Cones are less sensitive
- Strongly concentrated in TWO PARTS:
Fovea - The user interface, i.e., the
- Relatively few cones frontier of the software
outside fovea - The device (hardware and
software), limited by input and
FOVEA output modalities, power
- High-resolution area of Retina resources, form factors, and
- It’s what you point your eyes at other.
to get good image
- About 2 degrees visual angle A computer system is made up of
- Densely packed with Rods + various elements:
Cones
● input devices – text entry and
pointing
HEARING
● output devices – screen (small
& large), digital paper
HEARING ● virtual reality – special
- Often taken for granted how interaction and display devices
good it is ● physical interaction – e.g.
- Pitch - frequency sound, haptic, bio-sensing
- Loudness - amplitude ● paper – as output (print) and
- Timbre - type of sound input (scan)
(instrument) ● memory – RAM & permanent
media, capacity & access
- Sensitive to range 20Hz - ● processing – speed of
22000Hz processing, networks
- Limited spatially, good temporal
performance
TYPICAL COMPUTER SYSTEM
- screen, or monitor, on which
3D AUDIO PERCEPTION
there are windows
3D Audio cues:
- Keyboard
- Interaural Time Difference
- mouse/trackpad
- Interaural Intensity Difference
- Variations
- Pinnae filtering desktop, laptop, PDA
- Body filtering
TO UNDERSTAND INTERACTION, U NEED
TOUCH TO UNDERSTAND THE COMPUTER FIRST

Three main sensations handled by

different types of receptors: INTERACTION
- Pressure (normal)
- Intense pressure (heat/pain)
Richers Interaction: sensors and
- Temperature (hot/cold)
devices everywhere

ORDANIEL 5
REVIEWER
HUMAN-COMPUTER INTERACTION, USABILITY, AND USER INTERFACE
BS Information Technology 1I | PROF. S. HERBILLA | SEM 1 2024

● executes action
● perceives system state
INTERACTION TERMS
● interprets system state
● evaluates system state with
Domain respect to goal
- the area of work under study;
e.g. graphic design
Goal
- what you want to achieve; e.g.
create a solid red triangle

Task HUMAN ERROR

- how you go about doing it slip
- ultimately in terms of operations - understand system and goal
or actions; e.g. ... select fill tool, - correct formulation of action
click over triangle - incorrect action

INTERACTION MODELS mistake

- may not even have right goal!
- translations between user and
system
Fixing things?
slip – better interface design
DONALD NORMAN’S MODEL
mistake – better understanding of
Seven stages
system
- user establishes the goal
- formulates intention
- specifies actions at interface ERGONOMICS
- executes action
- perceives system state - Study of the physical
- interprets system state characteristics of interaction
- evaluates system state with - Also known as human factors –
respect to goal but this can also be used to
mean much of HCI!
Some systems are harder to use than - good at defining standards and
others: guidelines for constraining the
way we design certain aspects
Gulf of Execution: user’s formulation of of systems
actions
≠actions allowed by the system ERGONOMICS EXAMPLES

Gulf of Evaluation: user’s expectation - arrangement of controls and

of changed system state displays: e.g. controls grouped
≠ actual presentation of this state according to function or
frequency of use, or sequentially
Norman’s model concentrates on
user’s view of the interface. - surrounding environment: e.g.
seating arrangements
EXECUTION/EVALUATION LOOP adaptable to cope with all sizes
● user establishes the goal of user
● formulates intention
● specifies actions at interface

ORDANIEL 6
REVIEWER
HUMAN-COMPUTER INTERACTION, USABILITY, AND USER INTERFACE
BS Information Technology 1I | PROF. S. HERBILLA | SEM 1 2024

- health issues: e.g. physical LESSON 3

position, environmental
conditions (temperature, INTERACTIVE SYSTEMS
humidity, lighting, noise)

These are computer systems

- use of colour: e.g. use of red for
characterized by significant amounts
warning, green for okay,
of interaction between humans and
awareness of colour-blindness
the computer.
etc.

- Web Applications
- Games and Simulations
INTERACTION STYLES - Embedded Devices
the nature of user/system dialog: - CAD-CAM (Computer Aided
Design-Computer Aided
- command line interface Manufacture) Systems
- Menus - Data Entry Systems
- natural language
- question/answer and query HISTORY
dialogue
- form-fills and spreadsheets
- WIMP PAST
- point and click - Until the 1980s almost all
- three–dimensional interfaces commercial computer systems
were non-interactive.
- Computer operators would
CONTEXT set-up the machines to read in
large volumes of data, say
Interaction affected by social and customers bank details and
organizational context: transactions, and the computer
would then process each input
other people: desire to impress, and generate appropriate
competition, fear of failure output.
motivation: fear, allegiance, ambition,
self-satisfaction PRESENT
inadequate systems: cause frustration - the world is also now full of
and lack of motivation interactive computer systems.
- In interactive systems the user
and computer exchange
NON-TRADITIONAL INTERACTIONS
information frequently and
- Auditory Interaction dynamically.
- Vision-Based Interaction
- Multimodal Interaction A good interactive system is one
- Ubiquitous Computing where:
- Augmented Reality:
comp-generated + real world - User can easily work out how to
- Virtual Reality: operate the system in an
comp-generated only attempt to achieve his goals.
- Mobile Computing - User can easily evaluate the
- Olfactory + Taste Interface results of his action on the
(Haptics = biting on diff system.
surfaces)

ORDANIEL 7
REVIEWER
HUMAN-COMPUTER INTERACTION, USABILITY, AND USER INTERFACE
BS Information Technology 1I | PROF. S. HERBILLA | SEM 1 2024

Efficiency: The competence used in

FUTURE using the resources to effectively
- In the book ‘The Invisible achieve the goals.
Computer’ Don Norman argues
the case for ‘information Satisfaction: The ease of the work
appliances’. system to its users.
- He suggests that the PC is too
cumbersome and unwieldy a
INTERACTIVE SYSTEM DESIGN
tool.
- It has too many applications - shows that every phase
and features to be useful. depends on each other to serve
- He sees the future as being one the purpose of designing and
where we use specific product creation.
‘appliances’ for specific jobs. - a continuous process as there is
so much to know and users
keep changing all the time.
USABILITY ENGINEERING - IS DIVERSE !!!!

Usability Engineering: a method in the Usability Study: the methodical study

progress of software and systems, on the interaction between people,
which includes user contribution from products, and environment based on
the inception of the process and experimental assessment.
assures the effectiveness of the
product through the use of a usability Example: Psychology, Behavioral
requirement and metrics. Science, etc.

Usability Function: features of the Usability Testing: the scientific

entire process of abstracting, evaluation of the stated usability
implementing & testing hardware and parameters as per the user’s
software products. Requirements requirements, competences,
gathering stage to installation, prospects, safety and satisfaction is
marketing and testing of products, all known as usability testing.
fall in this process.
Acceptance Testing: also known as
GOALS ARE: User Acceptance Testing (UAT), is a
● Effective to use − Functional testing procedure that is performed by
● Efficient to use − Efficient the users as a final checkpoint before
● Error free in use − Safe signing off from a vendor. Let us take
● Easy to use − Friendly an example of the handheld barcode
● Enjoyable in use − Delightful scanner.
Experience

SOFTWARE TOOLS
PROPERTIES OF INTERACTIVE is a programmatic software used to
SYSTEM create, maintain, or otherwise support
other programs and applications.

Effectiveness: The completeness with

Some of the commonly used software
which users achieve their goals.
tools in HCI are as follows:

ORDANIEL 8
REVIEWER
HUMAN-COMPUTER INTERACTION, USABILITY, AND USER INTERFACE
BS Information Technology 1I | PROF. S. HERBILLA | SEM 1 2024

Specification Methods: The methods WATERFALL METHOD

used to specify the GUI. Even though
these are lengthy and ambiguous
methods, they are easy to understand.

Grammars: Written Instructions or

Expressions that a program would
understand. They provide
confirmations for completeness and
correctness. GOALS OF INTERACTION
DESIGN
Transition Diagram: Set of nodes and
links that can be displayed in text, link
- Develop usable products
frequency, state diagram, etc. They are
- Usability means easy to learn,
difficult in evaluating usability, visibility,
effective to use and provide an
modularity and synchronization.
enjoyable experience
- Involve users in the design
State Charts: Chart methods
process
developed for simultaneous user
activities and external actions. They
provide link-specification with INTERACTIVE SYSTEM DESIGN
interface building tools.
TERMINOLOGIES
Interface Building Tools: Design
methods that help in designing Affordances: Attribute of an object
command languages, data-entry that allows people to know how to use
structures, and widgets. it

Interface Mockup Tools: Tools to Constraints: Restricting interaction to

develop a quick sketch of GUI. E.g., reduce errors
Microsoft Visio, Visual Studio .Net, etc.
Conceptual Model: A set of ideas
Software Engineering Tools: Extensive about how an interactive system
programming tools to provide user behaves
interface management system.
Mapping: Relationship between
Evaluation Tools: Tools to evaluate the controls and their effects on the world
correctness and completeness of
programs. Visibility: Making it obvious which
actions are available

SOFTWARE ENGINEERING Feedback: Send information about

what is happening back to the user
- is the study of designing,
development and preservation Consistency: Similar functions are
of software. performed in the same way. Identical
- It comes in contact with HCI to terminology for identical operations
make the man and machine
interaction more vibrant and
interactive.

ORDANIEL 9
REVIEWER
HUMAN-COMPUTER INTERACTION, USABILITY, AND USER INTERFACE
BS Information Technology 1I | PROF. S. HERBILLA | SEM 1 2024

LESSON 4 GESTURE RECOGNITION

INTERACTION DEVICES - a subject in language

technology that has the
objective of understanding
INTERACTION DEVICE human movement via
mathematical procedures.
- the device where the user can
- Hand gesture recognition is
receive position, localization,
currently the field of focus.
navigation instructions, etc., and
- This technology is future based.
interact with the information.
- Advanced tech = no
- can be a specific dedicated
mechanical devices are used.
device, a computer, a tablet, or,
more commonly, a smartphone.
- A tool that the user can NOVEL DEVICES
communicate with to control or - Eye-tracking
change the action or output of - 3d Printing
the device. - Haptic Feedback
- Several interactive devices are
used for the human computer
interaction. SPEECH RECOGNITION
- Some of them are known tools - The technology of transcribing
and some are recently spoken phrases into written text
developed or are a concept to is Speech Recognition.
be developed in the future. - Such technologies can be used
in advanced control of many
KEYBOARD devices such as switching on
and off the electrical
- can be considered as a appliances.
primitive device known to all of - Only certain commands are
us today. required to be recognized for a
- uses an organization of complete transcription.
keys/buttons that serves as a - However, this cannot be
mechanical device for a beneficial for big vocabularies.
computer.
- Each key in a keyboard
corresponds to a single written VOICE INFO SYSTEM
symbol or character. Use human voice as a source of info
Apps:
TOUCH SCREEN - Tourist info
- Museum audio tours
- The cheapest and relatively - Voice menus (Interactive Voice
easy way of manufacturing Response IVR systems)
touch screens are the ones - Potentially aides with
using electrodes and a voltage - Learning (engage more senses)
association. - Cognitive load (hypothesize
- touch screens are likely to grow each sense has a limited
in a big way in the future. ‘bandwidth’)

ORDANIEL 10
REVIEWER
HUMAN-COMPUTER INTERACTION, USABILITY, AND USER INTERFACE
BS Information Technology 1I | PROF. S. HERBILLA | SEM 1 2024

- Helps disabled (esp. those w/

RESPONSE TIME
different levels of disability)

- the time taken by a device to

DISPLAY TECHNOLOGY
respond to a request.
- The request can be anything
from a database query to Monochrome displays
loading a web page. - (single color)
- the sum of the service time and - Low cost
wait time. - Greater intensity range
(medical)
Transmission time becomes a part of
the response time when the response Color
has to travel over a network. - Raster Scan CRT
- LCD – thin, bright
INTERACTION PERFORMANCE - Plasma – very bright, thin
- LED – large public displays
- Electronic Ink – new product w/
60s vs. Today tiny capsules of negative black
- Performance (Hz -> GHz) particles and positive white
- Memory (k -> GB) - Braille – refreshable cells with
- Storage (k -> TB) dots that rise up
- Input
punch cards ->
Keyboards, Pens, tablets,
LARGE DISPLAY
mobile phones, mice,
cameras, web cams Multiple Desktop Displays
- Output - Multiple CRTs or Flat panels for
10 character/sec -> large desktops
Megapixel displays, HD Eventually -> Every surface a pixel.
capture and display, color
laser, surround sound,
force feedback, VR
- Substantial bandwidth increase!

Future
- Gestural input
- Two-handed input
- 3D/6D I/O
- Others: voice, wearable, whole
body, eye trackers, data gloves,
haptics, force feedback
- Engineering research!
- Entire companies created
around one single technology

CURRENT
- Multimodal (using car
navigation via buttons or voice)

ORDANIEL 11
REVIEWER
HUMAN-COMPUTER INTERACTION, USABILITY, AND USER INTERFACE
BS Information Technology 1I | PROF. S. HERBILLA | SEM 1 2024

LESSON 5 COLOR COMBINATIONS

COLOR HARMONY
COMPLEMENTARY
- Two colors that are on opposite
COLOR THEORY sides of the color wheel.
- Provides a high contrast and
high impact color combination
COLOR THEORY a practical
– together, these colors will
combination of art and science that’s
appear brighter and more
used to determine what colors look
prominent.
good together.

COLOR WHEEL

COLOR WHEEL was invented in 1666 by

Isaac Newton, who mapped the color
spectrum onto a circle.

- basis of color theory, because it

shows the relationship between
colors.
MONOCHROMATIC
- Three shades, tones and tints
OTHER TERMS of one base color.
- Provides a subtle and
Color Harmony: Colors that look good conservative color
together combination.
- This is a versatile color
Artists and designers: use these to combination that is easy to
create a particular look or feel. apply to design projects for a
harmonious look.
Color combinations: determine the
relative positions of different colors in
order to find colors that create a
pleasing effect.

TWO TYPES OF COLOR WHEEL:

● RYB (red, yellow, blue color
wheel): typically used by artists,
as it helps with combining paint
colors.
● RGB (red, green and blue color
wheel): designed for online use, ANALOGOUS
as it refers to mixing light – like - Three colors that are side by
on a computer or TV screen. side on the color wheel.
- This color combination is
versatile, but can be
overwhelming.
- To balance an analogous color
scheme, choose one dominant

ORDANIEL 12
REVIEWER
HUMAN-COMPUTER INTERACTION, USABILITY, AND USER INTERFACE
BS Information Technology 1I | PROF. S. HERBILLA | SEM 1 2024

color, and use the others as

accents.
PRIMARY, SECONDARY, AND
TERTIARY

There are 12 main colors on the color

wheel.

In the RGB color wheel, these hues are

red, orange, yellow, chartreuse green,
green, spring green, cyan, azure, blue,
violet, magenta and rose.
TRIADIC
- Three colors that are evenly
The color wheel can be divided into
spaced on the color wheel.
primary, secondary and tertiary colors.
- This provides a high contrast
color scheme, but less so than
the complementary color
combination — making it more
versatile.
- This combination creates bold,
vibrant color palettes.

RGB COLOR
Primary colors: red, green and blue.
Secondary: cyan, magenta and yellow
Tertiary: orange, chartreuse green,
spring green, azure, violet and rose.

RYB COLOR
Primary colors: red, yellow, and blue.
Secondary: purple, orange and green
Tertiary: red-orange, yellow-orange,
TETRADIC yellow-green, blue-green, blue-violet,
- Four colors that are evenly and red-violet.
spaced on the color wheel.
- Tetradic color schemes are bold
and work best if you let one
color be dominant, and use the WARM AND COOL COLORS
others as accents.
- The more colors you have in Color Temperature: warmth or
your palette, the more difficult it coolness of a color
is to balance.
Warm Colors
- said to bring to mind coziness
and energy
- colors from red through to
yellow.
- said to bring to mind warmth

ORDANIEL 13
REVIEWER
HUMAN-COMPUTER INTERACTION, USABILITY, AND USER INTERFACE
BS Information Technology 1I | PROF. S. HERBILLA | SEM 1 2024

Cool Colors
HUE, SATURATION, LUMINANCE
- associated with serenity and
isolation.
- colors from blue to green and HUE
purple. - basically any color on the color
- are said to bring to mind wheel.
coolness, like water. - When you are using a color
wheel or a color picker, you can
adjust the saturation and
luminance of a hue.
SATURATION: the intensity or purity of
the color.
LUMINANCE: the amount of brightness
or light in a color.

SHADES AND TINTS

SHADE
● created by adding black to a
base hue, darkening the color.
● creates a deeper, richer color.
Shades can be quite dramatic
and can be overpowering.

TINT
● created by adding white to a APPLICATION OF DESIGN
base hue, lightening the color. PRINCIPLES
● make a color less intense, and is
useful when balancing more
vivid color combinations. Balance: Weight distribution,
formal/symmetrical or
TONES informal/asymmetrical
● created by combining black and
white—or grey—with a base hue. Rhythm: Repetition, , continuous line or
● are subtler versions of the alteration
original color.
● are less likely to look pastel, and Emphasis: Central or focal point,
can reveal complexities not through size variation, repetition or
apparent in the base color. contrast

ORDANIEL 14
REVIEWER
HUMAN-COMPUTER INTERACTION, USABILITY, AND USER INTERFACE
BS Information Technology 1I | PROF. S. HERBILLA | SEM 1 2024

LESSON 6
2. Make things visible
DESIGN PRINCIPLES - Visible affordances, mappings,
constraints
- Remind person of what can be
GOLDEN RULE: Understand your
done and how to do it
materials

DESIGN PRINCIPLES
WHY IS DESIGN DIFFICULT?

1. Increasing complexity/pressure 1. Use simple and natural dialog in

- Number of things to control has user’s language
risen dramatically
- Errors are increasingly - Match user’s task in a natural
serious/costly way
- Avoid jargon, techno-speak
2. Marketplace pressures - Present exactly info that user
- Time is money needs
- Adding functionality - Less is more!
(complexity) is now easy and
cheap 2. Strive for consistency
- Adding controls/feedback is - Sequences, actions, commands,
expensive layout, terminology
- Design usually requires several - Makes more predictable
iterations before success - Dialog boxes all having same
- “closure” options
3. People often consider cost and
appearance over human factors 3. Provide informative feedback
design. - Continuously inform user about
what is occurring
4. Creativity is challenging. - Most important on frequent,
substantive actions
5. The social expectations of design - % in file
are getting more well-informed. - How to deal with delays?
- Special cursors
- % Done graphs
GOOD DESIGN
● Invites person to use it properly 4. Minimize user’s memory load
● Visual affordance - Recognition is better than recall
● Understandable - Make visible!
● Usable - Describe required input format,
● Discoverable include example and default
Date: _ _ - _ _ - _ _ (DD-MM-YY)
- Use small # of generally
GUIDELINES FOR DESIGN
applicable cmds
1. Provide a good conceptual model
- User has mental model of how 5. Permit easy reversal of actions
things work - Undo!
- Build design that allows user to - Reduces anxiety, encourages
predict effects of actions experimentation

ORDANIEL 15
REVIEWER
HUMAN-COMPUTER INTERACTION, USABILITY, AND USER INTERFACE
BS Information Technology 1I | PROF. S. HERBILLA | SEM 1 2024

6. Provide clearly marked exits LESSON 7

- Don’t want the user to feel
trapped PROTOTYPING
- Examples
- Cancel button on
dialogs PROTOTYPING
- Quit any time
- Interrupt/resume on - another type of software
lengthy operations engineering models that can
have a complete range of
7. Provide shortcuts functionalities of the projected
- Enable frequent users to system.
perform often-used operations - is a trial and partial design that
quickly helps users in testing design
- Keyboard & mouse ideas without executing a
- Abbreviations complete system.
- Menu shortcuts
- Function keys
- Command completion PROTOTYPING IN HCI
- Double click vs. menu
selection ● a series of screen sketches
- Navigation between windows/forms ● a storyboard, i.e. a cartoon-like
- Reuse series of scenes
- Provide a history system ● a Powerpoint slide show
● a video simulating the use of a
8. Support internal locus of control system
- Put user in charge, not computer ● a cardboard mock-up
- Can be major source of anxiety ● a piece of software with limited
functionality written in
9. Handle errors smoothly and ● the target language or in
positively another language
- “That Filename already exists”
vs. “Rename failed”
IMPORTANCE OF PROTOTYPING
10. Provide useful help and
documentation ● Evaluation and feedback are
central to interaction design
● Developers can test feasibility of
ideas with team, users
● Stakeholders can see, hold,
interact with a prototype more
easily than a document or a
drawing
● Team members and users can
communicate effectively
● To validate existing / other
requirements
● It encourages reflection: very
important aspect of design

ORDANIEL 16
REVIEWER
HUMAN-COMPUTER INTERACTION, USABILITY, AND USER INTERFACE
BS Information Technology 1I | PROF. S. HERBILLA | SEM 1 2024

● Prototypes answer questions, ● User evaluation

and support designers in ○ Both achieving tasks and
choosing between alternatives navigation, and other
● Prototyping reduces uncertainty usability criteria (as we’ve
● It can be a major tool for risk studied)
management ● Representations
● Prototyping technical issues: E.g. ○ Low-fidelity or
run-time issues high-fidelity prototypes
● Prototyping to establish
requirements: Users “see”
TYPE OF PROTOTYPES
functionality

Low Fidelity Prototype: as it uses

PROTOTYPING DESIGNS
manual procedures like sketching in a
paper.
CONCEPTUAL DESIGN
● Early in development Medium Fidelity Prototype: involves
● Explore high-level issues some but not all procedures of the
○ Different conceptual system.
models - E.g., first screen of a GUI.
○ Interaction styles
○ User needs and High Fidelity Prototype: simulates all
characteristics the functionalities of the system in a
○ Usability goals design.
● High-level representations - This prototype requires, time,
○ Far from final code or money and work force.
GUIs

INTERACTION DESIGN
● Later in development
● Focus on user work-flows
○ Tasks and scenarios
you’ve identified
● Might focus at the screen (or
page) level. Possibly like this:
○ Identify screens, pages,
activities
○ Organize these in groups USER-CENTERED DESIGN
○ Define flows or transitions
between them
● The process of collecting
● Involve users in evaluation
feedback from users to improve
● Representations
the design.
○ Still probably not much
● An approach to UI development
like final code or GUIs
and system development.
● Focuses on understanding:
SCREEN DESIGN
○ Users
● Before development
○ goals and tasks, and
● Define and refine screens
○ environment (physical,
(pages)
organizational, social)
○ Blue-prints for final
● Pay attention to these
physical design
throughout development

ORDANIEL 17
REVIEWER
HUMAN-COMPUTER INTERACTION, USABILITY, AND USER INTERFACE
BS Information Technology 1I | PROF. S. HERBILLA | SEM 1 2024

UCD DRAWBACKS OF PROTOTYPE Interactive System Design

Life Cycle (ISLC)
● Passive user involvement.
● User’s perception about the new The stages in the following diagram
interface may be inappropriate. are repeated until the solution is
● Designers may ask incorrect reached.
questions to users.

ISO ON USER-CENTERED DESIGN

● ISO 13407 describes
human-centered design
processes for interactive
systems
● Principles of human-centered
design:
○ Active involvement of
users
○ Appropriate allocation of
function between user
and system
○ Iteration of design
solutions
○ Multidisciplinary design
teams

● Essential activities in
human-centered design:
○ Understand and specify
the context of use
○ Specify the user and
organizational
requirements
○ Produce design solutions
(prototypes)
○ Evaluate designs with
users against
requirements

ORDANIEL 18