bai giang giao dien nguoi may

5/20/2018 Bai Giang Giao Dien Nguoi May

1/455

1

BI GING

GIAO DIN NGI MYGV: V c Huy

ST:0912316373B mn: HTTT-HCNHN

EMail: [email protected]

Thi lng: S tn ch: 03

Ln lp: 28

TH + BTL: 30


2/455

2

Cc im:Kim tra nh k: 02

Kim tra thng xuyn: Khng nh trc

Thi: Kt qu BTL

Chuyn cn:01


3/455

3

Ti liu tham kho [1] ng Vn c,Nguyn Th Phng Tr. Giao

dinngimy, NXB Khoa hctnhin cng ngh

[2] LngMnhB. Gio trnh Tngtc ngimy

[3] Bi ThDuy. Bi gingTngtc ngimy [4] Jenifer Tidwell. Designing Interfaces, 2005

[5] Jef Raskin. Human Interface, 2000

[6] Caretta Software Ltd., GUI Design Studio UserManual,Version 2.3, March 2007. .

[7]


4/455

4

Vn ca mn hcCn cc kin thc cbn v CNTT, ho,

tm l nhnthc,cng thi hc

Cung cp nhng nguyn l chung v tngtcNgi- My

Cung cp nhng kin thc cn thit hccc mn chuyn ngnh hp v p dng vothitk,xy dng,nhgiphnmm.


5/455

5

CHNG 1

GII THIU TNG TCNGI MY


6/455

6

1.1. nh nghaC nhiunhnghakhc nhau:nhngha1

Tpcc qu trnh, ithoiv cc hnh ng,qua con ngisdngv tngtc vimy tnh (Backer &

Buxton, 1987).

nhngha2L mtlnhvclin quan nthitk,nhgi v ci

tHthngmy tnh tngtc cho con ngisdngv nghin cu cc hin tng chnh xy ra trn (ACMSIGCHI 1992).


7/455

7

1.2. Vai tr ca HCI

To ra ccH thng an ton vs dngc (Usability) nh cc H thng chcnng.

Usability: LkhinimtrongtrongHCIcthhiullmchoHTdhcvddng.


8/455

8

1.3. Lch s pht trin

Giai on u ca my tnh, UI khng cxem trng

unhngnm70: Hnh thnh khi nimgiaodin ngi my (MMI - Man MachineInterface) sau thay ithnh khi nimUI

Cuinhngnm70, unhngnm80: Xuthin khi nim thn thin ngis dngdnh cho cc snphmc UI tt


9/455

9

1.3. Lch s pht trin

Nhngnm80: Xuthinkhi nimtngtcngi my (HCI - Human ComputerInteraction). Xuthintrong MS Windows vi

GUI.Nhng nm 90 v nhng nm 2000: C cc

nghin cu thc ti o, nhn dng ting ni,

nhndngchvittay v ngdngchng vovicthitkvo/ra caHCI


10/455

10

1.4. Cc lnhvclin quanHCI nghin cu3phn:

Hnh thc: Cc hnh thcgiao tipgiangivmy

Chc nng: Cc chc nng mi trong giao tipngimy

Ci t: Ci tcc giao din


11/455

11

1.4. Cc lnhvclin quan

HCI s dng tri thc ca nhiu ngnh khcnhau Khoa hc my tnh

Tr tu nhn to

Nhn loi hc

Ngn ng hc

Trit hcNgh thut

in, in t


12/455

12

1.4. Cc lnh vc lin quan X hi hc

Thit k ha, cng nghip, m thanh, in nh,...

Tm l hcng dng l thuyt tin trnh nhn thc v phn tch theo

kinh nghim ng x ca ngi s dng

K ngh

Sinh hc Cng thi hc

Ci tin thit k my mc con ngi d s dng


13/455

13

1.4. Tisaophinghin cuHCI

UI l ni giao tip gia ngi dng v mytnh. Khng th xm nhp vo my tnh nukhng c UI.

Trong lp trnh: Mt phn ln m lin quan n giao din

Nu thit k giao din sai=> phi lm li

Nu khng sa c=> ngi dng phi s dnggiao din khng tt

Thit k giao din tt => gim thi gian lp trnh


14/455

14


V mt kinh t: Tng nng sut lao ng

20 ngi dng

x 230 ngyx 100 mn hnh giao tip 1 ngy

x 10 giy mi mn hnh giao tip

___________________________

= 1278 gi(32 tun)


15/455

15

1.4. Tisaophinghin cuHCI Tng nng sut lao ng

5 ngi iu hnh

x 500 ln chn bng mt ngy

x 3 giy mt ln chnx 230 ngy mt nm

_____________________________

= 480 gi (12 tun)


16/455

16


Gim chi ph o to20 nhn vin

x 2 ng dng mi nm

x 2.5 ngy mi ng dng

_________________________

= 100 ngy (20 tun)


17/455

17


Gim nhng li ngi dng500 ngi dng

x 20 li mt nm

x 15 pht cho mt li

____________________________

= mt 2500 gi (63 tun)


18/455

18


Ngisdnghi lng

To ra nhng snphm c cht lng caohn.Ngi dng tit kim thi gian khi sdng giao din nn c th tp trung vocng vicchnhV d: tm kimdliu,nhdngvnbn....


19/455

19

1.4. Tisaophinghin cuHCI Gimlinguy himntnh mngcon ngi

Hthngliuphpbcxchabnhung thTherac-25 gy chtngido c UI ti

Hthngrada Aegis trn tu chinUSS Vincennes bnnhmmy bay dn scaIran do c UI thitkti

L phiubuc tng thngM2000 gy tranh ci do cthit k ti (Presidential Voting Ballot,www.taberbrains.com)

Mt chic my bay m vo vch ni Colombia nm1996 gitchtttcmingitrn my bay. L do ngili g phm R thay v tn ycasn bay. H thngdnng ly ra trong h thng sn bay u tin btu

bngchRsai sn bay sn bay mvo ni
http://www.taberbrains.com/http://www.taberbrains.com/http://www.taberbrains.com/http://www.taberbrains.com/http://www.taberbrains.com/http://www.taberbrains.com/


20/455

20

1.4. Tisaophinghin cuHCI Tngkhnngbn ccasnphm

DOS khng th so snh c vi cc h iu hnh khccng thi

Windows v Explorer emlicho Microsoft linhunccln

Windows csao chp litgiao dincaMacintosh !!!

Giao dincaMacintosh csao chp litBravopht

trintiXerox PARC !!! Giao dinpdnhnchpng

Giao din ti c thb loi ngay t u cho dchngtrnh ttnmy


21/455

21


My tnh xut hin khp mi ni: iukhinmy bay, t, dn nghe nhc....

Giao din ngi my tnh tt => giao dinngicc thitbtt


22/455

22

1.5.Nidung nghin cucaHCI

Gm 4 thnh phn ch yu: Mi trng

Con ngi

My tnh

Qu trnh pht trin


23/455

23



24/455

24


S s dng ng cnh ng dng (Use andContext) T chc x hi loi ngi (Human Social

Organization): Lin quan nvicxem loi nginhthcthx hitngtc:M hnh hotngcon ngi

M hnh nhm v tchc

M hnh cng vicv lungcng vic

Hthngkthutx hi


25/455

25

1.5.Nidung nghin cucaHCI Ssdngngcnhngdng(Use and Context)

Cc lnh vc ng dng (Application Areas): Tp trungnghin cu vo cc lpca lnhvcngdng t gc m giao dincnphipng ctrngcacc minngdng: ngdngring hay nhm

Giao dinhngti liu: sonthovnbn,bngtnh,...

Giao din hng truyn tin: Email, hi ngh truyn hnh, inthoi,...

Mi trngthitk: IDE, CAD/CAM Cc hthnghctrctuyn,trgip

Cc hthngiukhin: iukhinqu trnh, games

Cc hthngnhng: iukhinmy sao chp,thang my,...


26/455

26

1.5.Nidung nghin cucaHCI Ssdngngcnhngdng(Use and Context)

Sph hpngimy (Human Machine Fit): Thitkt tis ph hpgia cc i tng thitkv vicsdngchng Cc kthutttisph hp

Lachnv thch nghi hthng

La chn v thch nghi ngi s dng: S tng thch gia cimngisdngv hthng,tnh dsdng,dhunluyn

Hngdnngisdng: ti liuhngdn,ti liukthutvti liuqunl li


27/455

27

1.5.Nidung nghin cucaHCI Cc ctrngcon ngi(Human)

Nghin cucc tnh chtvqu trnh x l thng tin cacon ngi,cu trc hnh ng,bncht giao tip v yucuvvtl, sinh l hccacon ngi

X l thng tin ca con ngi (Human InformationProcessing): c trngcacon nginhbx l thngtin M hnh nhnthc

M hnh khi nim

Hin tngv bnchtnh,cmnhn,vnng,hc,giiquytvn,thu thpknng,...


28/455

28

1.5.Nidung nghin cucaHCI Cc ctrngcon ngi(Human)

Ngn ng giao tip v tng tc (Language,Communication) Cc kha cnhcangn ng: C php, ngngha,...

M hnh ngn ng

Cc ngn ngchuyn dng: Truy vn,giao tipha,lnh,...

Nghin cuvlao ng(ergonomics): cimnhn trchc,sinh l hccacon ngiv quan hgiacon ngi

vimi trng,khng gian lm vic Thitkkhng gian lm vic

Btr mn hnh, cc iukhin

Giihncanhnthc,cmbin


29/455

29

1.5.Nidung nghin cucaHCI Hthngmy tnh v kintrc giao din(Computer)

Cc thitbhtrvo ra (I/O Devices): Kthutxy dngcc kthuthtrgiao tipgiangimy Cc loithitbvo/ra my tnh

Tnh chtcathitbvo/ra: trnglng,bngthng,...

Thitbo


30/455

30


K thut i thoi (Dialogue Techniques): Kin trc phnmmcsv kthuttngtc vingisdng Cc k thut i thoi vo: K thut s dng bn phm (lnh,

menu), kthutsdngchut(nhpchut),kthutsdngbt(nhndngk t,iub),kthutsdngtingni,...

Cc kthutithoira: Trtmn hnh, cas,hothnh,...

