Вы находитесь на странице: 1из 21

Mt s quy tc dng thit k nn cc giao

din m chng ta tip xc hng ngy


Tho lun trong 'Tin tc - S kin' bt u bi Duy Lun, 10/9/13.
Trang 1 / 5 1 2 3 4 5 Sau >

1. Duy Lun Khng c g!


85

Giao din ngi dng l th m chng ta s dng hng ngy giao tip vi my
tnh cng nh trn cc thit b di ng. c th l phn mm, cc nt nhn,
thanh trt, ly,... lm ra c "giao din", cc lp trnh vin phi tun th
theo mt s quy tc nht nh trc khi lm cc phn mm. Mi y mnh c
nghin cu v vn thit k giao din ngi dng v hm nay mnh xin chia s
vi cc bn 2 b nguyn l thng s dng trong lnh vc ny, l b nguyn l
DOET v nguyn l Nielsen. Sau khi c xong, bn c th th p dng cc
nguyn l vi nhng giao din m bn gp thng ngy v s bit c liu

th mnh ang dng c tht s c thit k mt cch hiu qu hay khng.


Nu quan tm, bn cng c th xem thm bi vit v Lch s tin ha ca
giao din my tnh hin i trong 40 nm qua.

I. S quan trng ca giao din ngi dng


T trc n nay chng ta thng ngh giao din tc l nhng g c mt trn phn
mm ca my tnh, in thoi, my tnh bng. iu ny khng sai, nhng n ch
l mt phn nh ca khi nim "giao din ngi dng" (user interface) m thi.
Cch b tr nt trn chic remote, cch b tr n v cn gt trn l vi sng, u
l giao din ngi dng, min l chng to ra c mt phng thc no m
con ngi c th tng tc vi my mc. Cn giao din ca phn mm m chng
ta hay ni n c tn gi l "giao din ha ngi dng" (graphical user
interface - GUI).
Vy v sao giao din ngi dng li quan trng? Vi mt h thng c giao din
qu t, trong phn ln cc trng hp th ngi ta s xem n l mt s tht bi d
cho bn c thit k nhng tnh nng khc hay v tuyt vi n mc no i chng
na. L do l v bn khng to c phng thc tt ngi dng tng tc,
iu khin vi h thng ca bn, vy th lm sao h c th dng n mt cch hiu
qu? Hoc nu giao din bn khng th t s tin tng, liu ngi dng c
giao dch vi bn khng? Do , giao din l th c nh thit k/lp trnh vin
rt quan tm v h lun tm cch gip ngi dng cm thy hi lng nht c th.

Bn c can m mua chng khon t mt trang web nh th ny?

Trong lc ni v 2 nguyn l bn di, mnh ch yu ly v d v phn mm


cc bn d hnh dung v n quen thuc vi chng ta, v cng bi lnh vc m
mnh ang nghin cu p dng DOET ch yu l v phn mm.

II. B nguyn l DOET


y l b nguyn l c to ra bi nh khoa hc Donald A. Norman trong lc
ng nghin cu v vn tng tc gia con ngi vi my tnh trong d n gi
l "Design of Everyday Thigns" - DOET (tm dch: thit k cho nhng th c
dng hng ngy). N c s dng cc nh thit k tch hp v nh gi xem
giao din ca mnh c thc s hu ch v gip cho vic tng tc gia ngi vi
my tnh d dng hn hay khng. N bao gm nhng nhn t nh sau:

1. Hon tt nhng yu cu t pha ngi dng


Khi thit k mt phn mm no , ngi ta s tm hiu xem ngi dng cn s
dng g. V d khi bn chy ng dng my tnh trong windows, cc trng hp s

dng c th din ra s l: cng 2 s, tr 2 s, nhn 2 hoc nhiu s, rt cn, tnh


ly tha. c xem l hiu qu th giao din ca app my tnh ny phi p
ng c tt c nhng tnh hung ni trn. y cng l nhn t quan trng hng
u trong nguyn l DOET. Hy th tng tng xem nu mt phn mm khng
th thc hin nhng g bn mun th xem nh b i ri.

