10 rules design of Jacob Nielsen

B GIO D C V O T O TR NG I H C SI GN KHOA CNTT

TI:

10 nguyn t c thi t k giao di n c a Jacob - Nielsen

GVHD : Ph m Thi V ng

SVTH : Nguy n Quang Minh

V T n L i Tr nh Ng c L u

L p

: Nhm 03 sng th t

Tp.HCM 11/10/11

B n quyn thu c v nhm 03, khoa CNTT - SGU

10 rules design of Jacob Nielsen

10 NGUYN T C THI T K GIAO DI N C A Jacob Nielsen

F Ti li u tham kh o:
-

http://www.mattsoave.com/old/cogs187a/iu_site_eval/1visibility.html http://vis.berkeley.edu/courses/cs160sp10/wiki/index.php/HeuristicEvaluationSallyAhn http://vis.berkeley.edu/courses/cs160sp10/wiki/index.php/HeuristicEvaluationWeiWu http://designingwebinterfaces.com/6-tips-for-a-great-flex-ux-part-5 http://www.whatwasithinking.co.uk/2009/02/27/explaining-usability-heuristicsa-quick-guide/#.TpMTbptryW4 http://pazo.posterous.com/schneidermans-8-golden-rules-of-interface-des# http://www.devirtuoso.com/2009/05/8-golden-rules-of-interface-design/ http://vis.berkeley.edu/courses/cs160sp10/wiki/index.php/HeuristicEvaluationArpadKovacs http://www.usefulusability.com/increase-your-usability-and-website-roi-withperceived-affordance/ http://www.slideshare.net/gelvan/design-principles

III.

Jacob Nielsen: 10 Usability Heuristics

Visibility of system status. Match between system and real world. User control and freedom. Consistency and standards. Error Prevention. Recognition rather than recall. Flexibility and efficiency of use . Aesthetic and minimalist design .

B n quyn thu c v nhm 03, khoa CNTT - SGU

10 rules design of Jacob Nielsen Help users recognize, diagnose, and recover from errors . Help and Documentation.

F B n d ch:
1. Visibility of system status: tnh r rng c a h th ng
Di n gi i: h th ng ph i lun thng bo cho ng i dng i u g s p x y ra thng qua nh ng ph n h i ph h p trong t ng th i i m c n thi t. Hnh nh: H1.B n nn lm g???

H2. Mn hnh b treo khi ng d ng ang load ln, ng i s d ng khng bi t c thng tin g trong kho nh kh c , r t d b nh m l n.

B n quyn thu c v nhm 03, khoa CNTT - SGU

10 rules design of Jacob Nielsen

2. Match between system and the real world: k t n i h th ng v i th gi i th c

Di n gi i: h th ng nn ni b ng ngn ng c a ng i dng v i nh ng t ,c m t , khi ni m g n g i v i ng i dng h n l nh ng thu t ng mang tnh nh h ng c a h th ng. Theo quy t c th gi i th c l nh ng thng tin xu t hi n trong t nhin v c s p x p h p l. Hnh nh: H1. Ngn ng l ch y u thch h p cho cc i t ng h c sinh v cha m . S d ng ch thch cho t Bursar ngh a l fees/cost .

H2. Cc trang web s d ng m t s l dng khng hi u g !?

ng r ng cc t vi t t t, lm cho ng

B n quyn thu c v nhm 03, khoa CNTT - SGU

10 rules design of Jacob Nielsen

3. User control and freedom: ng t do

-

i dng c m th y

c ki m sot v

Di n gi i: ng i dng th ng ch n ch c n ng c a h th ng v pht sinh l i, v v y s c n m t ci d u thot kh i tnh tr ng khng mong mu n m khng c n ph i c thm h p tho i nh undo v redo. Hnh nh: H1. Ng i dng th ng ch n ch c n ng h th ng do nh m l n v s c n m t "thot hi m" nh d u r rng r i kh i tr ng thi khng mong mu n m khng c n ph i i qua m t cu c i tho i m r ng. H tr li l i v lm l i v l m t cch r rng i u h ng.

