Top Banner
HCI notes-03 by Raja Jamilah
70

HCI notes-03by Raja Jamilah. HCI notes-03by Raja Jamilah Human and Technology.

Dec 21, 2015

Download

Documents

Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: HCI notes-03by Raja Jamilah. HCI notes-03by Raja Jamilah Human and Technology.

HCI notes-03 by Raja Jamilah

Page 2: HCI notes-03by Raja Jamilah. HCI notes-03by Raja Jamilah Human and Technology.

HCI notes-03 by Raja Jamilah

Human and Technology

Page 3: HCI notes-03by Raja Jamilah. HCI notes-03by Raja Jamilah Human and Technology.

HCI notes-03 by Raja Jamilah

Content

• Input devices• Output devices• Interaction Styles• Designing Windows

Systems• User Support and On-

line Information• Designing for Virtual

Environment

Page 4: HCI notes-03by Raja Jamilah. HCI notes-03by Raja Jamilah Human and Technology.

HCI notes-03 by Raja Jamilah

Input devices have to be:

• Matches physiological and psychological characteristics of users eg elderly, inexperienced users, disabled

• Appropriate for the tasks to be performed eg. Drawing, cooking

• Suitable for intended work and environment eg. Speech and sound for noisy environment?

Page 5: HCI notes-03by Raja Jamilah. HCI notes-03by Raja Jamilah Human and Technology.

HCI notes-03 by Raja Jamilah

Also:

• Simple and easy to use• Need appropriate system feedback to

– guide– reassure– inform– correct error

Page 6: HCI notes-03by Raja Jamilah. HCI notes-03by Raja Jamilah Human and Technology.

HCI notes-03 by Raja Jamilah

The Hand to Input data

Page 7: HCI notes-03by Raja Jamilah. HCI notes-03by Raja Jamilah Human and Technology.

HCI notes-03 by Raja Jamilah

The keyboard

Page 8: HCI notes-03by Raja Jamilah. HCI notes-03by Raja Jamilah Human and Technology.

HCI notes-03 by Raja Jamilah

The Half Qwerty

Page 9: HCI notes-03by Raja Jamilah. HCI notes-03by Raja Jamilah Human and Technology.

HCI notes-03 by Raja Jamilah

Picture of a person wearing the half Qwerty

Can you think of its usage?

Page 10: HCI notes-03by Raja Jamilah. HCI notes-03by Raja Jamilah Human and Technology.

HCI notes-03 by Raja Jamilah

Castanets

For what purpose?

Page 11: HCI notes-03by Raja Jamilah. HCI notes-03by Raja Jamilah Human and Technology.

HCI notes-03 by Raja Jamilah

Picture of key arrangement

Can you guest the usage?

Does is have a good affordance?

Page 12: HCI notes-03by Raja Jamilah. HCI notes-03by Raja Jamilah Human and Technology.

HCI notes-03 by Raja Jamilah

Pen Computing, GRIGRI - in French means scribble

For what?

Page 13: HCI notes-03by Raja Jamilah. HCI notes-03by Raja Jamilah Human and Technology.

HCI notes-03 by Raja Jamilah

Radar image, touch sensitive

(finger or pen)

Page 14: HCI notes-03by Raja Jamilah. HCI notes-03by Raja Jamilah Human and Technology.

HCI notes-03 by Raja Jamilah

Faster usage using original manual symbols

Page 15: HCI notes-03by Raja Jamilah. HCI notes-03by Raja Jamilah Human and Technology.

HCI notes-03 by Raja Jamilah

Implemented on system

Page 16: HCI notes-03by Raja Jamilah. HCI notes-03by Raja Jamilah Human and Technology.

HCI notes-03 by Raja Jamilah

Other means of input

• Eye movement• The foot• Facial expression• Speech and sound

Page 17: HCI notes-03by Raja Jamilah. HCI notes-03by Raja Jamilah Human and Technology.

HCI notes-03 by Raja Jamilah

Eye

• Device detecting the eye looking at a certain position• giving an appropriate response such as:

– popping up the menu selection for using the system,

– detecting relative direction of the eye gaze for aircraft pilots

Page 18: HCI notes-03by Raja Jamilah. HCI notes-03by Raja Jamilah Human and Technology.

HCI notes-03 by Raja Jamilah

Head

• Movement to show relative position of head in virtual reality environment using the helmet

Page 19: HCI notes-03by Raja Jamilah. HCI notes-03by Raja Jamilah Human and Technology.

HCI notes-03 by Raja Jamilah

The Foot

• Sewing machine

