5/21/2018 C5_Design

1/128

Human - Computer Interaction

Thit K H Tng Tc

Msc. Nguyn Minh Hainguyenmhai1984@gmail.com

5/21/2018 C5_Design

2/128

Table of Content

Gii thiu chung

c t yu cu v phn tch nhim v

Thit k tng tc ngi dng my tnh

Kim th tnh tin dng v nh gi h thng

Qun l h thng tng tc

5/21/2018 C5_Design

3/128

Gii thiu chung

Thit k l g ? Th no l mt thit k tt v mt thit k ti Cc nguyn tc cho tnh dng c (usability

principles)Quy trnh thit k phn mm Thit k tng tc l g ?Quy trnh thit k h tng tc

Cc m thc thit k (paradigms)

5/21/2018 C5_Design

4/128

Thit k l g ?

Design is achieving goals with constraints Goals: Mc ch thit k to ra sn phm Sn phm cho i tng no Ti sao h li mun s dng n

Contraints

Phi s dng cc thit b g ? Cc chun m ta phi tun theo l g ? Gi thnh

Thi gian pht trin nh hng n sc khe, an ton

Trade-off

La chn gia mc ch v cc rng buc lm tt nhtnhim v t ra

5/21/2018 C5_Design

5/128

Thit k l g ?

Thit k ti c mt khp mi ni

5/21/2018 C5_Design

6/128

Trong mt phng ngh H Lan

5/21/2018 C5_Design

7/128

Gim m thanh TV ca bn

5/21/2018 C5_Design

8/128

Robinet

5/21/2018 C5_Design

9/128

Th thoi (voice mail)

5/21/2018 C5_Design

10/128

Hy k mt s v d v thit kti

5/21/2018 C5_Design

11/128

Marble answering machine

Do Durrell Bipshop cu sinh vin cao hctrng Royal College of

Art in London thit k

L mt v d u tin vthit k tng tc trong

n c s kt ni haith gii vt l v thgii S

5/21/2018 C5_Design

12/128

Marble answering machine

Cc tin nhn c lu tr

5/21/2018 C5_Design

13/128

Marble answering machine

Ngi dng c th ty la chn tin nhn nghe theo th t bt k

5/21/2018 C5_Design

14/128

Marble answering machine

Ngi dng phn loi cc tin nhn gi ti h.

5/21/2018 C5_Design

15/128

Marble answering machine

Ngi dng gi li ngi li li nhn

5/21/2018 C5_Design

16/128

Marble answering machine

Marble answering machine c g tt ?

5/21/2018 C5_Design

17/128

Tractors

Early design

Terrain unsurfaced and rough hilly

Farmer works long hours

works quickly

narrow front

wheel base

Ima es from www.co.lawrence.tn.us and www.uni-ma debur .de

high center

of gravity

5/21/2018 C5_Design

18/128

Tractors

Result

Quotes from National AG Safety Database

older tractorshave narrow front ends that areeasily upset

tractor upsets cause more fatalities than other farmaccidents

injuries often include a broken or crushed pelvis.Accident ima e from //www.osh.dol. ovt.nz/

5/21/2018 C5_Design

19/128

Tractors

Used to be called drivers error

But

accidents less frequent as modern designs have

roll cage

low center of gravity

wider wheel bases

Tractor from www.historylink101.com

5/21/2018 C5_Design

20/128

So what does this teach us?

Lesson 1 many failures of human-machine system result from

designs that dont recognize peoples capabilities andfallibilities

This leads to apparent machine misuse and humanerror

Lesson 2

good design always accounts for human capabilities.

How you can train yourself

look for examples of human error critique them for possible design error propose designs that limit / remove these errors

5/21/2018 C5_Design

21/128

Psychopathology of everydaythings

Typical frustrations The engineer who founded DEC confessed at the

annual meeting that he cant figure out how to heata cup of coffee in the companys microwave oven

How many of you can program or useall aspects of your

digital watch?

VCR? sewing machine?washer and dryer? stereo system cell phones?

Slide idea from Donald Norman

5/21/2018 C5_Design

22/128

Remote Controls

