SlideShare a Scribd company logo
HUMAN COMPUTER INTERACTION
UNIT-II
DESIGN & SOFTWARE
PROCESS
Prepared By
A.Tamizharasi
Asst. Professor/CSE
RMDEC
Introduction to DESIGN
What is Design?
 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.
 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.
golden rule of design
understand your materials
 understand computers
◦ limitations, capacities, tools, platforms
 understand people
◦ psychological, social aspects
◦ human error
 and their interaction …
To err is human
 nature of humans to make mistakes, and
systems should be designed to reduce the
likelihood of those mistakes and to minimize
the consequences when mistakes happen.
The central message – the
user
 This is the core of interaction design:
put the user first, keep the user in the
center and remember the user at the
end.
process of Design
The process of Design
what is
wanted
analysis
design
implement
and deploy
prototype
interviews
ethnography
what is there
vs.
what is wanted
guidelines
principles
dialogue
notations
precise
specification
architectures
documentation
help
evaluation
heuristics
scenarios
task analysis
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
USER FOCUS
 know your users
◦ who are they?
- Are they young or old, experienced computer users or novices?
◦ probably not like you!
- When designing a system it is easy to design it as if you were the
main user: you assume your own interests and abilities. So often you
hear a designer say ‘but it’s obvious what to do’.
◦ talk to them
 This can take many forms: structured interviews about
their job or life,
 open-ended discussions, or bringing the potential users
fully into the design process.
 The last of these is called participatory design
◦ watch them
 use your imagination
Scenarios
Scenarios
 Scenarios are stories for design: rich
stories of interaction.
 simplest design representation, but
one of the most flexible and powerful.
 Scenarios can be used to:
◦ communicate with others
◦ validate other models
◦ understand dynamics
 Scenarios are a resource that can be used and reused
throughout the design process: helping us see what is
wanted, suggesting how users will deal with the potential
design, checking that proposed implementations will
work, and generating test cases for final evaluation.
NAVIGATION DESIGN
NAVIGATION DESIGN
Different levels of interaction:
 Widgets :The appropriate choice of widgets and
wording in menus and buttons will help you know
how to use them for a particular selection or action.
 Screens or windows You need to find things on the
screen, understand the logical grouping of buttons.
 Navigation within the application You need to be
able to understand what will happen when a button is
pressed, to understand where you are in the
interaction.
 Environment The word processor has to read
documents from disk, perhaps some are on remote
networks. You swap between applications, perhaps
cut and paste.
NAVIGATION DESIGN
2 main kinds of issue:
 local structure
– looking from one screen or page out
 global structure
– structure of site, movement between
screens.
local structure
 Much of interaction involves goal-seeking
behavior.
 To do this goal seeking, each state of the
system or each screen needs to give the user
enough knowledge of what to do to get closer
to their goal
 four things to look:
◦ knowing where you are
◦ knowing what you can do
◦ knowing where you are going – or what will happen
◦ knowing where you’ve been – or what you’ve done.
where you are – breadcrumbs
shows path through web site hierarchy
web site
top level category sub-category
this page
live links
to higher
levels
 what you can do – what can be
pressed or clicked to go somewhere
or do something.
 On the web the standard underlined
links make it clear which text is
clickable and which is not.
 To improve the appearance of the
page many sites change the color of
links and may remove the underline
 where you are going when you click a button
or what will happen.
 what you’ve done - need to know everything
about the internal state of the system and
things outside, like the contents of files,
networked devices, etc., that could affect it
Global structure – hierarchical
organization
 One way to organize a system is in some form of
hierarchy.
 organized along functional boundaries, by roles,
user type, or some more esoteric breakdown such
as modules.
 help during design, but can also be used to
structure the actual system.
the system
info and help management messages
add user remove user
 deep hierarchies are difficult to navigate
 better to have broad top-level
categories, or to present several levels
of menu on one screen or web page
 Eg: ,
 if the user wants to look up information on a
particular city, an alphabetical list of all city names
would be fast, but for other purposes a list by
region would be more appropriate.
Global structure – dialog
 In HCI, ‘dialog’ is used to refer to the
pattern of interactions between the user
and a system.
Minister: do you name take this woman …
Man: I do
Minister: do you name take this man …
Woman: I do
Minister: I now pronounce you man and wife
• marriage service
 general flow, generic – blanks for names
 pattern of interaction between people
• computer dialogue
 pattern of interaction between users and system
 but details differ each time.
 To describe a full system we need to
take into account different paths through
a system and loops where the system
returns to the same screen.
 Simple way is Network diagram
network diagrams
main
screen
remove
user
confirm
add user
show what leads to what
show what happens when
include branches and loops
be more task oriented than a
hierarchy
SCREEN DESIGN
AND
LAYOUT
SCREEN DESIGN AND
LAYOUT
Basic principles
 ask
◦ what is the user doing?
 think
◦ what information, comparisons, order
 design
◦ form follows function
Tools for layout
 grouping of items
 order of items
 decoration - fonts, boxes etc.
 alignment of items
 white space between items
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
…… … … …
order of groups and items
 think! - what is natural order
 should match screen order!
 For data entry forms or dialog boxes
we should also set up the order in
which the tab key moves between
fields.
decoration
 use boxes to group logical items
 decorative features like font style, and
text or background colors can be used
to emphasize groupings
 but not too many!!
ABCDEFGHIJKLM
NOPQRSTUVWXYZ
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!
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
 

alignment - numbers
think purpose!
which is biggest?
532.56
179.3
256.317
15
73.948
1035
3.142
497.6256
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
multiple columns
White space
 In typography the space between the
