SlideShare une entreprise Scribd logo
1  sur  42
Télécharger pour lire hors ligne
Interaction
Design
HCI course
Hurriyatul Fitriyah
overview
Interaction design is about creating intervention in
complex situation using technology of many
components; including PC software, the web and
physical devices
Interaction VS Product
It is not about the product/ artifact, but about
understanding and choosing how it is going to affect
the way people do/ work
1. The design
What is Design?
A

simple definition is:
achieving GOALS within CONSTRAINTS

o
o

Goals: what is the purpose of the design we
are intending to produce? Who is it for?
Constraints: what materials must we use?
What standard must we adopt? How mch
can it cost? How much time do we have to
develop it? Are there health and safety
issue?
Design is a trade-off
 Choosing

which goals or constraints can
be downgraded so that others can be
met
 Accepting limitation of human and of
design
 The best design are where the designer
understand the trade-off and the factors
affecting them
Golden rule of design
 Understand
 In
1.

your materials

HCI, the materials is obviously
The human
(psycological, social, human error)

2.

The computer
(Limitations, capacity, tools, platforms)
To err is human
 People

make mistake, slips, error,
omissions
 But people are remarkably adaptable
 As a designer you can give better training
and documentation, but the product and
its interaction design you created is the
most important
2. The Process of Design
A never ending iterative
stages (never complete)
a. Interaction Starts with?
 It

starts with getting to know the users and
their context (Requirement – what is
wanted):




What is needed by users?
Find out who they are? What they like?
b. Analysis
 The

results of observation and interview
need to be ordered in some way to bring
out key issues and communicate with
later stages of design
 Including task analysis

c. Design
A

step to transfer what you want into how
to do it
d. Iteration and prototyping
 Most

of the time, we don’t get the design
right at the first time
 Comprise design evaluation

e. Implementation and
Deployment
 When

the designer happy with their
product, then it is time to create it 
Your time is limited!
 You

can’t trapped in design cycle for like
ever!!
 there is a trade-off between the length of
the design period and the quality of the
final design
 the real problem is not to find faults,
instead the issue is: which usability
problems is it worth fixing?
3. User focus
Know them!
How do you get to know them?


Who are they?




Probably NOT like you!




Ask them about what really happen and needed; using
structured interview, open-ended duscussion, or ask them to join
the design process

Watch them!




Obvious for you, but most of the time not for the user

Talk to them!




Young or old? Experienced or newbie? It’s harder to design
generic computer system

Sherlock Holmes’s Quote: “You see, but you do not observe!”

Use you imagination!


If I were my User, then?
4. Scenarios
Scenarios
 Rich

story of information
 can be used and reused throughout
design





Help us see what users will want to do
Give us step-by-step walkthrough of users’
interaction; including what they see, do
and are thinking
Example: if user do this then computer do
what? Then the user have to do what? etc
Scenarios also can be used to:
 Communicate

with others (designer
colleagues, clients or even users)
 Validated againts other models
 Express dynamics
5. Navigation Design
HCI is a socio-technical intervention
Socio-technical intervention
 Computer-user
1.
2.
3.
4.

interact at several levels:

Widgets (menus, buttons)
Screen or window (grouping of button)
Navigation within the application
Environment; connect with other deviceapplication
Start considering structure with:
 Who

is going to use the application?
 How do they think
 What will they do with it
Thinking about structure
1.

Local structure



Looking from one screen or page out
Goalk seeking behaviour
 The

screen, web page or device displays
should make clear where you are in terms
of the interactionn






Knowing where you are
what you can do
knowing where you are going or what will
happen
where you have been or what you have
done
2. Global structure –
hierarcical organtization




Structure of site, movement between screen
The hierarcy links screen, pages, or states in logical grouping
Example: a PC application on the web
3. Global structure – dialog




In HCI, the word ‘dialog’ is used to refer to
flow of screen
It give pattern of interaction
A simple way is to use a network diagram
showing the principal states or screen linked
tigether with arrows; this can show:
 What

leads to what
 Show what happens when
 Include branches and loops
 Be more task oriented that a hierarcy
 Network

diagram ilustrating the main
screen for adding or deleting a user
5. Screen Design and
Layout
How we put the different element together in an
interactive application
Basic principle at Screen level
 Ask