The phone rings hit pause

Slide idea from Jacob Nielsen Alertbox March 15, 2004

Pioneer DVD Remote

5/21/2018 C5_Design

23/128

Remote Controls

The phone rings hit pause

Why is it easier?

big button easier to hit (Fitts Law) visually distinctive (color)

reasonably different from other buttons

shape and central position means its easy tofind by feel in zero light conditions

TiVo designed for usability

part of early product development

Slide idea from Jacob Nielsen Alertbox March 15, 2004

TiVo DVR Remote

5/21/2018 C5_Design

24/128

Remote Controls

But of course Ill just learn it quickly

cable box digital video recorder DVD television audio amplifier VCR

six remote controls required to operate a modest home theaterPhoto + caption from Jacob Nielsens Alertbox June 7, 2004

5/21/2018 C5_Design

25/128

Still more pathological examples

Modern telephone systems standard number pad

two additional buttons * and #

Problem many hidden functions

operations and outcome completely invisible

*72+number = call forwardcan I remember that combination? if I enter it, how do I know it caught?how can I remember if my phone is still forwarded?

Ok, Ill read the manualbut what does call parkmean? what's a link?where is that manual anyway?

Phone operation for the University of Calgary phone system

5/21/2018 C5_Design

26/128

Still more pathological examples

VCRs, camcorders, fax machines, ... most people learn only basic functions

most functionality goes untouched

12:00

01 02 03 04

05 06 07 08

13 14 15 16

09 10 11 12

memorytrans

delayedtrans

delayedpolling polling

confd

transrelay

broadca report

+ D.T. Tone

space clear

1 2 3

4 5 6

7 8 9

* 0 #

R

Pause

HOLD

CODED DIAL/DIRECTORY

V ^

< >

PRINTER

ON LINE

PRINTER ERROR

HS HQ

PRINT MODE

SHQ

PRINTER

INTERFACE

Canon

Fax-B320

Bubble Jet Facsimile

5/21/2018 C5_Design

27/128

Whats the altitude?

Early days (< 1000):only one needleneeded

0

9 1

2

3

46

7

8

5

As ceilings increased over1000

small needle added

< 10,000

> 10,000

As they increased beyond10,000

box indicated 10,000increment through colorchange

Slide ideas from David Hill

5/21/2018 C5_Design

28/128

Tape altimeter

Human factors test showed:

eliminated reading errors

was faster to read

But not in standard use!Why?

14000

15000

16000

17000

18000

900

000

100

200

300

400

500

600

reference

line

independentmovement

Slide ideas from David Hill

5/21/2018 C5_Design

29/128

Useful but

5/21/2018 C5_Design

30/128

Useful but

5/21/2018 C5_Design

31/128

Useful but

5/21/2018 C5_Design

32/128

Useful but

5/21/2018 C5_Design

33/128

Useful but

5/21/2018 C5_Design

34/128

Useful but

5/21/2018 C5_Design

35/128

Useful but

5/21/2018 C5_Design

36/128

Design of everyday things

Summary so far: many so-called human errors are actually errors in design

human factors became important as human performance limitationsreached when handling complex machinery

You will soon know these important concepts for designingeveryday things perceived affordances

causality

visible constraints

mapping

transfer effects

idioms & population stereotypes

conceptual models

individual differences

why design is hard

5/21/2018 C5_Design

37/128

Perceived Affordance

The perceived properties of the object thatsuggest how one could use it

Many concepts in this section are adapted from Don Normans book: The Design of Everyday Things

chairs are for sittingtable for placing things on

knobs are for turning

buttons are

for pressing

slots are for inserting

handles are for turning

computer forswitch for toggling

5/21/2018 C5_Design

38/128

Perceived Affordances

Product design perceived affordances:

design invites people to take possible actions

actual affordances:

the actual actionable properties of the product

Problems occur when

these are not the same,

peoples perceptions are not what thedesigner expects

In-depth discussion available at www.jnd.org/dn.mss/affordances-and-design.html

5/21/2018 C5_Design

39/128

Perceived Affordances

Handles for lifting

Mirrors for not touching

Knobs for turning

