Q Q Human Computer Interaction – Part 1© 2005 Mohammed Alabdulkareem Human Computer Interaction - 1 Dr. Mohammed Alabdulkareem [email protected]

Human Computer Interaction – Part 1 © 2005 Mohammed Alabdulkareem

QQ

Human Computer Interaction - 1Human Computer Interaction - 1

Dr. Mohammed Alabdulkareem

[email protected]


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.


QQ Why HCI?Why HCI?


QQ Why HCI?Why HCI?


QQ Why HCI?Why HCI?


QQ Why HCI?Why HCI?


QQ Why HCI?Why HCI?



Why HCI?




Screen Layout and Design

Dialog Styles.


Error Handling.

Documentation.


QQ Human Information ProcessingHuman Information Processing

Encoding ComparisonResponseselection

ResponseexecutionInput Response



Encoding ComparisonResponseselection

ResponseexecutionInput Response

Attention

Memory



Visual PerceptionWhat we see is not what we recognize.Constructivist (stored knowledge).Ecological (no stored knowledge).



What we see is not what we recognize.



Constructivist (stored knowledge).



Constructivist (stored knowledge).



Ecological (no stored knowledge).

Affordance


QQ



Why HCI?





Dialog Styles.


Error Handling.

Documentation.


QQ Technology Supporting User Technology Supporting User Interface.Interface.

Input Devices.

Output Devices.

High-speed Processing.

Networking.



Input Devices.Keyboard.Pointing devices.3D Input.Recognized Input.



Input Devices.Keyboards.• QWERTY• DVORAK• Split



Input Devices.POINTING DEVICES• Mouse• Trackball• Touch-screen



Input Devices.3D Input.• Data Glove• 3D-Mouse



Input Devices.Recognized Input.• OCR• Eye-Gaze• Barcode Scan



Output Devices.CRT.LCD.Sound.Printers3D display



High-Speed ProcessingGUI (Windows).VR.3D Graphics.

NetworkingSharing resources.Web & Internet



Matching Devices with Work Accuracy level.Task requirements.Direct mapping.


QQ



Why HCI?





Dialog Styles.


Error Handling.

Documentation.


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.



Windows Basic ComponentsWindows:• Title bar.• Close Box.• Zoom Box.• Size Box.• Scroll Control.

Menu.Dialogue Boxes.Cursor.Control & Control Panels.



Windows Basic Components

Windows:• Title bar.• Close Box.• Zoom Box.• Size Box.• Scroll Control.





MenusPop-UPPull DownSubmenu



Dialog box



CursorChange cursor with context.Lost Cursor.The pointing edge.Cursor-on help text.



ControlsButtons.Sliders.Check box.Radio buttons.

Check Box

Radio Button



Why HCI?





Dialog Styles.


Error Handling.

Documentation.


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).



Screen space is limited.Use windows.Use more than one screen.Arrange information.



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.



Guide linesInclude only essential information.Include all essential information.Start at the upper left corner.Design : follow formatting standard.Apply logical grouping of items.



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.


QQ



Why HCI?





Dialog Styles.


Error Handling.

Documentation.


QQ Dialog StylesDialog Styles

Com m andEntry

M enus &Navigation

Question &Answ er

Form s &Spreadsheets

DirectM anipulation

Dialog Styles(Interaction Styles)



CommandGood for experts.Exact spelling.Hard to remember (GREP).



MenusOptions & Enhancements are visible.Grouping: • Access Time (Sec)

• Errors.



Q & AOld style.Used with setup.Answer selected (menu).



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.



Direct Manipulation:Visibility of the objects.Rapid, reversible, incremental actions.Simulate real life.Allow Validation.


QQ



Why HCI?





Dialog Styles.


Error Handling.

Documentation.


QQ Evaluation of User InterfaceEvaluation of User Interface

The Keyword is the user.

The User The Programmer.

Never forget the TASK.



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.



The User The Programmer.The mental Model is different.Experiences are different.Background.



The User The Programmer.



Never forget the TASK.



How to evaluate?User Observation.Verbal Protocol (Think aloud).Software Logging.Users’ Opinion (Interview, Questionnaire).Experiments & Benchmark.



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.



Key Issues:Validity: Evaluation Purpose & Method.Reliability: Experiments yield the same results.Biases: Avoid selective data gathering.


QQ



Why HCI?





Dialog Styles.


Error Handling.

Documentation.


QQ Error HandlingError Handling

What types of errors:Perceptual Errors (B8, Z2, I1).Cognitive Errors (Memory, Link, Inconsistent).Motor Errors (Hand, Eye).



Perceptual Errors (B8, Z2, I1).

B8 B8 B8



Cognitive Errors (Memory, Link, Inconsistent).



Motor Errors (Hand, Eye).Options very close to each other.The selection is very sensitive.



Why HCI?





Dialog Styles.


Error Handling.

Documentation.


QQ DocumentationDocumentation

User manual vs. Technical guide.

User manual guidelines.

Online Help.



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)



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.



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.



User manual guidelines.Ease of reading• Use the white space wisely.• Write using low grade level.• Avoid expert jargons.



Online Help.Make help visible (but not annoying).Complete & accurate.Multiple Access Method.Make it easy to return to problem context.Make it fast.Provide different levels of details.

Documents

Q Q Human Computer Interaction – Part 1© 2005 Mohammed Alabdulkareem Human Computer Interaction - 1 Dr. Mohammed Alabdulkareem [email protected]