letters is called the counter
entering information
 forms, dialogue boxes
◦ presentation + data input
◦ similar layout issues
◦ alignment - N.B. different label lengths
 logical layout
◦ use task analysis (ch15)
◦ groupings
◦ natural order for entering information
 top-bottom, left-right (depending on culture)
 set tab order for keyboard entry
N.B. see extra slides for widget choice
Name:
Address:
Alan Dix
Lancaster
Name:
Address:
Alan Dix
Lancaster

User action and control
knowing what to do
 what is active what is passive
◦ where do you click
◦ where do you type
 consistent style helps
◦ e.g. web underlined links
 labels and icons
◦ standards for common actions
◦ language – bold = current state or action
affordances
 The psychological idea of affordance says that
things may
suggest by their shape and other attributes what you
can do to them
 for physical objects
◦ shape and size suggest actions
 pick up, twist, throw
◦ also cultural – buttons ‘afford’ pushing
 for screen objects
◦ button–like object ‘affords’ mouse click
◦ physical-like objects suggest use
 culture of computer use
◦ icons ‘afford’ clicking
◦ or even double clicking … not like real buttons!
mug handle
‘affords’
grasping
presenting information
 The way of presenting information on screen
depends on the kind of information: text, numbers,
maps, tables; on the technology available to present
it
 Eg: For more complex numerical data, may use
scatter graphs, histograms or 3D surfaces; for
hierarchical structures, outlines or organization
diagrams etc
Appropriate appearance
Aesthetics and utility
 an interface should be aesthetically pleasing
 good graphic design and attractive displays
can increase users’ satisfaction and thus
improve productivity
 The conflict between aesthetics and utility can
also be seen in many ‘welldesigned’ posters
and multimedia systems
 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
colour and 3D
 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
bad use of colour
 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?
across countries and cultures
 localisation & internationalisation
◦ changing interfaces for particular cultures/languages
 globalisation
◦ try to choose symbols etc. that work everywhere
 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

ITERATION
AND
PROTOTYPING
prototyping
 you never get it right first time
 if at first you don’t succeed …
prototype evaluatedesign
re-design
done!
OK?
 Evaluation, intended to improve
designs, is called formative evaluation.
 Summative evaluation, is performed at
the end to verify whether the product is
good enough.
 The result of evaluating the system will
usually be a list of faults or problems
followed by a redesign exercise, which
is then prototyped, evaluated . . .
 iteration and prototyping are the
universally accepted ‘best practice’
approach for interaction design
For prototyping methods to work:
 1. To understand what is wrong and
how to improve.
 2. A good start point.
 cannot iterate the design unless you
know what must be done to improve it.
 The second, is needed to avoid local
maxima.
 A really good designer might guess a
good initial design based on experience
and judgment
Thank you

More Related Content

What's hot

What is interaction design
What is interaction designWhat is interaction design
What is interaction design
Mohamed Shalash
 
interaction norman model in Human Computer Interaction(HCI)
interaction  norman model in Human Computer Interaction(HCI)interaction  norman model in Human Computer Interaction(HCI)
interaction norman model in Human Computer Interaction(HCI)
Daroko blog(www.professionalbloggertricks.com)
 
HCI 3e - Ch 19: Groupware
HCI 3e - Ch 19:  GroupwareHCI 3e - Ch 19:  Groupware
HCI 3e - Ch 19: Groupware
Alan Dix
 
Design Issues with Microsft Word
Design Issues with Microsft WordDesign Issues with Microsft Word
Design Issues with Microsft Word
Abdullah Shiam
 
User Interface Analysis and Design
User Interface Analysis and DesignUser Interface Analysis and Design
User Interface Analysis and Design
Saqib Raza
 
User interface design
User interface designUser interface design
User interface design
Slideshare
 
Foundations understanding users and interactions
Foundations  understanding users and interactionsFoundations  understanding users and interactions
Foundations understanding users and interactions
Preeti Mishra
 
golden rules of user interface design
golden rules of user interface designgolden rules of user interface design
golden rules of user interface design
gadige harshini
 
HCI 3e - Ch 8: Implementation support
HCI 3e - Ch 8:  Implementation supportHCI 3e - Ch 8:  Implementation support
HCI 3e - Ch 8: Implementation support
Alan Dix
 
Human computer interaction 3 4(revised)
Human computer interaction 3 4(revised)Human computer interaction 3 4(revised)
Human computer interaction 3 4(revised)
emaan waseem
 
User Interface Design For Programmers
User Interface Design For ProgrammersUser Interface Design For Programmers
User Interface Design For Programmers
Chris Poteet
 
User interface design: definitions, processes and principles
User interface design: definitions, processes and principlesUser interface design: definitions, processes and principles
User interface design: definitions, processes and principles
David Little
 
E3 chap-03
E3 chap-03E3 chap-03
Formal 8 – Interaction Models – describing general properties of systems incl...
Formal 8 – Interaction Models – describing general properties of systems incl...Formal 8 – Interaction Models – describing general properties of systems incl...
Formal 8 – Interaction Models – describing general properties of systems incl...
Alan Dix
 
HCI
HCIHCI
HCI 3e - Ch 13: Socio-organizational issues and stakeholder requirements
HCI 3e - Ch 13:  Socio-organizational issues and stakeholder requirementsHCI 3e - Ch 13:  Socio-organizational issues and stakeholder requirements
HCI 3e - Ch 13: Socio-organizational issues and stakeholder requirements
Alan Dix
 
