BIT 2305 Lecture 2b Interaction Stlyes

BIT 2305: Slide 1

HCI- Interaction Styles

BIT 2305- Human-computer Interface

Interaction styles

BIT 2305: Slide 2


Topics

1. Model of interaction and HCI design

2. Eight golden rules of dialog design

3. Interaction styles

BIT 2305: Slide 3


1. Model of Interaction

• Norman’s model of interaction (1988)

– most influential in HCI

– interaction cycle has two major phases - Execution and Evaluation

BIT 2305: Slide 4


Execution and Evaluation cycle1.Establish the goal

2. Forming the intention

3.Specifying the action sequence

4.Executing the action

5.Perceiving the system state

6.Interpreting the system state

7.Evaluating the system state w.r.t. goals and intentions

BIT 2305: Slide 5


Interaction framework

O

I

UStask

input

output

core

BIT 2305: Slide 6



O

I

USUser’s Task language

input

output

core

BIT 2305: Slide 7



O

I

UStask

input

output

System’scoreLanguage

BIT 2305: Slide 8



O

I

UStask

input

output

coreInterfaceInterface

BIT 2305: Slide 9


Core

Execution phase of cycle

O

I

USTask

Input

output

Core(4)

PerformancePerformance

Task (1,2)

ArticulationArticulation

InterfaceInterface

Input (3))

BIT 2305: Slide 10


Core

Evaluation phase of cycle

O

I

USTask

Input

output

Core(4)

observation observation (5,6,7)(5,6,7)

InterfaceInterface

Output (4))

presentationpresentation

BIT 2305: Slide 11


Interaction Framework• Interaction is achieved through both the

– Dialogue design – Interface styles

• Execution and evaluation depends on – The input language (dialogue) – The user’s ease in manipulating the interface

through the input device. – Clear mapping from dialogue to task

BIT 2305: Slide 12


2. Eight Golden Rules of Dialogue Design

1. Strive for consistency 2. Enable frequent users to take shortcuts3. Offer informative feedback for every user action4. Design dialogues to yield closure5. Offer simple error handling6. Permit easy reversal of actions 7. Support internal locus of control8. Reduce short-term memory load

BIT 2305: Slide 13


3. Interface style• Interaction dialogue - computer and the user. • Interaction (interface) styles include

– Command language style– Menus– Question and response– Forms – Natural language interaction style– Direct manipulation / WIMP / point and click– Virtual reality

BIT 2305: Slide 14


Command language style

• history..first interaction dialogue style to be commonly used

• method...expresses instructions directly to computer, using function keys, single characters, abbreviations or whole word commands

BIT 2305: Slide 15


Command language style

• examplesdos or unix operating systems

programming languages

natural language interaction

accelerated access in menu screens in window systems

BIT 2305: Slide 16


HCI implications

Advantages:

• powerful

• flexible

• quick

Disadvantages:

• poor learnability

• no cues

• experts usually

• inconsistent features

• typing errors

BIT 2305: Slide 17


• no excess functionality

• cautious use of powerful destructive operations (eg DEL *.*)

• consider tailoring the language to suit different users

• a unifying concept, model, or metaphor can be useful

• consistency in the ordering of keywords and parameters

• a hierarchical structure for a large number of commands

• consistent abbreviation strategies should be used

• mnemonics should be meaningful

Table 5-1Guidelines for command languages

BIT 2305: Slide 18


Menu interaction style

Menu selection is especially useful when users:

• have little training

• do not use the system frequently

• are unfamiliar with the terminology of the system

• need help in structuring their decision making process.

BIT 2305: Slide 19


Primary goal for menu designers

1. Create a sensible, comprehensible, memorable, and convenient semantic organisation relevant to the user's task: break into logical categories

2. Hierarchical decomposition

- every item belongs to a single category

3. Organisation is done before considering the screen display.

Menus: Semantic Organisation

BIT 2305: Slide 20


Choices for sequencing• Chronological ordering• Numeric ordering• Alphabetically sequence of terms• Groupings of related items (functional)• Most frequent items first• More important items first

Menus: Semantic Organisation

BIT 2305: Slide 21


• by natural order, if any

• if small number of options (7 or less) order by:

- sequence of occurrence

- frequency of occurrence

- importance

• alphabetical order for long lists

• consistency in ordering

Table 5-5Guidelines for item presentation sequence

BIT 2305: Slide 22


• single

• linear sequence

• extended menus

• tree-structured

• circular

Menus Systems

• pop-down

• pull-down

• cyclic network

• acyclic network

BIT 2305: Slide 23

HCI- Interaction Styles Menu systems

BIT 2305: Slide 24


single extended

linear

tree structure- hierarchical- pull down - pop-up- circular

acyclic Networkcyclic Network

Menu systems

BIT 2305: Slide 25


The user should:

