TNG TC NGI - MY

PGS.TS. ng Vn c
dvduc@ioit.ac.vn

H NI 2007/10

Kho st...
ng dng (h thng) no c thit k ti nht m anh/ch
tng s dng? Ti sao?
ng dng no c thit k tt nht m anh/ch tng s
dng? Ti sao?
Anh/ch tng thc hin thit k v pht trin ng dng
tng tc?
Anh/ch dnh bao nhiu thi gian thit k khi
nim giao din?
Ai s dng ng dng ca anh/ch? S dng trong bao
lu? Phn hi ca h nh th no?
Tr li gi v EMail:
hci.dvduc@gmail.com

dvduc-2007/10

HCI

2/25

M t mn hc
Gii thiu nguyn l pht trin Giao din ngi s dng.
Thit k: Lm th no thit k mt giao din tt?

Kh nng ca con ngi (m hnh x l thng tin con ngi,

cm nhn, hot ng, mu, s ch v cc li)
Cc k thut thit k: Phn tch ngi s dng, phn tch nhim
v, thit k lp, hng dn thit k giao din c tnh s dng
c v thit k ha.

Ci t: Cc k thut xy dng giao din

Prototypes,
M hnh vo/ra, b tr, rng buc v cc toolkits.

nh gi: Cc k thut nh gi v o tnh s dng

nh gi theo kinh nghim,

Ngi s dng nh gi...

dvduc-2007/10

HCI

3/25

Ch

Gii thiu v HCI

Tnh s dng c ca h thng
Thit k hng ngi s dng
Kh nng con ngi
M hnh vo ra d liu
Nguyn l thit k giao din
Xy dng prototype
Thit k ha v tng tc
nh gi v kim nghim giao din
Cc ch nghin cu

dvduc-2007/10

HCI

4/25

Ti liu tham kho

L thuyt
ng Vn c et al., Giao din ngi my, Nh xut
bn Khoa hc t nhin v cng ngh, 2009.
Miller Robert, User Interface Design and
Implementation, MIT Open Courseware, 2004.
Hewett et al., Curricula for Human-Computer
Interaction, ACM SIGCHI, (last updated) 2009.
Thc hnh
Caretta Software, GUI Design Studio, 2009.
Microsoft .NET

dvduc-2007/10

HCI

5/25

Yu cu mn hc
Nhim v ca hc vin

Tham gia nghe ging trn lp hc

T nghin cu
Lm bi tp chuyn

nh gi kt qu

im qu trnh: 0.2
Kim tra gia mn hc: 0.2
Thi ht mn hc: 0.6

dvduc-2007/10

HCI

6/25

BI 1

GII THIU V HCI

Ni dung

nh ngha HCI
Lch s pht trin
Cc lnh vc lin quan
Ti sao nghin cu HCI?
Ni dung HCI
Cc yu t cn quan tm trong thit k
Tng kt bi

dvduc-2007/10

Bi 1: Gii thiu HCI

8/25

1. nh ngha
Tng tc ngi my: Human-Computer Interaction,
Human-Computer Interface (HCI)
HCI l s kt hp v m rng khoa hc my tnh v
tm l hc.
HCI l lnh vc nghin cu cc quan h tn ti gia
ngi s dng v h thng my tnh thc hin cc
nhim v khc nhau ca ngi s dng (Chris Shaw,
Faulkner).
HCI l lnh vc lin quan n thit k, nh gi v ci
t h thng my tnh tng tc cho con ngi s
dng v nghin cu cc hin tng xy ra trn
(Special Interest Group on Computer-Human
Interaction -SIGCHI)
dvduc-2007/10

Bi 1: Gii thiu HCI

9/25

nh ngha
Trong mt s ti liu, khi nim UI (User Interface) c
s dng vi ngha tng t HCI. Tuy nhin UI l tp con
ca HCI.
UI l tp hp cc phng tin con ngi (user)
tng tc vi my mc, thit b, chng trnh my tnh
hay h thng phc tp.
UI c hiu l tin trnh thit k phn mm ghp ni
sao cho h thng my tnh tr nn hiu qu, d s dng
v lm c nhng g con ngi mun chng lm.