HCI 3e - Ch 3: The interaction
HCI 3e - Ch 3:  The interactionHCI 3e - Ch 3:  The interaction
HCI 3e - Ch 3: The interaction
Alan Dix
 
Human computer interaction-web interface design and mobile eco system
Human computer interaction-web interface design and mobile eco systemHuman computer interaction-web interface design and mobile eco system
Human computer interaction-web interface design and mobile eco system
N.Jagadish Kumar
 
Chapter 4 interaction design
Chapter 4 interaction designChapter 4 interaction design
Chapter 4 interaction design
MLG College of Learning, Inc
 
IntrIntroduction
IntrIntroductionIntrIntroduction
IntrIntroduction
Preeti Mishra
 

What's hot (20)

What is interaction design
What is interaction designWhat is interaction design
What is interaction design
 
interaction norman model in Human Computer Interaction(HCI)
interaction  norman model in Human Computer Interaction(HCI)interaction  norman model in Human Computer Interaction(HCI)
interaction norman model in Human Computer Interaction(HCI)
 
HCI 3e - Ch 19: Groupware
HCI 3e - Ch 19:  GroupwareHCI 3e - Ch 19:  Groupware
HCI 3e - Ch 19: Groupware
 
Design Issues with Microsft Word
Design Issues with Microsft WordDesign Issues with Microsft Word
Design Issues with Microsft Word
 
User Interface Analysis and Design
User Interface Analysis and DesignUser Interface Analysis and Design
User Interface Analysis and Design
 
User interface design
User interface designUser interface design
User interface design
 
Foundations understanding users and interactions
Foundations  understanding users and interactionsFoundations  understanding users and interactions
Foundations understanding users and interactions
 
golden rules of user interface design
golden rules of user interface designgolden rules of user interface design
golden rules of user interface design
 
HCI 3e - Ch 8: Implementation support
HCI 3e - Ch 8:  Implementation supportHCI 3e - Ch 8:  Implementation support
HCI 3e - Ch 8: Implementation support
 
Human computer interaction 3 4(revised)
Human computer interaction 3 4(revised)Human computer interaction 3 4(revised)
Human computer interaction 3 4(revised)
 
User Interface Design For Programmers
User Interface Design For ProgrammersUser Interface Design For Programmers
User Interface Design For Programmers
 
User interface design: definitions, processes and principles
User interface design: definitions, processes and principlesUser interface design: definitions, processes and principles
User interface design: definitions, processes and principles
 
E3 chap-03
E3 chap-03E3 chap-03
E3 chap-03
 
Formal 8 – Interaction Models – describing general properties of systems incl...
Formal 8 – Interaction Models – describing general properties of systems incl...Formal 8 – Interaction Models – describing general properties of systems incl...
Formal 8 – Interaction Models – describing general properties of systems incl...
 
HCI
HCIHCI
HCI
 
HCI 3e - Ch 13: Socio-organizational issues and stakeholder requirements
HCI 3e - Ch 13:  Socio-organizational issues and stakeholder requirementsHCI 3e - Ch 13:  Socio-organizational issues and stakeholder requirements
HCI 3e - Ch 13: Socio-organizational issues and stakeholder requirements
 
HCI 3e - Ch 3: The interaction
HCI 3e - Ch 3:  The interactionHCI 3e - Ch 3:  The interaction
HCI 3e - Ch 3: The interaction
 
Human computer interaction-web interface design and mobile eco system
Human computer interaction-web interface design and mobile eco systemHuman computer interaction-web interface design and mobile eco system
Human computer interaction-web interface design and mobile eco system
 
Chapter 4 interaction design
Chapter 4 interaction designChapter 4 interaction design
Chapter 4 interaction design
 
IntrIntroduction
IntrIntroductionIntrIntroduction
IntrIntroduction
 

Similar to Unit ii design process

Interaction-design-basic.pptx
Interaction-design-basic.pptxInteraction-design-basic.pptx
Interaction-design-basic.pptx
PrinceCharlesClement
 
E3 Chap 05 Interaction Design Basics
E3 Chap 05 Interaction Design BasicsE3 Chap 05 Interaction Design Basics
E3 Chap 05 Interaction Design Basics
Gameo
 
HCI 3e - Ch 5: Interaction design basics
HCI 3e - Ch 5:  Interaction design basicsHCI 3e - Ch 5:  Interaction design basics
HCI 3e - Ch 5: Interaction design basics
Alan Dix
 
E3 chap-05
E3 chap-05E3 chap-05
E3 chap-05
Shishir Kakaraddi
 
Hci [6]interaction design
Hci [6]interaction designHci [6]interaction design
Hci [6]interaction design
Welly Dian Astika
 
Topic 3 Human Computer Interaction
Topic 3 Human Computer InteractionTopic 3 Human Computer Interaction
Topic 3 Human Computer Interaction
nur ezzaty
 
Workflow diagramming and information architecture
Workflow diagramming and information architectureWorkflow diagramming and information architecture
Workflow diagramming and information architecture
Dianna Miller
 
Website Usability | Day 1
Website Usability | Day 1Website Usability | Day 1
Website Usability | Day 1
studiokandm
 
Lesson 2 HCI 2.pptx
Lesson 2 HCI 2.pptxLesson 2 HCI 2.pptx
Lesson 2 HCI 2.pptx
EllenGracePorras
 
Design process interaction design basics
Design process interaction design basicsDesign process interaction design basics
Design process interaction design basics
Preeti Mishra
 
Importance of UX-UI in Android/iOS Development- Stackon
Importance of UX-UI in Android/iOS Development- StackonImportance of UX-UI in Android/iOS Development- Stackon
Importance of UX-UI in Android/iOS Development- Stackon
najam gs
 