Surface for placing transparencies

5/21/2018 C5_Design

40/128

Perceived Affordance Problems

Handles for liftingbends frame, focus distorted

Mirrors for not touchingpeople dont reposition image

Surface for placing transparencieswhich way is up?

Knobs for turningfocus or image position?

what about this?

5/21/2018 C5_Design

41/128

Perceived Affordances

GUI design perception only through visuals

designer creates appropriate visual affordances via

familiar idioms

metaphors

5/21/2018 C5_Design

42/128

Perceived Affordances

sliders for

sliding

dials forturning

music console

for controlling

music

5/21/2018 C5_Design

43/128

Perceived Affordance Problems

are these

buttons?

is this equalizer control atoggle or button?

button for pressing,but action unknown

5/21/2018 C5_Design

44/128

Perceived Affordance Problems

A button is for pressing,

but what does it do?Is this a

graphic or a

control?

text is for editing, but it doesnt do it.

Visual affordances for

window controls are missing!

IBM Real Phone

5/21/2018 C5_Design

45/128

Perceived Affordance Problems

IBM Real Phone

5/21/2018 C5_Design

46/128

Perceived Affordance Problems

Handles are for lifting,but these are for scrolling!

Complex things may need explaining butsimple things should not

when simple things need labels & instructions, then design has failed

AudioRack 32, a multimedia applicaiton

5/21/2018 C5_Design

47/128

Visible Constraints

Limitations of the actions possible perceived fromobjects appearance provides people with a range of usage possibilities

Push or pull? Which side? Can only push,side to push clearly visible

5/21/2018 C5_Design

48/128

Which side do you use for cutting?

Photograph courtesy of www.baddesigns.com

Vi ibl t i t E t i

5/21/2018 C5_Design

49/128

Visible constraints: Entering aDate

The more constraints, the less opportunity forerror

particularly important for managing user input

Controls constructed in Visual Basic

5/21/2018 C5_Design

50/128

5/21/2018 C5_Design

51/128

5/21/2018 C5_Design

52/128

Mapping

The set of possible relations between objects

Control-display compatibility

the natural relationship between controls and

displays e.g., visual mapping of stove controls to elements

back

right

front

left

back

left

front

right

24 possibilities, requires:-visible labels + memory

arbitrary

back front front back

2 possibilities per side=4 total possibilities

paired full mapping

5/21/2018 C5_Design

53/128

Mapping

Control-display compatibility mimic diagrams for feedback / control imitates

physical layout

5/21/2018 C5_Design

54/128

Mapping

Control-display compatibility cause and effect

steering wheel-turn left, car turns left

scroll bar scroll downviewport goes down

5/21/2018 C5_Design

55/128

Mapping

Palette controls and active objects

Only controls that can

operate on a picture are

fully visible

Selected picture

Others are grayed out

5/21/2018 C5_Design

56/128

Depressed button

indicates current

mapped item

Cursor re-enforces

selection of current

item

Microsoft Paint

Mapping

Action feedback

5/21/2018 C5_Design

57/128

Mapping Problems

Photograph courtesy of www.baddesigns.com

Move cabinet

Mapping:suggests itshould openthe drawer but doesnt

Affordance:handle is for pulling

Quick, open the top drawer

5/21/2018 C5_Design

58/128

Mapping Problems

Photograph courtesy of www.baddesigns.com

Mappingambiguous

Where do you plug in the mouse?

5/21/2018 C5_Design

59/128

Causality

the thing that happens right after an action isassumed by people to be caused by that action

interpretation of feedback

false causality

incorrect effect invoking unfamiliar function just as computer hangs

causes superstitious behaviors

invisible effectcommand with no apparent result often re-entered

repeatedly

e.g., mouse click to raise menu on unresponsive system

5/21/2018 C5_Design

60/128

LViewPro

Causality Problems

Effects visible only after Exec button is pressed Ok does nothing!

awkward to find appropriate color level

5/21/2018 C5_Design

61/128

Transfer Effects

People transfer their learning/expectations ofsimilar objects to the current objects

positive transfer: previous learning's also apply to newsituation

