hci [6]interaction design

42
Interaction Design HCI course Hurriyatul Fitriyah

Upload: welly-dian-astika

Post on 26-Jun-2015

142 views

Category:

Education


0 download

DESCRIPTION

Human Computer Interaction

TRANSCRIPT

Page 1: Hci [6]interaction design

Interaction

Design HCI course

Hurriyatul Fitriyah

Page 2: Hci [6]interaction design

overview Interaction design is about creating intervention in

complex situation using technology of many

components; including PC software, the web and

physical devices

Page 3: Hci [6]interaction design

Interaction VS Product It is not about the product/ artifact, but about

understanding and choosing how it is going to affect

the way people do/ work

Page 4: Hci [6]interaction design

1. The design

Page 5: Hci [6]interaction design

What is Design?

A simple definition is:

achieving GOALS within CONSTRAINTS

o Goals: what is the purpose of the design we are intending to produce? Who is it for?

o Constraints: what materials must we use? What standard must we adopt? How mch can it cost? How much time do we have to develop it? Are there health and safety issue?

Page 6: Hci [6]interaction design

Design is a trade-off

Choosing which goals or constraints can

be downgraded so that others can be

met

Accepting limitation of human and of

design

The best design are where the designer

understand the trade-off and the factors

affecting them

Page 7: Hci [6]interaction design

Golden rule of design

Understand your materials

In HCI, the materials is obviously

1. The human

(psycological, social, human error)

2. The computer

(Limitations, capacity, tools, platforms)

Page 8: Hci [6]interaction design

To err is human

People make mistake, slips, error,

omissions

But people are remarkably adaptable

As a designer you can give better training

and documentation, but the product and

its interaction design you created is the

most important

Page 9: Hci [6]interaction design

2. The Process of Design

Page 10: Hci [6]interaction design

A never ending iterative

stages (never complete)

Page 11: Hci [6]interaction design

a. Interaction Starts with?

It starts with getting to know the users and

their context (Requirement – what is

wanted):

What is needed by users?

Find out who they are? What they like?

Page 12: Hci [6]interaction design

b. Analysis

The results of observation and interview

need to be ordered in some way to bring

out key issues and communicate with

later stages of design

Including task analysis

c. Design

A step to transfer what you want into how to do it

Page 13: Hci [6]interaction design

d. Iteration and prototyping

Most of the time, we don’t get the design

right at the first time

Comprise design evaluation

e. Implementation and Deployment

When the designer happy with their product, then it is time to create it

Page 14: Hci [6]interaction design

Your time is limited!

You can’t trapped in design cycle for like

ever!!

there is a trade-off between the length of

the design period and the quality of the

final design

the real problem is not to find faults,

instead the issue is: which usability

problems is it worth fixing?

Page 15: Hci [6]interaction design

3. User focus Know them!

Page 16: Hci [6]interaction design

How do you get to know them?

Who are they? Young or old? Experienced or newbie? It’s harder to design

generic computer system

Probably NOT like you! Obvious for you, but most of the time not for the user

Talk to them! Ask them about what really happen and needed; using

structured interview, open-ended duscussion, or ask them to join the design process

Watch them! Sherlock Holmes’s Quote: “You see, but you do not observe!”

Use you imagination! If I were my User, then?

Page 17: Hci [6]interaction design

4. Scenarios

Page 18: Hci [6]interaction design

Scenarios

Rich story of information

can be used and reused throughout

design

Help us see what users will want to do

Give us step-by-step walkthrough of users’

interaction; including what they see, do

and are thinking

Example: if user do this then computer do

what? Then the user have to do what? etc

Page 19: Hci [6]interaction design

Scenarios also can be used to:

Communicate with others (designer

colleagues, clients or even users)

Validated againts other models

Express dynamics

Page 20: Hci [6]interaction design

5. Navigation Design HCI is a socio-technical intervention

Page 21: Hci [6]interaction design

Socio-technical intervention

Computer-user interact at several levels:

1. Widgets (menus, buttons)

2. Screen or window (grouping of button)

3. Navigation within the application

4. Environment; connect with other device-

application

Page 22: Hci [6]interaction design

Start considering structure with:

Who is going to use the application?

How do they think

What will they do with it

Page 23: Hci [6]interaction design

Thinking about structure

1. Local structure

Looking from one screen or page out

Goalk seeking behaviour

Page 24: Hci [6]interaction design

The screen, web page or device displays

should make clear where you are in terms

of the interactionn

Knowing where you are

what you can do

knowing where you are going or what will

happen

where you have been or what you have

done

Page 25: Hci [6]interaction design

2. Global structure –

hierarcical organtization Structure of site, movement between screen

The hierarcy links screen, pages, or states in logical grouping

Example: a PC application on the web

Page 26: Hci [6]interaction design

3. Global structure – dialog In HCI, the word ‘dialog’ is used to refer to

flow of screen

It give pattern of interaction

A simple way is to use a network diagram showing the principal states or screen linked tigether with arrows; this can show:

What leads to what

Show what happens when

Include branches and loops

Be more task oriented that a hierarcy

Page 27: Hci [6]interaction design

Network diagram ilustrating the main

screen for adding or deleting a user

Page 28: Hci [6]interaction design

5. Screen Design and

Layout How we put the different element together in an

interactive application

Page 29: Hci [6]interaction design

Basic principle at Screen level

Ask What is the user doing?

Think What information is required? What

comparisons may the user need to make?

In what order are things likely to be

needed?

Design Form follows function: let the

required interactions drive the layout

Page 30: Hci [6]interaction design

a. Tools for layout

Grouping & structure: If things logically

belong together, then we should normally

physically group them together

Order of group and items

Decoration : decorative feature that helps

to distinct each group and item, e.g. Font

style, font type, color, line, boxes

Page 31: Hci [6]interaction design

Example:

control panel

Page 32: Hci [6]interaction design

Alignment:

White space:

Page 33: Hci [6]interaction design

b. User action and control

Entering information: form-based

interface adn dialog boxes

Passive and active element on screen

Affordance: how user know where to

click? It’s about psychologic on the

elements’ shape, colour and other

atribute

Page 34: Hci [6]interaction design

c. Appropriate appearance

Afford different presentation that allow

users to select totheir convenient

Page 35: Hci [6]interaction design

Aesthetic and utility: Remember that a

pretty interface is not necessarily a good

interface, it just need to be well-designed

Color and 3D interface: just don’t too

much

Localization vs internationalization: adjust

language, sign, symbol to segmented

user

Page 36: Hci [6]interaction design

Users need to find their way around a

system, this involves:

Helping users know who they are, where

they have been, and what they can do

next

Creating overall structures that are easy to

understand and fit the users’ needs

Desinging comprehensible screen and

control panels

Page 37: Hci [6]interaction design

6. Iteration and

Prototyping

Page 38: Hci [6]interaction design

Complexity of Design

It means we don’t get it right the first time

Theory and models can help give good

start points

Page 39: Hci [6]interaction design

Formative evaluation

Intended to improve the design

Summative evaluation

To verify whether the product is good

enough

The result of evaluating the system will

usually be a list of faults or problems

This is followed by redesign exercise

Page 40: Hci [6]interaction design

Role of prototyping

So, we need iterations and prototype to try out and

evaluate

Page 41: Hci [6]interaction design

But iteration can get trapped having no

simple improvement, but are not good

Page 42: Hci [6]interaction design

Two things you needed in

order for prototyping:

1. To understand what is wrong and how to

improve

2. A good start point