What is the user doing?
 Think What information is required? What
comparisons may the user need to make?
In what order are things likely to be
needed?
 Design Form follows function: let the
required interactions drive the layout
a. Tools for layout
 Grouping

& structure: If things logically
belong together, then we should normally
physically group them together
 Order of group and items
 Decoration : decorative feature that helps
to distinct each group and item, e.g. Font
style, font type, color, line, boxes
Example:
control panel
 Alignment:

 White

space:
b. User action and control
 Entering

information: form-based
interface adn dialog boxes
 Passive and active element on screen
 Affordance: how user know where to
click? It’s about psychologic on the
elements’ shape, colour and other
atribute
c. Appropriate appearance
 Afford

different presentation that allow
users to select totheir convenient
 Aesthetic

and utility: Remember that a
pretty interface is not necessarily a good
interface, it just need to be well-designed

 Color

much

and 3D interface: just don’t too

 Localization

vs internationalization: adjust
language, sign, symbol to segmented
user
 Users

need to find their way around a
system, this involves:





Helping users know who they are, where
they have been, and what they can do
next
Creating overall structures that are easy to
understand and fit the users’ needs
Desinging comprehensible screen and
control panels
6. Iteration and
Prototyping
Complexity of Design
 It

means we don’t get it right the first time
 Theory and models can help give good
start points
 Formative


evaluation

Intended to improve the design

 Summative


evaluation

To verify whether the product is good
enough

 The

result of evaluating the system will
usually be a list of faults or problems
 This is followed by redesign exercise
Role of prototyping
So, we need iterations and prototype to try out and
evaluate
 But

iteration can get trapped having no
simple improvement, but are not good
Two things you needed in
order for prototyping:
1.
2.

To understand what is wrong and how to
improve
A good start point

Contenu connexe

Tendances

Tendances (20)

Chapter1(hci)
Chapter1(hci)Chapter1(hci)
Chapter1(hci)
 
Mobile Design
Mobile DesignMobile Design
Mobile Design
 
Lecture 4: Human-Computer Interaction: Prototyping (2014)
Lecture 4: Human-Computer Interaction: Prototyping (2014)Lecture 4: Human-Computer Interaction: Prototyping (2014)
Lecture 4: Human-Computer Interaction: Prototyping (2014)
 
User interface-design
User interface-designUser interface-design
User interface-design
 
HCI 3e - Ch 6: HCI in the software process
HCI 3e - Ch 6:  HCI in the software processHCI 3e - Ch 6:  HCI in the software process
HCI 3e - Ch 6: HCI in the software process
 
Interaction Paradigms
Interaction ParadigmsInteraction Paradigms
Interaction Paradigms
 
HCI - Chapter 2
HCI - Chapter 2HCI - Chapter 2
HCI - Chapter 2
 
User Interface Design- Module 2 Uid Process
User Interface Design- Module 2 Uid ProcessUser Interface Design- Module 2 Uid Process
User Interface Design- Module 2 Uid Process
 
Human computer interaction -Input output channel with Scenario
Human computer interaction -Input output channel with ScenarioHuman computer interaction -Input output channel with Scenario
Human computer interaction -Input output channel with Scenario
 
Human computer interaction -Design and software process
Human computer interaction -Design and software processHuman computer interaction -Design and software process
Human computer interaction -Design and software process
 
HCI 3e - Ch 19: Groupware
HCI 3e - Ch 19:  GroupwareHCI 3e - Ch 19:  Groupware
HCI 3e - Ch 19: Groupware
 
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 - Chapter 3
HCI - Chapter 3HCI - Chapter 3
HCI - Chapter 3
 
Hci md exam
Hci md examHci md exam
Hci md exam
 
SELECT THE PROPER KINDS OF WINDOWS
SELECT THE PROPER KINDS OF WINDOWSSELECT THE PROPER KINDS OF WINDOWS
SELECT THE PROPER KINDS OF WINDOWS
 
Human computer interaction-Memory, Reasoning and Problem solving
Human computer interaction-Memory, Reasoning and Problem solvingHuman computer interaction-Memory, Reasoning and Problem solving
Human computer interaction-Memory, Reasoning and Problem solving
 
