SlideShare a Scribd company logo
1 of 18
Introduction to Human
Computer Interaction
Instructor:
Ellen Grace Porras
User Interaction Design
Interaction design is about creating interventions in often
complex situations using technology of many kinds including
PC software, the web and physical devices
3
• Design involves:
o Achieving goals within constraints and trade-off
o Understanding the raw materials: computer and human
o 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:
o Finding out who they are and what they are like ...
o Talking to them, watching them
4
 Scenarios are rich design stories, which can be used and reused
throughout design:
o They help us see what users will want to do
o They give a step-by-step walkthrough of users' interactions: including
what they see, do and are thinking
5
 Users need to find their way around a system; this involves:
o Helping users know where they are, where they have been and what
they can do next
o Creating overall structures that are easy to understand and fit the users'
needs
o Designing comprehensible screens and control panels
6
 Complexity of design means we don't get it right first time:
o So, we need iteration and prototypes to try out and evaluate
o But iteration can get trapped in local maxima, designs that have no
simple improvements, but are not good
o Theory and models can help give good start points
7
Usability
“It is a measure of the effectiveness, efficiency and satisfaction with which
specified user can achieve specified goals in a particular environment”.
It asks the following:
• Is effective to use
• Is efficient to use
• Is safe to use
• Has good utility
• Is easy to learn
• Is easy to remember how to use
8
Issues in Design
• Who are the users?
• What do we mean by needs?
• How do generate alternative design?
• How do we choose between designs?
9
User Centered Development
• Data Collection
• Data Analysis
• User Modeling
• Design
• Prototyping
• Evaluation
10
• In User Modeling, a computational model for how people perform tasks and
solve problems based on psychological principles.
• In design phase, all the analysis are used to design a system in interface design,
it shows how this product present itself. And in interaction design, it tells how
this product should work.
• Rapids prototypes are early and inexpensive ways to identify usability
problems before committing lots of resources. In interaction design main
concern here is with usability. So using prototypes we can better understand
the needs of user.
11
• In usability testing and evaluation phase, users perform a variety of tasks with
a prototype (or other system) while observers record notes on what each user
does and speaks.
• Typical tests are conducted with one user at a time or two users working
together. Testing may include collecting data on the paths users take to do
tasks, the errors they make, when and where they are confused or frustrated,
how fast they do a task, whether they succeed in doing the task, and how
satisfied they are with the experience.
• The goal of most usability testing is to uncover any problems that users may
encounter so those problems can be fixed.
12
Interaction Styles
Interaction can be seen as a dialogue between the computer and the user. Some applications have
very distinct styles of interaction.
We can identify some common styles
• Command line interface
• Menus
• question/answer and query dialogue
• Form-fills and spreadsheets
• WIMP
13
Command Line Interface
Way of expressing instructions to the computer directly. Can be function keys,
Single characters, short abbreviations, whole words, or a combination
• Suitable for repetitive tasks
• Better for expert users than novices
• Offer direct access to system functionality
• Command names/abbreviations should be meaningful
14
Human Computer Interaction 2
Menus
Set of options displayed on the screen. Options visible so demand less recall - rely
on recognition so names should be meaningful. Selected by using mouse, numeric
or alphabetic keys. Often options hierarchically grouped: sensible grouping is
needed.
Menu systems can be:
• Purely text based, with options presented as numbered choices, or
• can have graphical component, with menu appearing in box and choices
made either by typing initial letter, or moving around with arrow keys
15
Form-Filling Interfaces
• Primarily for data entry or data retrieval.
• Screen like paper form.
• Data put in relevant place.
• Requires good design and obvious correction facilities.
WIMP Interface
• Windows
• Icon
• Menus
• Pointers
16
Human Computer Interaction 2
Windows
Areas of the screen that behave as if they were independent terminals
• can contain text or graphics
• can be moved or resized
• can overlap and obscure each other, or can be laid out next to one another
• Scrollbars allow the user to move the contents of the window up and down or
from side to side
• Title bars describe the name of the window
17
Icons
Small picture or image, used to represent some object in the interface, often a window. Windows can
be closed to this small representation (iconized) allowing many windows to be accessible. Icons can
be many and various - highly stylized or realistic representations.
Pointers
Important component, since WIMP style relies on pointing and selecting things such as icons and
menu items.
• Usually achieved with mouse
• Joystick, trackball, cursor keys or keyboard shortcuts are also used
• Wide variety
Thank you
Presenter name: Ellen Grace D. Porras
Email address: egporras@psu.palawan.edu.ph

More Related Content

Similar to Lesson 2 HCI 2.pptx

Lecture (User Interface Design).ppt
Lecture (User Interface Design).pptLecture (User Interface Design).ppt
Lecture (User Interface Design).ppt
skknowledge
 