2. S dng c "Knowledge in the Head" v "Knowledge in the


World"
Trc ht chng ta hy xem th hai khi nim l l ny l g nh. "Knowledge in
the Head" l nhng kin thc m ngi dng bit, c sn khi nim trong
u ca mnh m khng cn ngi thit k phi ni ra hoc cp n trong giao
din phn mm. Chng hn, khi thy mt chic my tnh, bn s bit phi g bn
phm ra sao, phi xi chut nh th no.
Trong khi , "Knowledge in the World" th ngc li: n l nhng kin thc m
ngi dng cha bit n, v s cn phi c ghi ch r trn giao din ngi
dng hc cch xi. V d, khi bn ln u chy game, ngi thit k/lp trnh vin
s trnh din cho bn xem cch s dng app, cch iu khin nhn vt, bn th
nhn nt no, chy th iu khin phm no, xoay gc nhn th phi lm g. Tng
t, Apple tch hp hng dn s dng touchpad a im cho OS X bi n khng
ging vi nhng g ngi ta tng bit v cch xi chut.

"Knowledge in the Head" khng i hi ngi dng phi hc, trong khi
"Knowledge in the World" th c . Chnh v th m ln u tip xc, nhng th
thuc v "Knowledge in the Head" s to cm gic thn quen hn, nhng b li
c th chng ta s mt thi nh ra xem cch dng thng thng l th no ri
mi c th p dng.
Vi "Knowledge in the World" th s mt thi gian hc, nhng vic hc s tr nn
n gin khi chng ta c hng dn c th. V mt khi quen tay th nhng th
thuc v "Knowledge in the World" s gip mang li hiu qu s dng cao hn.
Cng vi v d v touchpad a im trn Apple, lc mi u bn s mt thi gian
hc cch xi, nhng khi quen ri th n gip mi vic tr nn d dng v nhanh
chng hn rt nhiu, thm ch tr thnh mt trong nhng thao tc chnh mi ngy
dng n c trm ln.Mt giao din ng dng tt s tm c cch kt hp ti u
gia hai loi kin thc ni trn. hon thnh cng vic mt cch nhanh chng v

n gin, khng i hi ngi dng phi hc qu nhiu nhng vn m bo c


hiu sut tng tc.

3. n gin ha tc v ca ngi dng


Ai ai cng thch s n gin, chng ai li i thch ci g di dng cho mt c.
Ngay c khi xi my tnh, smartphone, tablet cng th, nu nhn vo mt ng
dng m c hng ng nt th thi, chng ta c th ngh ngay n chuyn t b v
i kim app khc. D cho ng dng ca bn vit ra c hay, c "thn thnh" v c
chy nhanh ti c no i na th nu cc bc thc thi mt tc v no qu
phc tp, ngi dng s chia tay ngay lp tc. Chnh v th lp trnh vin/nh thit
k cn phi n gin ha chng. Theo Norman th c mt s cch n gin ha
nh sau:

1. H tr v mt tm l: gip ngi dng cm thy bt "hong s" khi nhn vo


giao din. Mt v d d thy l combobox - tc mt nt m bn nhn vo n s
xut hin mt s ty chn trong cho bn. Lp trnh vin c th xi combobox
cho bn chn m vng nu cn nhp s in thoi chng hn, cn trn Tinh t
th xi combobox di chuyn bi vit gia cc subforum vi nhau, hoc chn
tin t cho bi vit.

2. Gim ti nhng g m ngi dng phi nh. V d: trong mi trng DOS,


copy th bn phi nh lnh cp, nh c php ca n, cn Windows, chng ta
ch vic nhn phm phi chut, chn Copy l xong. V d khc, khi bn cn nhp
liu v thi gian, mt nh vi ngy thng nm, ni chung l c b lch, s xut
hin cho bn chn ngy. Bn khng cn phi nh c th ngy l th my, tun
no, thng no na.

3. T ng ha: y l th m chng ta rt hay gp. Chng hn nh khi bn ng