Page 20: HCI notes-03by Raja Jamilah. HCI notes-03by Raja Jamilah Human and Technology.

HCI notes-03 by Raja Jamilah

Speech and Sound

• Speech recognition - Isolated speech, continuos speech

• Eg of usage: To help telephone operators• Problems:

– interference of background noise– similar sounds/words

• Speaker-in/dependent systems

Page 21: HCI notes-03by Raja Jamilah. HCI notes-03by Raja Jamilah Human and Technology.

HCI notes-03 by Raja Jamilah

Output devices

Page 22: HCI notes-03by Raja Jamilah. HCI notes-03by Raja Jamilah Human and Technology.

HCI notes-03 by Raja Jamilah

Output Devices

• Convert information from the internal system to a form perceptible by a human

• most common >> visual and 2 dimensional

Page 23: HCI notes-03by Raja Jamilah. HCI notes-03by Raja Jamilah Human and Technology.

HCI notes-03 by Raja Jamilah

Visualisation

• Fish Eye• multidimensional information space• Overview of information• 1 D linear Data• 2 D• 3 D

Page 24: HCI notes-03by Raja Jamilah. HCI notes-03by Raja Jamilah Human and Technology.

HCI notes-03 by Raja Jamilah

Examples

• Geographical Information System (GIS) data and environmental models for visualizing design proposals to study the environmental impact of these

• visualization for assisting the control of urban design by planning authorities and studying the impact of proposed developments [2].