Cc kthutithoitngtc: Kthutchs,inform, chn

lnhtrong menu, biutng,ngn ngtnhin. Cc kthutdnng. Qunl li


31/455

31


ndgiao tip(Interface Metaphor) ndtngtc

ndnidung

Thitkha(Graphic Design): Hnh hc2D, 3D,binihnh hc

Biudinthuctnh caitngha

M hnh ha vtth,...


32/455

32

1.5.Nidung nghin cucaHCI Tin trnh pht trin (Development Process)

Cc tim cn thit k (Design Approaches): Tin trnh thitk C s thit k ha: Ngn ng thit k, k thut in, s dng mu,

t chc khng gian 2D v 3D, trnh t thi gian,...

K thut phn tch nhim v, nh v nhim v

K thut c t thit k

K thut phn tch thit k: i tng, hnh ng

Thit k mu (Case Study)


33/455

33

1.5.Nidung nghin cucaHCI Tintrnh pht trin(Development Process)

K thut v cng c ci t (Implementation Techniquesand Tools): Ththutv cng cci tphnmm Quan hgiathitk,nhgi v ci t

Cc k thut lm bn mu: Sn xut phim hot hnh, phn mmmy tnh,...

Cc cng cphnmmpht trinithoi: GUI Design Studio,...

Phngphp hngitng

Trnh dindliuv cc thutton


34/455

34

1.5.Nidung nghin cucaHCI Tintrnh pht trin(Development Process)

Cc kthutnhgi (Evaluation Techniques) Cc thconhgi (thigian, li,tnh hcc,...)

Kthutkimthcatnh sdngc


35/455

35

1.6. Cc yutcnquan tm Khi thitkHCI cnquan tm ncc yut

Cc yu t tchc: Hun luyn, thitkcng vic,chnhsch, vai tr v tchccng vic

Cc yutmi trng(nhiu,nng, chiusng,...) Yutvsckhev an ton: stress, auu,mimtc

xng,...

Ngisdng: ngc,thamn, thch th, mckinh

nghim,... Yutthuntin: Tthngi,btr thitb,...


36/455

36

1.6. Cc yutcnquan tm Khi thitkHCI cnquan tm ncc yut

Giao dinsdng: Thitbvo ra, cu trc i thoi,sdngmu sc,biutng,lnh,ha,ngn ngtnhin,3D, aphngtin

Yu t nhim v: D,phc tp, mi, phn b cng vic,tnh lp,knng,...

Cc rngbuc: Gi c,thigian, ngunkinh ph, ing,thitb,...

Chcnnghthng: Phncng,phnmm,ngdng

Yu tnngsut: Tngu ra, tngcht lng,gimgithnh, gimli,gimyu culao ng,gimthigian chto


37/455

37

1.7. Ai tham gia xy dngHCI Chuyn gia thit k ha

Ngi thit k tng tc/giao din

Ngi lm ti liu k thut

Nhn vin tip th K s kim th

K s phn mm


38/455

38

Xin chn thnh cm n!


39/455

39

BI GING


ST:0912316373B mn: HTTT-HCNHN


Thi lng: S tn ch: 03 Ln lp: 28

TH + BTL: 30


40/455

40



Thi: Kt qu BTL

Chuyn cn:01


41/455

41







[7]


42/455

42

CHNG 2

TNH S DNG CA H THNG

TNG TC


43/455

43

2.1. nh ngha tnh s dng Kh nng h thng c s dng bi con ngi mt

cch d dng v hiu qu

Ba tnh cht ca tnh s dng

Hiu qu: Tnh chnh xc v y m vi n ngi sdng t c mc tiu xc nh trc

Nng sut: Ti nguyn cn s dng t c tnh chnhxc v y m vi n ngi s dng t c mc tiu

xc nh trc Tha mn: Khng bc dc, lo lng v c quan im tch

cc vi vic s dng sn phm


44/455

44

2.1. nh ngha tnh s dng 10 vi phm nh hng n tnh s dng

1. Menu v biu tng nhp nhng

2. Ngn ng ch cho php i theo mt hng trong h thng

3. Hn ch u vo v thao tc trc tip4. Hn ch la chn v im ni bt

5. Trnh t cc bc khng r rng

6. Nhiu bc qun l giao din hn l thc hin nhim v

7. Lin kt phc tp vi cc ng dng khc v gia cc ngdng

8. Phn hi v khng nh khng ph hp

9. H thng km phng v km thng minh

10. Cc thng ip li, tr gip, ti liu khng ph hp


45/455

45

2.1. nh ngha tnh s dng Ly kem nh rng bng cch no


46/455

46

2.1. nh ngha tnh s dng Hp khng c tay cm

Kiu mi Kiu c

D cm vo np nhc hpln v b bt

S nng hp ln bng hai tay


47/455

47

2.1. nh ngha tnh s dng Ca thit k kh s dng

y taycm m ca

Ko tay

cm m ca

1. Tay cm dng ko,khng phi y

2. Hai ca lm vic

khng ging nhau

Li

Gii php

1. Tay cm dng yphng d y vkh ko

2. Cc ca phi lmvic ging nhau


48/455

48

2.1. nh ngha tnh s dng Lm th no m t lnh

Pha tri Pha phi

M tt bn

tri

Khng

nn c

tay

cmny


49/455

49

2.1. nh ngha tnh s dng Chai nhn ging nhau nhng cha cc cht khc

nhau

Du giu

Du dngtc

Insulin R Insulin N


50/455

50

2.1. nh ngha tnh s dng n mu vng trn ng

n giao thng ang c muxanh

Khng phn bit c ngiao thng khi mu vng v

h n ng

Lm nibt n

giao

thng

Khcphc

Tai nn ?


51/455

51

2.1. nh ngha tnh s dng M ca theo cch no

Khng bit mca t pha

no


52/455

52

2.1. nh ngha tnh s dng ng giao nhau ny sai g?

Mi tn mu xanhkh quan st


53/455

53

2.1. nh ngha tnh s dng Ca trong trng i hc

Ca khng c ca s Nn thit k c ca s


54/455

54

2.1. nh ngha tnh s dng Bt ch

Bt ch c np bo v ngi kh dng

Bt ch m ngi c th tht vo trong ng d dng hn


55/455

55

2.1. nh ngha tnh s dng Bng video

Nn thitk phng,khng c

phn trcny

Bng video ct khng ng

Bng video ct ng

Bng c bo vbi hp nha


56/455

56

2.1. nh ngha tnh s dng Bn ra cn st li

Bn ra st liging ch i

tiu

Bin ch dnkhng r rng


57/455

57

2.1. nh ngha tnh s dng Cm chut vo u?

Nhn icng

vi itng

Dng

mu

tngng

vi itng

Cng chut v bn phm kh ging nhau

Nhn mu xanh ngvi cng no ?

xut


58/455

58

2.1. nh ngha tnh s dng Ci iu khin ti vi

Nhm ch Vvi mi tn

xung

xut

Thay ch Vbng ch vol


59/455

59

2.1. nh ngha tnh s dng Vi nc Zion National Park

Vi

nc

trngthi

m

Vi

nctrngthi

kha

Nhml cn

bm

Ko m


60/455

60

2.1. nh ngha tnh s dng Giao din thit lp my Fax

Tu chn nnxp theo chiu

dc

Nhn canh ltri, nhm

thng tin lin

quan thnh

nhm


61/455

61

2.1. nh ngha tnh s dng Thm/Loi b chng trnh trong Windows 9X

Cc tab khng lin quan vi nhau


62/455

62

2.1. nh ngha tnh s dng Giao din nhp thng tin bnh nhn


63/455

63

2.1. nh ngha tnh s dng

Khng thu nh c Text ca Microsoft Paint

Microsoft Paint khng t ng cun ca s

Phm left, right chcnnggingviccphm page up, page down trong Acrobat
http://localhost/var/www/apps/conversion/tmp/mshame.bmphttp://localhost/var/www/apps/conversion/tmp/mshame.bmphttp://localhost/var/www/apps/conversion/tmp/mshame.bmphttp://localhost/var/www/apps/conversion/tmp/mshame.bmphttp://localhost/var/www/apps/conversion/tmp/mshame.bmphttp://localhost/var/www/apps/conversion/tmp/Tai%20lieu%20tham%20khao/Principals_of_Good_GUI_Design.pdfhttp://localhost/var/www/apps/conversion/tmp/Tai%20lieu%20tham%20khao/Principals_of_Good_GUI_Design.pdfhttp://localhost/var/www/apps/conversion/tmp/Tai%20lieu%20tham%20khao/Principals_of_Good_GUI_Design.pdfhttp://localhost/var/www/apps/conversion/tmp/Tai%20lieu%20tham%20khao/Principals_of_Good_GUI_Design.pdfhttp://localhost/var/www/apps/conversion/tmp/Tai%20lieu%20tham%20khao/Principals_of_Good_GUI_Design.pdfhttp://localhost/var/www/apps/conversion/tmp/Tai%20lieu%20tham%20khao/Principals_of_Good_GUI_Design.pdfhttp://localhost/var/www/apps/conversion/tmp/Tai%20lieu%20tham%20khao/Principals_of_Good_GUI_Design.pdfhttp://localhost/var/www/apps/conversion/tmp/Tai%20lieu%20tham%20khao/Principals_of_Good_GUI_Design.pdfhttp://localhost/var/www/apps/conversion/tmp/Tai%20lieu%20tham%20khao/Principals_of_Good_GUI_Design.pdfhttp://localhost/var/www/apps/conversion/tmp/Tai%20lieu%20tham%20khao/Principals_of_Good_GUI_Design.pdfhttp://localhost/var/www/apps/conversion/tmp/Tai%20lieu%20tham%20khao/Principals_of_Good_GUI_Design.pdfhttp://localhost/var/www/apps/conversion/tmp/Tai%20lieu%20tham%20khao/Principals_of_Good_GUI_Design.pdfhttp://localhost/var/www/apps/conversion/tmp/mshame.bmphttp://localhost/var/www/apps/conversion/tmp/mshame.bmp


64/455

64

2.2. Su thuc tnh ca tnh s dng

Hiu qu: Tnh chnh xc v y m vi nngi s dng t c mc tiu nh trc

Tnh hc c: H thng c d hc khng?