k ti khon mi trn Yahoo hay Google, hai trang web ny s t xc nh v tr,
quc gia ca bn da vo a ch IP. Hoc nh cc my Android, lc bn mi mua
my m c b SIM hoc kt ni Wi-Fi, thit b s t nhn din mi gi v chnh
sn, bn khng cn phi lm na. Hoc nu bn nhp m vng l 08, ch "Thnh
ph H Ch Minh" s t xut hin.
4. Thay i bn cht ca tc v: trn cc trnh duyt c, tm kim s nm tch
bit vi a ch. Sau ny, Chrome, Firefox, Safari, IE u xi chung mt cho
c hai tc v, d dng hn v bn s khng cn phi suy ngh nn nhp liu vo
u.

4. Lm mi th r rng nht c th
Vi nhng tnh nng chnh, hy em n ra giao din chnh, ni ngi dng d

thy nht. ng c "t ra nguy him" v giu n vo nhng menu n su trong


ng dng, iu khng gip g cho ngi dng c. N cn lm ngi dng ri
v cm thy bc mnh na. Vic lm mi th tr nn r rng cng l mt cch
nhc cho ngi dng bit nhng tnh nng no h thng ca chng ta c h tr, v
cch dng chng nh th no.

5. Thu hp khong cch thc thi v khong cch nh gi


Lc mi tip cn vi mt h thng, phn mm no , ngi dng s i mt vi
hai "khong cch" (Gulf) khin h cha th dng h thng mt cch thnh cng,
l:
Khong cch thc thi (Gulf of Execution): Ngi dng cn lm g mt tnh
nng c th chy c?
gim khong cch gia s thc mc ca ngi dng vi giao din, nh thit k
c th dng mt th gi l "Affordance". V d, khi bn thy mt ci nt, bn s
bit l bn cn phi nhn vo . Hoc vi mt thanh trt (slider), bn s bit l
bn cn ko con chy thay i gi tr, v ko sang phi l tng gi tr ln, cn
ko sang tri l gim i.

Nhn vo y chng ta c th d dng bit c nt no nhn, ci no trt


Khong cch nh gi (Gulf of Evaluation): Lm sao ngi dng bit rng
tnh nng chy theo ng nhng g n c thit k?
Trong trng hp, chng ta c th ly s phn hi xc gic trn cc smartphone
lm v d. Khi bn g bn phm hoc nhn nt no , smartphone s rung nh
ln bo hiu rng bn thnh cng trong chm vo nt . m thanh pht ra
cng l mt s phn hi c xi rng ri.Nhim v ca nh thit k/lp trnh
vin s l gip ngi dng tr li hai cu hi ni trn mt cch r rng, d dng
nht c th.

6. Sp xp mt cch ng n
Trong u ngi dng s c sn mt m hnh v cch hot ng ca mt th g
. V d, khi bn mua trong siu th, cc bc bn s lm l xem hng >
xem gi > chn hng > tnh tin. p dng n vo giao din ca mt trang web bn
hng online, bn khng th bt ngi dng xem gi ri mi xem hng c. Bn
phi theo ng trnh t v m hnh m ngi dng suy ngh n, khi th vic
s dng giao din mi t hiu qu cao.

7. Khai thc sc mnh t cc bin php hn ch


Bin php hn ch (constrain), t ny nghe c v gh gm nhng thc cht n
khng phi l th g nghim trng qu y. "Hn ch" y l mt s tinh
chnh no vo giao din mt th g khng cn s dng c na, tm
thi hoc trong thi gian di. V sau chng ta li mun a hn ch vo trong ng
dng, sao khng ngi dng mun lm g th lm? l v chng ta mun
ngi dng chn c mt la chn chnh xc nht, gim li v sau.

C 3 loi bin php hn ch thng xi ngy nay:


