10 rules design of Jacob Nielsen

B GIÁO D C VÀ ÀO T O TR NG I H C SÀI GÒN KHOA CNTT

TÀI:

10 nguyên 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

: Nhóm 03 sáng th t

Tp.HCM 11/10/11

B n quyên thu c v nhóm 03, khoa CNTT - SGU

Error Prevention. B n quyên thu c v nhóm 03. Jacob Nielsen: 10 Usability Heuristics Visibility of system status.TpMTbptryW4 http://pazo. Flexibility and efficiency of use .com/2009/05/8-golden-rules-of-interface-design/ http://vis.berkeley.com/schneidermans-8-golden-rules-of-interface-des# http://www.mattsoave.net/gelvan/design-principles - III.posterous.edu/courses/cs160sp10/wiki/index.edu/courses/cs160sp10/wiki/index. Aesthetic and minimalist design .html http://vis.berkeley.berkeley.php/HeuristicEvaluationWeiWu http://designingwebinterfaces.com/old/cogs187a/iu_site_eval/1visibility. Consistency and standards.com/6-tips-for-a-great-flex-ux-part-5 http://www. User control and freedom.slideshare.php/HeuristicEvaluationArpadKovacs http://www.com/increase-your-usability-and-website-roi-withperceived-affordance/ http://www. khoa CNTT .edu/courses/cs160sp10/wiki/index. Match between system and real world.10 rules design of Jacob Nielsen 10 NGUYÊN T C THI T K GIAO DI N C A Jacob Nielsen F Tài li u tham kh o: - http://www.php/HeuristicEvaluationSallyAhn http://vis.usefulusability.devirtuoso.whatwasithinking.SGU . Recognition rather than recall.uk/2009/02/27/explaining-usability-heuristicsa-quick-guide/#.co.

B n quyên thu c v nhóm 03. Màn hình b treo khi ng d ng ang load lên. r t d b nh m l n. Visibility of system status: tính rõ ràng c a h th ng Di n gi i: h th ng ph i luôn thông báo cho ng i dùng i u gì s p x y ra thông qua nh ng ph n h i phù h p trong t ng th i i m c n thi t. F B n d ch: 1. Help and Documentation. khoa CNTT . diagnose.10 rules design of Jacob Nielsen Help users recognize. Hình nh: H1. ng i s d ng không bi t c thông tin gì trong kho nh kh c ó.SGU .B n nên làm gì??? H2. and recover from errors .

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 nên nói b ng ngôn ng c a ng i dùng v i nh ng t . khái ni m g n g i v i ng i dùng h n là nh ng thu t ng mang tính nh h ng c a h th ng. Hình nh: H1.c m t . Theo quy t c th gi i th c ó là nh ng thông tin xu t hi n trong t nhiên và c s p x p h p lý. khoa CNTT . làm cho ng i B n quyên thu c v nhóm 03.SGU . Các trang web s d ng m t s l dùng không hi u gì !? ng r ng các t vi t t t.10 rules design of Jacob Nielsen 2. Ngôn ng là ch y u thích h p cho các i t ng h c sinh và cha m . S d ng chú thích cho t Bursar ngh a là fees/cost . - H2.

10 rules design of Jacob Nielsen 3. khoa CNTT . vì v y s c n m t cái d u thoát kh i tình tr ng không mong mu n mà không c n ph i có thêm h p tho i nh undo và redo. - B n quyên thu c v nhóm 03. Ng i dùng th ng ch n ch c n ng h th ng do nh m l n và s c n m t "thoát hi m" ánh d u rõ ràng r i kh i tr ng thái không mong mu n mà không c n ph i i qua m t cu c i tho i m r ng.SGU . Hình nh: H1. User control and freedom: ng t do - i dùng c m th y c ki m soát và Di n gi i: ng i dùng th ng ch n ch c n ng c a h th ng và phát sinh l i. H tr lùi l i và làm l i và là m t cách rõ ràng i u h ng.

i dùng 4. tr ng h p khác. T t c u tuân theo quy t c. Hình nh: - B n quyên thu c v nhóm 03. a ra thông báo nh ng không có b t kì 1 link nào làm cho ng mu n thông báo c ng khó mà làm c. Consistency and standards: s - th ng nh t và tiêu chu n Di n gi i: ng i dùng không nên t h i có hay không nh ng cái t khác.SGU . hành ng khác mang cùng m t ý ngh a. khoa CNTT .10 rules design of Jacob Nielsen H2.

H2. vì v y ng i s d ng có th t h i n u nó th c s là m t nút. trong khi các v n b n trên các nút phía d i là màu xanh. Khi Gmail c thi t k . M i tên refresh là màu en. h d a trên các th m c t ch c trên nh ng cái t ng t c s d ng trong các ng d ng email khách hàng: H p th n. vì v y nó không rõ ràng là n vào s refresh màn hình. Nút refresh c phân l p góc trên bên ph i. B n quyên thu c v nhóm 03.10 rules design of Jacob Nielsen H1. . Nháp. cách xa các nút khác phía d i c ng nh th i gian n mà nó c p nh t.SGU . Th ã g i. khoa CNTT .

Hành ng vùng nh p chu t r ng h n. N u ng i s d ng ch n gi n là nh n "submit" m t l n n a mà không t y xoá các "require". ng n T ng a ra các d oán gi m thi u s m c l i. b t k có hay không các tr ng m u c i n úng .10 rules design of Jacob Nielsen 5. Và cu i cùng. B n quyên thu c v nhóm 03.SGU . Hình nh: H1. Error prevention: Ng n ch n l i© Di n gi i: l i h n là m t cái thông báo l i t t là vi c thi t k c n th n c nv n có th x y ra. m t l i 404 luôn luôn t o ra. khoa CNTT . H2.).