Nng sut: Mt khi d hc, c nhanh s dngkhng?

Tnh nh c: C d nh nhng g hc?

Cc li: t li v d vt qua li? Tha mn mc ch: C thch th s dng h thng?

2 2 Nguyn l thit k h thng c


65/455

65

2.2. Nguyn l thit k h thng ctnh s dng

Sr rng Phnhthnglin quanphicnhn thy

Ngi s dng nhnbit trng thi hin hnh ca hthngv cnbitphithchinthao tc no

VD: Khi di chutnimbtktrn mn hnhphibitciug sxyra nunhnphm chut



66/455

66


Phn hi Khi c bt k thay i g, n cn phi c nhn thy

VD: Khi xa tp

Cc loi phn hi: Th gic, m thanh, xc gic



67/455

67


Gi L tp cc thao tc hay th tc c th thc hin trn i

tng

Kh nng tng tng gip xc nh cch s dng itng ch bng quan st chng

VD i tng vt l: Gh gi ngi

Tay ca gi xoay

Phm gi nhn

Con chy chut gi tr, phm chut gi nhn, mnhnh gi s,



68/455

68


VD gi GUI: Con chy chut gi tr Phm chut gi nhn Mn hnh gi s Bn phm gi g Lm lm phn t khi khng th nhn chut ln chng Phn t c nn trng v con chy nhp nhy gi c

th son tho Phn t c nn xm gi khng th sa Phn t c mu xm gi b v hiu ha

Nhng ng ni gi c th dch chuyn



69/455

69


nh x L quan h gia cc iu khin (i tng ha trong

giao din,...) v nh hng ca n trn h thng

nh x t nhin mang li li th ca s tng ng vt lv cc chun vn ha

V d: Xoay tay li t theo chiu kim ng h r phi

S dng m thanh to hn khi chn s ln v ngc li



70/455

70


Rng buc Lin quan n tng s kh nng. L gii hn vt l, ng

ngha, vn ha v logic trn tng s kh nng

V d 1: chi xe my Vt l: Bnh trc ch lp va vo mt v tr

Ng ngha: Ti x ngi trn gh v quay mt v pha trc

Vn ha: n lp pha sau, n vng lp pha trc

Logic: Hai n xanh, hai mu trng i vi nhau



71/455

71


Rng buc V d 2: cm chut v bn phm trn case my tnh



72/455

72

2.2. Nguyn l thit k h thng ctnh s dng Qui c

L rng buc v vn ha, ph thuc vo cc nn vn hakhc nhau

L ty

c chp nhn theo thi gian Cng tc n

M: Bt xung l tt Anh: Bt ln l tt

Van vi nc M: Ngc chiu kim ng h l m Anh: Ngc chiu kim ng h l ng

2.2. Nguyn l thit k h thng c


73/455

73


Qui c Mu

M: Nguy him

Ai cp: Cht

n : Sng Trung quc: Hnh phc

Bn phm QWERTY: Ting anh

AZERTY: Ting php


74/455

74

2.3. Tnh tin li Cc nguyn tc

Tnh c thhcc: Cc h thng tng tc phi dhc

Tnh dsdng: Cc h thng tng tc phihiuqutrong vicgip ngisdngtcmcch

Tnh linh ng: Cc h thng tng tc phi thch ngcnhnghon cnhkhc nhau

Tnh cmxc: Cc h thng tng tc phi lm chongidng cmthythoimi


75/455

75

2.3. Tnh tin li Tisaophitheo cc nguyn tcny?

Nhngnguyn tcny gip tptrung vo mctiu tra

Gip c thocmcmc tiu t ra c honthnh nu.

y l mtphngphp cdng nhgi mtthitk!!!!!


76/455

76

2.3. Tnh tin li Tnh c th hc c

Tnh c th hc c th hin qua thi gian v cng scb ra c th t c mt trnh s dng nht nh.


77/455

77

2.3. Tnh tin li Tnh c th tnghpc: Khi ti lm thny

th ci g xyra! Hthngcho php ngidng tnghpcc kinthc

m hthu cthng qua vicsdnghthngtc th xy dngmth thng cc nguyn tcv cckinthcny.


78/455

78

2.3. Tnh tin li Tnh c th on c: Khi ti lm th ny th

iu s xy ra! Ngi dng thng d on kt qu ca mt s tng

tc da vo h thng kin thc m h thu c t ccln tng tc trc. H thng nn h tr cc suy lunhay d on ny bng cch lun lun a ra cc thngtin phn hi nht qun.

V d: Mtp: cashithoixuthinchntn

tp.=> Ghi tp: chc l mt ca s hi thoi cng s xut

hinchntn tp


79/455

79

2.3. Tnh tin li Tnh quen thuc

Ngidng sdngcc kinthcc ttrcquytnhxem sphilm g trong cc tnh hungmi.

Vndngcc kin thc theo quy lut,ngidngphisuy nghqu nhiutrcmttnh hungmi


80/455

80

2.3. Tnh tin li Tnh khi qut v tnh kin nh

Ngisdngkhi qut nhngquy lutv knngp dngvo nhngtnh hungtngt.

H thng nn h tr vic to nn cc k nngbngcch hotngtngttrong nhngtnh hungtngt.


81/455

81

2.3. Tnh tin li Lm thno c thnhgi tnhc thhc

c? Thng qua thi gian sdnghcc cch hon

thnh mtcng vicnhtnhmttrnh nhtnh


82/455

82

2.3. Tnh tin li Tnh d s dng

Tnh d s dng c th hin qua mc d m mtnhim v c th c hon thnh mt cch hiu qu mkhng c li.

Tnh quan st c: Ti bit ti ang lm g! Cho php ngi dng trc tip nhn bit c trng thi ca h

thng.

Thit k h thng ca bn sao cho khng ch hnh ng m cc

trng thi cng nhn thy c


83/455

83

2.3. Tnh tin li Tnh d s dng

Tnh phn ng nhanh Cho php ngi dng nhn bit c phn ng cho hnh ng

ca h ngay lp tc

Tnh c th khi phc c Ngi dng c th gy ra li

Cc h thng nn c thit k sao cho cc li c th c ngnchn v khi phc c.


84/455

84

2.3. Tnh tinli Tnh dsdng

Tnh thch nghi vinhimv: Cc tnh nngcahthngc thch nghi vinhimvcangidng khng? Cc hthngphicthitksao cho tnh nngcachng p

ngnhimvcangidng. Hay ni cch khc, cc tnh nngcahthngphidatrn nhimvcangidng


85/455

85

2.3. Tnh tinli Tnh d s dng

Lm th no nh gi c tnh d s dng? Mc hiu sut cng vic t c

Thi gian hon thnh cng vic mc cao nht

Tn sut li Cng sc u c b ra: thng qua cu hi iu tra hoc cc ch s

sinh l (v.d. nhptim)


86/455

86

2.3. Tnh tinli Tnh linh ng

Tnh linh ng c th hin qua kh nng p ng camt h thng i vi nhng ngi dng khc nhau trongnhng trng hp khc nhau.

Ca s khi to Ngi s dng thch khi to. V.d. : Windows Wizard.

a tuyn on(Multithreading) Ngi dng thng lm nhiu vic mt lc. H thng nn c

thit k cho php iu ny.


87/455

87


Kh nng chuyn giao gia cc nhim v C kh nng phn bit c ngi dng no ang lm g. V.d.:

T ng sa chnh t.

Tnh thay th c Cho php nhng gi tr vo ra tng ng c th c thay th

thoi mi. V.d: ko th

Tnh ty bin(Customizability)

Cho php mt h thng c th thch nghi c vi nhu cu cangi dng


88/455

88


Lm th no nh gi c tnh linh ng? Thng qua hiu sut v s li to ra trong cc tnh hung khc

nhau


89/455

89

2.3. Tnh tinli Tnh cmxc

Tnh cmxc thhinqua mcathch v thoimingisdngcmthykhi sdngmththng.

Gi trcmxc: !!!!

Tnh thmm

Cc yu tmi trng: Cc h thng nn c thit kph hpvicc mi trngvtl


90/455

90

2.3. Tnh tinli Tnh cmxc

Lm thno c thnhgi ctnh cmxc? Thng qua cu hiiutra hoccc chssinh l


91/455

91

Xin chn thnh cm n!


92/455

92

BI GING


ST:0912316373

B mn: HTTT-HCNHN


Thi lng:

S tn ch: 03 Ln lp: 28

TH + BTL: 30


93/455

93



Thi: Kt qu BTLChuyn cn:01


94/455

94







[7]


95/455

95

CHNG 3

KH NNG CON NGI


96/455

96

3.1. H thng nhn thc Con ngil nhn vttrung tm trong mihthng

tngtc

My tnh cthitkphcvcon ngi=> Yu

cucangil utin smt. c thphcvcon ngictt:

Cnphibit mt ngi no c kh nng lm g vkhng lm cg

Cnbitcon nginhnbitthgiinhthno, lutr,x l thng tin v giiquytvnnh thno, v thaotc vicc vtra sao


97/455

97

3.1. H thng nhn thc Bngiai onxl thng tin

1. Thng tin vo tmi trngcm ha

2. Dngthng tin biudintrongcso snh vithngtinbiudintrongbnh

3. Quytnhlachntrli

4. Tchctrliv cc hnh ngcnthit


98/455

98

3.2. M hnh b x l thng tin M hnhbxl con ngigmcc phn hsau:

Hthngcmnhn

Hthngnhnthc

Hthngvnng

Cc hthngc thhotngsong song (VD: vali t va nghe nhc) hoc ni tip (VD: nhn

phm trli)


99/455

99

3.2. M hnh b x l thng tin Quy trnh:[1]

Dliuuvo ttai, mt,clutrtrongbnhcmbinngnhn

Bxl cmnhnlydliutuvo cmbinv th

nhnbit cc biu tng trong : ch, t, m v, icon.Trong qu trnh nhndngn cshtrbibnhdi hn,nilutrccbiutngnhndngtrc


100/455

100

3.2. M hnh b x l thng tin Quy trnh:[2]

Bxl nhnthclycc thng tin nhnbitbibxl cmnhnv thchinso snh, lpquytnh. Nc thtrao ithng tin vibnhlm vic

