What is Interaction Frameworks and Styles ?

Today’s Lecture Outlines

Interaction
Models of Interactionn
Ergonomics
Physical aspects of interfaces
Industrial interfaces
Common Interaction Styles
Command line interface menus
Natural language
Question/answer and query dialogue
Form-fills and spreadsheets
WIMP Interface

What is Interaction?

It's is Communication.

Models of Interaction

Terms of interaction

Norman model

Interaction framework

Some Terms of Interaction

domain – the study topics

e.g. graphic design

goal – what you want to achieve

e.g. create a solid red triangle

task – how you go about doing it

– ultimately in terms of actions

e.g. … select fill tool, click over triangle

Note …

traditional interaction …

use of terms differs a lot especially task/goal !

Donald Norman’s Model

Norman’s model concentrates on user’s view of the

interface

Using Norman’s Model

Some systems are harder to use than others

Gulf of Execution

user’s formulation of actions

≠ actions allowed by the system

Gulf of Evaluation

user’s expectation of changed system state

≠ actual presentation of this state

Abowd and Beale Framework

extension of Norman…

User uses task language, system uses system language.

their interaction framework has 4 parts

 user

 input

 system

 output

each has its own unique language

interaction  translation between languages

errors in interaction = errors in translation

Using Abowd & Beale’s Model

user intentions

 Translated into actions at the interface

 Translated into alterations of system state

 Reflected in the output display

 Interpreted by the user

General framework for understanding interaction

Not restricted to electronic computer systems

Identifies all major components involved in interaction

Allows comparative assessment of systems

An abstraction

HCI and Frameworks

Ergonomics

Physical aspects of interfaces

Industrial interfaces

Ergonomics

 Study of the physical characteristics of interaction

 Human factors is another name, but this can also refer to a lot of HCI!

 Ergonomics good at defining standards and guidelines for constraining the way

we design certain aspects of systems

Physical Aspects of Interfaces

arrangement of controls and displays

controls grouped according to function or frequency of

use, or sequentially

surrounding environment

seating arrangements that can accommodate users of all sizes

health issues

physical position, environmental conditions

(temperature, humidity), lighting, noise,

use of colour

use of red colour for warning, we can use green color for alright okay option,

awareness of colour-blindness etc.

Industrial Interfaces

Office interface vs. industrial interface?

Context matters!

office industrial

type of data textualnumeric

rate of change slow fast

environment clean dirty

… the oil soaked mouse

Interaction Styles

dialogue … computer and user

distinct styles of interaction

Common Interaction Styles

command line interface

menus

natural language

question/answer and query dialogue

form-fills and spreadsheets

WIMP

point and click

three–dimensional interfaces

Command line interface

Way of expressing instructions to the computer

directly

function keys, single characters, short abbreviations,

whole words, or a combination

suitable for repetitive tasks

better for expert users than novices

offers direct access to system functionality

command names/abbreviations should be meaningful!

Examples : the Unix system, DOS system , Telnet system

Menus

Set of options displayed on the screen

"Visible choices" less memory and easier use rely on recognition, so names ought to have significance

numbers, letters, arrow keys, mouse

combination (e.g. mouse plus accelerators)

Often options hierarchically grouped

sensible grouping is needed

Natural language

Familiar to user

speech recognition or typed natural language

Problems

vague

ambiguous

hard to do well!

Solutions

try to understand a subset

pick on key words

Query Interfaces

Question/answer interfaces

Set of options displayed on the screen

user-driven interaction through a series of questions suitable for inexperienced users with limited functionality

often used in information

systems

Query Interfaces

Query languages (e.g. SQL)

used to retrieve information from database

requires understanding of database structure and

language syntax, hence requires some expertise

Select from Employee

Where Salary > 30,000

Form-fills

primarily for the purpose of data entry or retrieval

Screen like paper form.

Data put in relevant place

Requires

good design

obvious correction

facilities

Spreadsheets

first was the spreadsheet VISICALC, then Lotus 1-2-3. Today, MS Excel is most used. sophisticated form-filling variant. Each cell in the grid has a value or a formula. The values of other cells can be included in a formula. e.g., the total of all the cells in this column Data can be entered and edited by the user, and the spreadsheet stays consistent.

WIMP Interface

Windows

Icons

Menus

Pointers

… or icons, pull-down menus, windows, and mice!

default style for majority of interactive computer systems,

especially PCs and desktop machines

Point and Click Interfaces

used in ..

multimedia

web browsers

hypertext

just click something!

icons sign, text links or location on Google maps

minimal typing

Three Dimensional Interfaces

virtual reality

‘ordinary’ window systems

highlighting

visual affordance

indiscriminate use

just confusing!

3D workspaces

use for extra virtual space

light and occlusion give depth

distance effects

Elements of the WIMP Interface

windows, icons, menus, pointers

buttons, toolbars,

palettes, dialog boxes

Windows

portions of the display that behave as though they were independent

can include text or images can be resized or moved. can be laid out, or they can overlap and obscure one another. adjacent to each other (tiled)

Menus

Choice of operations or services offered on the screen

Required option selected with pointer

Kinds of Menus

Menu Bar at top of screen (normally), menu drags

down

Pull-down menu: hold down mouse button and drag menu Drop-down menu that appears when clicked Fall-down menus—the mouse simply crosses the bar! Wherever you are, a context menu appears. pop-up menus - actions for selected object

pie menus, laid out in a circle. easier to choose (a bigger target area) faster (the same distance from each option) ... but aren't used much!