Interaksi Manusia-Komputer (IMK) Human-Computer Interaction (HCI)
Human-Computer Interaction · Human-Computer Interaction D7023E Intelligent Systems and HCI 1. HCI...
Transcript of Human-Computer Interaction · Human-Computer Interaction D7023E Intelligent Systems and HCI 1. HCI...
![Page 1: Human-Computer Interaction · Human-Computer Interaction D7023E Intelligent Systems and HCI 1. HCI ... Pointers, Menus, Windows, Controls, Layout Guidelines) iOS Human Interface Guidelines](https://reader034.fdocuments.net/reader034/viewer/2022042411/5f29adcaeceaaf54dd5ec2ed/html5/thumbnails/1.jpg)
May 10, 2011 – Andrey Kruglyak
Human-Computer Interaction
D7023E Intelligent Systems and HCI
1
![Page 2: Human-Computer Interaction · Human-Computer Interaction D7023E Intelligent Systems and HCI 1. HCI ... Pointers, Menus, Windows, Controls, Layout Guidelines) iOS Human Interface Guidelines](https://reader034.fdocuments.net/reader034/viewer/2022042411/5f29adcaeceaaf54dd5ec2ed/html5/thumbnails/2.jpg)
HCI
✤ Two questions:
✤ How do people interact with computer systems?
✤ How should we design User Interface?
2
![Page 3: Human-Computer Interaction · Human-Computer Interaction D7023E Intelligent Systems and HCI 1. HCI ... Pointers, Menus, Windows, Controls, Layout Guidelines) iOS Human Interface Guidelines](https://reader034.fdocuments.net/reader034/viewer/2022042411/5f29adcaeceaaf54dd5ec2ed/html5/thumbnails/3.jpg)
Simple is hard!
3
![Page 4: Human-Computer Interaction · Human-Computer Interaction D7023E Intelligent Systems and HCI 1. HCI ... Pointers, Menus, Windows, Controls, Layout Guidelines) iOS Human Interface Guidelines](https://reader034.fdocuments.net/reader034/viewer/2022042411/5f29adcaeceaaf54dd5ec2ed/html5/thumbnails/4.jpg)
Agenda
✤ Usability of Interactive Systems
✤ Guidelines, Principles, and Theories
✤ Evaluating Interface Designs
✤ Software Tools
4
![Page 5: Human-Computer Interaction · Human-Computer Interaction D7023E Intelligent Systems and HCI 1. HCI ... Pointers, Menus, Windows, Controls, Layout Guidelines) iOS Human Interface Guidelines](https://reader034.fdocuments.net/reader034/viewer/2022042411/5f29adcaeceaaf54dd5ec2ed/html5/thumbnails/5.jpg)
Agenda
✤ Usability of Interactive Systems
✤ Guidelines, Principles, and Theories
✤ Evaluating Interface Designs
✤ Software Tools
5
![Page 6: Human-Computer Interaction · Human-Computer Interaction D7023E Intelligent Systems and HCI 1. HCI ... Pointers, Menus, Windows, Controls, Layout Guidelines) iOS Human Interface Guidelines](https://reader034.fdocuments.net/reader034/viewer/2022042411/5f29adcaeceaaf54dd5ec2ed/html5/thumbnails/6.jpg)
Interaction
✤ Early computers: pure computations – input punch cards, wait, read the print-out on paper
✤ Today computers are used for all kinds of tasks by a lot of people, so their purpose is to assist us in everyday tasks
✤ pure computations are still important but represent a very small segment
✤ in many cases, there is no functionality without interaction
✤ Interaction today: screen & audio for output, mouse/keyboard/touch for input (still no good speech recognition)
6
![Page 7: Human-Computer Interaction · Human-Computer Interaction D7023E Intelligent Systems and HCI 1. HCI ... Pointers, Menus, Windows, Controls, Layout Guidelines) iOS Human Interface Guidelines](https://reader034.fdocuments.net/reader034/viewer/2022042411/5f29adcaeceaaf54dd5ec2ed/html5/thumbnails/7.jpg)
Usability Requirements
✤ What makes a computer system usable, universal, and useful?
✤ Design must go beyond vague “user-friendliness”, it should be based on development processes (“build for usability”) and objective assessments
✤ Requirement analysis is the first step in system design, and it should focus on usability
7
![Page 8: Human-Computer Interaction · Human-Computer Interaction D7023E Intelligent Systems and HCI 1. HCI ... Pointers, Menus, Windows, Controls, Layout Guidelines) iOS Human Interface Guidelines](https://reader034.fdocuments.net/reader034/viewer/2022042411/5f29adcaeceaaf54dd5ec2ed/html5/thumbnails/8.jpg)
Goals for Requirement Analysis
✤ Ascertain the users’ needs (tasks and subtasks)
✤ this is central since inadequate functionality frustrates users
✤ providing excessive functionality is also a danger
✤ Ensure proper reliability
✤ users’ trust of systems is fragile
✤ Promote appropriate standardization, integration, consistency, and portability
8
![Page 9: Human-Computer Interaction · Human-Computer Interaction D7023E Intelligent Systems and HCI 1. HCI ... Pointers, Menus, Windows, Controls, Layout Guidelines) iOS Human Interface Guidelines](https://reader034.fdocuments.net/reader034/viewer/2022042411/5f29adcaeceaaf54dd5ec2ed/html5/thumbnails/9.jpg)
Standardization, integration, consistency, and portability
✤ Standardization: common UI features across multiple applications
✤ Integration across application packages and platform tools
✤ Consistency: common action sequences, terms, units, layouts, controls, typography, etc. within an application program
✤ Portability: potential to convert data and share user interfaces across multiple software and hardware environments
9
![Page 10: Human-Computer Interaction · Human-Computer Interaction D7023E Intelligent Systems and HCI 1. HCI ... Pointers, Menus, Windows, Controls, Layout Guidelines) iOS Human Interface Guidelines](https://reader034.fdocuments.net/reader034/viewer/2022042411/5f29adcaeceaaf54dd5ec2ed/html5/thumbnails/10.jpg)
Usability Measures
✤ Time to learn
✤ Speed of performance
✤ Rate of errors by users
✤ Retention over time
✤ Subjective satisfaction
10
![Page 11: Human-Computer Interaction · Human-Computer Interaction D7023E Intelligent Systems and HCI 1. HCI ... Pointers, Menus, Windows, Controls, Layout Guidelines) iOS Human Interface Guidelines](https://reader034.fdocuments.net/reader034/viewer/2022042411/5f29adcaeceaaf54dd5ec2ed/html5/thumbnails/11.jpg)
Universal Usability
✤ “Know your user” – human abilities, backgrounds, motivations, personalities, cultures, and work styles are remarkably diverse
✤ This presents a challenge to developing a good UI
11
![Page 12: Human-Computer Interaction · Human-Computer Interaction D7023E Intelligent Systems and HCI 1. HCI ... Pointers, Menus, Windows, Controls, Layout Guidelines) iOS Human Interface Guidelines](https://reader034.fdocuments.net/reader034/viewer/2022042411/5f29adcaeceaaf54dd5ec2ed/html5/thumbnails/12.jpg)
Universal Usability
✤ Variations in physical abilities and physical workplaces
✤ Variations in cognitive and perceptual abilities
✤ Personality differences
✤ Cultural and international diversity
✤ Users with disabilities
✤ Age (older adults, children)
12
![Page 13: Human-Computer Interaction · Human-Computer Interaction D7023E Intelligent Systems and HCI 1. HCI ... Pointers, Menus, Windows, Controls, Layout Guidelines) iOS Human Interface Guidelines](https://reader034.fdocuments.net/reader034/viewer/2022042411/5f29adcaeceaaf54dd5ec2ed/html5/thumbnails/13.jpg)
On schedule and within budget
✤ Proper attention to usability and rigorous testing often lead to reduced cost and rapid development
13
![Page 14: Human-Computer Interaction · Human-Computer Interaction D7023E Intelligent Systems and HCI 1. HCI ... Pointers, Menus, Windows, Controls, Layout Guidelines) iOS Human Interface Guidelines](https://reader034.fdocuments.net/reader034/viewer/2022042411/5f29adcaeceaaf54dd5ec2ed/html5/thumbnails/14.jpg)
Agenda
✤ Usability of Interactive Systems
✤ Guidelines, Principles, and Theories
✤ Evaluating Interface Designs
✤ Software Tools
14
![Page 15: Human-Computer Interaction · Human-Computer Interaction D7023E Intelligent Systems and HCI 1. HCI ... Pointers, Menus, Windows, Controls, Layout Guidelines) iOS Human Interface Guidelines](https://reader034.fdocuments.net/reader034/viewer/2022042411/5f29adcaeceaaf54dd5ec2ed/html5/thumbnails/15.jpg)
Examples of UI Guidelines
✤ Navigating the interface:
✤ standardize task sequences
✤ ensure that embedded links are descriptive
✤ use unique and descriptive headings
✤ use check boxes for binary choices (NB Apple uses binary sliders)
✤ develop pages that will print properly
✤ use thumbnail images to preview larger images
15
![Page 16: Human-Computer Interaction · Human-Computer Interaction D7023E Intelligent Systems and HCI 1. HCI ... Pointers, Menus, Windows, Controls, Layout Guidelines) iOS Human Interface Guidelines](https://reader034.fdocuments.net/reader034/viewer/2022042411/5f29adcaeceaaf54dd5ec2ed/html5/thumbnails/16.jpg)
Examples of UI Guidelines
✤ Getting the user’s attention:
✤ Intensity (use two levels only)
✤ Marking (underline, box enclosure, point with an arrow, use an asterisk, bullet, dash, etc.)
✤ Size (use up to four sizes)
✤ Choice of fonts (up to three fonts)
✤ Color (use up to four colors)
16
![Page 17: Human-Computer Interaction · Human-Computer Interaction D7023E Intelligent Systems and HCI 1. HCI ... Pointers, Menus, Windows, Controls, Layout Guidelines) iOS Human Interface Guidelines](https://reader034.fdocuments.net/reader034/viewer/2022042411/5f29adcaeceaaf54dd5ec2ed/html5/thumbnails/17.jpg)
Apple Guidelines
✤ Apple Human Interface Guidelines (Mac OS X)
✤ Application Design Fundamentals (The Design Process, Characteristics of Great Software, Human Interface Design, Prioritizing Design Decisions)
✤ The Macintosh Experience (The Mac OS X Environment, Using Mac OS X Technologies, Software Installation and Software Updates)
✤ The Aqua Interface (User Input, Drag and Drop, Text, Icons, Pointers, Menus, Windows, Controls, Layout Guidelines)
✤ iOS Human Interface Guidelines (iOS)
17
![Page 18: Human-Computer Interaction · Human-Computer Interaction D7023E Intelligent Systems and HCI 1. HCI ... Pointers, Menus, Windows, Controls, Layout Guidelines) iOS Human Interface Guidelines](https://reader034.fdocuments.net/reader034/viewer/2022042411/5f29adcaeceaaf54dd5ec2ed/html5/thumbnails/18.jpg)
Principles of UI Design
✤ Determine users’ skill levels
✤ Novice or first-time users: instructions, dialog boxes, online help, video tutorials can be useful; restricting vocabulary and number of tasks also helps
✤ Knowledgeable intermittent users: consistent structure of menus, consistent sequences of actions, meaningful messages, guides to frequent patterns of usage, high interface apparency are of value
✤ Expert frequent users: require rapid response times, brief and non-distracting feedback, shortcuts, user-defined macros
18
![Page 19: Human-Computer Interaction · Human-Computer Interaction D7023E Intelligent Systems and HCI 1. HCI ... Pointers, Menus, Windows, Controls, Layout Guidelines) iOS Human Interface Guidelines](https://reader034.fdocuments.net/reader034/viewer/2022042411/5f29adcaeceaaf54dd5ec2ed/html5/thumbnails/19.jpg)
Principles of UI Design
✤ Determine users’ skill levels
✤ Identify the tasks by frequency
✤ frequent actions (should be quick and simple to carry out, even at the expense of lengthening less frequent actions)
✤ less frequent actions
✤ infrequent actions
19
![Page 20: Human-Computer Interaction · Human-Computer Interaction D7023E Intelligent Systems and HCI 1. HCI ... Pointers, Menus, Windows, Controls, Layout Guidelines) iOS Human Interface Guidelines](https://reader034.fdocuments.net/reader034/viewer/2022042411/5f29adcaeceaaf54dd5ec2ed/html5/thumbnails/20.jpg)
Principles of UI Design
✤ Determine users’ skill levels
✤ Identify the tasks
✤ Choose an interaction style (this is not a complete list)
✤ direct manipulation
✤ menu selection
✤ form fillin
✤ command language
20
![Page 21: Human-Computer Interaction · Human-Computer Interaction D7023E Intelligent Systems and HCI 1. HCI ... Pointers, Menus, Windows, Controls, Layout Guidelines) iOS Human Interface Guidelines](https://reader034.fdocuments.net/reader034/viewer/2022042411/5f29adcaeceaaf54dd5ec2ed/html5/thumbnails/21.jpg)
Principles of UI Design
✤ Determine users’ skill levels
✤ Identify the tasks
✤ Choose an interaction style
✤ Use the eight golden rules of interface design
21
![Page 22: Human-Computer Interaction · Human-Computer Interaction D7023E Intelligent Systems and HCI 1. HCI ... Pointers, Menus, Windows, Controls, Layout Guidelines) iOS Human Interface Guidelines](https://reader034.fdocuments.net/reader034/viewer/2022042411/5f29adcaeceaaf54dd5ec2ed/html5/thumbnails/22.jpg)
The Eight Golden Rules of Interface Design
✤ Strive for consistency
✤ Cater to universal usability
✤ Offer informative feedback
✤ Design dialogs to yield closure
✤ Prevent errors
✤ Permit easy reversal of actions
✤ Support internal locus of control
✤ Reduce short-term memory load
22
![Page 23: Human-Computer Interaction · Human-Computer Interaction D7023E Intelligent Systems and HCI 1. HCI ... Pointers, Menus, Windows, Controls, Layout Guidelines) iOS Human Interface Guidelines](https://reader034.fdocuments.net/reader034/viewer/2022042411/5f29adcaeceaaf54dd5ec2ed/html5/thumbnails/23.jpg)
Principles of UI Design
✤ Determine users’ skill levels
✤ Identify the tasks
✤ Choose an interaction style
✤ Use the eight golden rules of interface design
✤ Prevent errors
23
![Page 24: Human-Computer Interaction · Human-Computer Interaction D7023E Intelligent Systems and HCI 1. HCI ... Pointers, Menus, Windows, Controls, Layout Guidelines) iOS Human Interface Guidelines](https://reader034.fdocuments.net/reader034/viewer/2022042411/5f29adcaeceaaf54dd5ec2ed/html5/thumbnails/24.jpg)
Theories
✤ The goal is to model user interaction, understand human thinking, develop terminology, develop and validate testing techniques
24
![Page 25: Human-Computer Interaction · Human-Computer Interaction D7023E Intelligent Systems and HCI 1. HCI ... Pointers, Menus, Windows, Controls, Layout Guidelines) iOS Human Interface Guidelines](https://reader034.fdocuments.net/reader034/viewer/2022042411/5f29adcaeceaaf54dd5ec2ed/html5/thumbnails/25.jpg)
Agenda
✤ Usability of Interactive Systems
✤ Guidelines, Principles, and Theories
✤ Evaluating Interface Designs
✤ Software Tools
25
![Page 26: Human-Computer Interaction · Human-Computer Interaction D7023E Intelligent Systems and HCI 1. HCI ... Pointers, Menus, Windows, Controls, Layout Guidelines) iOS Human Interface Guidelines](https://reader034.fdocuments.net/reader034/viewer/2022042411/5f29adcaeceaaf54dd5ec2ed/html5/thumbnails/26.jpg)
Evaluating Interface Design
✤ Expert reviews
✤ ask colleagues or customers for their feedback
✤ Usability testing
✤ a participant and an observer, often with video recording
✤ Surveys
✤ Acceptance tests
✤ Evaluation during active use
26
![Page 27: Human-Computer Interaction · Human-Computer Interaction D7023E Intelligent Systems and HCI 1. HCI ... Pointers, Menus, Windows, Controls, Layout Guidelines) iOS Human Interface Guidelines](https://reader034.fdocuments.net/reader034/viewer/2022042411/5f29adcaeceaaf54dd5ec2ed/html5/thumbnails/27.jpg)
Agenda
✤ Usability of Interactive Systems
✤ Guidelines, Principles, and Theories
✤ Evaluating Interface Designs
✤ Software Tools
27
![Page 28: Human-Computer Interaction · Human-Computer Interaction D7023E Intelligent Systems and HCI 1. HCI ... Pointers, Menus, Windows, Controls, Layout Guidelines) iOS Human Interface Guidelines](https://reader034.fdocuments.net/reader034/viewer/2022042411/5f29adcaeceaaf54dd5ec2ed/html5/thumbnails/28.jpg)
Interface-Building Tools
✤ User-interface independence
✤ separate interface design from internals
✤ enable multiple user-interface strategies
✤ enable multiple-platform support
✤ enforce standards
✤ Notation
✤ Find ways to talk about design
28
![Page 29: Human-Computer Interaction · Human-Computer Interaction D7023E Intelligent Systems and HCI 1. HCI ... Pointers, Menus, Windows, Controls, Layout Guidelines) iOS Human Interface Guidelines](https://reader034.fdocuments.net/reader034/viewer/2022042411/5f29adcaeceaaf54dd5ec2ed/html5/thumbnails/29.jpg)
Interface-Building Tools
✤ Rapid prototyping
✤ Try out ideas very early
✤ Test, revise, test, revise, ...
✤ Engage end users, managers, and customers
✤ Software support
✤ Increase productivity
✤ Offer constraint and consistency checks
29
![Page 30: Human-Computer Interaction · Human-Computer Interaction D7023E Intelligent Systems and HCI 1. HCI ... Pointers, Menus, Windows, Controls, Layout Guidelines) iOS Human Interface Guidelines](https://reader034.fdocuments.net/reader034/viewer/2022042411/5f29adcaeceaaf54dd5ec2ed/html5/thumbnails/30.jpg)
Interface-Building Tools
✤ Interface mockup tools (Powerpoint, Keynote; Flash, Dreamweaver)
✤ Visual development tools (MS Visual Studio, Borland JBuilder)
✤ Software engineering tools
30