An Introduction to Ben Shneiderman's Eight Golden Rules of Interface Design
An Introduction to Ben Shneiderman's Eight Golden Rules of Interface DesignAn Introduction to Ben Shneiderman's Eight Golden Rules of Interface Design
An Introduction to Ben Shneiderman's Eight Golden Rules of Interface Design
 
HCI 3e - Ch 3: The interaction
HCI 3e - Ch 3:  The interactionHCI 3e - Ch 3:  The interaction
HCI 3e - Ch 3: The interaction
 
Introduction to Human Computer Interface (HCI)
Introduction to Human Computer Interface (HCI)Introduction to Human Computer Interface (HCI)
Introduction to Human Computer Interface (HCI)
 
Hci user interface-design principals
Hci user interface-design principalsHci user interface-design principals
Hci user interface-design principals
 

En vedette (19)

Ch8 main memory
Ch8   main memoryCh8   main memory
Ch8 main memory
 
Ch11 file system implementation
Ch11   file system implementationCh11   file system implementation
Ch11 file system implementation
 
Ch15
Ch15Ch15
Ch15
 
Peubah acak-kontinu
Peubah acak-kontinuPeubah acak-kontinu
Peubah acak-kontinu
 
Ch13 protection
Ch13   protectionCh13   protection
Ch13 protection
 
Imk pertemuan-1
Imk pertemuan-1Imk pertemuan-1
Imk pertemuan-1
 
E3 chap-04
E3 chap-04E3 chap-04
E3 chap-04
 
E3 chap-03
E3 chap-03E3 chap-03
E3 chap-03
 
Ch22
Ch22Ch22
Ch22
 
Ch2
Ch2Ch2
Ch2
 
E3 chap-06
E3 chap-06E3 chap-06
E3 chap-06
 
App c
App cApp c
App c
 
E3 chap-20
E3 chap-20E3 chap-20
E3 chap-20
 
E3 chap-11
E3 chap-11E3 chap-11
E3 chap-11
 
Sebaran peluang-bersama
Sebaran peluang-bersamaSebaran peluang-bersama
Sebaran peluang-bersama
 
Ch6 cpu scheduling
Ch6   cpu schedulingCh6   cpu scheduling
Ch6 cpu scheduling
 
Ch12
Ch12Ch12
Ch12
 
Ch17
Ch17Ch17
Ch17
 
Ch1
Ch1Ch1
Ch1
 

Similaire à Hci [6]interaction design

What Is Interaction Design
What Is Interaction DesignWhat Is Interaction Design
What Is Interaction Design
Graeme Smith
 
Chapter 1 id2e_slides
Chapter 1 id2e_slidesChapter 1 id2e_slides
Chapter 1 id2e_slides
oopscrash1
 
Interaction design workshop
Interaction design workshopInteraction design workshop
Interaction design workshop
Shyamala Prayaga
 
Website Usability | Day 1
Website Usability | Day 1Website Usability | Day 1
Website Usability | Day 1
studiokandm
 
Introduction to Interaction Design.pptx
Introduction to Interaction Design.pptxIntroduction to Interaction Design.pptx
Introduction to Interaction Design.pptx
vaishalikhairnar4
 

Similaire à Hci [6]interaction design (20)

What Is Interaction Design
What Is Interaction DesignWhat Is Interaction Design
What Is Interaction Design
 
Hybrid Publishing Design Methods For Technical Books
Hybrid Publishing Design Methods For Technical BooksHybrid Publishing Design Methods For Technical Books
Hybrid Publishing Design Methods For Technical Books
 
Lecture1.ppt
Lecture1.pptLecture1.ppt
Lecture1.ppt
 
Topic 3 Human Computer Interaction
Topic 3 Human Computer InteractionTopic 3 Human Computer Interaction
Topic 3 Human Computer Interaction
 
Chapter 1 id2e_slides
Chapter 1 id2e_slidesChapter 1 id2e_slides
Chapter 1 id2e_slides
 
Interaction design workshop
Interaction design workshopInteraction design workshop
Interaction design workshop
 