Bx l vnng thu nhn cc hnh ng tbx lnhnthcv ra lnhcbpthchinn. y,phnhicho kh nng quan st hnh ngbng cc cch cmnhn,sdngiuchnhchuynng. Sch c

xem nhlungiukhin.


101/455

101

3.3. Thnh phn vo ra Con ngigiao tipvithgiithng qua nhnv

githng tinbngcc thnhphnvo ra

h h h


102/455

102

3.3.1. Thnh phn vo Thng qua nmgic quan: thgic, thnh gic, khu

gic, vgic, xc gic

Hinnay, ba gic quan l quan trngcho HCI, hai

gic quan vgic v khugic vnchacquantm n

3 3 1 h h h


103/455

103

3.3.1. Thnh phn vo

Th gicLng mi

ng t

Mng cng

Trng en

3 3 1 Th h h


104/455

104

3.3.1. Thnh phn vo Th gic

im m bui ti

3 3 1 Th h h


105/455

105


Vch o

3 3 1 Th h h


106/455

106


o hnh v nn chic ly

3 3 1 Th h h


107/455

107

3.3.1. Thnh phn vo ThgicCmnhnhnh nh

Hnh nhkhng chl ccmnhnmtcch thngm cn theo mtslutcbnnhnchnhp: LutPraegnanz: Trong smtstchchnh nhcxuthin

ng thi, tchc hnh nh no nginnht,nnhnhtsccmnhn.

Lutkcn: Hngvnhm nhngthnhphncnhnhau

3 3 1 Th h h


108/455

108

3.3.1. Thnh phn vo ThgicCmnhnhnh nh

Lut tng t: Hng v nhm nhng thnh phntngtnhau

Lut lin tc: hngv nhm nhng thnh phn lin

tipnhau tothnh cc ngcong mt Lut ng: hng v nhm nhng thnh phn to

thnh mthnh ng

3 3 1 Th h h


109/455

109

3.3.1. Thnh phn vo

Th gicHnh nhnTam gictrong hnh

bn tri cgiu tronghnh bnphi

3 3 1 Th h h


110/455

110

3.3.1. Thnh phn vo

Th gicHnh nhnTam gictrong hnh

bn tri cgiu tronghnh bnphi

3 3 1 Th h h


111/455

111

3.3.1. Thnh phn vo

Th gic

Ta cmnhncrng c hai hnh

ch nht lnnhau

3 3 1 Th h h


112/455

112

3.3.1. Thnh phn vo

Th gic

Ta vn cm nhnc mt hnh

oval mc d hnhny khng cvr rng

3 3 1 Th h h


113/455

113

3.3.1. Thnh phn vo

Th gic

o gic

3 3 1 Th h h


114/455

114

3.3.1. Thnh phn vo

Th gic

Cm nhn v su thng qua hai mt

3 3 1 Th h h


115/455

115

3.3.1. Thnh phn vo

Th gic

Cm nhn v su thng qua chi tit hnh nh

3 3 1 Th h h


116/455

116

3.3.1. Thnh phn vo

Th gic

Cm nhn v su thng qua chuyn ng

3 3 1 Thnh phn o


117/455

117

3.3.1. Thnh phn vo

Th gic

Cm nhn v su theo v tr

3 3 1 Thnh phn vo


118/455

118

3.3.1. Thnh phn vo

Th gic

Cm nhn v su theo kch thc

3 3 1 Thnh phn vo


119/455

119

3.3.1. Thnh phn vo

Thnh gic Thnh gic quan trng vi chng ta nh th no:

H thng bo ng

Cn bng cm xc: Nghe nhc

Giao tip Nhng vn th v nht v thnh gic

C bn ca ha m

S nh hng ca kin thc ti vic tch cc ngun m thanh

khc nhau Nhn dng cc ging ni

3 3 1 Thnh phn vo


120/455

120

3.3.1. Thnh phn vo

Thnh gic - Bn cht ca m thanh

Ngun m thanh pht ra ccsng trn

3 3 1 Thnh phn vo


121/455

121

3.3.1. Thnh phn vo


Tingntrng(whitenoise)l s tng hp ca rt nhium thanh vitnsv cng ngu nhin (ting gn

sng trn h)

3 3 1 Thnh phn vo


122/455

122

3.3.1. Thnh phn vo


Mt m thanh trong troc thhinbngdngsng hnh sin (khng c nhiu) vi bin lcngv tnsl cao thp

3 3 1 Thnh phn vo


123/455

123

3.3.1. Thnh phn vo

Thnh gicCm nhn m thanh

3 3 1 Thnh phn vo


124/455

124

3.3.1. Thnh phn vo

Thnh gic - Cmnhnm thanh Con ngichng ta c thcmnhnc:

Tnscam thanh (cao thp)

Cng(to nh)

m sc(khc vngunm thanh pht ra tcc dngckhcnhau, mcd c cng tnsv cng)

Chng ta cngc thnhnra vtr cangunm thanh Dng hai tai

Skhc nhau vthigian nhnv cng

3 3 1 Thnh phn vo


125/455

125

3.3.1. Thnh phn vo

Thnh gic - Cmnhnm thanh Con ngi c thnghe cm thanh vi cc tns t

khong20Hz ti15kHz

Con ngic thphnbitcthay ikhong1.5Hz

cc tn s thp. Cng tn s cao th khnng phn bitcng km hn

Nhng tn s khc nhau th nhhngnnhngphnkhc nhau trong h thng x l m thanh ca con

ngi=>tora nhngkch thch khc nhau nhthngthnkinh

3 3 1 Thnh phn vo


126/455

126

3.3.1. Thnh phn vo

Thnh gic - Cmnhnm thanh Hthngxl m thanh thchinmtsthao tc lcm

thanh => cho php b qua nhng ting n nn => tptrung vo m thanh quan trng

Cocktailparty efectchng ta vnc thnghe thyaigichng ta trong mtcnphng rtn

3 3 1 Thnh phn vo


127/455

127

3.3.1. Thnh phn vo

Thnh gic - HCI Cc m thanh hinvnangcsdngchnh vo vic

thng bo: Thng bo khi g nhmnt

Thng bo khi voWindows Thng bo khi my sphtpin

Hinnay m thanh angcnghin cu: Tnghp tingni => nghe c ti liuthay v nhn ti liu=>

phcvngikhimth Dng m nhctora cc hiungtrong trnh dinnidung

3 3 1 Thnh phn vo


128/455

128

3.3.1. Thnh phn vo

Xc gic Xc gic: Khnngpht hinv hiucnhngthng

tin cmnhnctda

Cc nghin cuch ra rngkhnngcmnhnbng

xc gic ca trnhc thcpht trin trckhnngphnbitvtthbngthgic

Theobn,mn ththao no (khng) cnxc gic?

3 3 1 Thnh phn vo


129/455

129

3.3.1. Thnh phn vo

Xc gicCm nhn Sc p:

Mnh

Nh

Nhit : Lnh

m

Mc au: Nhn T

3 3 1 Thnh phn vo


130/455

130

3.3.1. Thnh phn vo

Xc gicHCI Ta cm nhn c cc phm c nhn xung

3 3 2 Thnh phn ra


131/455

131

3.3.2. Thnh phn ra

Thng qua mtscc cquan nh tay, chn, mt,uv hthngtingni.

Khi giao tipvimy tnh, hin nay tay vnngvai tr chnh trong vicg bn phm v iukhinchut

Ting ni, nh mt v chuyn ng ca u angcnghin cuiukhinmy tnh

3 4 B nh


132/455

132

3.4. B nh

B nh gic quan (sensory memory) B nh ngn hn (short-term memory)

B nh di hn (long-term memory)

3 4 1 B nh gic quan


133/455

133

3.4.1. B nh gic quan

Vng mchacc tn hiunhnvobngcc gicquan: Bnhhnh tng(iconic memory) cho thgic

Bnhtngthanh (echoic memory) cho thnh gic

Bnhxc gic (haptic memory) cho xc gic

3 4 1 B nh gic quan


134/455

134

3.4.1. B nh gic quan

Ccbnhny lin tcbghi binhngtn hiumi

V d1: Hintnglunh

V d2: Tai luthng tin trong mtthigian ngn2 tai nhncmtm thanh tihai thiimkhcnhau (rtgnnhau) xc nhm thanh cphttu

3 4 2 B nh ngn hn


135/455

135

3.4.2. B nh ngn hn

Hay cn gilbnhlm vic V d1: tnh 35x6, chng ta c thnhm30x6

ricngvi5x6 hoc35x2 ra 70 rily70x3

V d2: csch, chng ta phinhmtsthngtin th mihiucquyn sch: cc t trong cuangc,mtscu trc,mtschi tittrc

3 4 2 B nh ngn hn


136/455

136

3.4.2. B nh ngn hn

Con ngic thnh7 2 mclin tip: Bn th nh 2419406832 xem bn nh c bao

nhiu s?

Thcn 764 321 5793 ?

3 4 2 B nh ngn hn


137/455

137

3.4.2. B nh ngn hn

3 4 3 B nh di hn


138/455

138

3.4.3. B nh di hn

Dung lnglnhnnhiuso vibnhngnhn Thigian truy cplu hn

Nhiuthng tin:

Thng tin cnhiuthng tin michc Thng tin minhiucc thng tin c

=> Hc nhiu qun nhiu, hc t qun t, khng hc khngqun???

3 4 3 B nh di hn


139/455

139

3.4.3. B nh di hn

C hai loibnhdi hn: Loinhtheo tnh tit(episodic)

Loinhtheo ngngha(semantic)

3 4 3 B nh di hn


140/455

140

3.4.3. B nh di hn

Loinhtheo tnh tit(episodic) Bnh loiny ghi licc skinv kinh nghim theo

cutrc chui

Gip chng ta nhlicc skinxyra trong qu kh

3.4.3. B nh di hn


141/455

141

3.4.3. B nh di hn

Loinhtheo ngngha Bnh loiny ghi licc khi nim,s thtv cc k

nngchng ta hcctheo cutrc lin kt

Cc thng tin trongbnhloiny nhnctbnh

theo tnh tit,cho php chng ta hcccc khi nimv sthtmitkinh nghim

3.4.3. B nh di hn


142/455

142