5945479
59454795945479
5945479
aryang720
 
HCI Basics
HCI BasicsHCI Basics
HCI Basics
Zdeněk Lanc
 
NYU Web Intensive - Week 3 Class 1
NYU Web Intensive - Week 3 Class 1NYU Web Intensive - Week 3 Class 1
NYU Web Intensive - Week 3 Class 1
studiokandm
 
Lesson 2 HCI 2.pdf
Lesson 2 HCI 2.pdfLesson 2 HCI 2.pdf
Lesson 2 HCI 2.pdf
EllenGracePorras
 
Intro to UX Design
Intro to UX DesignIntro to UX Design
Intro to UX Design
jayyearley
 
User centric design (ucd)
User centric design (ucd)User centric design (ucd)
User centric design (ucd)
Gudmundur Sigurfreyr
 
Application Design - Part 2
Application Design - Part 2Application Design - Part 2
Application Design - Part 2
Kelley Howell
 
24 Hours of UX, 2023: Preventing the Future
24 Hours of UX, 2023: Preventing the Future24 Hours of UX, 2023: Preventing the Future
24 Hours of UX, 2023: Preventing the Future
Joshua Randall
 
CIS375 Interaction Designs Chapter6
CIS375 Interaction Designs Chapter6CIS375 Interaction Designs Chapter6
CIS375 Interaction Designs Chapter6
Dr. Ahmed Al Zaidy
 

Similar to Unit ii design process (20)

Interaction-design-basic.pptx
Interaction-design-basic.pptxInteraction-design-basic.pptx
Interaction-design-basic.pptx
 
E3 Chap 05 Interaction Design Basics
E3 Chap 05 Interaction Design BasicsE3 Chap 05 Interaction Design Basics
E3 Chap 05 Interaction Design Basics
 
HCI 3e - Ch 5: Interaction design basics
HCI 3e - Ch 5:  Interaction design basicsHCI 3e - Ch 5:  Interaction design basics
HCI 3e - Ch 5: Interaction design basics
 
E3 chap-05
E3 chap-05E3 chap-05
E3 chap-05
 
Hci [6]interaction design
Hci [6]interaction designHci [6]interaction design
Hci [6]interaction design
 
Topic 3 Human Computer Interaction
Topic 3 Human Computer InteractionTopic 3 Human Computer Interaction
Topic 3 Human Computer Interaction
 
Workflow diagramming and information architecture
Workflow diagramming and information architectureWorkflow diagramming and information architecture
Workflow diagramming and information architecture
 
Website Usability | Day 1
Website Usability | Day 1Website Usability | Day 1
Website Usability | Day 1
 
Lesson 2 HCI 2.pptx
Lesson 2 HCI 2.pptxLesson 2 HCI 2.pptx
Lesson 2 HCI 2.pptx
 
Design process interaction design basics
Design process interaction design basicsDesign process interaction design basics
Design process interaction design basics
 
Importance of UX-UI in Android/iOS Development- Stackon
Importance of UX-UI in Android/iOS Development- StackonImportance of UX-UI in Android/iOS Development- Stackon
Importance of UX-UI in Android/iOS Development- Stackon
 
5945479
59454795945479
5945479
 
HCI Basics
HCI BasicsHCI Basics
HCI Basics
 
NYU Web Intensive - Week 3 Class 1
NYU Web Intensive - Week 3 Class 1NYU Web Intensive - Week 3 Class 1
NYU Web Intensive - Week 3 Class 1
 
Lesson 2 HCI 2.pdf
Lesson 2 HCI 2.pdfLesson 2 HCI 2.pdf
Lesson 2 HCI 2.pdf
 
Intro to UX Design
Intro to UX DesignIntro to UX Design
Intro to UX Design
 
User centric design (ucd)
User centric design (ucd)User centric design (ucd)
User centric design (ucd)
 
Application Design - Part 2
Application Design - Part 2Application Design - Part 2
Application Design - Part 2
 
24 Hours of UX, 2023: Preventing the Future
24 Hours of UX, 2023: Preventing the Future24 Hours of UX, 2023: Preventing the Future
24 Hours of UX, 2023: Preventing the Future
 
CIS375 Interaction Designs Chapter6
CIS375 Interaction Designs Chapter6CIS375 Interaction Designs Chapter6
CIS375 Interaction Designs Chapter6
 

More from tamizh arthanari

Socio organizational issues ppt
Socio organizational issues pptSocio organizational issues ppt
Socio organizational issues ppt
tamizh arthanari
 
Unit iii ppt
Unit iii pptUnit iii ppt
Unit iii ppt
tamizh arthanari
 
HCI Fundamentals - Part 2 : Human memory and thinking
HCI Fundamentals - Part 2 : Human memory and thinkingHCI Fundamentals - Part 2 : Human memory and thinking
HCI Fundamentals - Part 2 : Human memory and thinking
tamizh arthanari
 
Hci fundamentals
Hci fundamentalsHci fundamentals
Hci fundamentals
tamizh arthanari
 
Virtual memory
Virtual memoryVirtual memory
Virtual memory
tamizh arthanari
 
Standard IO Interface
Standard IO InterfaceStandard IO Interface
Standard IO Interface
tamizh arthanari
 

More from tamizh arthanari (6)

Socio organizational issues ppt
Socio organizational issues pptSocio organizational issues ppt
Socio organizational issues ppt
 
Unit iii ppt
Unit iii pptUnit iii ppt
Unit iii ppt
 