negative transfer: previous learning's conflict with thenew situation

5/21/2018 C5_Design

62/128

5/21/2018 C5_Design

63/128

Transfer Effect Problems

Photograph courtesy of www.baddesigns.com

A Restaurant in Santa Barbara

5/21/2018 C5_Design

64/128

Transfer Effect Problems

How does knowing MSPaint help you in Photoshop? e.g. rectangular control

Idioms and Population

5/21/2018 C5_Design

65/128

Idioms and PopulationStereotypes

Interface idioms: standard interface features we learnt, use and remember

Idioms may define arbitrary behaviours red means danger

green means safe

Population stereotypes: Idioms vary in different cultures Light switches

America: down is off Britain: down is on

Faucets America: anti-clockwise on Britain: anti-clockwise off

Idioms and Population

http://images.google.ca/imgres?imgurl=http://www.kidsquartersonline.com/singl%2520wall%2520hangings/70500%2520traffic%2520light.JPG&imgrefurl=http://www.kidsquartersonline.com/DD%2520road_work.htm&h=319&w=235&sz=19&tbnid=OlaJS0V5uywJ:&tbnh=112&tbnw=83&start=23&prev=/images%3Fq%3DTraffic%2Blight%26start%3D20%26hl%3Den%26lr%3D%26ie%3DUTF-8%26sa%3DNhttp://images.google.ca/imgres?imgurl=http://www.kidsquartersonline.com/singl%2520wall%2520hangings/70500%2520traffic%2520light.JPG&imgrefurl=http://www.kidsquartersonline.com/DD%2520road_work.htm&h=319&w=235&sz=19&tbnid=OlaJS0V5uywJ:&tbnh=112&tbnw=83&start=23&prev=/images%3Fq%3DTraffic%2Blight%26start%3D20%26hl%3Den%26lr%3D%26ie%3DUTF-8%26sa%3DN

5/21/2018 C5_Design

66/128

Idioms and PopulationStereotypes

Ignoring/changing idioms? home handyman

light switches installed upside down

calculators vs. phone number padswhich did computer keypads follow and why?

Difficulty of changing stereotypes

Qwerty keyboard: designed to prevent jamming ofkeyboard

Dvorak keyboard (30s): provably faster to use

Images from www.atarimagazines.com/v5n11/dvorakkeyboard.html

5/21/2018 C5_Design

67/128

Cultural associations

A Mac user finds a Windows system onlysomewhat familiar

Apple MacPaint and Microsoft Paint

5/21/2018 C5_Design

68/128

Conceptual model

People have mental models of how things work, builtfrom

affordances

causality

constraints

mapping

positive transfer

population stereotypes/cultural standards

instructions

interactions

models allow people to mentally simulate operation ofdevice

models may be wrong

particularly if above attributes are misleading

5/21/2018 C5_Design

69/128

Donald Norman Design of Everyday Things, Basic Books

5/21/2018 C5_Design

70/128

Donald Norman Design of Everyday Things, Basic Books

d l i

5/21/2018 C5_Design

71/128

Good example: Scissors

affordances: holes for something to be inserted

constraints: big hole for several fingers, small hole for thumb

mapping: between holes and fingers suggested and constrained by appearance

positive transfer and cultural idioms learnt when young

constant mechanism

conceptual model: implications clear of how the operating parts work

d l i i l h

5/21/2018 C5_Design

72/128

Bad example: Digital watch

affordances: four push buttons to push, but not clear what they will do

constraints and mapping unknown no visible relation between buttons, possible actions and end result

transfer of training little relation to analog watches

cultural idiom somewhat standardized core controls and functions

but still highly variable

conceptual model: must be learnt

Designing a good conceptual

5/21/2018 C5_Design

73/128

Designing a good conceptualmodel

communicate model through visual image visible affordances, mappings, and constraints

visible causality of interactions

cultural idioms, transfer

instructions augments visuals

all work together to remind a person of what canbe done and how to do it Design

Model

Designer

User's model

User

System

System

image

5/21/2018 C5_Design

74/128

Who do you design for?

5/21/2018 C5_Design

75/128

Who do you design for?