3.4.3. B nh di hn

Loinhtheo ngngha Bnhny c tchccho php chng ta truy cp

thng tin, cc miquan hgiacc thng tin v cho phpchng ta suy din

Bnhny thngcbiudindidngmnglimnglingngha(semantic network)

3.4.3. B nh di hn


143/455

143

3.4.3. B nh di hn

Loi nh theo ng ngha

3.4.3. B nh di hn


144/455

144

3.4.3. B nh di hn

Loinhtheo ngngha Cho php chng ta suy din: V ch c 4 chn => ch sn

c 4 chn

Lu : C nhng lin kt ni sang hn nhng lnh vc

khc (v dnhSnoopy phim hothnh)

3.4.3. B nh di hn


145/455

145

3.4.3. B nh di hn

Loinhtheo ngngha S tn ti ca mng ng ngha ny trong con ngi

chng ta c chng minh bi Collins v Quillian(1969):

Mt s ngi c hi v cc thuc tnh ca mt s itng. Thigian suy nghtrlicghi li. Ktqul:ngi ta suy ngh lu hnkhi chinhng cu hikiunh: ch sn c th khng so vi cc cu hi kiu nh:chsnc tm vtckhng?

L do: Con ngiphitm kimthng qua mngngngha,suy ngcln tm ra cu trli

3.4.3. B nh di hn


146/455

146

3. .3. d

Mtsloicutrc khc cabnhcngcara gii thch chng ta lu trkin thcnh thno: Kiukhung

Kiukchbn Kiuquy tc

3.4.3. B nh di hn


147/455

147

B nh di hn kiu khung

CH

Tnh cht c nh: C 4 chn

Ty bin:

-Kch c

-Mu sc

3.4.3. B nh di hn


148/455

148

B nh di hn kiu kch bnKCH BN A CH I KHM

iu kin:-Ch b m-Bnh vin th y m ca-Ngi ch c tinKt qu:-Ch khi m-Ngi ch ngho hn-Bc s giu hn

Cnh:-n phong khm-Ngi ch-Bc s khm-Tr tin

3.4.3. B nh di hn


149/455

149

B nh di hn kiu quy tcNU ch vy ui

TH li gn

NU ch nhe rng

TH chy

3.4.3. B nh di hn


150/455

150

X l Ba hot ng chnh:

Ghi nh

Qun

Truy cp thng tin

3.4.3. B nh di hn


151/455

151

Ghi nh Do qu trnh nhcinhclitbnhngnhn

Ebbinghaus(1885): T th nghim v rt ra kt lun:lngthng tin nhctlvithigian hc

Baddeley v Longman (1978): Vicghi nhhay hc tpsthiuqutthnnun cdn triutheo thigian

3.4.3. B nh di hn


152/455

152

Ghi nh Nhcc tm tcc itngdhncc tm tcc

khi nim: Chui1: Nh - cacymoch - t

Chui2: Tuitc - logic - lnh- im lngqu kh- chngha Nhngthng tin c nghav quen thucth dnhhn:

c thn thoi Hy Lp th kh nh hn thn thoi VitNam, chu

3.4.3. B nh di hn


153/455

153

Qun Nu qu trnh ghi nh thng tin c tr gip bng cc

cu trc, s quen thuc v tnh c th, lm th no chng ta c thmtthng tin, c thqun?

3.4.3. B nh di hn


154/455

154

Qun C hai hcthuytchnh vsqun:

Sphn r (decay) : Thng tin trongbnhsdndnbmti(Ebbinghaus,1885)

Scan thipnhiu(interference): Cc thng tin cbmtidoc scan thipcacc thng tin mi. Cc thng tin cnhiukhicngc thcan thiplithng tin mi V d1.: Bnc sTdi ngmi,vicnhsdi ngmislm

bnqun isdi ngc

V d2: thnhthongbnrnhmvo ngnh ngiyu cthayv ithngnnh ngiyu mi

3.4.3. B nh di hn


155/455

155

Qun Cm xc cng nh hng n s qun cc s kin c

nhiucmxc stbqun hncc skinc t cmxc

Cu hitra: Chng ta c thcsqun hay chl thng

tin kh c th (khng th) truy cp c?khng aichng minh c tuy nhin c nhngbng chng lthng tin c thkhng mtihn

3.4.3. B nh di hn


156/455

156

Truy cpthng tin Hai loitruy cpthng tin:

Nhli: Cc thng tin csao chp litbnh

Nhndng: So snh thng tin vicc thng tin trongbnh. Qu

trnh nhndngnginhnqu trnh nhliv c thng tin lmgi. V dnhra mtmtngikh hnnhnra ngi; cuhilachndhncu hithng thng

3.5. B x l


157/455

157

Suy ngh Rn luyn k nng

X l li

3.5.1. Suy ngh


158/455

158

y g

im khc bit gia ngi v loi vt, gia ngiv my

Suy ngh: Giiquytcnhngvnchng ta chathybao gi

Suy ngh: Suy lun(Reasoning)

Giiquytvn(Problem solving)

3.5.1. Suy ngh


159/455

159

y g

Suy nghSuy lun Dng cc kin thcc suy ra ktlunhocsuy ra

mtiug mivlnhvcangquan tm

Ba loisuy lun: Suy din(deductive) Quy np(inductive)

??? (abductive)

3.5.1. Suy ngh


160/455

160

Suy ngh Suy lun Suy din a ra kt lun tt yu t mt s gi thit

Nu l chiu th 2 th chng ta c tit HCI

Hm nay l th 2------------------------------------------------

=> chng ta c tit HCI

3.5.1. Suy ngh


161/455

161

Suy ngh Suy lun Suy din Chng ta cng c khi suy din sai:

Mt s hc sinh i hc i lm

Mt s ngi i lm l sp---------------------------------------------

=> Mt s hc sinh l sp

3.5.1. Suy ngh


162/455

162

Suy nghSuy lunQuy np Tngqut ha tnhng trnghpchng ta thy

suy ra nhngtrnghpchng ta chagp

V d: Minginng chng ta gpusv=> mi

nginng usv Ttnhin, suy lunny c thsai! Chngminh l sai th

d- chra mtv dsai ! Khng thchngminh ng->tm cng nhiubngchngcng tthtrcho kin

3.5.1. Suy ngh


163/455

163

Suy ngh Suy lun abductive Suy lun t mt thc t ra hnh ng hay trng thi gy ra

thc t

Nu ng A ung ru th ng A i xe my nhanhHm nay ng A i xe my nhanh

----------------------------------------------------

ng A ung ru

Khng ng tin cy! Nhng vn c dng nhiu

3.5.1. Suy ngh


164/455

164

Suy ngh- giiquytvn Tm gii php cho mt nhim v mi dng nhng kin

thcchng ta c

C nhiu quan im v vic chng ta gii quyt vn

thno: Nguyn l Gestalt

Nguyn l khnggian vn

Nguyn l phploisuy trong giiquytvn

3.5.1. Suy ngh


165/455

165

Suy ngh - gii quyt vn - Nguyn l Gestalt Chng ta gii quyt vn bng phng php m mm

(trial and error)

Th nghim: Cho mt s cc, mt s chic kmlm th

no ni 2 on dy in li vi nhau?

3.5.1. Suy ngh


166/455

166

Suy ngh- giiquytvn- Nguyn l Gestalt Ktqu:

C nhiuligiikhc nhau

Trong c mtligii: Khi ngith nghimangdng km

ctvdy indy lc=> Buckm vo dy in- tora conlcchysang pha dy kiabtcon lcni2 dy vinhau

Nguyn l ny nghe rthpdnnhngchac bngchngchngminh

3.5.1. Suy ngh


167/455

167

Suy ngh - gii quyt vn - Nguyn l khnggian vn Tm im ca vic gii quyt vn chnh l mt khng

gian vn (Newell v Simon, 1972).

Khng gian vn cha nhng trng thi vn , giiquyt vn c thc hin thng qua vic sinh ra nhngtrng thi vn bng cc ton t (operator) chuyn trngthi

Mt vn c mt trng thi ban u v mt trng thich. Con ngi dng cc ton t i n trng thich.

3.5.1. Suy ngh


168/455

168

Suy ngh - gii quyt vn - Nguyn l khnggian vn Tuy nhin khng gian vnrtlnnn con ngidng

phngphp tm kimheuristics

i C tin C thcn

C vic

3.5.1. Suy ngh


169/455

169

Suy ngh - gii quyt vn - php loi suy tronggii quyt vn Php loi suy (analogy): Qu trnh suy lun da trn s

ging nhau, s tng t

Trong gii quyt vn , cc lnh vc c cng cc cchgii quyt c c a sang cc vn mi tng t

3.5.1. Suy ngh


170/455

170

Suy ngh - gii quyt vn - php loi suy tronggii quyt vn V d: a cho cc bc s gii quyt mt khi u bng

chiu tia. Tuy nhin nuchiu tia mnhqu ph ccc

m lnh.Nuchiutia yuqukhng ph khiu. Giiphp: Chiucc tia yutmipha vo khiuva

khng ph cc m lnh, vahpthnh tia mnhphkhiu

3.5.1. Suy ngh


171/455

171

Suy ngh- giiquytvn- phploisuy tronggiiquytvn Chc10% sbc sara giiphp

Tuy nhin sau khi cho cc bc sxem tnh hung: nh mt pho i, ngi ta cn c mt s on n. Tuy

nhin trn ngi,c rtnhiumn v rtdnnucsoniqua. Ngi ta nhchia sonthnh cc nhm nhi theonhngngngkhc nhau.

c n80% cc bc sara giiphp ni trn xl khiu

3.5.1. Rn luyn k nng


172/455

172

Gii quyt vn tp trung vo vic gii quytnhng vn mi

Trn thc t, chng ta rt hay gp li cc vn c thng qua vic lp i lp li gii quyt cc vn crn luyn k nng tng hiu sut cng vic

V d: Nu n, chi c....

3.5.1. X l li


173/455

173

Trong cucsng,chng ta khngphil khng mcsai lm!C sai lmnh,c sai lmln

Li khi s dng k nng: Khi tnh hung thayi,chng ta vnsdngknng=> gy ra li.

V d: Knngixe tch lm vnh. Hm nayvdnqua siu thmua - vndng knngciqu mtsiu th