• be able to go back to previous screens

• be able to terminate or restart the sequence

• be presented with the choices in an order that matches their expectations

• have a feeling for where they are in the sequence.

Table 5-3Guidelines for linear menus

BIT 2305: Slide 26


• A general or main menu

• Use terminology from the user's task domain

• Breadth is preferred over depth

• No more than three or four levels deep without logical categorisation, limit choices to 4-8 items

• Distinct items

• A printed index, or "map", for large systems to orient users

• Improve design after feedback from users.

Table 5-4Guidelines for tree structure menu type

BIT 2305: Slide 27


Main MenuMain Menu

(a) Unilearn Information

(a) Unilearn Information

(b) Test Information

(b) Test Information (c )

Start Test

(c ) Start Test

1.Test Aims

1.Test Aims

2. Test Organisation

2. Test Organisation

3. Test Practice

3. Test Practice

Layers in Unilearn Mathematics

Layers in Unilearn Mathematics

Test StyleTest Style

Question Style

Question Style

AnswersAnswers FeedbackFeedback

Immediate response

Immediate response

Record SheetRecord Sheet

Type 1 Correct, Easy or not easy

Type 1 Correct, Easy or not easy

Type 2IncorrectEasy or not easySecond question

Type 2IncorrectEasy or not easySecond question

Type 3Answer response is not known

Type 3Answer response is not known

Confirm Unilearn level to start test

Confirm Unilearn level to start test

BIT 2305: Slide 28


1. Menus with typeahead – users types a string characters to represent particular menu

choices

– ensure distinct first letters of each item in menu layer

2. Menu names and item numbers

- option to initially type these in and go to the particular item

3. Menu macros

- individual tailoring of the system to represent frequently used choices

– users define own pathways with macro, and assign own name to macro

Menus: Approaches for quick access in menus

BIT 2305: Slide 29


• List ideas to do with – Titles

– Phrasing of menu items

– Graphical Layout

– Colour

Menus: Screen Design

BIT 2305: Slide 30


• Titles -– Main Menu – same words -menu layers option to title– place titles consistently

• Phrasing of menu items– use familiar and consistent terminology– distinct item names– use consistent and concise phrasing– place keywords in menu items on the left.


BIT 2305: Slide 31


• Graphical Layout– techniques to indicate position in menu

• titles• different fonts• typefaces• highlighting techniques• cascading• menu map


BIT 2305: Slide 32


• Graphical Layout– constraints of screen width and length, display rate, character

set, and highlighting techniques– titles: centred or left justified– item placement: left justified– instructions: identical on each menu and placed in same

position– error messages and status reports: consistent position– formats consistent


BIT 2305: Slide 33


• Colour– three components: hue, intensity, saturation– generally overused so care is needed– change to black and white image to determine legibility– colour blind people (8% male, 1% female) cannot distinguish between red

and green– cultural connections

• red- danger, anger, green - safe, blue- cool, orange - warm– blue should not give critical information, since difficult to to perceive– do not use colour alone to carry key information


BIT 2305: Slide 34


Question and answer style

Use with:• novice or casual users• some specific application areas

– CAL ~ computer aided learning– DSS ~ decision support systems – ES ~ expert systems

Note:• Limited in functionality and power compared

to other interface styles.

BIT 2305: Slide 35


• one idea or question at a time• make questions precise• short user responses• keep previous questions displayed• field widths 25-40 characters• fields are left-centered• distinguish computer messages from keyed entries

Table 5-8 Guidelines for question-and-answer dialogues

BIT 2305: Slide 36


Form fill-in style

Advantages :• easy to learn• easy to use• is reassuring, because the user can see the whole

screen of data at once• is quick• needs few instructions.

BIT 2305: Slide 37


• meaningful title

• comprehensible instructions

• logical grouping and sequencing of fields

• nice layout

• familiar field labels

• consistent terminology and abbreviations

• visible space and boundaries for fields

Guidelines for form fill-in design

• convenient cursor movement: tab,arrows

• error correction for characters and fields

• error messages for unacceptable values

• optional fields clearly marked

• explanatory messages for

fields

• completion signal

BIT 2305: Slide 38


Natural language style

Advantages:• the user does not have to learn a command syntax or mode

of operation.

Problems:• ambiguity of input

• possibility of misunderstanding

• requires lengthy, slow, data entry

• the user may not be given help in structuring input