o Hn ch vt l: V d, nhiu phn mm hin xi cc chn radiobutton
la chn mt th g , nh gii tnh chng hn. Bn ch c th chn
mt trong hai, hoc "Nam" hoc "N" ch bn khng th g bn phm
nhp c. Nh vy s trnh tnh hung g nhm, g khng ng mun
ca lp trnh vin.
o Hn ch v suy ngh: mt giao din cho php nhp thng tin c nhn,
nu u tin c nhn l "H", th hai ghi ch "Tn", bn s bit cn g
g vo. Cn nu hai khng c nhn th bn c th nhp tn vo H,
h v Tn, sai quy tc yu cu ca phn mm.
o Hn ch v vn ha: ci ny hi phc tp, nhng v d n gin nht l
mu sc. Nu bn thy mt nt t mu , bn s ngh ngay n chuyn
nhn vo nt c th gy ra nguy him g . Cn nu thy nt mu
xanh, bn bit nt l chp thun v tip tc. Cch chn mu cng
phi ty vo vn ha, chng hn nh Nga, ngi ta xem mu l "tch
cc", khi bn khng nn t nt "Xa" vi mu ny.

8. Thit k phi tnh n li


C con ngi l phi mc li. l chuyn qu hin nhin, v phn mm phi
c thit k m ng li t pha ngi dng, v c li pht sinh do bn
thn ng dng na. Thc cht iu ct li y l phi loi b li t gc v
khng cho n xy ra. Nhng khng th g l hon ho, do , khi gp li th lp
trnh vin s phi cung cp cho ngi dng mt thng bo hp l, t nht cng

phi ch dn cho ngi dng nn lm g khc phc li, hoc thng bo rng li
l g. Nu c, nn km theo l mt cch phc hi hiu qu ngi dng
thot khi li .
V d 1: bn va son xong bi bo co 50 trang trong Word, bng nhin my
tnh b in, Word b ng, th l bn mt ht bi vit di v cha kp lu. May
mn l Microsoft c tch hp tnh nng AutoSave v kh nng t khi phc nn
bn c th cu c ni dung ca mnh.
V d 2: ngi dng nhp liu sai, s in thoi th ch c nhp s nhng h
nhp vo c ch ci na. Lc thng bo hin ra nn l "Bn ch c nhp s,
hy thc hin li nh!". Nu ch c thng bo "Sai ri!" th ngi dng chng th
bit h sai ci g v nn lm th no cho ng.

V d 3: khi bn ang download mt tp tin 50GB, khi ti c 99% th bn l


nhn nt ng ca s trnh duyt. Nu ng lun, bn s mt ht d liu ti.
Nhng may mn l cc hng trnh duyt u tch hp mt hp thoi thng bo
rng "bn ang download file, ng trnh duyt l s mt i . C ng hay
khng". Lc ny, nu bn ch nhn nhm vo nt ng th c nhn nt Hy
quay li.

9. Chun ha khi cn thit


C nhng th m ngi ta thng lm rt ln xn v khng theo quy tc no c.
Nu c mi mt phn mm, mt giao din ng dng mt kiu th ngi dng s
rt ri. y l lc chng ta cn mt chun chung to ra s thng nht cao .
Chng hn nh vi Windows, thanh menu ca bt k mt ng dng no th
nt u tin s l File, cui cng l Help. Trn my Mac ca Apple cng y nh
th. Hay nh trn Android, Google a ra mt ch gi l "Holo" vi hai mu
en v xanh dng c trng lp trnh vin p dng thit k ny cho app ca
mnh.

III. B nguyn l Nielsen


Jakob Nielsen nm 1995 ra mt mt tp cc nguyn l m ng nghin cu v
chng minh rng s tt cho mt giao din khi thit k theo cc quy chun ny. V
c bn th 10 iu do Nielsen a ra cng kh ging vi b DOET ni trn, ch
khc mt cht v cch din t v cch ngi ta nh gi n.

1. Lun hin r trng thi ca h thng


Giao din phi thng bo cho ngi dng bit h thng ang lm g, trng thi
nh th no, cng vic ang din tin n u, v thng bo phi xut hin
trong mt thi gian hp l. Mt v d m chng ta rt hay thy l thanh tin
trnh (progress bar) xut hin khi copy file d cho bn ang OS X hay Windows,
Linux. Lc bn m trang web c thanh mu chy biu th % trang web ti
xong cng l mt v d khc. Thi gian hp l y c ngha l sau khi bn copy
v ra lnh paste th thanh tin trnh s hin ra ngay, ch khng phi 5 hay 10 pht
sau mi hin din.