174/455

174

Xin chn thnh cm n!

BI GING


175/455

175


ST:0912316373

B mn: HTTT-HCNHNEMail: [email protected]

Thi lng:

S tn ch: 03 Ln lp: 28

TH + BTL: 30


176/455

176



Thi: Kt qu BTLChuyn cn:01

Ti liu tham kho


177/455

177

[1] ng Vn c,Nguyn Th Phng Tr. Giaodinngimy, NXB Khoa hctnhin cng ngh


[3] Bi ThDuy. Bi gingTngtc ngimy

[4] Jenifer Tidwell. Designing Interfaces, 2005



[7]


178/455

178

CHNG 4MY TNH TRONG HCI

4.1. Tng quan


179/455

179

c th hiu c tng tc gia ngi v mychng ta cngphihiucmy tnh, khnngvhnchcamy tnh

My tnh l (Thimbleby, 1990): Phatham dvo stngtc m chychngtrnhTheo nhnghany, mtchiccng tcncngc th

coi l my tnh???

4.1. Tng quan


180/455

180

Mt h thng my tnh in hnh

4.1. Tng quan


181/455

181

Nhpdngb v dngtngtc Nhp vo dng b: Khi c khi lng ln d liu, theo

nhdngnhtnh=> nhpd liunhanhkh c thcchunbbingisdnggiao tipgiamy v

mykhng cHCI quan tm Nhp dng tng tc : Ngi s dng ngi trc mn

hnh v nhpdliu- vncHCI quan tm

4.2. Thit b nhp


182/455

182

Bn phm: QWERTY: Datheo bn phm camy nhch- cc t

ckthptcc chci vtr cch xa nhautrnh tcnghnmy nhch- trnh mitay

4.2. Thit b nhp


183/455

183

Bn phm: Alphabectic: Sp xp theo th t bng ch ci A, B, C d

cho ngi mi s dng khng tin li cho ngi sdng lu

4.2. Thit b nhp


184/455

184

Bn phm: DVORAK: Tng tc nh my dnh cho ngi thun

tay trikhng th thay th c QWERTY

4.2. Thit b nhp


185/455

185

Bn phm: Chord: 5 phm, nh, gn, mun g mt chg mt vi

phm mtnvi lnnhm chn

4.2. Thit b nhp


186/455

186

Nhn dng ch vit: Khng chnh xc lm tuy nhin ngy cng c ci tin

T nhin hn

V d: PDA

Nhn dng ting ni

4.2. Thit b nhp


187/455

187

Chut Chut hai bnh xe

Chut bi

Chut quang

4.2. Thit b nhp


188/455

188

Trackball Con chut lt ngc khng cn din tch

4.2. Thit b nhp


189/455

189

Joystick Mt s laptop dng loi ny thay chut (IBM Thinkpad)

4.2. Thit b nhp


190/455

190

Mn hnh cm ng

4.2. Thit b nhp


191/455

191

Light pen Ging sng trong cc tr chi bn sng

4.2. Thit b nhp


192/455

192

Bngcmng Dng nhiutrong cc laptop

Nhntn hiutmt

Dng mt s phm ca bn phm: ln, xung, tri,phi

4.2. Thit b nhp


193/455

193

Chut3D: Di chuyn trong khng gian: v tr

Thm 3 chiu na iu khin: gc ln xung, hng triphi, gc quay quanh trc

4.2. Thit b nhp


194/455

194

Gng tay d liu (dataglove) T nhin

t

4.2. Thit b nhp


195/455

195

Mthctio: Val thitbra, val thitbvodavo chuynngcauthay igc quay

Thitb theo di chuyn ng ca c ngi: Dngcc sensor nhvo ngi

4.2. Thit b xut


196/455

196

Mn hnh CRT (Cathode Ray Tube) Mn hnh LCD (Liquid Crystal Display)

Mn hnh 3 chiu

Cc thitbnginkhc nhLED

Cc thitbpht m thanh

My in


197/455

197

Xin chn thnh cm n!

BI GING


198/455

198


ST:0912316373



Ln lp: 28

TH + BTL: 30


199/455

199



Thi: Kt qu BTL hoc thi l thuytChuyn cn:01

Ti liu tham kho


200/455

200




[4] Jenifer Tidwell. Designing Interfaces, 2005


[6] Caretta Software Ltd., GUI Design Studio User

Manual,Version 2.3, March 2007. . [7]


201/455

201

CHNG 5THIT K HCI HNG

NGI S DNG

5.1. V d giao din


202/455

202

Sybase PowerBuilder

5.2. Cc m hnh pht trin phn mm


203/455

203

M hnh thc nc

5.2. Cc m hnh pht trin phn mm


204/455

204

M hnh thit k lp

5.2. Vng i k ngh GDNSD


205/455

205

Cc bc: Nhn bit ai l ngi s dng

o tnh s dng c

Thit k tng tc hng

mc tiu Thit k lp(lm bn mu

nh gi tnh s dng c)

Nghin cu phn hi



206/455

206

Nhn bit ai l ngi s dng Quan st, phng vn s ng

Hnh thnh user profile cho cc nhm

Nhn bit mc tiu, quan im ca ngi s dng

Hnh thnh kch bn ngi s dng in hnh



207/455

207

o tnh s dng c Phn tch sn phm (giao din) cnh tranh theo kinh nghim

Thit lp ch tnh s dng cho giao din



208/455

208

Thit k tng tc hng mc tiu Thit k giao din ban u hng mc tiu



209/455

209

Thit k lp Thc hin thit k, kim th, ti thit k

Xy dng v nh gi cc bn mu

Cc yu t cn quan tm

Pht hin cc vn lin quan n tnh s dng c Sa li, hnh thnh giao din mi

Thu thp, lu tr cc l do thay i thit k

nh gi phin bn giao din mi theo gii hn thi gian hay kinhph



210/455

210

Nghin cu phn hi Thu thp d liu v tnh s dng sau khi phn pht sn phm

dng th

Phng php tin hnh: quan st, phng vn, ly kin t

bo ch, th t, file log ca phn mm,

5.3. Thit k hng ngi s dng


211/455

211

Mc ch Thit k h thng s dng thun tin

Tp trung vo Mc tiu, m hnh khi nim, kh nng, rng buc ca ngi

s dng

5.3. Thit k hng ngi s dng


212/455

212

Cch thc hin Ngi thit k phi hiu v ngi s dng: nhim v, yu

cu v tnh s dung,

Ngi s dng nn tham gia tch cc trong giai on phn

tch thit k Lp tin trnh thit k

Ngi thit k v ngi s dng cng nhau nh gi hthng v a ra gii php ci tin

5.4. Phn tch NSD v nhim v


213/455

213

Mc tiu ca phn tch ngi s dng Nhn bit ai l ngi s dng h thng?

H c k nng g, mc n u?

H s dng h thng nh th no?

5.4. Phn tch NSD v nhim v Nhim v ca phn tch ngi s dng


214/455

214

Nhim v ca phn tch ngi s dng Nhn bit cc yu t quan trng ca ngi s dng

Tui, nam/n, dn tc Hc vn Kh nng vt l

Kinh nghim s dng my tnh Cc k nng (g phm, c,) Kinh nghim chuyn mn, nghip v Tn sut s dng h thng Mi trng lm vic, x hi Quan h giao tip, nn vn ha



215/455

215

Nhim v ca phn tch ngi s dng Phn nhm ngi s dng theo cc yu t

Cc mc k nng s dng my tnh v nghip v: Ngi mi, ngihc vic, ngi thnh tho, chuyn gia,

Cc mc yu t tn sut s dng h thng: Thng xuyn, thnh

thong,



216/455

216

V d 1: H thng cho php mua tp ha v tr tin Ai l ngi s dng

Ngi mua tp ha

Tui t 10 n 80, kh nng vt l (cao, tnh nng ng, scmnh,)

Khng c kinh nghim my tnh Khng c o to

C hiu bit v thc n, khng hiu bit v nghip v kim k casiu th

Khch hng trong siu th thng hi nhau v ci mnh cn



217/455

217

V d 1: H thng cho php mua tp ha v tr tin Nhm ngi s dng chnh

Ph n thng mua bn cho gia nh, thng dn theo tr em

Nhn vin bn hng gip khch hng



218/455

218

V d 2: H thng k ton cho doanh nghip nh Mc k nng s dng my tnh Bt u: 15%

Hc vic: 30%

Kinh nghim: 45%

Thnh tho: 10%



219/455

219

V d 2: H thng k ton cho doanh nghip nh Mc k nng lnh vc my tnh Bt u:5%

Hc vic: 15%

Kinh nghim: 50%

Thnh tho: 30%



220/455

220

V d 2: H thng k ton cho doanh nghip nh Tn sut s dng my tnhNgi t dng: 20%

Ngi hay dng: 80%



221/455

221

V d 2: H thng k ton cho doanh nghip nh S thch mi trng ha Windows: 50%

MacIntosh: 35%

Khc: 10%

Khng bit: 5%



222/455

222

V d 2: H thng k ton cho doanh nghip nh Tnh ton tm ra nhm ngi s dng chnh da trnxc sut. H thng ny thit k ch yu cho nhm ngi ckinh nghip s dng my tnh, c kinh nghim trong nghipv k ton, thng xuyn s dng h thng trn mi trngWindows ( c xc sut ln)



223/455

223

Phn tch nhim v Thu thp d liu v nhim v m ngi s dng thc hin Phn tch hiu su sc nhim v

M t nhim v mt cch r rng

m bo giao din ph hp vi nhim v ca ngi s dng



224/455

224

Phn tch nhim v S khc nhau gia phn tch h thng v phn tch nhim v Phn tch nhim v hng ti hnh ng bn ngoi ca user

Phn tch h thng hng ti thit k bn trong ca h thng

Cc cu hi cn tr li khi phn tch nhim vNgi s dng lm ci g H lm vic bng cng c g

H cn phi hiu bit nhng g khi lm vic



225/455

225

Phn tch nhim v V d: Vi h thng qun l th vin, t c mc tiumn sch: i n th vin

Tm sch cn trn my tnh

n gi v ly sch

Mang sch n ng k vi th th v ri khi th vin



226/455