• on the study of electromagnetic to enable students to visualize what is invisible (e.g., voltages, currents, approach proved to be a great instructional aid to students who sometimes have a difficult time connecting theory and measurement.

Page 25: HCI notes-03by Raja Jamilah. HCI notes-03by Raja Jamilah Human and Technology.

HCI notes-03 by Raja Jamilah

Fish Eye View

Page 26: HCI notes-03by Raja Jamilah. HCI notes-03by Raja Jamilah Human and Technology.

HCI notes-03 by Raja Jamilah

Fish Eye View

Page 27: HCI notes-03by Raja Jamilah. HCI notes-03by Raja Jamilah Human and Technology.

HCI notes-03 by Raja Jamilah

Sound

• For visually impaired– use sound to direct users to an object

Page 28: HCI notes-03by Raja Jamilah. HCI notes-03by Raja Jamilah Human and Technology.

HCI notes-03 by Raja Jamilah

Page 29: HCI notes-03by Raja Jamilah. HCI notes-03by Raja Jamilah Human and Technology.

HCI notes-03 by Raja Jamilah

Page 30: HCI notes-03by Raja Jamilah. HCI notes-03by Raja Jamilah Human and Technology.

HCI notes-03 by Raja Jamilah

Interaction styles

Page 31: HCI notes-03by Raja Jamilah. HCI notes-03by Raja Jamilah Human and Technology.

HCI notes-03 by Raja Jamilah

4 types of interaction styles

• Menu and navigation• form-fills and spreadsheets• Natural Language• Command Entry• direct manipulation

Page 32: HCI notes-03by Raja Jamilah. HCI notes-03by Raja Jamilah Human and Technology.

HCI notes-03 by Raja Jamilah

Menu

• Single, binary, pop-up, pull-down, pie, tree, linear

PULAU LANGKAWIJOHOR BAHARUKOTA BAHARUTAMAN NEGARAKUALASELANGORKUANTAN

BANDARMELAKAAIR KEROHAIR HITAMBATU PAHATIPOHKUALA LUMPUR

ALOR SETARBEHRANGGURUNGOPENGPULAU KAPASPULAU TIOMANKANGAR

[OK] [BATAL]

Page 33: HCI notes-03by Raja Jamilah. HCI notes-03by Raja Jamilah Human and Technology.

HCI notes-03 by Raja Jamilah

Page 34: HCI notes-03by Raja Jamilah. HCI notes-03by Raja Jamilah Human and Technology.

HCI notes-03 by Raja Jamilah

Item presentation

• Alphabetic• Grouping of related items• Most frequently used• functional• random

Page 35: HCI notes-03by Raja Jamilah. HCI notes-03by Raja Jamilah Human and Technology.

HCI notes-03 by Raja Jamilah

Form Fillin

• Elements:– meaningful title– comprehensible instructions– Logical grouping and sequencing of fields– neat layout– familiar labels, consistent terminology – visible space and boundaries

Page 36: HCI notes-03by Raja Jamilah. HCI notes-03by Raja Jamilah Human and Technology.

HCI notes-03 by Raja Jamilah

Command Language

• Eg. View the list of files and folders – MS DOS - dir – UNIX - list

• Good if: – consistent argument ordering– keyword– hierarchically structured– good abbreviation

Page 37: HCI notes-03by Raja Jamilah. HCI notes-03by Raja Jamilah Human and Technology.

HCI notes-03 by Raja Jamilah

Natural Language

• Give instructions to system and system response• natural language queries, text-database searching• advanture and educational games

Page 38: HCI notes-03by Raja Jamilah. HCI notes-03by Raja Jamilah Human and Technology.

HCI notes-03 by Raja Jamilah

Direct manipulation

• An interaction style, letting users manipulate things as if in the real world without an intermediary

• Eg.word processors,spreadsheet, videogames,CAD/M(Computer Aided Design/Manufacturing), office automation

• problems visual representation not good, learn meaning, misleading, slower

Page 39: HCI notes-03by Raja Jamilah. HCI notes-03by Raja Jamilah Human and Technology.

HCI notes-03 by Raja Jamilah

Remote Direct manipulation

• Typical application: – telemedicine - see human body, tissues under

microscope– underwater, space– home-automation control

• problems:– time delay, incomplete feedback, feedback from

multiple sources, interferences

Page 40: HCI notes-03by Raja Jamilah. HCI notes-03by Raja Jamilah Human and Technology.

HCI notes-03 by Raja Jamilah

Constraints

• Physical• semantic - depend on users knowledge• cultural - one representation of object may mean

differently in different parts of the world• logical - order, position and location

Page 41: HCI notes-03by Raja Jamilah. HCI notes-03by Raja Jamilah Human and Technology.

HCI notes-03 by Raja Jamilah

Designing Windowing systems

Page 42: HCI notes-03by Raja Jamilah. HCI notes-03by Raja Jamilah Human and Technology.

HCI notes-03 by Raja Jamilah

What is a window?

• Rectangular display that can be moved, sized and rendered independently on the display screen

Page 43: HCI notes-03by Raja Jamilah. HCI notes-03by Raja Jamilah Human and Technology.

HCI notes-03 by Raja Jamilah

Types of windows

• Tiling• cascading• overlapping

Page 44: HCI notes-03by Raja Jamilah. HCI notes-03by Raja Jamilah Human and Technology.

HCI notes-03 by Raja Jamilah

Window components

• Menus• Control Widgets - buttons, sliders, checkboxes,

listboxes • Scroll bar

Page 45: HCI notes-03by Raja Jamilah. HCI notes-03by Raja Jamilah Human and Technology.

HCI notes-03 by Raja Jamilah

•The list box control is a complete solution for creating scrolling lists.•Scroll bars allow users to view areas of a document or a list that is larger than can fit into the current window.•The edit text field (also known as a "text entry field") is a rectangular area in which the user enters text or modifies existing text.•The tab control provides a convenient way to present information in a multi-page format.

Page 46: HCI notes-03by Raja Jamilah. HCI notes-03by Raja Jamilah Human and Technology.

HCI notes-03 by Raja Jamilah

Tab control

Text field

List box

Page 47: HCI notes-03by Raja Jamilah. HCI notes-03by Raja Jamilah Human and Technology.

HCI notes-03 by Raja Jamilah

Menus

Page 48: HCI notes-03by Raja Jamilah. HCI notes-03by Raja Jamilah Human and Technology.

HCI notes-03 by Raja Jamilah

Control widgets

Page 49: HCI notes-03by Raja Jamilah. HCI notes-03by Raja Jamilah Human and Technology.

HCI notes-03 by Raja Jamilah

radiobuttons

Page 50: HCI notes-03by Raja Jamilah. HCI notes-03by Raja Jamilah Human and Technology.

HCI notes-03 by Raja Jamilah

Sliders

Page 51: HCI notes-03by Raja Jamilah. HCI notes-03by Raja Jamilah Human and Technology.

HCI notes-03 by Raja Jamilah

Dialog boxes

• Movable Modal Dialog Boxes • Modal Dialog Boxes • Alert Boxes

• Modeless Dialog Boxes

Page 52: HCI notes-03by Raja Jamilah. HCI notes-03by Raja Jamilah Human and Technology.

HCI notes-03 by Raja Jamilah

A modal dialog box puts the user in the state (or "mode") of being able to work only inside the dialog box. It temporarily suspends all other user actions in an application and forces the user to make decisions and respond to the dialog.

Modal Dialog

Page 53: HCI notes-03by Raja Jamilah. HCI notes-03by Raja Jamilah Human and Technology.

HCI notes-03 by Raja Jamilah

Movable modal dialog

• A movable modal dialog box is a modal dialog box with a title bar which allows the user to move the

dialog box.

Page 54: HCI notes-03by Raja Jamilah. HCI notes-03by Raja Jamilah Human and Technology.

HCI notes-03 by Raja Jamilah

Alert boxes• Alert boxes are special types of modal dialog boxes.

Alert boxes display messages to users to inform them of situations that may be particularly notable or dangerous, along with an icon that signifies the degree of severity of the alert message.

Page 55: HCI notes-03by Raja Jamilah. HCI notes-03by Raja Jamilah Human and Technology.

HCI notes-03 by Raja Jamilah

Modeless

• Modeless dialog boxes allow users to repeat an action as many times as necessary while the dialog box remains open. This feature is useful for tasks such as finding and replacing text in a word

processor or numbers in a spreadsheet.

Page 56: HCI notes-03by Raja Jamilah. HCI notes-03by Raja Jamilah Human and Technology.

HCI notes-03 by Raja Jamilah

Examples of dialog boxes on Microsoft Windows, Macintosh and CDE platforms

Page 57: HCI notes-03by Raja Jamilah. HCI notes-03by Raja Jamilah Human and Technology.

HCI notes-03 by Raja Jamilah

Examples of Alert boxes on Microsoft Windows, Macintosh and CDE platforms

Page 58: HCI notes-03by Raja Jamilah. HCI notes-03by Raja Jamilah Human and Technology.

HCI notes-03 by Raja Jamilah

Personal Role Managers

• Next generation user interface• emphasize on users instead of documents• working in a given role• task objects:

– vision statement– set of people– task hierarchy– schedule

Page 59: HCI notes-03by Raja Jamilah. HCI notes-03by Raja Jamilah Human and Technology.

HCI notes-03 by Raja Jamilah

PRM

Page 60: HCI notes-03by Raja Jamilah. HCI notes-03by Raja Jamilah Human and Technology.

HCI notes-03 by Raja Jamilah

PRM

Page 61: HCI notes-03by Raja Jamilah. HCI notes-03by Raja Jamilah Human and Technology.

HCI notes-03 by Raja Jamilah

Designing to save space

Page 62: HCI notes-03by Raja Jamilah. HCI notes-03by Raja Jamilah Human and Technology.

HCI notes-03 by Raja Jamilah

Designing to save space

Page 63: HCI notes-03by Raja Jamilah. HCI notes-03by Raja Jamilah Human and Technology.

HCI notes-03 by Raja Jamilah

Designing to save space

Page 64: HCI notes-03by Raja Jamilah. HCI notes-03by Raja Jamilah Human and Technology.

HCI notes-03 by Raja Jamilah

User Support and On-line information

Page 65: HCI notes-03by Raja Jamilah. HCI notes-03by Raja Jamilah Human and Technology.

HCI notes-03 by Raja Jamilah

User Support

• Minimalist instruction- reduce information for users to read using a system

• the training wheel- skip the complex function for novices

• the scenario machine - guidance for novices to learn a new system at an early stage

Page 66: HCI notes-03by Raja Jamilah. HCI notes-03by Raja Jamilah Human and Technology.

HCI notes-03 by Raja Jamilah

Online system

• Telephone - more assurance and give confident to new users

• Hypertext and Hypermedia– give an overview of information– agents– problem solving activities

Page 67: HCI notes-03by Raja Jamilah. HCI notes-03by Raja Jamilah Human and Technology.

HCI notes-03 by Raja Jamilah

Virtual Environment

Page 68: HCI notes-03by Raja Jamilah. HCI notes-03by Raja Jamilah Human and Technology.

HCI notes-03 by Raja Jamilah

Issues on virtual reality

• spatial orientation and wayfinding in virtual worlds, designing the virtual world to leverage on human perceptual abilities, not just striving for photo- realism,

• affordances for travelling from one virtual location to another, directed or browsing, and for acting in the environment,

• designing the controlling inputs to take advantage of human physical abilities (and adapt to disabilities),

Page 69: HCI notes-03by Raja Jamilah. HCI notes-03by Raja Jamilah Human and Technology.

HCI notes-03 by Raja Jamilah

Cont.

• evaluating VE interfaces, experiences with usability testing of whole systems,

• appreciating the interdependence between task features and interface design,

• understanding the dimensions of usefulness and complexity for VE interfaces.

Page 70: HCI notes-03by Raja Jamilah. HCI notes-03by Raja Jamilah Human and Technology.

HCI notes-03 by Raja Jamilah

Technologies

• Visual display• head-position sensing• hand-position sensing• Force feedback• sound input-output• other sensation• cooperative and competitive virtual reality