a ra các hàm có s n trong th vi n - B n quyên thu c v nhóm 03.hành ng. Recognition rather than recall: s - công nh n h n là s g i l i/làm l i Di n gi i: làm nh ng i t ng.10 rules design of Jacob Nielsen 6. nh ng l a ch n th y c. S h ng d n c a h th ng s hi n ra và hi n lên l i khi phù h p. khoa CNTT . Ng i dùng không c n ph i nh nh ng thông tin t nh ng h p tho i hay nh ng cái khác.SGU . Hình nh: H1.

SGU . N u m c ích c a màn hình này là hi n th khi oàn tàu ti p theo s n. vì th lý do t i sao là tùy ch n ch xu t hi n trên màn hình Tr m Kh i và không có ây ho c b t k màn hình sau ó? i u này bu c ng i s d ng quay tr l i 2 b c tìm ra th i gian kh i hành. và c nh thông tin tr c ó B n quyên thu c v nhóm 03.10 rules design of Jacob Nielsen H2. khoa CNTT .

Flexibility and efficiency of use: tính linh - ng và hi u qu s d ng Di n gi i: s nhanh nh n không th th y b i ng i dùng ch a thành th o. khoa CNTT .SGU .10 rules design of Jacob Nielsen 7. Cho phép ng i dùng thành th o nh th Hình nh: - B n quyên thu c v nhóm 03. nh ng ng i dùng thành 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.

i u này làm khó kh n cho ng i s d ng chuyên nghi p có c m t cái nhìn t ng quan v b n . B n quá nh . bu c h ph i xoay xung quanh trên màn hình có c các thông tin mà h c n. B n quyên thu c v nhóm 03. khoa CNTT . và không cung c p tính n ng zoom-in/out. Cho phép xem tr c k t qu c a các hàm thông d ng bên trái.SGU . hi u qu h n các cách nh p vào các bi u t ng hành ng trong thanh công c H2.10 rules design of Jacob Nielsen H1.

Aesthetic and minimalist design: thi t k nh g n và th m m Di n gi i: h p tho i không nên ch a nh ng thông tin không thích áng hay không c n thi t. M i thông tin trong h p tho i s ganh ua v i nh ng thông tin phù h p và làm gi m b t m i quan h gi a chúng. khoa CNTT . Hình nh: H1. màu xanh. B n quyên thu c v nhóm 03.SGU . và màu xanh lá cây phù h p v i lo i ph ng ti n truy n thông.10 rules design of Jacob Nielsen 8. t ng ph n: v n b n in m c s d ng cho hai nhãn trong tìm ki m L p i l p l i: các v n b n màu cam.

khoa CNTT . trang web thi u m t nh ngh a rõ ràng và ng n g n v trang hi n t i. m t s trang có r t nhi u liên k t mà tr nên khó kh n v i r t nhi u s l a ch n. và m i quan h c a nó v i h th ng phân c p trang web.10 rules design of Jacob Nielsen H2. M c dù các liên k t h u ích.SGU . B n quyên thu c v nhóm 03.

và ph c h i l i Di n gi i: nh ng thông báo l i ph i d i d ng ngôn ng t nhiên. Help user recognise.Tth ng nh t có th lo i b i u này m t t p trung. Nhi u màu s c ang làm m t t p trung. không ph i là code.10 rules design of Jacob Nielsen H3. ch n oán. ch ra chính xác v n . i B n quyên thu c v nhóm 03.SGU . and recover from errors: giúp ng dùng nh n di n. Hình nh: H1. 9. a ra các thông báo looixx và cách kh c ph c. khoa CNTT . h ng d n gi i pháp kh c ph c. diagnose.

Vì v y. B n quyên thu c v nhóm 03.10 rules design of Jacob Nielsen H2. "Tính toán giá vé" ch c n ng hoàn toàn không s d ng c. bàn phím v n còn ó. khoa CNTT .SGU . Không có cách nào cho ng i dùng ph c h i các thao tác trên t t c các textfield. i v i ph n còn l i c a phiên làm vi c c a ng d ng. và ng i dùng ch có th kh i ng l i toàn b ng d ng có c thoát kh i bàn phím. Ngay c khi ng i dùng tr l i màn hình chính "Bart App" và c g ng" Tính toán giá vé "m t l n n a.

khoa CNTT . Help and documentation: s tr giúp và nh ng tài li u Di n gi i: n u s d ng mà không c n tài li u h ng d n thì s t t h n. tuy nhiên r t c n thi t có s giúp và tài li u h ng d n. B t kì thông tin nào c ng s tìm th y d dàng. H3. Video nhúng có th c s d ng ng i b t u s d ng s n ph m. Resourse help. gi i thi u các tính n ng m i H2. Hình nh: H1.SGU .10 rules design of Jacob Nielsen 10. L i khuyên giúp c hi n th trên di chu t. t p trung vào tác v c a ng i dùng. B n quyên thu c v nhóm 03. h ng d n t ng b c m t và dung l ng không quá l n. tr l i các câu h i có kh n ng nh t v m t l nh v c ho c h ng d n.

và c nh thông tin tr c ó.10 rules design of Jacob Nielsen H4. khoa CNTT . vì th lý do t i sao là tùy ch n ch xu t hi n trên màn hình.SGU . B n quyên thu c v nhóm 03. Tr m Kh i và không có ây ho c b t k màn hình sau ó? i u này bu c ng i s d ng quay tr l i 2 b c tìm ra th i gian kh i hành. .N u m c ích c a màn hình này là hi n th khi oàn tàu ti p theo s n.

khoa CNTT .SGU .10 rules design of Jacob Nielsen B n quyên thu c v nhóm 03.

Sign up to vote on this title
UsefulNot useful