User Experience & Design…Designing for others…UED
User Experience & Design…Designing for others…UEDUser Experience & Design…Designing for others…UED
User Experience & Design…Designing for others…UED
 
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
 
Os Leung
Os LeungOs Leung
Os Leung
 
Unit ii design process
Unit ii design processUnit ii design process
Unit ii design process
 
Interaction-design-basic.pptx
Interaction-design-basic.pptxInteraction-design-basic.pptx
Interaction-design-basic.pptx
 
HCI Presentation
HCI PresentationHCI Presentation
HCI Presentation
 
Ux design-fundamentals
Ux design-fundamentalsUx design-fundamentals
Ux design-fundamentals
 
Requirements Engineering for the Humanities
Requirements Engineering for the HumanitiesRequirements Engineering for the Humanities
Requirements Engineering for the Humanities
 
Website Usability | Day 1
Website Usability | Day 1Website Usability | Day 1
Website Usability | Day 1
 
HCI Basics
HCI BasicsHCI Basics
HCI Basics
 
HCI Quick Guide
HCI Quick GuideHCI Quick Guide
HCI Quick Guide
 
Introduction to HCI (UCC)
Introduction to HCI (UCC)Introduction to HCI (UCC)
Introduction to HCI (UCC)
 
Introduction to Interaction Design.pptx
Introduction to Interaction Design.pptxIntroduction to Interaction Design.pptx
Introduction to Interaction Design.pptx
 
UCIDesign.ppt
UCIDesign.pptUCIDesign.ppt
UCIDesign.ppt
 

Dernier

Dernier (20)

Application orientated numerical on hev.ppt
Application orientated numerical on hev.pptApplication orientated numerical on hev.ppt
Application orientated numerical on hev.ppt
 
Python Notes for mca i year students osmania university.docx
Python Notes for mca i year students osmania university.docxPython Notes for mca i year students osmania university.docx
Python Notes for mca i year students osmania university.docx
 
Jamworks pilot and AI at Jisc (20/03/2024)
Jamworks pilot and AI at Jisc (20/03/2024)Jamworks pilot and AI at Jisc (20/03/2024)
Jamworks pilot and AI at Jisc (20/03/2024)
 
2024-NATIONAL-LEARNING-CAMP-AND-OTHER.pptx
2024-NATIONAL-LEARNING-CAMP-AND-OTHER.pptx2024-NATIONAL-LEARNING-CAMP-AND-OTHER.pptx
2024-NATIONAL-LEARNING-CAMP-AND-OTHER.pptx
 
Towards a code of practice for AI in AT.pptx
Towards a code of practice for AI in AT.pptxTowards a code of practice for AI in AT.pptx
Towards a code of practice for AI in AT.pptx
 
Mehran University Newsletter Vol-X, Issue-I, 2024
Mehran University Newsletter Vol-X, Issue-I, 2024Mehran University Newsletter Vol-X, Issue-I, 2024
Mehran University Newsletter Vol-X, Issue-I, 2024
 
Making communications land - Are they received and understood as intended? we...
Making communications land - Are they received and understood as intended? we...Making communications land - Are they received and understood as intended? we...
Making communications land - Are they received and understood as intended? we...
 
Sociology 101 Demonstration of Learning Exhibit
Sociology 101 Demonstration of Learning ExhibitSociology 101 Demonstration of Learning Exhibit
Sociology 101 Demonstration of Learning Exhibit
 
Basic Civil Engineering first year Notes- Chapter 4 Building.pptx
Basic Civil Engineering first year Notes- Chapter 4 Building.pptxBasic Civil Engineering first year Notes- Chapter 4 Building.pptx
Basic Civil Engineering first year Notes- Chapter 4 Building.pptx
 
ICT role in 21st century education and it's challenges.
ICT role in 21st century education and it's challenges.ICT role in 21st century education and it's challenges.
ICT role in 21st century education and it's challenges.
 
