This document provides an introduction to interaction design basics and terms. It discusses that interaction design involves creating technology-based interventions to achieve goals within constraints. The design process has several stages and is iterative. Interaction design starts with understanding users through methods like talking to and observing them. Scenarios are rich stories used throughout design to illustrate user interactions. Basic terms in interaction design include goals, constraints, trade-offs, and the design process. Usability and user-centered design are also discussed.
Interaction Design in Human Computer Interaction by Vrushali Dhanokar. This PPT is useful to every students who study Human Computer Interaction in detail. Specially for TE Students of Information Technology in Pune University. Thank You.
I made this with my 3 partners for my CEC marks in 3rd sem of MCA. It includes information about HCI, definition, types, how it works, queries of it etc.
One can get idea easily about HCI after refering this presentation.
HCI 3e - Ch 6: HCI in the software processAlan Dix
Chapter 6: HCI in the software process
from
Dix, Finlay, Abowd and Beale (2004).
Human-Computer Interaction, third edition.
Prentice Hall. ISBN 0-13-239864-8.
http://www.hcibook.com/e3/
Chapter 9: Evaluation techniques
from
Dix, Finlay, Abowd and Beale (2004).
Human-Computer Interaction, third edition.
Prentice Hall. ISBN 0-13-239864-8.
http://www.hcibook.com/e3/
This Document by Daroko blog,this describe the human computer interface in use today,to read More about Notes on human computer intrface,kindly go to daroko blog,this is ust a section of those notes,go to daroko blog and read all the Notes,check on the tutorials part on that blog and then choose human computer interafec
Human-Computer Interaction is a discipline concerned with the design, evaluation and implementation of interactive computing systems for human use and with the study of major phenomena surrounding them” -ACM/IEEE
HCI 3e - Ch 14: Communication and collaboration modelsAlan Dix
Chapter 14: Communication and collaboration models
from
Dix, Finlay, Abowd and Beale (2004).
Human-Computer Interaction, third edition.
Prentice Hall. ISBN 0-13-239864-8.
http://www.hcibook.com/e3/
Requirements Engineering for the HumanitiesShawn Day
This workshop explores how requirements engineering can be employed by digital and non-digital humanities scholars (and others) to conceptualise and communicate a research project.
requirementsEngineeringAs the field of digital humanities has evolved, one of the biggest challenges has been getting the marrying technical expertise with humanities scholarly practice to successfully deliver sustainable and sound digital projects. At its core this is a communications exercise. However, to communicate effectively demands an ability to effectively translate, define and find clarity in your own mind.
Interaction Design in Human Computer Interaction by Vrushali Dhanokar. This PPT is useful to every students who study Human Computer Interaction in detail. Specially for TE Students of Information Technology in Pune University. Thank You.
I made this with my 3 partners for my CEC marks in 3rd sem of MCA. It includes information about HCI, definition, types, how it works, queries of it etc.
One can get idea easily about HCI after refering this presentation.
HCI 3e - Ch 6: HCI in the software processAlan Dix
Chapter 6: HCI in the software process
from
Dix, Finlay, Abowd and Beale (2004).
Human-Computer Interaction, third edition.
Prentice Hall. ISBN 0-13-239864-8.
http://www.hcibook.com/e3/
Chapter 9: Evaluation techniques
from
Dix, Finlay, Abowd and Beale (2004).
Human-Computer Interaction, third edition.
Prentice Hall. ISBN 0-13-239864-8.
http://www.hcibook.com/e3/
This Document by Daroko blog,this describe the human computer interface in use today,to read More about Notes on human computer intrface,kindly go to daroko blog,this is ust a section of those notes,go to daroko blog and read all the Notes,check on the tutorials part on that blog and then choose human computer interafec
Human-Computer Interaction is a discipline concerned with the design, evaluation and implementation of interactive computing systems for human use and with the study of major phenomena surrounding them” -ACM/IEEE
HCI 3e - Ch 14: Communication and collaboration modelsAlan Dix
Chapter 14: Communication and collaboration models
from
Dix, Finlay, Abowd and Beale (2004).
Human-Computer Interaction, third edition.
Prentice Hall. ISBN 0-13-239864-8.
http://www.hcibook.com/e3/
Requirements Engineering for the HumanitiesShawn Day
This workshop explores how requirements engineering can be employed by digital and non-digital humanities scholars (and others) to conceptualise and communicate a research project.
requirementsEngineeringAs the field of digital humanities has evolved, one of the biggest challenges has been getting the marrying technical expertise with humanities scholarly practice to successfully deliver sustainable and sound digital projects. At its core this is a communications exercise. However, to communicate effectively demands an ability to effectively translate, define and find clarity in your own mind.
A presentation I made for showing Alcatel-Lucent developers what usability is about and what simple techniques they could use in their development process.
User experience & design user centered analysisPreeti Chopra
UCA is a multistage process which allows designers to analyze and foresee how user is going to use the product. UCA employs proven and objective data-gathering and analysis techniques to develop a clear understanding of who the users are and how they will approach a website or application.
Julie Grundy gives an overview of user experience Design, why it's important, guiding principles, UX research overview, and tactics used by UX professionals. November 2015.
What is User Experience Design?
The Business Case for User Experience Design
What are the UX processes?
How can we measure its effectiveness?
Who needs to be involved?
Overview of the fundamental roles in Hydropower generation and the components involved in wider Electrical Engineering.
This paper presents the design and construction of hydroelectric dams from the hydrologist’s survey of the valley before construction, all aspects and involved disciplines, fluid dynamics, structural engineering, generation and mains frequency regulation to the very transmission of power through the network in the United Kingdom.
Author: Robbie Edward Sayers
Collaborators and co editors: Charlie Sims and Connor Healey.
(C) 2024 Robbie E. Sayers
Welcome to WIPAC Monthly the magazine brought to you by the LinkedIn Group Water Industry Process Automation & Control.
In this month's edition, along with this month's industry news to celebrate the 13 years since the group was created we have articles including
A case study of the used of Advanced Process Control at the Wastewater Treatment works at Lleida in Spain
A look back on an article on smart wastewater networks in order to see how the industry has measured up in the interim around the adoption of Digital Transformation in the Water Industry.
Industrial Training at Shahjalal Fertilizer Company Limited (SFCL)MdTanvirMahtab2
This presentation is about the working procedure of Shahjalal Fertilizer Company Limited (SFCL). A Govt. owned Company of Bangladesh Chemical Industries Corporation under Ministry of Industries.
Explore the innovative world of trenchless pipe repair with our comprehensive guide, "The Benefits and Techniques of Trenchless Pipe Repair." This document delves into the modern methods of repairing underground pipes without the need for extensive excavation, highlighting the numerous advantages and the latest techniques used in the industry.
Learn about the cost savings, reduced environmental impact, and minimal disruption associated with trenchless technology. Discover detailed explanations of popular techniques such as pipe bursting, cured-in-place pipe (CIPP) lining, and directional drilling. Understand how these methods can be applied to various types of infrastructure, from residential plumbing to large-scale municipal systems.
Ideal for homeowners, contractors, engineers, and anyone interested in modern plumbing solutions, this guide provides valuable insights into why trenchless pipe repair is becoming the preferred choice for pipe rehabilitation. Stay informed about the latest advancements and best practices in the field.
2. Introduction
Interaction design is about creating interventions in
often complex situations using technology of many
kinds including PC software, the web and physical
devices
3. Introduction
Design involves:
achieving goals within constraints and trade-off
between these
understanding the raw materials: computer and human
accepting limitations of humans and of design
The design process has several stages and is
iterative and never complete.
4. Introduction
Interaction starts with getting to know the users and
their context: finding out who they are and what they
are like ...
talking to them, watching them
Scenarios are rich design stories, which can be used
and reused throughout design: they help us see what
users will want to do( Persona )
they give a step-by-step walkthrough of user’s
interactions: including what they see, do and are
thinking
6. Basic Terms
Design:
– Interaction, interventions, goals, constraints
• the design process
– what happens when
•users
– who they are, what they are like ...
• scenarios
– rich stories of design
• navigation
– finding your way around a system
• iteration and prototypes
– never get it right first time!
7. Basic Terms
Goals
Purpose of design that in intended to be produced
Constraints
What materials, some standards, cost/ time limitations
Trade-off
Choosing which goals/ constraints can be relaxed or
can be given more importance
8. Design: Definition
what is design?
achieving goals within constraints
We already know what are :
Goals
Constraints
Trade-off
10. Understand Your Materials
• understand computers
– limitations, capacities, tools, platforms
• understand people
– psychological, social aspects
– human error
• and their interaction .
11. Human Errors!!
accident reports ..
– air crash, industrial accident, hospital mistake
– enquiry ... blames ... ‘human error’
human ‘error’ is normal
– we know how users behave under stress
– so design for it!
12.
13. Steps ...
• requirements
– what is there and what is wanted ...
•analysis
– ordering and understanding
•design
– what to do and how to decide
• iteration and prototyping
– getting it right ... and finding what is really needed!
• implementation and deployment
– making it and getting it out there
14. Four basic activities
There are four basic activities in Interaction Design:
1. Identifying needs and establishing requirements
2. Developing alternative designs
3. Building interactive versions of the designs
4. Evaluating designs
15. A simple interaction design model
Evaluate
(Re)Design
Identify needs/
establish
requirements
Build an
interactive
version
Final product
16. Some practical issues
•Who are the users?
•What are ‘needs’?
•Where do alternatives come from?
•How do you choose among alternatives?
17. Who are the users?
•Not as obvious as you think:
—those who interact directly with the product
—those who manage direct users
—those who receive output from the product
—those who make the purchasing decision
—those who use competitor’s products ???
•Three categories of user:
—primary: frequent hands-on
—secondary: occasional or via someone else;
—tertiary: affected by its introduction, or will influence its
purchase.
Wider term: stakeholders
18. Who are the users? (cont’d)
•What are their capabilities? Humans vary in
many dimensions!
•Some examples are:
—size of hands may affect the size and
positioning of input buttons;
—motor abilities may affect the suitability of
certain input and output devices;
—height if designing a physical kiosk;
—strength - a child’s toy requires little
strength to operate, but greater strength to
change batteries
19. Who are the stakeholders?
Check-out operators
Customers
Managers and owners
• Suppliers
• Local shop
owners
20. What are ‘needs’?
•Users rarely know what is possible
•Users can’t tell you what they ‘need’ to help them
achieve their goals
•Instead, look at existing tasks:
—their context
—what information do they require?
—who collaborates to achieve the task?
—why is the task achieved the way it is?
•Envisioned tasks:
— can be rooted in existing behaviour
— can be described as future scenarios
21. Where do alternatives come
from?
• Humans stick to what they know works
• But considering alternatives is important to ‘break
out of the box’
• Designers are trained to consider alternatives,
software people generally are not
• How do you generate alternatives?
—‘Flair and creativity’: research & synthesis
—Seek inspiration: look at similar products or look
at very different products
22. Idea Generation
Brainstorm
Group vs. Individual Creativity
More Ideas => More Creative => Better
Limited Time
Keep a Record
The rules
Be visual.
Defer judgment.
Encourage wild ideas.
Build on the ideas of others.
Go for quantity.
Stay focused on the topic
23. How do you choose among
alternatives?
• Evaluation with users or with peers e.g. prototypes
• Technical feasibility: some not possible
• Quality thresholds: Usability goals lead to usability
criteria (set early and checked regularly)
—safety: how safe?
—utility: which functions are superfluous?
—effectiveness: appropriate support? task coverage,
information available
—efficiency: performance measurements
27. User Centered Design
Developers working with target users
Think of the world in users’ terms
Identify usability and user experience goals
Understanding work process
Not technology- centered /feature driven
28. Why User Centered Design
Nearly 25% of all applications projects fail. Why?
overrun budgets & management pulls the plug
others complete, but are too hard to learn/use
Solution is user- cantered design. Why?
easier to learn & use products sell better
can help keep a product on/ahead of schedule
training costs reduced
29. Norman’s Philosophy
Norman (1988) advocated user-centred design as a
philosophy of putting users and usability ahead of aesthetics.
He proposed following seven principles:
1. Use knowledge both in-the-world and in-the-head
2. Simplify task structure
3. Bridge gulfs of execution and evaluation
4. Get mappings right
5. Exploit constraints
6. Design for error
7. When all else fails, standardize
30. Know your Stakeholders
Who are the users of the document?
What are the users’ tasks and goals?
What are the users’ experience levels with the document,
and documents like it?
What functions do the users need from the document?
What information might the users need, and in what form
do they need it?
How do users think the document should work?
What are the extreme environments?
Is the user multitasking?
Does the interface utilize different inputs modes such as
touching, spoken, gestures, or orientation?
31. Elements of
User Centered Design
Visibility
Visibility helps the user construct a mental model of the
document.
Models help the user predict the effect(s) of their actions while
using the document.
Important elements (such as those that aid navigation) should be
emphatic.
Users should be able to tell from a glance what they can and
cannot do with the document.
32. Options for text font are clearly visible along with
other alternatives
33. Elements of
User Centered Design
Accessibility
Users should be able to find information quickly and easily
throughout the document, regardless of its length.
Users should be offered various ways to find information (such as
navigational elements, search functions, table of contents, clearly
labelled sections, page numbers, colour-coding, etc.).
Navigational elements should be consistent with the genre of the
document. ‘Chunking’ is a useful strategy that involves breaking
information into small pieces that can be organized into some
type meaningful order or hierarchy.
The ability to skim the document allows users to find their piece of
information by scanning rather than reading. Bold and italic words
are often used.
35. Elements of
User Centered Design Legibility
Text should be easy to read:
Through analysis of the rhetorical
situation, the designer should be
able to determine a useful font
style.
Ornamental fonts and text in all
capital letters are hard to read, but
italics and bolding can be helpful
when used correctly.
Large or small body text is also
hard to read. (Screen size of 10-12
pixel sans serif and 12-16 pixel
serif is recommended.)
36. Legibility
Choose a common font
with recognizable
letterforms for large
bodies of text
Use a font size of at least
10-14 points
Present blocks of texts in
column; don’t let text
span the entire length of
the screen on a wide
screen display
Choose text and
background colours with
a high luminance contrast
37. To do..
Find difference between legibility and readability !!
Read the paper:
http://superawesomegood.com/wp-
content/uploads/2012/02/SKellyTGregory-
Typography.pdf
38. Elements of
User Centered Design
Language
Depending on the rhetorical situation, certain types of language
are needed.
Short sentences are helpful, as are well-written texts used in
explanations and similar bulk-text situations.
Unless the situation calls for it, jargon or technical terms should
not be used. Many writers will choose to use active voice, verbs
(instead of noun strings or nominal's), and simple sentence
structure.
41. Introduction
Usability is the ease of use and learnability of a human-
made object.
The object of use can be a software application, website,
book, tool, machine, process, or anything a human
interacts with.
42. Who does the job??
A usability study may be conducted as a primary job
function by a usability analyst or as a secondary job
function by designers, technical writers, marketing
personnel, and others.
It is widely used in consumer electronics, communication,
and knowledge transfer objects (such as a cookbook, a
document or online help) and mechanical objects such as
a door handle or a hammer.
43. Usability Includes
Usability includes
methods of measuring usability, such as needs analysis
and the study of the principles behind an object's perceived
efficiency or elegance.
In human-computer interaction and computer science,
usability studies the elegance and clarity with which the
interaction with a computer program or a web site is
designed.
Usability differs from user satisfaction and user
experience because usability also considers usefulness.
44. Definition
"The extent to which a product can be used by
specified users to achieve specified goals with
effectiveness, efficiency, and satisfaction in a
specified context of use.
" The word "usability" also refers to methods for
improving ease-of-use during the design
process.
45. To do..
Difference between usability and user experience
ISO Definition: Usability is concerned with the “effectiveness,
efficiency and satisfaction with which specified users achieve
specified goals in particular environments” (ISO 9241-11) [1]
whilst user experience is concerned with “all aspects of the
user’s experience when interacting with the product, service,
environment or facility”
Refer to: http://usabilitygeek.com/the-difference-
between-usability-and-user-experience/
47. Scenario??
what will users want to do?
step-by-step walkthrough
– what can they see (sketches, screen
shots)
– what do they do (keyboard, mouse
etc.)
– what are they thinking?
use and reuse throughout design
48. Scenarios are..
stories for design
communicate with others
validate other models
understand dynamics
linearity
time is linear - our lives are linear
but don’t show alternatives
49. Use Scenario to
communicate with others
designers, clients, users
validate other models
‘play’ it against other models
express dynamics
screenshots – appearance
scenario – behaviour
50. Explore the Depths
explore interaction
what happens when
explore cognition
what are the users thinking
explore architecture
what is happening inside
51. Linearity
Scenarios – one linear path through system
Pros:
life and time are linear
easy to understand (stories and narrative are natural)
concrete (errors less likely)
Cons:
no choice, no branches, no special conditions
miss the unintended
So:
use several scenarios
use several methods
52. Example of Scenario
Scenario for purchasing an airline ticket
Teena wants to fly to Czechoslovakia next Thursday,
returning on the last flight on Friday. She wants to
know how much this would cost, and whether it would
be cheaper to take a different flight back. She is not
quite sure how Czechoslovakia is spelt on the
computer. When she has found the right flight, she
wants to confirm the purchase with a credit card.
54. Introduction
Participatory design (PD) is a set of theories, practices, and
studies related to end users as full participants in activities
The field of participatory design grew out of work beginning
in the early 1970s in Norway, when computer professionals
worked with members of the Iron and Metalworkers Union to
enable the workers to have more influence on the design
and introduction of computer systems into the workplace.
55. How to proceed??
Typical methods:
brainstorming
storyboarding
workshops
pencil and paper exercises
Like ethnography, makes users feel valued and
encourages them to “own” the products.
56. Measuring Participation
four dimensions along which participation by users
could be measured:
1. Directness of interaction with the designers
2. Length of involvement in the design process
3. Scope of participation in the overall system being
designed
4. Degree of control over the design decisions
58. Basics
Golden rules — the Where3-What of navigation:
Where you are
Where you’re going (or what will happen)
Where you’ve been (or what has been done)
What you can do now
59. where you are – breadcrumbs
shows path through web site hierarchy
web site
top level category sub-category
this page
live links
to higher
levels
60. Levels of Structure
Different levels of structure, according to domain:
app: widgets; screens; application; environment
web: HTML; page layout; site; browser+www
device: controls; physical layout; modes; real
world
62. Screen design and layout
basic principles
grouping, structure, order
alignment
use of white space
63. basic principles
ask
what is the user doing?
think
what information, comparisons, order
design
form follows function
64. available tools
grouping of items
order of items
decoration - fonts, boxes etc.
alignment of items
white space between items
65. grouping and structure
logically together physically together
Billing details:
Name
Address: …
Credit card no
Delivery details:
Name
Address: …
Delivery time
Order details:
item quantity cost/item cost
size 10 screws (boxes) 7 3.71 25.97
…… … … …
66. order of groups and items
think! - what is natural order
should match screen order!
use boxes, space etc.
set up tabbing right!
instructions
beware the cake recipie syndrome!
… mix milk and flour, add the fruit
after beating them
67. decoration
use boxes to group logical items
use fonts for emphasis, headings
but not too many!!
ABCDEFGHIJKLM
NOPQRSTUVWXYZ
68. alignment - text
you read from left to right (English and
European)
align left hand side
Willy Wonka and the Chocolate Factory
Winston Churchill - A Biography
Wizard of Oz
Xena - Warrior Princess
Willy Wonka and the Chocolate Factory
Winston Churchill - A Biography
Wizard of Oz
Xena - Warrior Princess
fine for special effects but hard
to scan
boring but
readable!
69. alignment - names
Usually scanning for surnames
make it easy!
Alan Dix
Janet Finlay
Gregory Abowd
Russell Beale
Alan Dix
Janet Finlay
Gregory Abowd
Russell Beale
Dix , Alan
Finlay, Janet
Abowd, Gregory
Beale, Russell
70. alignment - numbers
think purpose!
which is biggest?
532.56
179.3
256.317
15
73.948
1035
3.142
497.6256
71. alignment - numbers
visually:
long number = big number
align decimal points
or right align integers
627.865
1.005763
382.583
2502.56
432.935
2.0175
652.87
56.34
72. multiple columns
scanning across gaps hard:
(often hard to avoid with large data base fields)
sherbert 75
toffee 120
chocolate 35
fruit gums 27
coconut dreams 85
73. multiple columns - 2
use leaders
sherbert 75
toffee 120
chocolate 35
fruit gums 27
coconut dreams 85
80. physical controls
grouping of items
order of items
decoration
alignment
centered text in buttons
? easy to scan ?
? easy to scan ?
centred text in buttons
81. physical controls
grouping of items
order of items
decoration
alignment
white space
gaps to aid groupinggaps to aid grouping
82. aesthetics and utility
(you already know this)
aesthetically pleasing designs
increase user satisfaction and improve productivity
beauty and utility may conflict
mixed up visual styles easy to distinguish
clean design – little differentiation confusing
backgrounds behind text
… good to look at, but hard to read
but can work together
e.g. the design of the counter
in consumer products – key differentiator (e.g. iMac)
83. colour and 3D
(you already know this)
both often used very badly!
colour
older monitors limited palette
colour over used because ‘it is there’
beware colour blind!
use sparingly to reinforce other information
3D effects
good for physical information and some graphs
but if over used …
e.g. text in perspective!! 3D pie charts
84. bad use of colour
(you already know this)
over use - without very good reason (e.g. kids’ site)
colour blindness
poor use of contrast
do adjust your set!
adjust your monitor to greys only
can you still read your screen?
85. across countries and cultures
localisation & internationalisation
changing interfaces for particular cultures/languages
globalisation
try to choose symbols etc. that work everywhere
simply change language?
use ‘resource’ database instead of literal text
… but changes sizes, left-right order etc.
deeper issues
cultural assumptions and values
meanings of symbols
e.g tick and cross … +ve and -ve in some cultures
… but … mean the same thing (mark this) in others