Wh d d i f ?

5/21/2018 C5_Design

76/128

Who do you design for?

People are different It is rarely possible to accommodate all people perfectly design often a compromise

ceiling height: 8 but tallest man: 8' 11"!

Rule of thumb: cater to 95% of audience (5th or 95th percentile)

but means 5% of population may be (seriously!) compromised

designing for the average a mistake

may exclude half the audience

Examples: cars and height: headroom, seat size

computers and visibility:

font size, line thickness, color for color-blind people?

5/21/2018 C5_Design

77/128

Mean and

50th percentile

Proverbs on individual

5/21/2018 C5_Design

78/128

o e bs o d duadifferences

You do notnecessarily represent a good averageuser of equipment or systems you design

Do not expect others to think and behave as you

do, or as you might like them to.

People vary in thought and behaviour just asthey do physically

Wh d d i f ?

5/21/2018 C5_Design

79/128

Who do you design for?

novices walk up and use systemsinterface affords restricted set of tasks

introductory tutorials to more complex uses

casual standard idioms

recognition (visual affordances) over recallreference guidesinterface affords basic task structure

intermediate advanced idiomscomplex controlsreminders and tips

interface affords advanced tasks

expert shortcuts for power useinterface affords full task + task customization

most shrink-

wrapped

systems

most kiosk +internet

systems

custom

software

Wh d i i h d

5/21/2018 C5_Design

80/128

Why design is hard

Over the last century

the number of things to control has increaseddramatically

car radio: AM, FM1, FM2, 5 pre-sets, station selection,balance, fader, bass, treble, distance, mono/stereo,dolby, tape eject, fast forward and reverse, etc (whiledriving at night!)

display is increasingly artificial

red lights in car indicate problems vs flames for fire

feedback more complex, subtle, and less natural

is your digital watch alarm on and set correctly?

Why design is hard

5/21/2018 C5_Design

81/128

Why design is hard

Marketplace pressures

adding functionality (complexity) now easy andcheap

computers

adding controls/feedback expensive

physical buttons on calculator, microwave ovenwidgets consume screen real estate

design usually requires several iterations beforesuccess

product pulled if not immediately successful

Why design is hard

5/21/2018 C5_Design

82/128

Why design is hard

People consider cost and appearance over design bad design not always visible

people tend to blame themselves when errors occur

I was never very good with machines I knew I should have read the manual! Look at what I did! Do I feel stupid!

eg the new wave of cheap telephones:

accidentally hangs up when button hit with chinbad audio feedback cheap pushbuttonsmis-dials common trendy designs that are uncomfortable to hold

hangs up when dropped

Human factors in computing

5/21/2018 C5_Design

83/128

p gsystems

What does this do?

computers far more complex to control than everyday devices general purpose computer contains no natural conceptual model completely up to the designer to craft a conceptual model

What you now know

5/21/2018 C5_Design

84/128

What you now know

Many human errors are actually errors in design dont blame the user!

Designers help by providing a good conceptual model affordances

causality constraints

mapping

positive transfer

population stereotypes and idioms

Design to accommodate individual differences decide on the range of users

Design is difficult for reasons that go beyond design

Interface Design and Usability Engineering

5/21/2018 C5_Design

85/128

Articulate:

who users are

their key tasks

User andtaskdescriptions

Goals:

Methods:

Products:

Brainstormdesigns

Taskcenteredsystemdesign

Participatorydesign

User-centereddesign

Evaluatetasks

Psychology ofeverydaythings

Userinvolvement

Representation& metaphors

low fidelityprototypingmethods

Throw-awaypaperprototypes

Participatoryinteraction

Task scenariowalk-through

Refineddesigns

Graphicalscreendesign

Interfaceguidelines

Styleguides

high fidelityprototyping

methods

Testableprototypes

Usabilitytesting

Heuristicevaluation

Completeddesigns

Alpha/betasystems orcompletespecification

Fieldtesting

Tnh dng c

5/21/2018 C5_Design

86/128

Tnh dng c

Mt thit k tt cn m bo tnhdng c

Nguyn tc ca tnh dng c