80 ĐỀ THI THỬ TUYỂN SINH TIẾNG ANH VÀO 10 SỞ GD – ĐT THÀNH PHỐ HỒ CHÍ MINH NĂ...
80 ĐỀ THI THỬ TUYỂN SINH TIẾNG ANH VÀO 10 SỞ GD – ĐT THÀNH PHỐ HỒ CHÍ MINH NĂ...80 ĐỀ THI THỬ TUYỂN SINH TIẾNG ANH VÀO 10 SỞ GD – ĐT THÀNH PHỐ HỒ CHÍ MINH NĂ...
80 ĐỀ THI THỬ TUYỂN SINH TIẾNG ANH VÀO 10 SỞ GD – ĐT THÀNH PHỐ HỒ CHÍ MINH NĂ...
 
ICT Role in 21st Century Education & its Challenges.pptx
ICT Role in 21st Century Education & its Challenges.pptxICT Role in 21st Century Education & its Challenges.pptx
ICT Role in 21st Century Education & its Challenges.pptx
 
On National Teacher Day, meet the 2024-25 Kenan Fellows
On National Teacher Day, meet the 2024-25 Kenan FellowsOn National Teacher Day, meet the 2024-25 Kenan Fellows
On National Teacher Day, meet the 2024-25 Kenan Fellows
 
Holdier Curriculum Vitae (April 2024).pdf
Holdier Curriculum Vitae (April 2024).pdfHoldier Curriculum Vitae (April 2024).pdf
Holdier Curriculum Vitae (April 2024).pdf
 
Google Gemini An AI Revolution in Education.pptx
Google Gemini An AI Revolution in Education.pptxGoogle Gemini An AI Revolution in Education.pptx
Google Gemini An AI Revolution in Education.pptx
 
SKILL OF INTRODUCING THE LESSON MICRO SKILLS.pptx
SKILL OF INTRODUCING THE LESSON MICRO SKILLS.pptxSKILL OF INTRODUCING THE LESSON MICRO SKILLS.pptx
SKILL OF INTRODUCING THE LESSON MICRO SKILLS.pptx
 
How to Give a Domain for a Field in Odoo 17
How to Give a Domain for a Field in Odoo 17How to Give a Domain for a Field in Odoo 17
How to Give a Domain for a Field in Odoo 17
 
Introduction to Nonprofit Accounting: The Basics
Introduction to Nonprofit Accounting: The BasicsIntroduction to Nonprofit Accounting: The Basics
Introduction to Nonprofit Accounting: The Basics
 
Interdisciplinary_Insights_Data_Collection_Methods.pptx
Interdisciplinary_Insights_Data_Collection_Methods.pptxInterdisciplinary_Insights_Data_Collection_Methods.pptx
Interdisciplinary_Insights_Data_Collection_Methods.pptx
 
REMIFENTANIL: An Ultra short acting opioid.pptx
REMIFENTANIL: An Ultra short acting opioid.pptxREMIFENTANIL: An Ultra short acting opioid.pptx
REMIFENTANIL: An Ultra short acting opioid.pptx
 

