L.F.M.I. 2014

1

INTERACTION DESIGN

- QUICK TOUR -

L.F.M.I. 2014

GOOD AND BAD DESIGN

Old Design

2

L.F.M.I. 2014

WHAT TO DESIGN?

•Need to take into account:

•Who the users are

•What activities are being carried out

•Where the interaction is taking place

• Need to optimize the interactions users have with a product

• So that they match the users’ activities and needs

3

L.F.M.I. 2014

WHAT IS INTERACTION DESIGN?• Designing interactive products to support the way people communicate and interact in their

everyday and working lives

Sharp, rogers and preece (2011)

WHAT IS HCI?• Human-computer interaction is a discipline concerned with the design, evaluation and

implementation of interactive computing systems for human use and with the study of major phenomena surrounding them.

(ACM SIGCHI, 1992, p.6)

4

L.F.M.I. 2014

GOALS OF INTERACTION DESIGN

• Develop usable products

• Increase user experience

• Design practices contributing to id:

Graphic design

Product design

Artist-design

Industrial design

Film industry

5

L.F.M.I. 2014

RELATIONSHIP BETWEEN ID, HCI & OTHER FIELD

• Interdisciplinary fields in interaction design:

• HCI

• Ubiquitous computing

• Human factors

• Cognitive engineering

• Cognitive ergonomics

• Computer supported co-operative work

• Information systems

6

L.F.M.I. 2014

WHAT DO PROFESSIONAL DO IN THE ID BUSINESS?

• Interaction designers - people involved in the design of all the interactive aspects of a product

• Usability engineers - people who focus on evaluating products, using usability methods and principles

• Web designers - people who develop and create the visual design of websites, such as layouts

• Information architects - people who come up with ideas of how to plan and structure interactive products

• User experience designers (UX) - people who do all the above but who may also carry out field studies to inform the design of products

7

L.F.M.I. 2014

8

HUMAN AS A USER- QUICK TOUR -

L.F.M.I. 2014

WHAT IS COGNITION?• It involves cognitive processes, like thinking, remembering, learning, daydreaming, decision

making, seeing, reading, writing and talking.

• Core cognitive aspects

• Attention

• Perception and recognition

• Memory

• Learning

• Reading, speaking and listening

• Problem-solving, planning, reasoning and decision-making

Most relevant to IDx

9

L.F.M.I. 2014

USER MODELS

• Interaction

• Important to study the cognitive activity

• What users can or cannot do!

• Helps identify and explain problems

• Cognitive user models explain

• Observed human behaviour

• Predict human performance

10

L.F.M.I. 2014

COGNITIVE MODEL : GOMS• Goals

What a user wants to achieve

• Operations

Basic actions which user has to perform to use the system

• Methods

Methods available to perform task

Consist of a series of steps of operations

• Selection rules

Used to decide upon which method to do specific task

Attempts to predict which method will be used by a user11

L.F.M.I. 2014

EXERCISE

•How would you go about closing a window? In that case that you’re playing a game in a full screen window is it different (assuming the game exit is not working)?

12

L.F.M.I. 2014

ANSWERElement Description

Goal Closing a window when game exit is not workingOperation Use MENU method

Use CTRL+W methodMethod USE-MENU-METHOD

. MOVE-MOUSE-TO-FILE-MENU . PULL-DOWN-FILE-MENU . CLI CK – OVER- CLOSE-OPTION USE- C TRL-W- METHOD . PRESS – CONTROL – W- KEYS

Rule Rule 1: Select USE-MENU-METHOD unless another rule applies Rule 2: If the application is GAME, select C TRL-W- METHOD

13

L.F.M.I. 2014

MENTAL MODELS• Users develop an understanding of a system through learning and using it.

CONCEPTUAL MODELS• Need to first think about how the system will appear to users (i.e. how they will understand it)

• Enables “designers to straighten out their thinking before they start laying out their widgets” (p. 28)

• Provides a working strategy and a framework of general concepts and their interrelations

14

L.F.M.I. 2014

15

INTERACTIVE

TECHNOLOGIES- QUICK TOUR -

L.F.M.I. 2014

INPUT DEVICE

• PURPOSE :

ENTERING DATA INTO A COMPUTER SYSTEM

ISSUING INSTRUCTIONS (COMMAND) TO A COMPUTER

TRANSFORMS DATA FROM THE USER INTO A FORM THAT A COMPUTER SYSTEM CAN PROCESS

Input device

categories

Keys and button

Pointing devices

Audio – voice/speech

Visual (camera & scanner)

16

L.F.M.I. 2014

TEXT ENTRY DEVICES

Keyboard : QWERTY Keyboard : DVORAK Ergonomic Keyboard

17

L.F.M.I. 2014

TEXT ENTRY DEVICES – ERGONOMIC KEYBOARD

18

L.F.M.I. 2014

HANDWRITING RECOGNITION• Text can be input into the computer, using a pen and a digesting tablet (eg: PDA & tablet with

stylus)

SPEECH RECOGNITION• Most successful when:

• single user – initial training and learns peculiarities

• limited vocabulary systems

• Problems with• external noise interfering• imprecision of pronunciation• large vocabularies• different speakers

19

L.F.M.I. 2014

POINTING DEVICES• Control the movement of the cursor on a display screen.

• Six interaction tasks can be performed by pointing or manipulation devices:

Select (point and click)

Position (drag and click)

Orient (rotate)

Path (indicate path; position & orient combined)

Quantify (indicate exact spot)

Text (set insertion point for text)

20

L.F.M.I. 2014

POINTING DEVICES

DIRECT

• Light pen

• Touch screen

• Stylus

INDIRECT

• Mouse

• Trackball

• Joystick

• Graphic tablet

• Touchpad

21

L.F.M.I. 2014

A NEW IDEA

22

L.F.M.I. 2014

CHOOSING DEVICES

• Match physiological & psychological characteristics

• Appropriate for task

• Suitable for the work & environment

• Left and/or right handed

• All kinds of special needs, from slight long sight to severe motor/visual/ cognitive disability

23

L.F.M.I. 2014

ALTERNATIVES

Brain activity input - this neural network system distinguishes 5 brain patterns - for up, down, L, R & click

Gaze input - via reflections of laser beam aimed at retina. Here with pointing via data glove

24

L.F.M.I. 2014

DISPLAY TECHNOLOGY

• Monochrome displays

• RGB shadow-mask displays

• Raster-scan cathode-ray tube (CRT)

• Liquid-crystal displays (lcds) • Plasma panel • Light-emitting diodes (leds) • Electronic ink• Braille displays

25

L.F.M.I. 2014

GAME CONSOLE

26