226

Phn tch nhim v Cch thc hin: Phn r chc nng Mc tiu

Tin iu kin

Phn r nhim v

Nhim v phi c ng, nu khng th ngi s dng phi ckh nng kt thc nhim v



227/455

227

Phn tch nhim v Phng php Quan st

Phng vn


228/455

228

Xin chn thnh cm n!

BI GING


229/455

229


ST:0912316373



Ln lp: 28

TH + BTL: 30


230/455

230



Thi: Kt qu BTL hoc thi l thuyt

Chuyn cn:01

Ti liu tham kho [1] ng Vn c, Nguyn Th Phng Tr. Giao


231/455

231




[4] Jenifer Tidwell. Designing Interfaces, 2005 [5] Jef Raskin. Human Interface, 2000




232/455

232

CHNG 6NGUYN L THIT K

6.1. V d giao din In ntrong Microsoft Office


233/455

233

g Sdngmenu

Sdngthanh cng c

Sdngthpphm

6.1. V d giao din In n trong Microsoft Office


234/455

234

g H tr cc dng ngi dng khc nhau

Phi nht qun

y l thit k tt hay ti?

6.1. V d giao din iu khin t xa ca tivi


235/455

235

6.1. V d giao din iu khin t xa ca tivi


236/455

236

Tnh n gin: Khng qu nhiu phm, s dng phn mmtrn mn hnh

Cc phm quan trng phi ln v c hnh dng duy nht Cc phm lin quan phi nh x t nhin; knh, ting nh

x ng Phm Pause phi ln. Thit k ha tt: S dng t mu, ch nhn mnh cc

phm quan trng

Thit k cng nghip: Hnh dng, kch thc ph hpTi sao phm Play li nh?

6.2. Hng dn TK tnh s dng Thit k hng ngi s dng


237/455

237

g g g Xc nh ai l ngi s dng

Hiu c nhim v ca h

Lut Fitts Kch thc ca cc iu khin lin quan n tm quan

trng ca n

Kch thc iu khin nh rt kh chn

Cnh mn hnh l qu gi

6.2. Hng dn TK tnh s dng B nh


238/455

238

S dng chia on n gin ha trnh din thng tin

Ti u ha b nh lm vic

S dng mu Khng ph thuc mnh vo vic phn bit cc mu Trnh mu trn ch xanh

Trnh chi tit l mu xanh nh

6.2. Hng dn TK tnh s dngNguyn l Norman v thao tc trc tip


239/455

239

g y p S gi

nh x t nhin

R rng

Phn hi

6.3. Hng dn ca Nielsen Ph hp vi th gii thc


240/455

240

Ph hp nhiu nht vi kinh nghim ngi s dng trongth gii thc

Nht qun v chun Ngi s dng khng b bt ng vi cch m lnh v giao

din lm vic Vic tng t th hnh ng theo cng cch nh nhau Cc loi nht qun

Nht qun trong: Nht qun ngay trong tng ng dng

Nht qun ngoi: Nht qun gia cc ng dng trong cng flatformNht qun n d: Nht qun trong vic chn n d trong UI

6.3. Hng dn ca Nielsen Tr gip v ti liu


241/455

241

Nhy ng cnh

Hng nhim v

C th

Ngn gnNgi s dng lm ch

6.3. Hng dn ca Nielsen Quan st trng thi h thng


242/455

242

Thay i hnh dng con chy

S dng highlight

S dng thanh trng thi

Khuyn co Hnh ng 5s, hin th progressbar

6.3. Hng dn ca Nielsen Mm do v hiu qu


243/455

243

6.3. Hng dn ca Nielsen Qun l li


244/455

244

Trnh li

Li m t

Li thu ht

Li phng thc Thng bo li cn

Chnh xc

S dng ngn ng ngi s dng

C tnh xy dng Lch s

6.3. Hng dn ca NielsenNhn dng, khng hi tng


245/455

245

Gim gnh nng b nh ca ngi s dng

La chn thay cho nhp

Dng menu thay cho ngn ng lnh

6.3. Hng dn ca Nielsen Thit k m thut v ti thiu


246/455

246

Loi b nhng th khng c l do c mt

Khng tr gip qu di ca s chnh

Loi b nhng ha khng lin quan

Loi ra cc c trng khng cn thit



247/455

247



248/455

248

S dng t mu v chn mu ph hp

6.4. Cc quy tc vng ca Shneiderman1. Nht qun


249/455

249

2. Cho php ngi dng thng xuyn s dng phmtt

3. Cung cp thng tin phn hi

4. Thit k cc hp thoi khi kt thc5. phng v x l li n gin6. Cho php d dng thc hin hnh ng tr v

7. Ngi s dng lm ch8. Gim thiu ti b nh ngn hn


250/455

250

Xin chn thnh cm n!

BI GING


251/455

251

GIAO DIN NGI MYGV: V c HuyST:0912316373



Ln lp: 28 TH + BTL: 30


252/455

252

Cc im:Kim tra nh k: 02Kim tra thng xuyn: Khng nh trc


Chuyn cn:01



253/455

253








254/455

254

CHNG 7M HNH VO RA

7.1. V d giao din Thng ipxuthinkhi hynidung caIE cache

i d


255/455

255

trong Windows

7.1. V d giao din Thng ipxuthinkhi hynidung caIE cache

i d


256/455

256

trong Windows

7.1. V d giao din IBM Eclipse


257/455

257

7.2. M hnh ra Cc thnhphn(components)


258/455

258

itnghaspxptheo hnh cy, c khnngtvli

Nt (strokes)

V u ra bng cch gi cc hm v mc cao drawLine,drawRectangle, drawArc, v drawText

Pixel Xem mn hnh nhmng2D cc imnhv vtrctip

tngimnh.

7.2. M hnh raCc ngdngGUI hiniusdngc3 m hnh

HTML ( ) i l P i


259/455

259

trn: HTML (component); my in laser Postscript(stroke input, pixel output); plotter (stroke input andoutput); PDF (stroke); LCD panel (pixel).

V d

7.3. Phong cch tng tc-Metaphor


260/455

260

7.3. Phong cch tng tc-Metaphor Phong cch tng tc

N l h


261/455

261

Ngn ng lnh Trc y l ngn ng iu khin cng vic, tham gia vo dng

lnh

Ngy nay c nhng vo phong cch tng tc khc

Khi thit k cn ch thit k c php Thc n v form

Trnh din dy thc n hay form ti ngi s dng

c nhng vo phong cch tng tc khc (hp thoi)

Vn quan trng l thit k cu trc ng dn

7.4. M hnh vo V d: Google


262/455

262

7.4. M hnh vo V d: Google

i


263/455

263

u im Thit k p v ti thiu

c trng v lin kt khng cn thit b loi b

Np xung nhanh v d s dng

Hn ch: Vi ngi s dng ln u Google thc s lm g?

Phi g g vo hp Text?

Cm t Google Search, Im Feeling Lucky c ngha g?

Tr gip u?

7.4. M hnh vo S dng s kin cho vic vo d liu

Gi di i d t


264/455

264

Giao din ngi s dng trc y Hin th du nhc ch ngi s dng nhp vo cu tr li

H thng lm ch hon ton i thoi, lm ch trnh t m input voutput xy ra

Giao din ngy nayNgi s dng ch ng v t do

T do nhn chut ti bt k u trn giao din

Kch hot lnh bt k nu n sn sng

Tng tc vi bt k khung nhn no nu nhn thyi thoi nghing mnh v pha ngi s dng

7.4. M hnh vo Cc loi s kin vo

S ki th( )


265/455

265

S kin th(raw) Xut pht t trnh iu khin thit b

Di chut, nhn, nh phm chut, bn phm

Nu khng h tr cc yu t ny th l thit k ti

S kin chuyn i(translated) Chuyn s kin th mc thp thnh s kin mc cao

S kin nhn, nh phm, chut chuyn thnh Keypressed,KeyDown, KeyUp, Click, MouseDown, MouseUp,

Tng tnh mm do cho lp trnh vin

7.4. M hnh vo Tnh cht ca s kin vo

V t h h t


266/455

266

V tr con chy chut

Trng thi ca phm chut

S kin vo bao gm trng thi phm b sung Shift, Alt,

Control, Thi im nhn d liu vo

Cc s kin c lu tr trong hng i

7.4. M hnh vo Hng i s kin

t i d th t hi t t


267/455

267

u vo t ngi s dng thng xut hin t ngt

Hng i s kin cung cp vng m gia ngi s dngv ng dng ng dng khng phi x l s kin ngay khin xut hin

S kin sn nh nhn, nh phm khng thay i

S kin m t trng thi lin tc c th kt hp thnh skin n vi trng thi cui cng

V d: Di chuyn hnh ha ln trn mn hnh, v ngbt k bng di chut.

7.4. M hnh vo Vng lp s kin

ki t h i h ht h


268/455

268

c cc s kin trong hng i, phn pht chng n ccthnh phn phn mm tng ng trong phn cp quan st