5/21/2018 C5_Design

87/128

Nguyn tc ca tnh dng c

[Nielson-1993] Tnh hiu qu Tnh d hc Tnh d nh

Tnh d on li p ng tnh ch quan

3 tiu ch chnh: Tnh d hc (Learnability)

Tnh mm do (Flexibility) Tnh vng chc (Robustness)

Tnh d hc

5/21/2018 C5_Design

88/128

Tnh d hc

Cho php ngi dng mi thiu kinh nghim C th s dng V s dng t hiu qu ti a

Th hin cc tnh cht sau Tnh d on Tnh tng hp Tnh khi qut

Tnh nht qun

D on

5/21/2018 C5_Design

89/128

D on

Da vo tri thc bit xc nh cc tngtc mi v d bo kt qu V d 1: V d 2: trong thit k

D hc

5/21/2018 C5_Design

90/128

D hc

Tnh tng hp

Tnh d on ch tp trung vo kh nng xc nh ccng tc tip theo da vo ci qua

Tnh tng hp cho php hnh thnh m hnh v hnh vica h thng t mt chui cc tng tc trc

Tnh thn thin c o bi s tng h gia tri thc ang tn ti v tri

thc cn c thc hin tng tc c hiu qu V d: trong cng ngh son tho vn bn, co s tng t

gia bn phm ca my ch v my tnh

D hc

5/21/2018 C5_Design

91/128

D hc

Tnh khi qut Tnh khi qut l tnh cht cho php ngi dng m

rng tri thc t mt ng dng c th sang mt tnhhung tng t d bo m hnh tng tc honthin hn

V d: Trong mt gi ha: hnh vung l hnh chnht c rng buc; trong h thng window, thao tcct-dn p dng cho mi i tng

Tnh nht qun: hnh vi tng t trong cc tnh hung tng t

Mm do

5/21/2018 C5_Design

92/128

Mm do

i thoi ch nga lungDi tr nhim v Thay th C nhn ha

Mm do

5/21/2018 C5_Design

93/128

Mm do

i thoi ch ng: Kiu i thoi u tin h thng

H thng ch ng mi i thoiNgi dng n thun p ng cc yu cu

V d: cc hp thoi ngn cm ND a thng tin trctip vo

Kiu i thoi u tin ngi dng ND hon ton ch ng i thoi

Tuy nhin vic ch ng s lm mt vt ca cc nhimv m ngi dng ch ng ngh m cha chon thnh

Mm do

5/21/2018 C5_Design

94/128

Mm do

a lung Mt lung l mt phn ca i thoi c lin quan n

mt nhim v no a lung cho php h tr nhiu hn mt nhim v

ti mt thi im C hai c trng ca a lung

Nhiu knh c th cho php thc hin mt nhim vM ca s = nhn kp chut trn mt biu tng; dng

phm nng; ni hy m ca s

Mt biu din n c th to bng cch trn cc knhH thng cnh bo = ca s cnh bo + sound (bipbip)

Mm do

5/21/2018 C5_Design

95/128

Mm do

Di tr nhim v Chuyn iu khin thc hin nhim v gia ngi

dng v h thng V d:

Kim tra li chnh t ca vn bniu khin bay trong bung li

Thay th Tp cc gi tr tng ng c th thay th cho nhau

ty theo ng dng V d: trong la chn v kch thc: cm, inch, point

Mm do

5/21/2018 C5_Design

96/128

Mm do

C nhn ha Tnh thay i t ng m h thng mun thc hin

da vo tri thc ca n v ngi dng V d: ngi dng c th thay i nh nn, tn, phm

nng m mnh thch / hay s dng

Vng chc

5/21/2018 C5_Design

97/128

Vng chc

Tnh quan st (Observability) Tnh khi phc (Recoverability) Tnh p ng (Responsiveness) Tnh tng hp nhim v (Task conformance)

Vng chc

5/21/2018 C5_Design

98/128

Vng chc

Tnh quan st (Observability) Cho php ngi dng nh gi c trng thi bn

trong ca h thng nh biu din cm nhn ctrn giao tip