2. Lm giao din ging vi hin thc i sng


Giao din cn ni phi "ni cng loi ngn ng" vi ngi dng, t cch dng t,
t cu, cch thng bo, nhn, ghi ch u phi d hiu vi i tng ngi dng
m giao din nhm n. Chng hn, vi mt phn mm chnh sa nh chuyn
nghip nh Lightroom hay Photoshop, bn c th dng nhng t nh "phi sng",
"khu ", "tc ", "cn bng trng". Nhng vi phn mm xem nh n gin
cho ngi dng ph thng, th chng ta s dng cc t nh " sng", "mu sc",
nu khng th ngi dng s khng th hiu chc nng l g v hot ng ra
sao.

Giao din ca Photoshop vi cc t ng phc tp v chuyn su v nhip nh,


nhng ngi dng nhn vo vn hiu ngay v h quen vi cc thut ng ny ri

Cn y l ng dng iPhoto - mt ng dng dnh cho ngi dng ph thng - nn


nhng thut ng n gin v d hiu hn, mc d c hai u phc v cng mc
ch chnh sa nh

Tng t, tc v phi c thc hin theo ng trnh t m ngi dng k vng


trong i sng. V d nh, nu bn ng k v my bay th ngoi i bn s cn
phi n phng v, ni tn, ni nc mun bay n, ni ngy thng nm v gi
gic. Khi ln website t hng th trnh t ny cng cn phi c gi li (c th
tinh chnh mt hai im) gip vic s dng c d dng v trc quan hn.

3. Cho ngi dng s kim sot v s t do


Ngi dng thng hay nhm ln lm, v ngi thit k giao din phi cung cp
mt "li thot" trong trng hp ngi dng l lm sai mt th g . V d cc
d thy: nt Undo v Redotrong hng lot ng dng, t trnh duyt, Word, Excel
cho n Notepad v cc app trn di ng.

4. cao s thng nht


Trong mt h thng, nhng th c tnh nng tng t nhau cn phi thng nht

vi nhau v mu sc, v tr, cch hin th, ch vit, Chng hn nh trn


Windows, ton b nt ng ca s u mu vi du cho trng v nm gc
trn bn phi ca cc ca s. Hoc trong Microsoft Office, ton b nhng cng c
nh dng vn bn nh Bold, Italic, chnh font ch, c ch u nm th Home,
bt k bn ang dng Word, Excel, PowerPoint, Visio hay g i na. Bng cch
thng nht, chng ta gip ngi dng tng tc vi giao din mt cch nhanh
chng hn, phi nh nhiu tnh hung khc nhau.

Vi HTC, tt c app ca h u c nt tm kim, add v menu cnh trn

5. Hn ch li

Cng nh DOET, h thng v giao din cn phi c thit k vi tm nim rng


ngi dng lun mc li, v iu quan trng giao din l phi bao qut c hu
ht cc li thng dng. Ngi thit k/lp trnh vin cng cn phi hn ch ti a
ngun pht sinh li.
V d:
o Combobox, radio button, checkbox: ch php ngi dng chn mt s th
do lp trnh vin hoc nh thit k nh trc, khng th t mnh nhp ci
mi (v c kh nng pht sinh li)
o V hiu ha mt thnh phn giao din no khi khng cn thit.

6. Cung cp s linh hot cho ngi dng


Lc mi xi my tnh, copy mt th g bn thng lm g? Chn ni dung
hoc file , nhp phm phi chut, chn copy, qua ch khc, li nhn phm phi
chut, chn paste. V sau, khi chng ta c kinh nghim hn, thao tc c n
gin ha i rt nhiu bng cch s dng phm tt Control + C, Control + V. y
chnh l v d cho nguyn l th 6 ca Nielsen. Ngoi ra, khi h thng cn phi
thay i giao din, vic gi li s linh hot nh bn c l iu cn thit, nu
khng ngi dng s cm thy rt tht vng v mt i mt th m h ang dng
quen tay.Mt s v d khc ngoi phm tt c kh nng cung cp s linh hot
cho ngi dng:
o Dng bn phm di chuyn gia cc phn giao din
o Breadcrumbs: cho ngi dng bit h ang u, ng thi cho php h
di chuyn n nhng ni khc trong h thng.
o Menu chut phi
o Cho php ngi dng c nhn ha giao din: di chuyn v sp xp icon, t
chn cch t widget trn Android,