HCI Fundamentals - Part 2 : Human memory and thinking
HCI Fundamentals - Part 2 : Human memory and thinkingHCI Fundamentals - Part 2 : Human memory and thinking
HCI Fundamentals - Part 2 : Human memory and thinking
 
Hci fundamentals
Hci fundamentalsHci fundamentals
Hci fundamentals
 
Virtual memory
Virtual memoryVirtual memory
Virtual memory
 
Standard IO Interface
Standard IO InterfaceStandard IO Interface
Standard IO Interface
 

Recently uploaded

مصحف القراءات العشر أعد أحرف الخلاف سمير بسيوني.pdf
مصحف القراءات العشر   أعد أحرف الخلاف سمير بسيوني.pdfمصحف القراءات العشر   أعد أحرف الخلاف سمير بسيوني.pdf
مصحف القراءات العشر أعد أحرف الخلاف سمير بسيوني.pdf
سمير بسيوني
 
skeleton System.pdf (skeleton system wow)
skeleton System.pdf (skeleton system wow)skeleton System.pdf (skeleton system wow)
skeleton System.pdf (skeleton system wow)
Mohammad Al-Dhahabi
 
Juneteenth Freedom Day 2024 David Douglas School District
Juneteenth Freedom Day 2024 David Douglas School DistrictJuneteenth Freedom Day 2024 David Douglas School District
Juneteenth Freedom Day 2024 David Douglas School District
David Douglas School District
 
THE SACRIFICE HOW PRO-PALESTINE PROTESTS STUDENTS ARE SACRIFICING TO CHANGE T...
THE SACRIFICE HOW PRO-PALESTINE PROTESTS STUDENTS ARE SACRIFICING TO CHANGE T...THE SACRIFICE HOW PRO-PALESTINE PROTESTS STUDENTS ARE SACRIFICING TO CHANGE T...
THE SACRIFICE HOW PRO-PALESTINE PROTESTS STUDENTS ARE SACRIFICING TO CHANGE T...
indexPub
 
Temple of Asclepius in Thrace. Excavation results
Temple of Asclepius in Thrace. Excavation resultsTemple of Asclepius in Thrace. Excavation results
Temple of Asclepius in Thrace. Excavation results
Krassimira Luka
 
