Upload
ellen-hardy
View
214
Download
1
Embed Size (px)
Citation preview
Human Computer Interaction – Part 1 © 2005 Mohammed Alabdulkareem
Human Computer Interaction - 1Human Computer Interaction - 1
Dr. Mohammed Alabdulkareem
Human Computer Interaction – Part 1 © 2005 Mohammed Alabdulkareem
QQ Human Computer InteractionHuman Computer Interaction
Why HCI?
Human Information Processing.
Technology Supporting User Interface.
Window system design.
Screen Layout and Design.
Human Computer Interaction – Part 1 © 2005 Mohammed Alabdulkareem
QQ Human Computer InteractionHuman Computer Interaction
Dialog Styles.
Evaluation of User Interface.
Error Handling.
Documentation.
Human Computer Interaction – Part 1 © 2005 Mohammed Alabdulkareem
QQ Human Computer InteractionHuman Computer Interaction
Why HCI?
Human Information Processing.
Technology Supporting User Interface.
Window system design.
Screen Layout and Design
Dialog Styles.
Evaluation of User Interface.
Error Handling.
Documentation.
Human Computer Interaction – Part 1 © 2005 Mohammed Alabdulkareem
QQ Human Information ProcessingHuman Information Processing
Encoding ComparisonResponseselection
ResponseexecutionInput Response
Human Computer Interaction – Part 1 © 2005 Mohammed Alabdulkareem
QQ Human Information ProcessingHuman Information Processing
Encoding ComparisonResponseselection
ResponseexecutionInput Response
Attention
Memory
Human Computer Interaction – Part 1 © 2005 Mohammed Alabdulkareem
QQ Human Information ProcessingHuman Information Processing
Visual PerceptionWhat we see is not what we recognize.Constructivist (stored knowledge).Ecological (no stored knowledge).
Human Computer Interaction – Part 1 © 2005 Mohammed Alabdulkareem
QQ Human Information ProcessingHuman Information Processing
What we see is not what we recognize.
Human Computer Interaction – Part 1 © 2005 Mohammed Alabdulkareem
QQ Human Information ProcessingHuman Information Processing
Constructivist (stored knowledge).
Human Computer Interaction – Part 1 © 2005 Mohammed Alabdulkareem
QQ Human Information ProcessingHuman Information Processing
Constructivist (stored knowledge).
Human Computer Interaction – Part 1 © 2005 Mohammed Alabdulkareem
QQ Human Information ProcessingHuman Information Processing
Ecological (no stored knowledge).
Affordance
Human Computer Interaction – Part 1 © 2005 Mohammed Alabdulkareem
QQ Human Computer InteractionHuman Computer Interaction
Why HCI?
Human Information Processing.
Technology Supporting User Interface.
Window system design.
Screen Layout and Design
Dialog Styles.
Evaluation of User Interface.
Error Handling.
Documentation.
Human Computer Interaction – Part 1 © 2005 Mohammed Alabdulkareem
QQ Technology Supporting User Technology Supporting User Interface.Interface.
Input Devices.
Output Devices.
High-speed Processing.
Networking.
Human Computer Interaction – Part 1 © 2005 Mohammed Alabdulkareem
QQ Technology Supporting User Technology Supporting User Interface.Interface.
Input Devices.Keyboard.Pointing devices.3D Input.Recognized Input.
Human Computer Interaction – Part 1 © 2005 Mohammed Alabdulkareem
QQ Technology Supporting User Technology Supporting User Interface.Interface.
Input Devices.Keyboards.• QWERTY• DVORAK• Split
Human Computer Interaction – Part 1 © 2005 Mohammed Alabdulkareem
QQ Technology Supporting User Technology Supporting User Interface.Interface.
Input Devices.POINTING DEVICES• Mouse• Trackball• Touch-screen
Human Computer Interaction – Part 1 © 2005 Mohammed Alabdulkareem
QQ Technology Supporting User Technology Supporting User Interface.Interface.
Input Devices.3D Input.• Data Glove• 3D-Mouse
Human Computer Interaction – Part 1 © 2005 Mohammed Alabdulkareem
QQ Technology Supporting User Technology Supporting User Interface.Interface.
Input Devices.Recognized Input.• OCR• Eye-Gaze• Barcode Scan
Human Computer Interaction – Part 1 © 2005 Mohammed Alabdulkareem
QQ Technology Supporting User Technology Supporting User Interface.Interface.
Output Devices.CRT.LCD.Sound.Printers3D display
Human Computer Interaction – Part 1 © 2005 Mohammed Alabdulkareem
QQ Technology Supporting User Technology Supporting User Interface.Interface.
High-Speed ProcessingGUI (Windows).VR.3D Graphics.
NetworkingSharing resources.Web & Internet
Human Computer Interaction – Part 1 © 2005 Mohammed Alabdulkareem
QQ Technology Supporting User Technology Supporting User Interface.Interface.
Matching Devices with Work Accuracy level.Task requirements.Direct mapping.
Human Computer Interaction – Part 1 © 2005 Mohammed Alabdulkareem
QQ Human Computer InteractionHuman Computer Interaction
Why HCI?
Human Information Processing.
Technology Supporting User Interface.
Window system design.
Screen Layout and Design
Dialog Styles.
Evaluation of User Interface.
Error Handling.
Documentation.
Human Computer Interaction – Part 1 © 2005 Mohammed Alabdulkareem
QQ Windows System DesignWindows System Design
Windows was designed to support more than one output on the same physical screen.Windows supports multitasking.Working with windows takes more time!Many lessons learned from the users.Each window system has its flavor of control.
Human Computer Interaction – Part 1 © 2005 Mohammed Alabdulkareem
QQ Windows System DesignWindows System Design
Windows Basic ComponentsWindows:• Title bar.• Close Box.• Zoom Box.• Size Box.• Scroll Control.
Menu.Dialogue Boxes.Cursor.Control & Control Panels.
Human Computer Interaction – Part 1 © 2005 Mohammed Alabdulkareem
QQ Windows System DesignWindows System Design
Windows Basic Components
Windows:• Title bar.• Close Box.• Zoom Box.• Size Box.• Scroll Control.
Human Computer Interaction – Part 1 © 2005 Mohammed Alabdulkareem
QQ Windows System DesignWindows System Design
Human Computer Interaction – Part 1 © 2005 Mohammed Alabdulkareem
QQ Windows System DesignWindows System Design
MenusPop-UPPull DownSubmenu
Human Computer Interaction – Part 1 © 2005 Mohammed Alabdulkareem
QQ Windows System DesignWindows System Design
Dialog box
Human Computer Interaction – Part 1 © 2005 Mohammed Alabdulkareem
QQ Windows System DesignWindows System Design
CursorChange cursor with context.Lost Cursor.The pointing edge.Cursor-on help text.
Human Computer Interaction – Part 1 © 2005 Mohammed Alabdulkareem
QQ Windows System DesignWindows System Design
ControlsButtons.Sliders.Check box.Radio buttons.
Check Box
Radio Button
Human Computer Interaction – Part 1 © 2005 Mohammed Alabdulkareem
QQ Human Computer InteractionHuman Computer Interaction
Why HCI?
Human Information Processing.
Technology Supporting User Interface.
Window system design.
Screen Layout and Design
Dialog Styles.
Evaluation of User Interface.
Error Handling.
Documentation.
Human Computer Interaction – Part 1 © 2005 Mohammed Alabdulkareem
QQ Screen Layout and DesignScreen Layout and Design
Screen is our Real Estate.
The space should be utilized with goals in mind.
Think of the user (User Centered Design).
Think of the task (Task Analysis).
Human Computer Interaction – Part 1 © 2005 Mohammed Alabdulkareem
QQ Screen Layout and DesignScreen Layout and Design
Screen space is limited.Use windows.Use more than one screen.Arrange information.
Human Computer Interaction – Part 1 © 2005 Mohammed Alabdulkareem
QQ Screen Layout and DesignScreen Layout and Design
Set measurable usability goals early.
Usability and user needs should drive the design.
Define types of users (Expert/Novice).
Consider the personal differences.
Use the matching dialog style.
Testing throughout the design process.
Human Computer Interaction – Part 1 © 2005 Mohammed Alabdulkareem
QQ Screen Layout and DesignScreen Layout and Design
Guide linesInclude only essential information.Include all essential information.Start at the upper left corner.Design : follow formatting standard.Apply logical grouping of items.
Human Computer Interaction – Part 1 © 2005 Mohammed Alabdulkareem
QQ Screen Layout and DesignScreen Layout and Design
Guide linesSymmetry & balance of white spaces.Avoid heavy use of uppercase.Distinguish caption & fields.The level of Detail is the same as user knowledge.Avoid color pollution.
Human Computer Interaction – Part 1 © 2005 Mohammed Alabdulkareem
QQ Human Computer InteractionHuman Computer Interaction
Why HCI?
Human Information Processing.
Technology Supporting User Interface.
Window system design.
Screen Layout and Design
Dialog Styles.
Evaluation of User Interface.
Error Handling.
Documentation.
Human Computer Interaction – Part 1 © 2005 Mohammed Alabdulkareem
QQ Dialog StylesDialog Styles
Com m andEntry
M enus &Navigation
Question &Answ er
Form s &Spreadsheets
DirectM anipulation
Dialog Styles(Interaction Styles)
Human Computer Interaction – Part 1 © 2005 Mohammed Alabdulkareem
QQ Dialog StylesDialog Styles
CommandGood for experts.Exact spelling.Hard to remember (GREP).
Human Computer Interaction – Part 1 © 2005 Mohammed Alabdulkareem
QQ Dialog StylesDialog Styles
MenusOptions & Enhancements are visible.Grouping: • Access Time (Sec)
• Errors.
Human Computer Interaction – Part 1 © 2005 Mohammed Alabdulkareem
QQ Dialog StylesDialog Styles
Q & AOld style.Used with setup.Answer selected (menu).
Human Computer Interaction – Part 1 © 2005 Mohammed Alabdulkareem
QQ Dialog StylesDialog Styles
Forms:Different categories of data.Helps the users to place data correctly.It should help the user about what type of data is expected.Allows going back.Allow Validation.
Human Computer Interaction – Part 1 © 2005 Mohammed Alabdulkareem
QQ Dialog StylesDialog Styles
Direct Manipulation:Visibility of the objects.Rapid, reversible, incremental actions.Simulate real life.Allow Validation.
Human Computer Interaction – Part 1 © 2005 Mohammed Alabdulkareem
QQ Human Computer InteractionHuman Computer Interaction
Why HCI?
Human Information Processing.
Technology Supporting User Interface.
Window system design.
Screen Layout and Design
Dialog Styles.
Evaluation of User Interface.
Error Handling.
Documentation.
Human Computer Interaction – Part 1 © 2005 Mohammed Alabdulkareem
QQ Evaluation of User InterfaceEvaluation of User Interface
The Keyword is the user.
The User The Programmer.
Never forget the TASK.
Human Computer Interaction – Part 1 © 2005 Mohammed Alabdulkareem
QQ Evaluation of User InterfaceEvaluation of User Interface
The Keyword is the user.The user is the final evaluator of your product.User Profile:• Psychological Characteristics.• Knowledge and experience.• Job and Task Characteristics.• Physical Characteristics.
Human Computer Interaction – Part 1 © 2005 Mohammed Alabdulkareem
QQ Evaluation of User InterfaceEvaluation of User Interface
The User The Programmer.The mental Model is different.Experiences are different.Background.
Human Computer Interaction – Part 1 © 2005 Mohammed Alabdulkareem
QQ Evaluation of User InterfaceEvaluation of User Interface
The User The Programmer.
Human Computer Interaction – Part 1 © 2005 Mohammed Alabdulkareem
QQ Evaluation of User InterfaceEvaluation of User Interface
Never forget the TASK.
Human Computer Interaction – Part 1 © 2005 Mohammed Alabdulkareem
QQ Evaluation of User InterfaceEvaluation of User Interface
How to evaluate?User Observation.Verbal Protocol (Think aloud).Software Logging.Users’ Opinion (Interview, Questionnaire).Experiments & Benchmark.
Human Computer Interaction – Part 1 © 2005 Mohammed Alabdulkareem
QQ Evaluation of User InterfaceEvaluation of User Interface
Predictive Evaluation:Inspection methods (experts in technology & the intended users).Usage simulation (experts simulate less experienced users).Structured reviewing.• Heuristic evaluation (only key issues).• Discount usability evaluation (Scenarios).• Cognitive walkthrough.
Human Computer Interaction – Part 1 © 2005 Mohammed Alabdulkareem
QQ Evaluation of User InterfaceEvaluation of User Interface
Key Issues:Validity: Evaluation Purpose & Method.Reliability: Experiments yield the same results.Biases: Avoid selective data gathering.
Human Computer Interaction – Part 1 © 2005 Mohammed Alabdulkareem
QQ Human Computer InteractionHuman Computer Interaction
Why HCI?
Human Information Processing.
Technology Supporting User Interface.
Window system design.
Screen Layout and Design
Dialog Styles.
Evaluation of User Interface.
Error Handling.
Documentation.
Human Computer Interaction – Part 1 © 2005 Mohammed Alabdulkareem
QQ Error HandlingError Handling
What types of errors:Perceptual Errors (B8, Z2, I1).Cognitive Errors (Memory, Link, Inconsistent).Motor Errors (Hand, Eye).
Human Computer Interaction – Part 1 © 2005 Mohammed Alabdulkareem
QQ Error HandlingError Handling
Perceptual Errors (B8, Z2, I1).
B8 B8 B8
Human Computer Interaction – Part 1 © 2005 Mohammed Alabdulkareem
QQ Error HandlingError Handling
Cognitive Errors (Memory, Link, Inconsistent).
Human Computer Interaction – Part 1 © 2005 Mohammed Alabdulkareem
QQ Error HandlingError Handling
Motor Errors (Hand, Eye).Options very close to each other.The selection is very sensitive.
Human Computer Interaction – Part 1 © 2005 Mohammed Alabdulkareem
QQ Human Computer InteractionHuman Computer Interaction
Why HCI?
Human Information Processing.
Technology Supporting User Interface.
Window system design.
Screen Layout and Design
Dialog Styles.
Evaluation of User Interface.
Error Handling.
Documentation.
Human Computer Interaction – Part 1 © 2005 Mohammed Alabdulkareem
QQ DocumentationDocumentation
User manual vs. Technical guide.
User manual guidelines.
Online Help.
Human Computer Interaction – Part 1 © 2005 Mohammed Alabdulkareem
QQ DocumentationDocumentation
User manual vs. Technical guide.User manual intended for non technical users. (Part of the user interface)Technical guide is intended for technical people.(How to develop)
Human Computer Interaction – Part 1 © 2005 Mohammed Alabdulkareem
QQ DocumentationDocumentation
User manual guidelines.Easy to navigate.• Organize chapters according to users goal.
• TOC should present high level overview.
• Provide an index.• Use consistent cues for different type of information.
Human Computer Interaction – Part 1 © 2005 Mohammed Alabdulkareem
QQ DocumentationDocumentation
User manual guidelines.Ease of learning• Provide a foundation and build on it.
• Use examples.• Use illustrations.• Make consistent use of spatial and visual cues.
Human Computer Interaction – Part 1 © 2005 Mohammed Alabdulkareem
QQ DocumentationDocumentation
User manual guidelines.Ease of reading• Use the white space wisely.• Write using low grade level.• Avoid expert jargons.