dvduc-2007/10

Bi 1: Gii thiu HCI

10/25

2. Lch s pht trin

gr
o
Pr

ec
T
f
o
s
es

gy
o
l
o
hn

o
(M

e)
r
o

Apple iMac, 2002

Xerox Star, 1981

IBM7030, 1961
dvduc-2007/10

Bi 1: Gii thiu HCI

Time

IBM-PC, 1981
11/25

Lch s pht trin

Trc 70

UI khng c xem l quan trng v my tnh t chc nng. Khng c

kh nng ha.

u nhng nm 70:

Xut hin khi nim Man-Machine Interface (MMI), User Interface (UI)
Xerox c tng ban u v thit k ha cho h thng tng tc.

Cui nhng nm 70 u nhng nm 80:

Khi nim GUI.

PC thng mi u tin c GUI: Xerox Star

Nhng nm 80:

Khi nim HCI thng c s dng thay cho khi nim UI

MS Windows vi GUI trn IBM-PC

Nhng nm 90 - n nay

Nghin cu v thc ti o,
Nhn dng v tng hp ting ni
Nhn dng ch vit tay...

dvduc-2007/10

Bi 1: Gii thiu HCI

12/25

3. Cc lnh vc lin quan

Tm l hc
Tr tu nhn
to

Ngh thut
Modelling
the user

Help
systems
Cng thi hc

Nhn loi hc

Groupware

Thit k

Interface layout

Equipment
design

HCI

User body
shape

Sinh l hc

Aesthetic
appeal

Understanding the user

Physical
capabilitie
s

dvduc-2007/10

X hi hc

Language for
commands

Ngn ng
hc

Bi 1: Gii thiu HCI

Faster machines,
faster systems
Building
better
interfaces

K ngh

Khoa hc
my tnh

13/25

4. Ti sao phi nghin cu HCI

UI l im chnh ni giao tip gia ngi s dng v h
thng my tnh.
Nhiu ngi s dng nh gi h thng my tnh thng
qua UI ca n. Ph thuc vo giao din m h thng
thng li hay tht bi

UI ti dn n h thng ti

UI ti lm cho h thng kh s dng (i khi rt nguy

him)

H thng liu php bc x cha bnh ung th Therac-25 gy

cht ngi
H thng rada Aegris trn tu chin USS Vincennes bn nhm
my bay dn s ca Iran
Tranh ci xung quang l phiu bu c Tng thng M nm 2000

dvduc-2007/10

Bi 1: Gii thiu HCI

14/25

Ti sao phi nghin cu HCI

UI tt lm cho h thng hiu qu v ngi s dng thoi
mi
Mt phn ln cc cng vic (50%-70%) trong tin trnh
pht trin h thng phn mm lin quan n UI.
Thi gian thit k, ci t v bo tr UI trong mt d n
l khong 50% (thng k 74 d n phn mm thc hin
nm 1992)
UI ngy cng phc tp hn do vy vic pht trin UI l
kh khn (c bit vi GUI)
Nhiu chng trnh, d n quc gia, quc t nghin cu
v HCI hnh thnh nhng nc pht trin v Vit Nam.

dvduc-2007/10

Bi 1: Gii thiu HCI

15/25

Ti sao phi nghin cu HCI

V d: Phiu bu tng thng M, 2000.

dvduc-2007/10

Bi 1: Gii thiu HCI

16/15

Ti sao phi nghin cu HCI

V d: Giao din phn mm

Giao din dng lnh

dvduc-2007/10

Bi 1: Gii thiu HCI

GUI

17/25

Ti sao phi nghin cu HCI

V d: Giao din phn mm

dvduc-2007/10

Bi 1: Gii thiu HCI