Ten Usability Heuristics by Jakob Nielsen.pptx
Ten Usability Heuristics by Jakob Nielsen.pptxTen Usability Heuristics by Jakob Nielsen.pptx
Ten Usability Heuristics by Jakob Nielsen.pptx
sharmiladevi941
 

Similar to Lesson 2 HCI 2.pptx (20)

User Interface Analysis and Design
User Interface Analysis and DesignUser Interface Analysis and Design
User Interface Analysis and Design
 
Module 2nd USER INTERFACE DESIGN (15CS832) - VTU
Module 2nd USER INTERFACE DESIGN (15CS832) - VTUModule 2nd USER INTERFACE DESIGN (15CS832) - VTU
Module 2nd USER INTERFACE DESIGN (15CS832) - VTU
 
Design process interaction design basics
Design process interaction design basicsDesign process interaction design basics
Design process interaction design basics
 
HCI
HCI HCI
HCI
 
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
 
User Experience Design - Designing for others
User Experience Design - Designing for othersUser Experience Design - Designing for others
User Experience Design - Designing for others
 
Chapter 8 User Interface Design
Chapter 8 User Interface DesignChapter 8 User Interface Design
Chapter 8 User Interface Design
 
Interaction-design-basic.pptx
Interaction-design-basic.pptxInteraction-design-basic.pptx
Interaction-design-basic.pptx
 
Human Computer Interaction Notes 176.pdf
Human Computer Interaction Notes 176.pdfHuman Computer Interaction Notes 176.pdf
Human Computer Interaction Notes 176.pdf
 
Game interface design part 2
Game interface design part 2Game interface design part 2
Game interface design part 2
 
Design principles
Design principlesDesign principles
Design principles
 
POLITEKNIK MALAYSIA
POLITEKNIK MALAYSIAPOLITEKNIK MALAYSIA
POLITEKNIK MALAYSIA
 
Lecture (User Interface Design).ppt
Lecture (User Interface Design).pptLecture (User Interface Design).ppt
Lecture (User Interface Design).ppt
 
Human Computer Interaction: Lecture 2: Interaction Design
Human Computer Interaction: Lecture 2: Interaction DesignHuman Computer Interaction: Lecture 2: Interaction Design
Human Computer Interaction: Lecture 2: Interaction Design
 
Chapter five HCI
Chapter five HCIChapter five HCI
Chapter five HCI
 
ICS3211_lecture 04 2023.pdf
ICS3211_lecture 04 2023.pdfICS3211_lecture 04 2023.pdf
ICS3211_lecture 04 2023.pdf
 
What is Interaction Design?
What is Interaction Design?What is Interaction Design?
What is Interaction Design?
 
HCI Unit 3.pptx
HCI Unit 3.pptxHCI Unit 3.pptx
HCI Unit 3.pptx
 
Chapter 4 interaction design
Chapter 4 interaction designChapter 4 interaction design
Chapter 4 interaction design
 
Ten Usability Heuristics by Jakob Nielsen.pptx
Ten Usability Heuristics by Jakob Nielsen.pptxTen Usability Heuristics by Jakob Nielsen.pptx
Ten Usability Heuristics by Jakob Nielsen.pptx
 

More from EllenGracePorras

Structured Query Language (SQL).pptx
Structured Query Language (SQL).pptxStructured Query Language (SQL).pptx
Structured Query Language (SQL).pptx
EllenGracePorras
 

More from EllenGracePorras (17)

Lesson 3 Introduction to Human Computer Interaction.pptx
Lesson 3 Introduction to Human Computer Interaction.pptxLesson 3 Introduction to Human Computer Interaction.pptx
Lesson 3 Introduction to Human Computer Interaction.pptx
 
Lesson 4 Introduction to Human Computer Interaction.pptx
Lesson 4 Introduction to Human Computer Interaction.pptxLesson 4 Introduction to Human Computer Interaction.pptx
Lesson 4 Introduction to Human Computer Interaction.pptx
 
Geographic Information System(GIS).pptx
Geographic  Information System(GIS).pptxGeographic  Information System(GIS).pptx
Geographic Information System(GIS).pptx
 
Geographic Information Systems (GIS).pptx
Geographic  Information Systems (GIS).pptxGeographic  Information Systems (GIS).pptx
Geographic Information Systems (GIS).pptx
 
Advanced Database Systems.pptx
Advanced Database Systems.pptxAdvanced Database Systems.pptx
Advanced Database Systems.pptx
 
Data Manipulation Language.pptx
Data Manipulation Language.pptxData Manipulation Language.pptx
Data Manipulation Language.pptx
 
Advanced Database Systems - Presentation 4.pptx
Advanced Database Systems - Presentation 4.pptxAdvanced Database Systems - Presentation 4.pptx
Advanced Database Systems - Presentation 4.pptx
 