• pointing and selecting from visual displays may be more attractive to users`

BIT 2305: Slide 39


Direct manipulationWhat is it?

Allows users to select and manipulate objects from screen in order to perform tasks.

Cp. Drive a car• continuous representation of object of interest• physical actions not syntax or commands• response is immediate• easily reversible, visible action

Example - icon based imagery in drawing package, desktop metaphor

BIT 2305: Slide 40


• The interface in direct manipulation bridges the gaps in both the “gulf of execution” and “gulf of explanation”.

Gulf of execution is ….

Gulf of explanation (or evaluation) ...

Direct manipulation

BIT 2305: Slide 41


• The interface in direct manipulation bridges the gaps in both the “gulf of execution” and “gulf of explanation”.

Gulf of execution is the difference between the user formulation of actions to reach the goal and the actions allowed by system

Gulf of explanation (or evaluation) is the distance between the the physical representation of the system state and the expectation of the user.

Direct manipulation

BIT 2305: Slide 42


Consider “thinking in pictures” to match conceptual image of taskPiaget’s theory of human development locates a stage of

concrete relationships prior to abstract conceptualisation.

Polya (1957) suggested drawing a picture to represent mathematical problems

Metaphors - use visual representations of problem that are familiar to use

eg desktop metaphors: waste-basket, files, folders, clipboard.

Direct manipulation

BIT 2305: Slide 43


Advantages:– engenders enthusiasm– novices learn basic functionality quickly– experienced users work rapidly – error messages are rarely needed– users can see immediately if their actions are furthering

their goals, and how to change it– user experiences less anxiety, actions are reversible– user gain confidences since they initiate the action, feel

in control and predict system responses

Direct manipulation

BIT 2305: Slide 44


Disadvantages– not all tasks can be described as concrete objects

– not all actions can be performed directly

– eg

how to make concrete the concept of a buffer

Apple Macintosh overcame this through cutting, pasting and hidden clipboard.

Direct manipulation

BIT 2305: Slide 45


WIMP interfaceWindows

Icon

Menus (or Mice)

Pointers (or Pull-down menus)

• Today’s interface, in PC and desktop workstation areas- Microsoft Windows, MacOS, Unix window based systems

• elements of WIMP interface are called widgets

BIT 2305: Slide 46


WIMP interface• Windows

– elements of the screen that act as independent terminals

• Icon : – small picture to represent a closed window

– represent other aspects of system - waste-basket

• Menus– menu bar, pop-up menus, pull down menus, circular menus

• Pointers – point and select

– modes

– hot spot - location where the image points

BIT 2305: Slide 47


WIMP interface• Learning toolbar/ keyboard accelerator

• key combinations + icon representation + select menu option

Font…. Bullet..

BIT 2305: Slide 48


WIMP interface

• Buttons– user can push to initiate a display– multi-choice - radio buttons

• select one feature from a set of mutually exclusive options, such as sizes in font

– binary selection: - on / off • eg page orientation

• also called check boxes

BIT 2305: Slide 49


WIMP interfacePalettes• a collection of icons to represent various

modes of interaction– eg drawing package - pixel colour or pattern

• toolbar palletes may be torn off from toolbar

Dialog Boxes– information window used by system to bring

user’s attention to important information

BIT 2305: Slide 50


8. Virtual RealityInteraction styles• sense of direct physical presence: cues include

visual, aural or haptic (touch)• sensory cues in three dimensions

– sound is used to aid navigation and location, being aware of other activities in the virtual world, eg aircraft training

• natural interaction: gestures typical of manipulating everyday objects– picking up, turning around, throwing and so on.

BIT 2305: Slide 51


Immersion versus desktop

immersion-“looking in” perspective

helmet, datagloves and 3d world, providing a subjective feeling of environmentmetaphor of racing car travel: compare to theme park activity - 3d world

desktop - “looking at” perspective

single screen for input and output, 3d mouse and keyboard, use of shadow, changing environments to indicate motioneg metaphor of moving through rooms as in games and 3d web

environments

BIT 2305: Slide 52


Technology includes:• visual display

– 60 degrees vertically, 10 degrees horizontally

• head position sensing– - head movement shows different imagery

• hand position sensing– data glove provides very accurate input

• force feedback -– hand-operated devices

• sound input and output– bouncing balls, beating hearts, dropping objects

• other sensations - tilting, vibrating, smell?

BIT 2305: Slide 53


• Users should be able to select actions rapidly by pointing or gesturing

• Need incremental and reversible control

• Need immediate display feedback

• No complex syntax

• Minimize computer concepts

• The VR should contain representations for objects and actions, eg a tool to change the shape of windows, as well as the windows.

• Designers should gain knowledge of cognitive psychology and human perception, so as to give feelings such as depth and movement realistically.

Table 5-9Guidelines for virtual reality:

BIT 2305: Slide 54


• The VR should contain representations for objects and actions, eg a tool to change the shape of windows, as well as the windows.

• Designers should gain knowledge of cognitive psychology and human perception, so as to give feelings such as depth and movement realistically.

Date post:	14-Nov-2014
Category:	Documents
Upload:	marvin-njenga
View:	119 times
Download:	8 times

BIT 2305 Lecture 2b Interaction Stlyes

Documents