B n quyn thu c v nhm 03, khoa CNTT - SGU

10 rules design of Jacob Nielsen

H2. a ra thng bo nh ng khng c b t k 1 link no lm cho ng mu n thng bo c ng kh m lm c.

i dng

4. Consistency and standards: s

-

th ng nh t v tiu chu n

Di n gi i: ng i dng khng nn t h i c hay khng nh ng ci t khc, tr ng h p khc, hnh ng khc mang cng m t ngh a. T t c u tun theo quy t c. Hnh nh:

B n quyn thu c v nhm 03, khoa CNTT - SGU

10 rules design of Jacob Nielsen H1. . Khi Gmail c thi t k , h d a trn cc th m c t ch c trn nh ng ci t ng t c s d ng trong cc ng d ng email khch hng: H p th n, Nhp, Th g i.

H2. M i tn refresh l mu en, trong khi cc v n b n trn cc nt pha d i l mu xanh, v v y ng i s d ng c th t h i n u n th c s l m t nt. Nt refresh c phn l p gc trn bn ph i, cch xa cc nt khc pha d i c ng nh th i gian n m n c p nh t, v v y n khng r rng l n vo s refresh mn hnh.

B n quyn thu c v nhm 03, khoa CNTT - SGU

10 rules design of Jacob Nielsen

5. Error prevention: Ng n ch n l i
Di n gi i: l i h n l m t ci thng bo l i t t l vi c thi t k c n th n c nv n c th x y ra. Hnh nh: H1. Hnh ng vng nh p chu t r ng h n. ng n

ng

a ra cc d

on gi m thi u s m c l i.

H2. N u ng i s d ng ch n gi n l nh n "submit" m t l n n a m khng t y xo cc "require",). V cu i cng, b t k c hay khng cc tr ng m u c i n ng , m t l i 404 lun lun t o ra.

B n quyn thu c v nhm 03, khoa CNTT - SGU

10 rules design of Jacob Nielsen

6. Recognition rather than recall: s

-

cng nh n h n l s

g i l i/lm l i

Di n gi i: lm nh ng i t ng,hnh ng, nh ng l a ch n th y c. Ng i dng khng c n ph i nh nh ng thng tin t nh ng h p tho i hay nh ng ci khc. S h ng d n c a h th ng s hi n ra v hi n ln l i khi ph h p. Hnh nh: H1. a ra cc hm c s n trong th vi n

B n quyn thu c v nhm 03, khoa CNTT - SGU

10 rules design of Jacob Nielsen

H2. N u m c ch c a mn hnh ny l hi n th khi on tu ti p theo s n, v th l do t i sao l ty ch n ch xu t hi n trn mn hnh Tr m Kh i v khng c y ho c b t k mn hnh sau ? i u ny bu c ng i s d ng quay tr l i 2 b c tm ra th i gian kh i hnh, v c nh thng tin tr c

B n quyn thu c v nhm 03, khoa CNTT - SGU

10 rules design of Jacob Nielsen

7. Flexibility and efficiency of use: tnh linh

-

ng v hi u qu s

d ng

Di n gi i: s nhanh nh n khng th th y b i ng i dng ch a thnh th o, nh ng ng i dng thnh th o s nh n th y r i u y nh l h th ng s ph c v cho c nh ng ng i ch a c kinh nghi m l n c kinh nghi m. Cho php ng i dng thnh th o nh th Hnh nh:

B n quyn thu c v nhm 03, khoa CNTT - SGU

10 rules design of Jacob Nielsen

H1. Cho php xem tr c k t qu c a cc hm thng d ng bn tri, hi u qu h n cc cch nh p vo cc bi u t ng hnh ng trong thanh cng c