Advanced Database Systems - Presentation 3.pptx
Advanced Database Systems - Presentation 3.pptxAdvanced Database Systems - Presentation 3.pptx
Advanced Database Systems - Presentation 3.pptx
 
Advanced Database Systems - Presentation 2.pptx
Advanced Database Systems - Presentation 2.pptxAdvanced Database Systems - Presentation 2.pptx
Advanced Database Systems - Presentation 2.pptx
 
Advanced Database Systems - Presentation 1 with quiz.pptx
Advanced Database Systems - Presentation 1 with quiz.pptxAdvanced Database Systems - Presentation 1 with quiz.pptx
Advanced Database Systems - Presentation 1 with quiz.pptx
 
Structured Query Language (SQL) Part 2.pptx
Structured Query Language (SQL) Part 2.pptxStructured Query Language (SQL) Part 2.pptx
Structured Query Language (SQL) Part 2.pptx
 
SQL Where Clause.pptx
SQL Where Clause.pptxSQL Where Clause.pptx
SQL Where Clause.pptx
 
SQL Statements.pptx
SQL Statements.pptxSQL Statements.pptx
SQL Statements.pptx
 
Information Management
Information ManagementInformation Management
Information Management
 
.Net Technologies Lesson 1.pptx
.Net Technologies Lesson 1.pptx.Net Technologies Lesson 1.pptx
.Net Technologies Lesson 1.pptx
 
CC 1/L Introduction.pptx
CC 1/L Introduction.pptxCC 1/L Introduction.pptx
CC 1/L Introduction.pptx
 
Structured Query Language (SQL).pptx
Structured Query Language (SQL).pptxStructured Query Language (SQL).pptx
Structured Query Language (SQL).pptx
 

Recently uploaded

Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire business
panagenda
 
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Victor Rentea
 

Recently uploaded (20)

Platformless Horizons for Digital Adaptability
Platformless Horizons for Digital AdaptabilityPlatformless Horizons for Digital Adaptability
Platformless Horizons for Digital Adaptability
 
AI in Action: Real World Use Cases by Anitaraj
AI in Action: Real World Use Cases by AnitarajAI in Action: Real World Use Cases by Anitaraj
AI in Action: Real World Use Cases by Anitaraj
 
AWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of TerraformAWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of Terraform
 
Simplifying Mobile A11y Presentation.pptx
Simplifying Mobile A11y Presentation.pptxSimplifying Mobile A11y Presentation.pptx
Simplifying Mobile A11y Presentation.pptx
 
Mcleodganj Call Girls 🥰 8617370543 Service Offer VIP Hot Model
Mcleodganj Call Girls 🥰 8617370543 Service Offer VIP Hot ModelMcleodganj Call Girls 🥰 8617370543 Service Offer VIP Hot Model
Mcleodganj Call Girls 🥰 8617370543 Service Offer VIP Hot Model
 
Understanding the FAA Part 107 License ..
Understanding the FAA Part 107 License ..Understanding the FAA Part 107 License ..
Understanding the FAA Part 107 License ..
 
AI+A11Y 11MAY2024 HYDERBAD GAAD 2024 - HelloA11Y (11 May 2024)
AI+A11Y 11MAY2024 HYDERBAD GAAD 2024 - HelloA11Y (11 May 2024)AI+A11Y 11MAY2024 HYDERBAD GAAD 2024 - HelloA11Y (11 May 2024)
AI+A11Y 11MAY2024 HYDERBAD GAAD 2024 - HelloA11Y (11 May 2024)
 
Introduction to Multilingual Retrieval Augmented Generation (RAG)
Introduction to Multilingual Retrieval Augmented Generation (RAG)Introduction to Multilingual Retrieval Augmented Generation (RAG)
Introduction to Multilingual Retrieval Augmented Generation (RAG)
 
Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire business
 
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
 
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot TakeoffStrategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
 
Elevate Developer Efficiency & build GenAI Application with Amazon Q​
Elevate Developer Efficiency & build GenAI Application with Amazon Q​Elevate Developer Efficiency & build GenAI Application with Amazon Q​
Elevate Developer Efficiency & build GenAI Application with Amazon Q​
 
Quantum Leap in Next-Generation Computing
Quantum Leap in Next-Generation ComputingQuantum Leap in Next-Generation Computing
Quantum Leap in Next-Generation Computing
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
 
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data DiscoveryTrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
 
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
 
Choreo: Empowering the Future of Enterprise Software Engineering
Choreo: Empowering the Future of Enterprise Software EngineeringChoreo: Empowering the Future of Enterprise Software Engineering
Choreo: Empowering the Future of Enterprise Software Engineering
 
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
 
[BuildWithAI] Introduction to Gemini.pdf
[BuildWithAI] Introduction to Gemini.pdf[BuildWithAI] Introduction to Gemini.pdf
[BuildWithAI] Introduction to Gemini.pdf
 