BÀI TẬP BỔ TRỢ TIẾNG ANH LỚP 8 - CẢ NĂM - FRIENDS PLUS - NĂM HỌC 2023-2024 (B...
BÀI TẬP BỔ TRỢ TIẾNG ANH LỚP 8 - CẢ NĂM - FRIENDS PLUS - NĂM HỌC 2023-2024 (B...BÀI TẬP BỔ TRỢ TIẾNG ANH LỚP 8 - CẢ NĂM - FRIENDS PLUS - NĂM HỌC 2023-2024 (B...
BÀI TẬP BỔ TRỢ TIẾNG ANH LỚP 8 - CẢ NĂM - FRIENDS PLUS - NĂM HỌC 2023-2024 (B...
Nguyen Thanh Tu Collection
 
spot a liar (Haiqa 146).pptx Technical writhing and presentation skills
spot a liar (Haiqa 146).pptx Technical writhing and presentation skillsspot a liar (Haiqa 146).pptx Technical writhing and presentation skills
spot a liar (Haiqa 146).pptx Technical writhing and presentation skills
haiqairshad
 
Philippine Edukasyong Pantahanan at Pangkabuhayan (EPP) Curriculum
Philippine Edukasyong Pantahanan at Pangkabuhayan (EPP) CurriculumPhilippine Edukasyong Pantahanan at Pangkabuhayan (EPP) Curriculum
Philippine Edukasyong Pantahanan at Pangkabuhayan (EPP) Curriculum
MJDuyan
 
Andreas Schleicher presents PISA 2022 Volume III - Creative Thinking - 18 Jun...
Andreas Schleicher presents PISA 2022 Volume III - Creative Thinking - 18 Jun...Andreas Schleicher presents PISA 2022 Volume III - Creative Thinking - 18 Jun...
Andreas Schleicher presents PISA 2022 Volume III - Creative Thinking - 18 Jun...
EduSkills OECD
 
Oliver Asks for More by Charles Dickens (9)
Oliver Asks for More by Charles Dickens (9)Oliver Asks for More by Charles Dickens (9)
Oliver Asks for More by Charles Dickens (9)
nitinpv4ai
 
Wound healing PPT
Wound healing PPTWound healing PPT
Wound healing PPT
Jyoti Chand
 
Level 3 NCEA - NZ: A Nation In the Making 1872 - 1900 SML.ppt
Level 3 NCEA - NZ: A  Nation In the Making 1872 - 1900 SML.pptLevel 3 NCEA - NZ: A  Nation In the Making 1872 - 1900 SML.ppt
Level 3 NCEA - NZ: A Nation In the Making 1872 - 1900 SML.ppt
Henry Hollis
 
RESULTS OF THE EVALUATION QUESTIONNAIRE.pptx
RESULTS OF THE EVALUATION QUESTIONNAIRE.pptxRESULTS OF THE EVALUATION QUESTIONNAIRE.pptx
RESULTS OF THE EVALUATION QUESTIONNAIRE.pptx
zuzanka
 
Pharmaceutics Pharmaceuticals best of brub
Pharmaceutics Pharmaceuticals best of brubPharmaceutics Pharmaceuticals best of brub
Pharmaceutics Pharmaceuticals best of brub
danielkiash986
 
Electric Fetus - Record Store Scavenger Hunt
Electric Fetus - Record Store Scavenger HuntElectric Fetus - Record Store Scavenger Hunt
Electric Fetus - Record Store Scavenger Hunt
RamseyBerglund
 
BIOLOGY NATIONAL EXAMINATION COUNCIL (NECO) 2024 PRACTICAL MANUAL.pptx
BIOLOGY NATIONAL EXAMINATION COUNCIL (NECO) 2024 PRACTICAL MANUAL.pptxBIOLOGY NATIONAL EXAMINATION COUNCIL (NECO) 2024 PRACTICAL MANUAL.pptx
BIOLOGY NATIONAL EXAMINATION COUNCIL (NECO) 2024 PRACTICAL MANUAL.pptx
RidwanHassanYusuf
 
Simple-Present-Tense xxxxxxxxxxxxxxxxxxx
Simple-Present-Tense xxxxxxxxxxxxxxxxxxxSimple-Present-Tense xxxxxxxxxxxxxxxxxxx
Simple-Present-Tense xxxxxxxxxxxxxxxxxxx
RandolphRadicy
 
NIPER 2024 MEMORY BASED QUESTIONS.ANSWERS TO NIPER 2024 QUESTIONS.NIPER JEE 2...
NIPER 2024 MEMORY BASED QUESTIONS.ANSWERS TO NIPER 2024 QUESTIONS.NIPER JEE 2...NIPER 2024 MEMORY BASED QUESTIONS.ANSWERS TO NIPER 2024 QUESTIONS.NIPER JEE 2...
NIPER 2024 MEMORY BASED QUESTIONS.ANSWERS TO NIPER 2024 QUESTIONS.NIPER JEE 2...
Payaamvohra1
 
How to Download & Install Module From the Odoo App Store in Odoo 17
How to Download & Install Module From the Odoo App Store in Odoo 17How to Download & Install Module From the Odoo App Store in Odoo 17
How to Download & Install Module From the Odoo App Store in Odoo 17
Celine George
 
How to Manage Reception Report in Odoo 17
How to Manage Reception Report in Odoo 17How to Manage Reception Report in Odoo 17
How to Manage Reception Report in Odoo 17
Celine George
 

Recently uploaded (20)

مصحف القراءات العشر أعد أحرف الخلاف سمير بسيوني.pdf
مصحف القراءات العشر   أعد أحرف الخلاف سمير بسيوني.pdfمصحف القراءات العشر   أعد أحرف الخلاف سمير بسيوني.pdf
مصحف القراءات العشر أعد أحرف الخلاف سمير بسيوني.pdf
 
skeleton System.pdf (skeleton system wow)
skeleton System.pdf (skeleton system wow)skeleton System.pdf (skeleton system wow)
skeleton System.pdf (skeleton system wow)
 
Juneteenth Freedom Day 2024 David Douglas School District
Juneteenth Freedom Day 2024 David Douglas School DistrictJuneteenth Freedom Day 2024 David Douglas School District
Juneteenth Freedom Day 2024 David Douglas School District
 
THE SACRIFICE HOW PRO-PALESTINE PROTESTS STUDENTS ARE SACRIFICING TO CHANGE T...
THE SACRIFICE HOW PRO-PALESTINE PROTESTS STUDENTS ARE SACRIFICING TO CHANGE T...THE SACRIFICE HOW PRO-PALESTINE PROTESTS STUDENTS ARE SACRIFICING TO CHANGE T...
THE SACRIFICE HOW PRO-PALESTINE PROTESTS STUDENTS ARE SACRIFICING TO CHANGE T...
 
Temple of Asclepius in Thrace. Excavation results
Temple of Asclepius in Thrace. Excavation resultsTemple of Asclepius in Thrace. Excavation results
Temple of Asclepius in Thrace. Excavation results
 
BÀI TẬP BỔ TRỢ TIẾNG ANH LỚP 8 - CẢ NĂM - FRIENDS PLUS - NĂM HỌC 2023-2024 (B...
BÀI TẬP BỔ TRỢ TIẾNG ANH LỚP 8 - CẢ NĂM - FRIENDS PLUS - NĂM HỌC 2023-2024 (B...BÀI TẬP BỔ TRỢ TIẾNG ANH LỚP 8 - CẢ NĂM - FRIENDS PLUS - NĂM HỌC 2023-2024 (B...
BÀI TẬP BỔ TRỢ TIẾNG ANH LỚP 8 - CẢ NĂM - FRIENDS PLUS - NĂM HỌC 2023-2024 (B...
 
spot a liar (Haiqa 146).pptx Technical writhing and presentation skills
spot a liar (Haiqa 146).pptx Technical writhing and presentation skillsspot a liar (Haiqa 146).pptx Technical writhing and presentation skills
spot a liar (Haiqa 146).pptx Technical writhing and presentation skills
 
Philippine Edukasyong Pantahanan at Pangkabuhayan (EPP) Curriculum
Philippine Edukasyong Pantahanan at Pangkabuhayan (EPP) CurriculumPhilippine Edukasyong Pantahanan at Pangkabuhayan (EPP) Curriculum
Philippine Edukasyong Pantahanan at Pangkabuhayan (EPP) Curriculum
 
Andreas Schleicher presents PISA 2022 Volume III - Creative Thinking - 18 Jun...
Andreas Schleicher presents PISA 2022 Volume III - Creative Thinking - 18 Jun...Andreas Schleicher presents PISA 2022 Volume III - Creative Thinking - 18 Jun...
Andreas Schleicher presents PISA 2022 Volume III - Creative Thinking - 18 Jun...
 
Oliver Asks for More by Charles Dickens (9)
Oliver Asks for More by Charles Dickens (9)Oliver Asks for More by Charles Dickens (9)
Oliver Asks for More by Charles Dickens (9)
 
Wound healing PPT
Wound healing PPTWound healing PPT
Wound healing PPT
 
Level 3 NCEA - NZ: A Nation In the Making 1872 - 1900 SML.ppt
Level 3 NCEA - NZ: A  Nation In the Making 1872 - 1900 SML.pptLevel 3 NCEA - NZ: A  Nation In the Making 1872 - 1900 SML.ppt
Level 3 NCEA - NZ: A Nation In the Making 1872 - 1900 SML.ppt
 
RESULTS OF THE EVALUATION QUESTIONNAIRE.pptx
RESULTS OF THE EVALUATION QUESTIONNAIRE.pptxRESULTS OF THE EVALUATION QUESTIONNAIRE.pptx
RESULTS OF THE EVALUATION QUESTIONNAIRE.pptx
 
Pharmaceutics Pharmaceuticals best of brub
Pharmaceutics Pharmaceuticals best of brubPharmaceutics Pharmaceuticals best of brub
Pharmaceutics Pharmaceuticals best of brub
 
Electric Fetus - Record Store Scavenger Hunt
Electric Fetus - Record Store Scavenger HuntElectric Fetus - Record Store Scavenger Hunt
Electric Fetus - Record Store Scavenger Hunt
 
BIOLOGY NATIONAL EXAMINATION COUNCIL (NECO) 2024 PRACTICAL MANUAL.pptx
BIOLOGY NATIONAL EXAMINATION COUNCIL (NECO) 2024 PRACTICAL MANUAL.pptxBIOLOGY NATIONAL EXAMINATION COUNCIL (NECO) 2024 PRACTICAL MANUAL.pptx
BIOLOGY NATIONAL EXAMINATION COUNCIL (NECO) 2024 PRACTICAL MANUAL.pptx
 
Simple-Present-Tense xxxxxxxxxxxxxxxxxxx
Simple-Present-Tense xxxxxxxxxxxxxxxxxxxSimple-Present-Tense xxxxxxxxxxxxxxxxxxx
Simple-Present-Tense xxxxxxxxxxxxxxxxxxx
 
NIPER 2024 MEMORY BASED QUESTIONS.ANSWERS TO NIPER 2024 QUESTIONS.NIPER JEE 2...
NIPER 2024 MEMORY BASED QUESTIONS.ANSWERS TO NIPER 2024 QUESTIONS.NIPER JEE 2...NIPER 2024 MEMORY BASED QUESTIONS.ANSWERS TO NIPER 2024 QUESTIONS.NIPER JEE 2...
NIPER 2024 MEMORY BASED QUESTIONS.ANSWERS TO NIPER 2024 QUESTIONS.NIPER JEE 2...
 
How to Download & Install Module From the Odoo App Store in Odoo 17
How to Download & Install Module From the Odoo App Store in Odoo 17How to Download & Install Module From the Odoo App Store in Odoo 17
How to Download & Install Module From the Odoo App Store in Odoo 17
 
How to Manage Reception Report in Odoo 17
How to Manage Reception Report in Odoo 17How to Manage Reception Report in Odoo 17
How to Manage Reception Report in Odoo 17
 

Unit ii design process

  • 1. HUMAN COMPUTER INTERACTION UNIT-II DESIGN & SOFTWARE PROCESS Prepared By A.Tamizharasi Asst. Professor/CSE RMDEC
  • 3. What is Design?  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.  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.
  • 4. golden rule of design understand your materials  understand computers ◦ limitations, capacities, tools, platforms  understand people ◦ psychological, social aspects ◦ human error  and their interaction …
  • 5. To err is human  nature of humans to make mistakes, and systems should be designed to reduce the likelihood of those mistakes and to minimize the consequences when mistakes happen. The central message – the user  This is the core of interaction design: put the user first, keep the user in the center and remember the user at the end.
  • 7. The process of Design what is wanted analysis design implement and deploy prototype interviews ethnography what is there vs. what is wanted guidelines principles dialogue notations precise specification architectures documentation help evaluation heuristics scenarios task analysis
  • 8. 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
  • 9. USER FOCUS  know your users ◦ who are they? - Are they young or old, experienced computer users or novices? ◦ probably not like you! - When designing a system it is easy to design it as if you were the main user: you assume your own interests and abilities. So often you hear a designer say ‘but it’s obvious what to do’. ◦ talk to them  This can take many forms: structured interviews about their job or life,  open-ended discussions, or bringing the potential users fully into the design process.  The last of these is called participatory design ◦ watch them  use your imagination
  • 11. Scenarios  Scenarios are stories for design: rich stories of interaction.  simplest design representation, but one of the most flexible and powerful.  Scenarios can be used to: ◦ communicate with others ◦ validate other models ◦ understand dynamics
  • 12.  Scenarios are a resource that can be used and reused throughout the design process: helping us see what is wanted, suggesting how users will deal with the potential design, checking that proposed implementations will work, and generating test cases for final evaluation.
  • 14. NAVIGATION DESIGN Different levels of interaction:  Widgets :The appropriate choice of widgets and wording in menus and buttons will help you know how to use them for a particular selection or action.  Screens or windows You need to find things on the screen, understand the logical grouping of buttons.  Navigation within the application You need to be able to understand what will happen when a button is pressed, to understand where you are in the interaction.  Environment The word processor has to read documents from disk, perhaps some are on remote networks. You swap between applications, perhaps cut and paste.
  • 15. NAVIGATION DESIGN 2 main kinds of issue:  local structure – looking from one screen or page out  global structure – structure of site, movement between screens.
  • 16. local structure  Much of interaction involves goal-seeking behavior.  To do this goal seeking, each state of the system or each screen needs to give the user enough knowledge of what to do to get closer to their goal  four things to look: ◦ knowing where you are ◦ knowing what you can do ◦ knowing where you are going – or what will happen ◦ knowing where you’ve been – or what you’ve done.
  • 17. where you are – breadcrumbs shows path through web site hierarchy web site top level category sub-category this page live links to higher levels
  • 18.  what you can do – what can be pressed or clicked to go somewhere or do something.  On the web the standard underlined links make it clear which text is clickable and which is not.  To improve the appearance of the page many sites change the color of links and may remove the underline
  • 19.  where you are going when you click a button or what will happen.  what you’ve done - need to know everything about the internal state of the system and things outside, like the contents of files, networked devices, etc., that could affect it
  • 20. Global structure – hierarchical organization  One way to organize a system is in some form of hierarchy.  organized along functional boundaries, by roles, user type, or some more esoteric breakdown such as modules.  help during design, but can also be used to structure the actual system. the system info and help management messages add user remove user
  • 21.  deep hierarchies are difficult to navigate  better to have broad top-level categories, or to present several levels of menu on one screen or web page  Eg: ,  if the user wants to look up information on a particular city, an alphabetical list of all city names would be fast, but for other purposes a list by region would be more appropriate.
  • 22. Global structure – dialog  In HCI, ‘dialog’ is used to refer to the pattern of interactions between the user and a system. Minister: do you name take this woman … Man: I do Minister: do you name take this man … Woman: I do Minister: I now pronounce you man and wife
  • 23. • marriage service  general flow, generic – blanks for names  pattern of interaction between people • computer dialogue  pattern of interaction between users and system  but details differ each time.  To describe a full system we need to take into account different paths through a system and loops where the system returns to the same screen.  Simple way is Network diagram
  • 24. network diagrams main screen remove user confirm add user show what leads to what show what happens when include branches and loops be more task oriented than a hierarchy
  • 26. SCREEN DESIGN AND LAYOUT Basic principles  ask ◦ what is the user doing?  think ◦ what information, comparisons, order  design ◦ form follows function
  • 27. Tools for layout  grouping of items  order of items  decoration - fonts, boxes etc.  alignment of items  white space between items
  • 28. 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 …… … … …
  • 29. order of groups and items  think! - what is natural order  should match screen order!  For data entry forms or dialog boxes we should also set up the order in which the tab key moves between fields.
  • 30. decoration  use boxes to group logical items  decorative features like font style, and text or background colors can be used to emphasize groupings  but not too many!! ABCDEFGHIJKLM NOPQRSTUVWXYZ
  • 31. 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!
  • 32. 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   
  • 33. alignment - numbers think purpose! which is biggest? 532.56 179.3 256.317 15 73.948 1035 3.142 497.6256
  • 34. 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
  • 36. White space  In typography the space between the letters is called the counter
  • 37. entering information  forms, dialogue boxes ◦ presentation + data input ◦ similar layout issues ◦ alignment - N.B. different label lengths  logical layout ◦ use task analysis (ch15) ◦ groupings ◦ natural order for entering information  top-bottom, left-right (depending on culture)  set tab order for keyboard entry N.B. see extra slides for widget choice Name: Address: Alan Dix Lancaster Name: Address: Alan Dix Lancaster  User action and control
  • 38. knowing what to do  what is active what is passive ◦ where do you click ◦ where do you type  consistent style helps ◦ e.g. web underlined links  labels and icons ◦ standards for common actions ◦ language – bold = current state or action
  • 39. affordances  The psychological idea of affordance says that things may suggest by their shape and other attributes what you can do to them  for physical objects ◦ shape and size suggest actions  pick up, twist, throw ◦ also cultural – buttons ‘afford’ pushing  for screen objects ◦ button–like object ‘affords’ mouse click ◦ physical-like objects suggest use  culture of computer use ◦ icons ‘afford’ clicking ◦ or even double clicking … not like real buttons! mug handle ‘affords’ grasping
  • 40. presenting information  The way of presenting information on screen depends on the kind of information: text, numbers, maps, tables; on the technology available to present it  Eg: For more complex numerical data, may use scatter graphs, histograms or 3D surfaces; for hierarchical structures, outlines or organization diagrams etc Appropriate appearance
  • 41. Aesthetics and utility  an interface should be aesthetically pleasing  good graphic design and attractive displays can increase users’ satisfaction and thus improve productivity  The conflict between aesthetics and utility can also be seen in many ‘welldesigned’ posters and multimedia systems  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
  • 42. colour and 3D  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
  • 43. bad use of colour  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?
  • 44. across countries and cultures  localisation & internationalisation ◦ changing interfaces for particular cultures/languages  globalisation ◦ try to choose symbols etc. that work everywhere  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 
  • 46. prototyping  you never get it right first time  if at first you don’t succeed … prototype evaluatedesign re-design done! OK?
  • 47.  Evaluation, intended to improve designs, is called formative evaluation.  Summative evaluation, is performed at the end to verify whether the product is good enough.  The result of evaluating the system will usually be a list of faults or problems followed by a redesign exercise, which is then prototyped, evaluated . . .  iteration and prototyping are the universally accepted ‘best practice’ approach for interaction design
  • 48. For prototyping methods to work:  1. To understand what is wrong and how to improve.  2. A good start point.  cannot iterate the design unless you know what must be done to improve it.  The second, is needed to avoid local maxima.  A really good designer might guess a good initial design based on experience and judgment