H2. B n qu nh , v khng cung c p tnh n ng zoom-in/out. i u ny lm kh kh n cho ng i s d ng chuyn nghi p c c m t ci nhn t ng quan v b n , bu c h ph i xoay xung quanh trn mn hnh c c cc thng tin m h c n.

B n quyn thu c v nhm 03, khoa CNTT - SGU

10 rules design of Jacob Nielsen

8. Aesthetic and minimalist design: thi t k nh g n v th m m

Di n gi i: h p tho i khng nn ch a nh ng thng tin khng thch ng hay khng c n thi t. M i thng tin trong h p tho i s ganh ua v i nh ng thng tin ph h p v lm gi m b t m i quan h gi a chng. Hnh nh: H1. t ng ph n: v n b n in m c s d ng cho hai nhn trong tm ki m L p i l p l i: cc v n b n mu cam, mu xanh, v mu xanh l cy ph h p v i lo i ph ng ti n truy n thng.

B n quyn thu c v nhm 03, khoa CNTT - SGU

10 rules design of Jacob Nielsen

H2. trang web thi u m t nh ngh a r rng v ng n g n v trang hi n t i, v m i quan h c a n v i h th ng phn c p trang web. M c d cc lin k t h u ch, m t s trang c r t nhi u lin k t m tr nn kh kh n v i r t nhi u s l a ch n.

B n quyn thu c v nhm 03, khoa CNTT - SGU

10 rules design of Jacob Nielsen H3. Nhi u mu s c ang lm m t t p trung.Tth ng nh t c th lo i b i u ny m t t p trung.

9. Help user recognise, diagnose, and recover from errors: gip ng dng nh n di n, ch n on, v ph c h i l i
Di n gi i: nh ng thng bo l i ph i d i d ng ngn ng t nhin, khng ph i l code, ch ra chnh xc v n , h ng d n gi i php kh c ph c. Hnh nh: H1. a ra cc thng bo looixx v cch kh c ph c.

B n quyn thu c v nhm 03, khoa CNTT - SGU

10 rules design of Jacob Nielsen

H2. Khng c cch no cho ng i dng ph c h i cc thao tc trn t t c cc textfield. Ngay c khi ng i dng tr l i mn hnh chnh "Bart App" v c g ng" Tnh ton gi v "m t l n n a, bn phm v n cn . V v y, i v i ph n cn l i c a phin lm vi c c a ng d ng, "Tnh ton gi v" ch c n ng hon ton khng s d ng c, v ng i dng ch c th kh i ng l i ton b ng d ng c c thot kh i bn phm.

B n quyn thu c v nhm 03, khoa CNTT - SGU

10 rules design of Jacob Nielsen

10.

Help and documentation: s

tr

gip v nh ng ti li u

Di n gi i: n u s d ng m khng c n ti li u h ng d n th s t t h n, tuy nhin r t c n thi t c s gip v ti li u h ng d n. B t k thng tin no c ng s tm th y d dng, t p trung vo tc v c a ng i dng, h ng d n t ng b c m t v dung l ng khng qu l n. Hnh nh: H1. Video nhng c th c s d ng ng i b t u s d ng s n ph m. gi i thi u cc tnh n ng m i

H2. L i khuyn gip c hi n th trn di chu t, tr l i cc cu h i c kh n ng nh t v m t l nh v c ho c h ng d n.

H3. Resourse help.

B n quyn thu c v nhm 03, khoa CNTT - SGU

10 rules design of Jacob Nielsen

H4.N u m c ch c a mn hnh ny l hi n th khi on tu ti p theo s n, v th l do t i sao l ty ch n ch xu t hi n trn mn hnh. Tr m Kh i v khng c y ho c b t k mn hnh sau ? i u ny bu c ng i s d ng quay tr l i 2 b c tm ra th i gian kh i hnh, v c nh thng tin tr c .

B n quyn thu c v nhm 03, khoa CNTT - SGU

10 rules design of Jacob Nielsen

B n quyn thu c v nhm 03, khoa CNTT - SGU