Cc toolkit mc cao cung cp vng lp ngay bn trongchng (Java, VB, C#,)

Cc toolkit mc thp yu cu ng dng lm vic ny

7.4. M hnh vo Phn pht v truyn t s kin

Chn thnh phn phn mm nhn s kin


269/455

269

Chn thnh phn phn mm nhn s kin

Nu thnh phn phn mm t chi qun l s kin th nc truyn ln phn cp quan st cao hn (cha) cho nkhi c qun l. Nu khng c thnh phn phn mmno qun l th s b qua


270/455

270

Xin chn thnh cm n!

BI GING

GIAO DIN NGI MY


271/455

271





Cc im:Ki h k 02


272/455

272

Kim tra nh k: 02



Chuyn cn:01


din ngi my NXB Khoa hc t nhin cng ngh


273/455

273

dinngimy, NXB Khoa hctnhin cng ngh [2] LngMnhB. Gio trnh Tngtc ngimy





CHNG 8


274/455

274

CHNG 8XY DNG BN MU

7.1. V d giao din Phnmmghi aCD Adaptec Easy CD Creator


275/455

275

7.2. Prototype l g? Khi nim

L m hnh thu nh


276/455

276

L m hnh thu nh

L bn tho hay m phngvikhnngd thay icamtphnUI

Sdngtrong nhiulnhvcthitkkhc nhau

trung thckhc nhau

7.2. Prototype l g? Khi nim


277/455

277

7.2. Prototype l g? Ti sao phi xy dng prototype

Prototype c xy dng nhanh hn nhiu so vi ci t


278/455

278

Prototype c xy dng nhanh hn nhiu so vi ci tcui cng nh gi, nhn phn hi sm v u, nhcim ca thit k

Vi thit k kh gii quyt Xy dng nhiu prototype

cha cc gii php khc nhau H tr giao tip gia cc i ng pht trin v s dng UI

7.2. Prototype l g? Cc loi prototype

Dy cc phc ha mn hnh


279/455

279

Dy cc phc ha mn hnh

Storyboard (phim hot hnh nh dy cc phc ha)

Powerpoint slideshow

Video m phng s dng h thng Makt bng ba cng

on chng trnh vi chc nng hn ch c vit bngngn ng lp trnh C#, Java...

M hnh vt l

7.2. Prototype l g? trung thc

L mc tng t ca prototype so vi giao din UI cui


280/455

280

L mc tng t ca prototype so vi giao din UI cuicng

Prototype mc trung thc thp thiu nhiu chi tit, sdng nguyn liu r tin,

Prototype mc trung thc cao c mc tng t caovi sn phm cui cng

7.3. Prototype giy Tng quan

L la chn tt cho cc vng lp thit k u tin


281/455

281

L la chn tt cho cc vng lp thit k u tin

L m hnh ca giao din ch yu c lm t giy

c phc ha bng tay trn cc mu giy. Mi mu giybiu din cc phn t khc nhau

p ng tng tc bng cch Xp cc mu giy, vit cc p ng ln giy

Dng tay tr thay chut

Vit trn mu giy thay cho g phm

7.3. Prototype giy Tng quan

Kim th


282/455

282

Kim th Giao nhim v cho ngi dng, quan st ngi dng thc hin

nh gi trung thc thp c v hnh dng v cm gic

C th c trung thc cao theo chiu su vi chi ph thp

7.3. Prototype giy Ti sao phi xy dng prototype giy?

Phc ha bng tay nhanh hn phc ha bng my tnh, lp


283/455

283

Phc ha bng tay nhanh hn phc ha bng my tnh, lptrnh

D thay i

Gip ngi thit k tp trung tr tu vo bc tranh tng th,trnh ch vo chi tit nh nht

Tng phn hi nhn c t ngi s dng

Khng i hi cc k thut c bit

7.3. Prototype giy Mt s v d


284/455

284



285/455

285



286/455

286

7.3. Prototype giy Cc cng c xy dng maket giao din

Bng p phch trng (11x14) Lm nn, khung ca s


287/455

287

, u g ca s S lng cc th ch mc (4x6, 5x8)

Lm menu, window contents, dialog boxes, H dn

Dn cc mu giy Bng giy trng

Text fields, checkbox, short message, Giy bng knh

Hilight, user typing My sao chp

To nhiu blank Bt, ko,

7.3. Prototype giy Kinh nghim xy dng prototype giy

Kch thc nn ln hn thc t


288/455

288

Ngn tay to hn chut

Ch vit thng to hn ch in

t trn bn, quan st t xa

Khng quan tm nhiu n mu sc S dng mu n

Khng cn trnh din mi hiu ng quan st trn giy

T chc tt cc mu giy nh

S dng kp giy, phong b th

7.3. Prototype giy C th bit g, khng bit g t prototype giy

Ngi s dng cn phi hiu n d, m hnh khi nim


289/455

289

g g p , C th nhn bit cc vn

M hnh khi nim: Ngi s dng c hiu UI khng?

Chc nng: N c l ci cn phi lm khng? C thiu c trng

khng? ng dn v lung nhim v: Ngi s dng c th tm ra cch

s dng? Ph hp vi thng tin tin iu kin?

Thut ng: Ngi s dng c hiu cc nhn khng?

Ni dung mn hnh: Ci g s xut hin trn mn hnh

7.3. Prototype giy C th bit g, khng bit g t prototype giy

Kh c th nhn bit cc vn


290/455

290

Mi vn v tnh s dng c

Tnh trung thc ca ha

Nhim v tng tc m n ph thuc vo cm gic trung thc

cao (lut fitts,) Thi gian p ng

7.3. Prototype my tnh Tng quan

C trung thc cao v hnh dng v cm gic


291/455

291

g g g C trung thc thp theo chiu su

7.3. Prototype my tnh C th bit g t prototype my tnh

Phn hi ng t giao din


292/455

292

g g B tr mn hnh

R rng, phc tp hay ri bi

C th tm thy cc phn t quan trng

Mu, font, icon v cc phn t khc La chn ph hp cha?

Phn hi tng tc C kh nng phn hi di nhiu dng khc nhau: trng thi, thng

ip, hnh dng con tr, Lut fitts

Cc iu khin ln cha? C qu gn nhau khng?...

7.3. Prototype my tnh Ti sao s dng prototype tool?

Nhanh hn lp trnh


293/455

293

p D sa li

D thay i, d vt i

7.3. Prototype my tnh Cc k thut xy dng prototype

Storyboard


294/455

294

y L trnh t ca mn hnh c nh. Mi mn hnh c mt hoc nhiu

hostpots(hyperlink) c th bm chut nhy ti mn hnh khc

7.3. Prototype my tnh Cc k thut xy dng prototype

Form builder


295/455

295

L cng c v cc giao din thc s dng cc widgets (button,label,)

Gim cng sc m ha, nht qun ngoi

Mang theo suy ngh ca ngi thit k

7.3. Prototype my tnh Cng c xy dng Storyboard

Trnh din PowerPoint ch l slide show. Nn to hyperlink


296/455

296

nhy ti slide bt k

Macromedia Flash gip xy dng giao din a phng tin.Hu ch cho cc thng tin phn hi ng.

HTML. Mi mn hnh l mt bn nh

7.3. Prototype my tnhNhn xt Storyboard

u im: Ging prototype giy


297/455

297

Nhc im: Tnh

7.3. Prototype my tnh Form Builder

HTML


298/455

298

.NET Windows Forms, Eclipse Visual Editor, BorlandJbuilder, Sun NetBeans,


299/455

299

Xin chn thnh cm n!

BI GING

GIAO DIN NGI MY


300/455

300


B mn: HTTT-HCNHN






301/455

301



Chuyn cn:01




302/455

302

g y g g [2] LngMnhB. Gio trnh Tngtc ngimy





CHNG 9


303/455

303

CHNG 9THIT K BIU TNG

9.1. Tng quan Cc icon (biu tng/ hnh v) c s dng trn mn hnh

thc hin s tng tc gia cc ng dng v ND. Cc biu tng ho c th cung cp s c lp v ngn ng


304/455

304

Cc biu tng ho c th cung cp s c lp v ngn ngtrong khi trao i thng tin vi ND.

L mt phn ca giao din ho cung cp kh nng hc, hiu

v ghi nh cc phn t chc nng ca h thng v tr gip NDkhi thao tc vi nhng phn t .

Thng mt giao din ngi dng ho GUI s cung cpmt biu din n d cho cc nhim v ca ND. Cc biu

tng c th biu din cc n d mt cch trc tip, hay mti tng vt l mt cch gin tip.

9.1. Tng quan Cc loi

Biudin cc i tng vt l nh a, my in,


305/455

305

Biudin cc chc nng cu HT (action Icons)

Biudin cc i tng iu khin (control datas)

9.1. Tng quan Cu trc khi nim ca i tng biu tng


306/455

306

9.2. Cc chun thit k C nhiu chun cho thit k m bo tnh tin dng

(Usability)


307/455

307

9.2. Cc chun thit k


308/455

308

9.2. Cc chun thit k Cch tip cn chun

Cc chun ISO hng x l (Process-Oriented ISO Standards) ISO 9241-11 Hng dn tnh dng c


309/455

309

ISO 13407 : Cc qu trnh thit k ngi dng trung tm cho cc h thngtng tc

ISO/TR 18529 : Cng thi hc cho tng tc ngi dng h thng . Ccm t qu trnh , chu trnh , vng i hng ngi dng

ISO/TR 16982 : Cng thi hc cho tng tc ngi dng h thng. Ccphng php tnh dng c h tr cho thit k hng ngi dng

Cc chun ISO hng sn phm (Produit-Oriented ISO Standards) ISO/IEC 91261 : m hnh cho cht lng ca sn phm da trn cng

ngh , k thut

ISO/IEC 91262 : tnh dng c trong cc thc o cht lng bntrong v bn ngoi


Chun ISO 9241 cho tnh tin dng


310/455

310


Chun ISO 11581 cho thit k ICON


311/455

311

9.2. Cc chun thit k 7 nguyn tc thit k

1. Approach Icon Design Holistically


312/455

312

"If you need to draw several

icons, you need to think over

images for the whole set of icons

before proceeding with

illustrating activities." This is oneof two major points made in this

article on icon design. He goes

on to explain how failing to plan

how the whole set of icons will

work together from the beginning

will ensure a huge waste of time,as redesign will be inevitable.


2. Consider Your Audience


313/455

313

Symbols may differ for common

elements you may use for your

designs.

An important aspect here is

national characteristics. Cultural

traditions, surroundings and

gestures can differ radically from

country to country."


3. Design for the Size the Icon will be Used At


314/455

314

The approach taken for small

icons and large icon design is

immensely different. Firewheel

has a good article that coversthe scaling subject called Icon

Design: Bitmap vs Vector.

Also, review this article on

Icon Design Sizing over atMezzoblue. It covers some

inherent issues with designing

icons for small sizes.


4. Keep Icons Simple and Iconic
http://www.firewheeldesign.com/sparkplug/2006/April/icon_design_bitmap_vs_vector.phphttp://www.firewheeldesign.com/sparkplug/2006/April/icon_design_bitmap_vs_vector.phphttp://mezzoblue.com/archives/2007/02/21/icon_design/http://mezzoblue.com/archives/2007/02/21/icon_design/http://mezzoblue.com/archives/2007/02/21/icon_design/http://mezzoblue.com/archives/2007/02/21/icon_design

bai giang giao dien nguoi may

Documents