Decarbonising Commercial Real Estate: The Role of Operational Performance
Decarbonising Commercial Real Estate: The Role of Operational PerformanceDecarbonising Commercial Real Estate: The Role of Operational Performance
Decarbonising Commercial Real Estate: The Role of Operational Performance
 

Lesson 2 HCI 2.pptx

  • 1. Introduction to Human Computer Interaction Instructor: Ellen Grace Porras
  • 2. User Interaction Design Interaction design is about creating interventions in often complex situations using technology of many kinds including PC software, the web and physical devices
  • 3. 3 • Design involves: o Achieving goals within constraints and trade-off o Understanding the raw materials: computer and human o 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: o Finding out who they are and what they are like ... o Talking to them, watching them
  • 4. 4  Scenarios are rich design stories, which can be used and reused throughout design: o They help us see what users will want to do o They give a step-by-step walkthrough of users' interactions: including what they see, do and are thinking
  • 5. 5  Users need to find their way around a system; this involves: o Helping users know where they are, where they have been and what they can do next o Creating overall structures that are easy to understand and fit the users' needs o Designing comprehensible screens and control panels
  • 6. 6  Complexity of design means we don't get it right first time: o So, we need iteration and prototypes to try out and evaluate o But iteration can get trapped in local maxima, designs that have no simple improvements, but are not good o Theory and models can help give good start points
  • 7. 7 Usability “It is a measure of the effectiveness, efficiency and satisfaction with which specified user can achieve specified goals in a particular environment”. It asks the following: • Is effective to use • Is efficient to use • Is safe to use • Has good utility • Is easy to learn • Is easy to remember how to use
  • 8. 8 Issues in Design • Who are the users? • What do we mean by needs? • How do generate alternative design? • How do we choose between designs?
  • 9. 9 User Centered Development • Data Collection • Data Analysis • User Modeling • Design • Prototyping • Evaluation
  • 10. 10 • In User Modeling, a computational model for how people perform tasks and solve problems based on psychological principles. • In design phase, all the analysis are used to design a system in interface design, it shows how this product present itself. And in interaction design, it tells how this product should work. • Rapids prototypes are early and inexpensive ways to identify usability problems before committing lots of resources. In interaction design main concern here is with usability. So using prototypes we can better understand the needs of user.
  • 11. 11 • In usability testing and evaluation phase, users perform a variety of tasks with a prototype (or other system) while observers record notes on what each user does and speaks. • Typical tests are conducted with one user at a time or two users working together. Testing may include collecting data on the paths users take to do tasks, the errors they make, when and where they are confused or frustrated, how fast they do a task, whether they succeed in doing the task, and how satisfied they are with the experience. • The goal of most usability testing is to uncover any problems that users may encounter so those problems can be fixed.
  • 12. 12 Interaction Styles Interaction can be seen as a dialogue between the computer and the user. Some applications have very distinct styles of interaction. We can identify some common styles • Command line interface • Menus • question/answer and query dialogue • Form-fills and spreadsheets • WIMP
  • 13. 13 Command Line Interface Way of expressing instructions to the computer directly. Can be function keys, Single characters, short abbreviations, whole words, or a combination • Suitable for repetitive tasks • Better for expert users than novices • Offer direct access to system functionality • Command names/abbreviations should be meaningful
  • 14. 14 Human Computer Interaction 2 Menus Set of options displayed on the screen. Options visible so demand less recall - rely on recognition so names should be meaningful. Selected by using mouse, numeric or alphabetic keys. Often options hierarchically grouped: sensible grouping is needed. Menu systems can be: • Purely text based, with options presented as numbered choices, or • can have graphical component, with menu appearing in box and choices made either by typing initial letter, or moving around with arrow keys
  • 15. 15 Form-Filling Interfaces • Primarily for data entry or data retrieval. • Screen like paper form. • Data put in relevant place. • Requires good design and obvious correction facilities. WIMP Interface • Windows • Icon • Menus • Pointers
  • 16. 16 Human Computer Interaction 2 Windows Areas of the screen that behave as if they were independent terminals • can contain text or graphics • can be moved or resized • can overlap and obscure each other, or can be laid out next to one another • Scrollbars allow the user to move the contents of the window up and down or from side to side • Title bars describe the name of the window
  • 17. 17 Icons Small picture or image, used to represent some object in the interface, often a window. Windows can be closed to this small representation (iconized) allowing many windows to be accessible. Icons can be many and various - highly stylized or realistic representations. Pointers Important component, since WIMP style relies on pointing and selecting things such as icons and menu items. • Usually achieved with mouse • Joystick, trackball, cursor keys or keyboard shortcuts are also used • Wide variety
  • 18. Thank you Presenter name: Ellen Grace D. Porras Email address: egporras@psu.palawan.edu.ph