Hci [6]interaction design

  • 2. overview Interaction design is about creating intervention in complex situation using technology of many components; including PC software, the web and physical devices
  • 3. Interaction VS Product It is not about the product/ artifact, but about understanding and choosing how it is going to affect the way people do/ work
  • 5. What is Design? A simple definition is: achieving GOALS within CONSTRAINTS o o Goals: what is the purpose of the design we are intending to produce? Who is it for? Constraints: what materials must we use? What standard must we adopt? How mch can it cost? How much time do we have to develop it? Are there health and safety issue?
  • 6. Design is a trade-off  Choosing which goals or constraints can be downgraded so that others can be met  Accepting limitation of human and of design  The best design are where the designer understand the trade-off and the factors affecting them
  • 7. Golden rule of design  Understand  In 1. your materials HCI, the materials is obviously The human (psycological, social, human error) 2. The computer (Limitations, capacity, tools, platforms)
  • 8. To err is human  People make mistake, slips, error, omissions  But people are remarkably adaptable  As a designer you can give better training and documentation, but the product and its interaction design you created is the most important
  • 9. 2. The Process of Design
  • 10. A never ending iterative stages (never complete)
  • 11. a. Interaction Starts with?  It starts with getting to know the users and their context (Requirement – what is wanted):   What is needed by users? Find out who they are? What they like?
  • 12. b. Analysis  The results of observation and interview need to be ordered in some way to bring out key issues and communicate with later stages of design  Including task analysis c. Design A step to transfer what you want into how to do it
  • 13. d. Iteration and prototyping  Most of the time, we don’t get the design right at the first time  Comprise design evaluation e. Implementation and Deployment  When the designer happy with their product, then it is time to create it 
  • 14. Your time is limited!  You can’t trapped in design cycle for like ever!!  there is a trade-off between the length of the design period and the quality of the final design  the real problem is not to find faults, instead the issue is: which usability problems is it worth fixing?
  • 16. How do you get to know them?  Who are they?   Probably NOT like you!   Ask them about what really happen and needed; using structured interview, open-ended duscussion, or ask them to join the design process Watch them!   Obvious for you, but most of the time not for the user Talk to them!   Young or old? Experienced or newbie? It’s harder to design generic computer system Sherlock Holmes’s Quote: “You see, but you do not observe!” Use you imagination!  If I were my User, then?
  • 18. Scenarios  Rich story of information  can be used and reused throughout design    Help us see what users will want to do Give us step-by-step walkthrough of users’ interaction; including what they see, do and are thinking Example: if user do this then computer do what? Then the user have to do what? etc
  • 19. Scenarios also can be used to:  Communicate with others (designer colleagues, clients or even users)  Validated againts other models  Express dynamics
  • 20. 5. Navigation Design HCI is a socio-technical intervention
  • 21. Socio-technical intervention  Computer-user 1. 2. 3. 4. interact at several levels: Widgets (menus, buttons) Screen or window (grouping of button) Navigation within the application Environment; connect with other deviceapplication
  • 22. Start considering structure with:  Who is going to use the application?  How do they think  What will they do with it
  • 23. Thinking about structure 1. Local structure   Looking from one screen or page out Goalk seeking behaviour
  • 24.  The screen, web page or device displays should make clear where you are in terms of the interactionn     Knowing where you are what you can do knowing where you are going or what will happen where you have been or what you have done
  • 25. 2. Global structure – hierarcical organtization    Structure of site, movement between screen The hierarcy links screen, pages, or states in logical grouping Example: a PC application on the web
  • 26. 3. Global structure – dialog    In HCI, the word ‘dialog’ is used to refer to flow of screen It give pattern of interaction A simple way is to use a network diagram showing the principal states or screen linked tigether with arrows; this can show:  What leads to what  Show what happens when  Include branches and loops  Be more task oriented that a hierarcy
  • 27.  Network diagram ilustrating the main screen for adding or deleting a user
  • 28. 5. Screen Design and Layout How we put the different element together in an interactive application
  • 29. Basic principle at Screen level  Ask What is the user doing?  Think What information is required? What comparisons may the user need to make? In what order are things likely to be needed?  Design Form follows function: let the required interactions drive the layout
  • 30. a. Tools for layout  Grouping & structure: If things logically belong together, then we should normally physically group them together  Order of group and items  Decoration : decorative feature that helps to distinct each group and item, e.g. Font style, font type, color, line, boxes
  • 33. b. User action and control  Entering information: form-based interface adn dialog boxes  Passive and active element on screen  Affordance: how user know where to click? It’s about psychologic on the elements’ shape, colour and other atribute
  • 34. c. Appropriate appearance  Afford different presentation that allow users to select totheir convenient
  • 35.  Aesthetic and utility: Remember that a pretty interface is not necessarily a good interface, it just need to be well-designed  Color much and 3D interface: just don’t too  Localization vs internationalization: adjust language, sign, symbol to segmented user
  • 36.  Users need to find their way around a system, this involves:    Helping users know who they are, where they have been, and what they can do next Creating overall structures that are easy to understand and fit the users’ needs Desinging comprehensible screen and control panels
  • 38. Complexity of Design  It means we don’t get it right the first time  Theory and models can help give good start points
  • 39.  Formative  evaluation Intended to improve the design  Summative  evaluation To verify whether the product is good enough  The result of evaluating the system will usually be a list of faults or problems  This is followed by redesign exercise
  • 40. Role of prototyping So, we need iterations and prototype to try out and evaluate
  • 41.  But iteration can get trapped having no simple improvement, but are not good
  • 42. Two things you needed in order for prototyping: 1. 2. To understand what is wrong and how to improve A good start point