Tnh khi phc (Recoverability) Ngi dng gy li v mun sa li Tnh khi phc l kh nng t ti ch mong mun

sau khi nhn ra mt s li trong cc tng tc trcKhi phc kiu tin: Chp nhn trng thi hin ti,

m phn t trng thi tin v trng thi chKhi phc kiu li: th b i nh hng ca cc tng

tc trc v

Vng chc

5/21/2018 C5_Design

99/128

Vng chc

Tnh p ng o vn tc giao tip gia ngi dng v my tnh Thi gian p ng l thi gian cn thit thay i

trng thi Mong mun: p ng tc th, tuy nhin h thng

phi c thng bo nhn c yu cu v ang xl

Tnh tng hp nhim v H thng khi thit k m bo p ng y cc

yu cu trong c t Tuy nhin h thng nn c kh nng cho php ngi

dng nh ngha cc nhim v mi

Cc m thc ca tnh dng c

5/21/2018 C5_Design

100/128

Cc m thc ca tnh dng c

M thc phn chia thi gian (Time Sharing) Cc thit b hin th quan st Cc cng c lp trnh My tnh c nhn

H thng Windows v giao din WIMP Cnh tr iu khin trc tip Ngn ng ngc vi hnh ng

Siu vn bn a th thc WEB

Giao tip da vo tc t

Ti sao cn nghin cu cc mh

5/21/2018 C5_Design

101/128

thc ? Lin quan n vic thit k cc h thng tng

tc

Cc h thng phi c thit k th no m botnh dng c

Tnh dng c c nh gi nh th no ? C o

c hay khng ? Cc h tng tc c thit k thnh cng

cho php cung cp m thc cho vic pht trincc h tng tc trong tng lai

Xy dng cc h tng tc tin dng hn cch tng tc v ang tn ti

Tho lun v cc vn lin quan nhm ci tinthit k cc h tng tc

X l theo l

5/21/2018 C5_Design

102/128

X l theo l

Giai on: 1950s 1960s X l theo l: tp lnh c lu trn ba hay

bng giy sau np vo my tnh Nhc im: Ti mt thi im, ch chy mt chng trnh ca

mt ngi s dng Kh s dng, vng, cng knh, khng d bo c

Phn chia thi gian (timeh i )

5/21/2018 C5_Design

103/128

sharing)

Xut hin vo nhng nm 1960s IBM 360, SDS 940, PDP-10

Cho php chia s ti nguyn tnh ton cho nhiu ngi sdng (Multi-users) C ch lp lch cho php cc nhim v s c thi hnh Lu v chuyn i trng thi ngi s dng v trng thi

chng trnh ca h Gn time slots cho mi cng vic: Job1: 0-5; Job 2: 5-10;

Job 3: 10-15

u im: so vi x l theo l (batch processing) Gia tng lng thng tin gia ngi dng v my tnh Cho php ngi dng tch cc hn v c tng tc kp thi

Thit b hin th quan st (VDU)

5/21/2018 C5_Design

104/128

Thit b hin th quan st (VDU)

Giai on: gia nhng nm 1950s- c ng dng u tin trong qun s Chng trnh Sketchpad (Ivan Sutherland, 1962) Ln u tin cho php biu din thng tin dng nh ln

trn thit b Cho php ngi dng s dng my tnh to mt cch

nhanh chng cc m hnh trc quan, tinh vi trn mn hnhhin th

ngha: My tnh c s dng m rng kh nng ca con

ngi thng qua vic hin th v iu khin cc biu dinkhc nhau ca cng mt thng tin

tng sng to trong lch s pht trin my tnh

The first sketchpad [IvanS th l d 1962]

5/21/2018 C5_Design

105/128

Sutherland,1962]

http://mugtug.com/sketchpad/

5/21/2018 C5_Design

106/128

http://mugtug.com/sketchpad/

Cc b cng c lp tr

5/21/2018 C5_Design

107/128

Cc b cng c lp tr

Douglas Engelbarts Augmenting Human Intellect,1962 The secret to producing computing equipment that aids

human problem-solving ability is providing the right toolkit

Engelbart v cc ng s xut cn pht trin mt b