Breadcrumb ca Tinh t

7. Gim ti nhng g ngi dng cn phi nh


lm c iu ny, nh thit k v lp trnh vin cn m bo rng ngi dng
c th thy ht cc tnh nng chnh mt cch d dng. Ngi dng khng cn phi
nh nhng th phc tp khi s dng cc thnh phn trong h thng. Lp trnh
vin v nh thit k cn lu rng vic nhn v nhn din (recognition) s lun
tt hn l bt ngi dng nh li nhng g tng din ra (recall). Vic ng dng
biu tng ha, gi v password, s dng mu sc thng bo mt th g
c hon tt l nhng v d cho nguyn l th 7 bi n gip ngi dng
bit ngay rng tnh nng l g v lm g. Cng nh khi giao din ha ra
mt, n gip m ra c mt k nguyn my tnh mi v ai cng c th xi PC,
ch lc cn chy bng giao din dng lnh (CLI) th khng my ngi c th tip
cn vi my tnh v n qu kh v phi nh qu nhiu th.

Bn thch dng ci no hn? Giao din ngi dng p mt hay l giao din dng
lnh en thui v phi g g tm lum?

Mt v d khc: tm mt sinh vin no th nn dng tn ch ng bt buc


ngi dng phi nh m sinh vin, mc d chng ta c th cung cp thm ty
chn tm kim bng m.

8. Giao din phi c tnh thm m, p v c lin quan


p, l chuyn m ai cng mun, v giao din p th lun c nh gi cao.
Hy nhn vo cch m Apple thit k iOS hay nhng g Google lm vi Android,
tt c u xoay quanh mt ch p. Khi s dng mt th g c tnh thm m
cao th ngi dng s cm thy hi lng hn v c hng hn. Ngoi ra, thng tin
cung cp cho ngi dng cng phi lin quan, nu khng th cng bng tha. V
d, trong mt thng bo hin ra trc khi lu tp tin, th m chng ta nn a vo
l cu hi "bn c mun lu tp tin hay khng" hoc "bn c mun lu n
vo y hay khng", khng phi l mt bi vit di v cch lu tp tin, tc hi khi
khng xi phn mm ng cch (!?).

9. Gip ngi dng xc nh v cch khc phc sau khi li xy ra


Thng bo khi c li phi d hiu v cho ngi dng bit li l g, ch ng

hin mt ng m li ln. iu s lm ngi dng nn ch. Ngoi ra, giao din


cng cn ni cho ngi dng bit nhng bin php kh thi khc phc li, ch
khng nn mc ngi dng mun lm g th lm.

Thng bo li "mn hnh xanh cht chc" ca Windows 7 qu ri, lm ngi ta


hong v khng bit phi lm g hoc chuyn g s xy ra. Cn ln Windows 8,
Microsoft thay i n ni cho chng ta rng "h iu hnh ang thu thp li v
s t khi ng my li cho bn".

10. Cung cp s tr gip, ti liu hng dn s dng


Bn c th thy rng bt k phn mm no, d n gin n u th cng u c
mc tr gip (Help) hoc ti liu hng dn s dng (documentation), hot t nht
cng c mt dng ni rng cn s dng phn mm nh th no. y l cch cui
cng m ngi dng s tm n khi h khng th thc hin mt thao tc no .
Hy th tng tng xem nu nh bn s dng phn mm m khi gp li, bn
khng th tm c bt k s tr gip no th iu tht l t. Ty theo phc
tp ca giao din v phn mm m ngi ta s son tho cc ti liu hng dn s
dng v phn tr gip tng ng. Tooltip box - dng thng bo nh hin ra khi
chng ta r chut ln mt nt, mt , mt hp thoi, - cng chnh l mt s tr
gip ch khng phi c vo Help mi l tr gip.

Tr gip s dng giao din trn iPad

Вам также может понравиться