18/25

5. Ni dung nghin cu
Phm vi nghin cu ca HCI (ACM SIGCHI)

dvduc-2007/10

Bi 1: Gii thiu HCI

19/25

Ni dung nghin cu
S dng v ng cnh ng dng HCI

Cc t chc ca con ngi: Xem con ngi nh thc th x hi

tng tc (M hnh hot ng ca con ngi, nhm, t chc,
M hnh lung cng vic...)
Cc lnh vc ng dng: Cc lp ng dng t gc m UI cn
p ng (Hng son tho, Truyn tin, Mi trng thit k, Cc
h thng iu khin...)
S ph hp ngi-my: t ti s ph hp gia con ngi vi
cc i tng thit k v vic s dng chng.

Cc c trng ca con ngi:

M hnh x l thng tin ca con ngi: c trng ca con ngi

nh b x l thng tin (M hnh nhn thc, M hnh khi nim...)
Ngn ng giao tip v tng tc (M hnh ngn ng, Cc ngn
ng chuyn dng phc v thit k UI...)
Cng thi hc: Thit k khng gian lm vic, B tr mn hnh...

dvduc-2007/10

Bi 1: Gii thiu HCI

20/25

Ni dung nghin cu
H thng my tnh v kin trc giao din

Cc thit b vo/ra: K thut xy dng thit b h tr giao tip

(Cc loi thit b I/O my tnh, Thit b o...)
K thut i thoi: Kin trc v k thut tng tc vi ngi s
dng (thit b tr, dng lnh...)
n d giao tip (Metaphor)
Thit k ha: M hnh ha vt th, biu din i tng hnh
hc.

Tin trnh pht trin

Tim cn thit k: Phng php phn tch thit k, thit k mu,

thit k ha...
K thut v cng c ci t: Cc cng c phn mm, Cc k
thut xy dng prototype, Trnh din d liu v Cc thut ton
lin quan...
K thut nh gi UI: Cc thc o, K thut kim th

dvduc-2007/10

Bi 1: Gii thiu HCI

21/25

Ni dung nghin cu
Tm tt ni dung nghin cu chnh

Nghin cu c im ca con ngi tc ng trn s tng tc

gia h v my tnh
Phn tch nhng g s c con ngi thc hin bng my tnh
v cc giao din ca chng (hiu nhim v v yu cu ca
ngi s dng)
Nghin cu phng php hot ng, p ng i vi ngi s
dng v vic trnh din trn mn hnh tng tc
Nghin cu phng php thit k giao din n ph hp mc
ch s dng, p ng yu cu ngi s dng
Phng php thit k cc cng c h tr ngi thit k UI
Nghin cu cc k thut, phng php nh gi cc tnh cht
ca giao din ngi - my tnh v tc ng ca h thng i vi
con ngi.

dvduc-2007/10

Bi 1: Gii thiu HCI

22/25

6. Cc yu t cn quan tm

dvduc-2007/10

Bi 1: Gii thiu HCI

23/25

7. Cng c thc hnh

MS Visual Studio

dvduc-2007/10

Bi 1: Gii thiu HCI

GUI Design Studio

24/25

7. Tng kt bi
Gii thiu mt vi nh ngha v HCI, UI. Cc nh ngha
u lin quan n con ngi, my tnh v tng tc.
HCI l s kt hp, m rng hai lnh vc khoa hc my
tnh v tm l hc. HCI l a lnh vc, n s dng tri
thc ca nhiu ngnh khoa hc khc nhau.
Tm quan trng c bit ca HCI c thit k tt
Ni dung nghin cu ca HCI l kh rng, chng c
quan h khng kht vi nhau.
Chuyn ny tp trung vo mt s vn lin quan
n phn tch, thit k v pht trin giao din ngi s
dng ha.
Nhng GUI bt hp l no m anh ch tng s dng?
dvduc-2007/10

Bi 1: Gii thiu HCI

25/25

Cu hi?