cng c lp trnh lm c s cho vic pht trin cc h thngphc tp hn u im: Cc thnh phn nh khi c thit k tt v c hiu mt

cch thu o s cho php to ra cc cng c ln hn Mt khi b cng c ln hn c hiu r, n s cho php

to ra cc b cng c ln hn na v c th tip tc

M thc iu khin trc tip

5/21/2018 C5_Design

108/128

t c u t c t p

Nguyn l: Tnh nhn thy c ca i tng quan tm: Gia tng hot ng vi phn hi nhanh chng ca

mi hnh ng

Khuyn khch ngi dng khm ph m khng phicc hu qu nng n Mi hnh ng c c php chnh xc Thay th ngn ng dng lnh bi vic iu khin trc

tip cc i tng nhn thy c

V d

5/21/2018 C5_Design

109/128

Giao din: ko th mt filevo thng rc thay v sdng lnh rm ? (V sao litt hn)Mt s lnh vc ng dngca iu khin trc tip Tr chi Hin th, Mphng Hin thc o(C ch, gng tay) v.v

Giao tip da vo tc t

5/21/2018 C5_Design

110/128

p

V d Tc t th tn lm nhim v lc th Tc t web d tm cc trang web Excel: tc t tnh tng ca cc s

u im C th thay th cc hot ng ca ngi dng

thc hin mt s nhim v

Quy trnh thit k phn mm

5/21/2018 C5_Design

111/128

Q y p

Cc m hnh vng i ca phn mm M hnh thc nc M hnh vng i phn mm ca Bohem M hnh vng i hnh sao

M hnh thc nc

5/21/2018 C5_Design

112/128M hnh Boherm

5/21/2018 C5_Design

113/128M hnh sao

5/21/2018 C5_Design

114/128Thit k tng tc

5/21/2018 C5_Design

115/128

g

nh ngha: Designing interactive products tosupport people in their everyday and workinglives

Thit k tng tc cng lmvic

5/21/2018 C5_Design

116/128

vic

Quy trnh Thit k HTT

5/21/2018 C5_Design

117/128

Q y

Ngi dng mun g

5/21/2018 C5_Design

118/128

g g g

Ngi dng mun g

5/21/2018 C5_Design

119/128

Requirements Whats wanted ? Cc phng php thc hin Phng vn Videotaping

Tm kim v tra cu ti liu v vn lin quan Quan st trc tip

Phn tch

5/21/2018 C5_Design

120/128Phn tch

5/21/2018 C5_Design

121/128

Phn tch: Cc kt qu thu nhn c t pha xcnh nhu cu s c sp xp theo cch thc no a ra cc vn chnh v trao i vi cckhu sau ca qu trnh thit k

Cc phng php: Xy dng kch bn Phn tch tc nhim

Thit k

5/21/2018 C5_Design

122/128Thit k

5/21/2018 C5_Design

123/128

Thit k: Mc d tt c quy trnh l thit k Tuy nhin: y l khu trng yu ca qu trnh

Cc phng php thit k da trn:

Lut tng tc Nguyn l thit k Guidelines

To mu th

5/21/2018 C5_Design

124/128To mu th

5/21/2018 C5_Design

125/128

Vng lp v thit k mu th: Con ngi l phc tp Chng ta khng ch i c th c mt thit k hon

ho ngay ln u tin

V th cn phi nh gi xem sn phm mu tc nh th no v ch no c th ci thin c

Cc phng php da trn: K thut nh gi

Thu nhn thng tin phn hi t ngi dng th

Ci t v trin khai

5/21/2018 C5_Design

126/128Ci t v trin khai

5/21/2018 C5_Design

127/128

Ci t v khai thc: Sau khi hi lng vi vic thit k chng ta i vo

ci t v trin khai sn phm

Cc cng vic cn thc hin

Writing Codes Making harwares

Writing documents, manuals

Summary

5/21/2018 C5_Design

128/128

SV nm bt c Thit k l g Thit k tt/ti Cc nguyn l ca tnh dng c

Cc m thc tng tc Quy trnh pht trin phn mm Thit k tng tc