Bài giảng Tương tác người máy: Chương X

Prepared by MSc Luong manh Ba

T

ngươ tác ng

iườ - máy

Human Computer Interaction - HCI

Department of Software Engineering Faculty of Information Technology Hanoi University of Technology

TEL: 04-8682595 FAX: 04-8692906 Email: cnpm@it-hut.edu

Update 8-07

 Dept. of SE, August-2002 HCI – Four. 1

Prepared by MSc Luong manh Ba

ng X: Thi

t k Tr giúp

ươ

ế ế ợ

Ch

ộ

t kế ế

N i dung 10.1. Khái ni m ệ 10.2. Phân lo iạ 10.3. Qui trình thi 10.4. Đánh giá

Update 8-07

 Dept. of SE, August-2002 HCI – Four. 2

Prepared by MSc Luong manh Ba

H tr giúp

ệ ợ

ặ

ệ

ườ

• Là h th ng giúp đ ng ố ầ ứ

ứ

ụ

t giúp ng

i

c g i là “online Help” ườ ế

ệ ợ

ế ố

ọ t k t ề

i dùng tìm đ n khi c n

i dùng, có m t ỡ trong các ng d ng ph n m m, ng d ng ề ụ Web-based, intranet • “Help” đôi khi còn đ • H tr giúp đ ượ t ph n m m. dùng s d ng t ố ử ụ • Là n i đ u tiên ng ơ ầ

ượ c thi ầ ườ

ế

ầ

giúp đ .ỡ

Update 8-07

 Dept. of SE, August-2002 HCI – Four. 3

Prepared by MSc Luong manh Ba

H tr giúp (ti

ệ ợ

p)ế

• M c đích chính c a Help là đ tr l

ụ

ủ

i các i dùng g p ph i trong quá

ể ả ờ ả

ặ

câu h i ng ườ ỏ trình s d ng ử ụ

ụ

ư

ộ

M c đích xa h n c a Help là đ a ra m t ủ i dùng tham

ơ ệ

ể

ệ

tài li u toàn di n đ ng ườ kh o và nghiên c u sâu h n ơ

ứ

ả

Update 8-07

 Dept. of SE, August-2002 HCI – Four. 4

Prepared by MSc Luong manh Ba

H tr giúp

ệ ợ

ự ữ

ủ

ộ

ụ ch c thông tin

vào cách phân ph i, t

• S h u ích c a m t h tr giúp ph thu c ộ ệ ợ ố ổ ứ

ườ

ố ệ ợ

ế

ọ

ả

i dùng mu n h tr giúp tr c tuy n ự đ a ra nh ng câu tr l i nhanh cho các câu ả ờ ữ h i, và h không mu n ph i đào sâu trong ố h tr giúp đ tìm ra nó

• Ng ư ỏ ệ ợ

ể

Update 8-07

 Dept. of SE, August-2002 HCI – Four. 5

Prepared by MSc Luong manh Ba

H tr giúp

ệ ợ

ơ

ạ

ị ườ

ữ

ợ

ệ

• Các c ch trong các đ nh d ng Help ế i dùng nh ng cho phép ch ra cho ng ỉ thông tin phù h p cho công vi c hi n ệ th i c a h ờ ủ

ọ

ấ

ớ

ộ

ế

ậ

• Cung c p m t cách ti p c n nhanh t ổ

ữ

ậ

i nh ng thông tin b sung trong t p các tài li u l n

ệ ớ

Update 8-07

 Dept. of SE, August-2002 HCI – Four. 6

Prepared by MSc Luong manh Ba

10.2 Các lo i tr giúp

ạ ợ

• Tham kh o nhanh -

Quick reference

ả

• Tr giúp cho t ng công vi c -

ệ Task

ừ

ợ

specific help

• Gi

i thích đ y đ -

ả

ầ ủ Full explanation

Tutorial

• H ng d n – ướ Update 8-07

ẫ  Dept. of SE, August-2002

HCI – Four. 7

Prepared by MSc Luong manh Ba

Các yêu c u đ i v i h tr giúp

ố ớ ệ ợ

ầ

ẵ

• Tính s n dùng – Availability. • Tính chính xác và đ y đ - Accuracy and ủ ầ

Completeness.

ấ ỏ

ng tranh – Unobtrusiveness

• Tính nh t quán – Consistency. • Tính kh e – Robustness. • Tính linh ho t – Flexibility. ạ • Tính không t ươ

Update 8-07

 Dept. of SE, August-2002 HCI – Four. 8

Prepared by MSc Luong manh Ba

Các d ng tr giúp

ợ

ạ

Update 8-07

 Dept. of SE, August-2002 HCI – Four. 9

Prepared by MSc Luong manh Ba

Các d ng tr giúp(ti p) ợ

ế

ạ

• H tr giúp đ u tiên là các b n h

ả

ầ

ệ ợ ụ

ượ • Các h tr giúp tr c tuy n đ u tiên có l ự

d ng (User guide) đ ệ ợ ợ

ng d n s ẫ ử ướ ấ t hoàn toàn trên gi y là các ng c nh ng n g n ọ

ầ ữ ả

ẽ ắ

c vi ế ế panel tr giúp - các mô t ả c a các màn hình ng d ng ụ ủ

ứ

Update 8-07

 Dept. of SE, August-2002 HCI – Four. 10

Prepared by MSc Luong manh Ba

Các d ng tr giúp(ti p) ợ

ế

ạ

• H tr giúp ch n đoán là m t ch ẩ

ươ ầ

ứ

ườ

ộ

ạ ỉ ẫ

ộ

ế

ng trình ệ ợ ộ nh (đ c thêm vào ng d ng ph n m m) ỏ ượ ề ụ i dùng thông qua m t lo t ng d n ng h ẫ ướ các câu h i đ có th đi đ n m t ch d n ể ỏ ể ho c gi i pháp ặ

ả

• Phát tri n trong các h tr giúp ra quy t

ệ ợ

ế

ể

đ nh ị

Update 8-07

 Dept. of SE, August-2002 HCI – Four. 11

Prepared by MSc Luong manh Ba

Các d ng tr giúp(ti p) ợ

ế

ạ

• Tr giúp c m ng c nh (Context – sensitive

ả

ợ

i s ườ ử ệ

ụ

ể

ặ ộ

ế ộ

ữ ả Help): Là ch đ tr giúp cho ng ế ộ ợ d ng hi n th lên màn hình nh ng tài li u ữ ị có liên quan v i l nh, ch đ , ho c đ ng tác ớ ệ ệ mà h đang th c hi n ự

ọ

• Gi m b t th i gian và s l n gõ phím đ có

ố ầ

ờ

ể

ớ

c s tr giúp trên màn hình

đ

ả ượ ự ợ

Update 8-07

 Dept. of SE, August-2002 HCI – Four. 12

Prepared by MSc Luong manh Ba

Các d ng tr giúp(ti p) ợ

ế

ạ

ầ

ệ

c chu n hoá cho t

t c các

ẩ

ạ ấ ả

• CUA (Common User Access) - IBM l n đ u ầ tiên đ a ra khái ni m các khuôn d ng tr ợ ư giúp c b n đ ơ ả ượ ề ng d ng ph n m m ầ ụ ứ • T p h p tiêu chu n v các đ m c c a ề ụ ủ ẩ ề ậ ợ ch c các đ ề ổ ứ h p ổ ợ ề

ụ

trình đ n c s , v cách t ơ ơ ở ề m c trên trình đ n đó, và v các t ơ ơ ả phím c b n

Update 8-07

 Dept. of SE, August-2002 HCI – Four. 13

Prepared by MSc Luong manh Ba

Các d ng tr giúp(ti p) ợ

ế

ạ

• Các tr giúp chuyên gia hay còn g i là

ọ

ợ wizard

nhiên

:

• Tool tip, What’s This • Point-and-click • Tr giúp b ng ngôn ng t ằ

ợ

ữ ự

ườ

ợ

i dùng g i đ n tr giúp b ng ti ng nói ậ

ằ ế ế

AnswerWork trong WinHelp cho phép ng ế ọ ế (thông qua ph n m m nh n bi t ti ng nói) ề ầ  Dept. of SE, HCI – Four. Update 8-07 August-2002 14

Prepared by MSc Luong manh Ba

Các d ng tr giúp(ti p) ợ

ế

ạ

ng tác (Interactive Help):

• Tr giúp t ợ

c h i m i đ a ra

ượ ỏ ớ ư

ươ không đ i đ n khi đ ợ ế tr giúp

ợ

Update 8-07

 Dept. of SE, August-2002 HCI – Four. 15

Prepared by MSc Luong manh Ba

ợ

Tr giúp theo l nh – Command ệ assistance

ợ

ệ

ng d n

ấ ượ ử ụ

ớ ệ man khi mu n h

ố ướ

ẫ

• Cung c p tr giúp qua các dòng l nh. • Đ c s d ng trong UNIX v i l nh help trong DOS

khi ng

i dùng không th bi

c h t t

t tr

ệ ườ

t c ể ế ướ ế ấ ả

và l nh ệ • Đ n gi n và khá hi u qu ả ả ơ • Gi i h n t ớ ạ ừ các câu l nh.ệ

Update 8-07

 Dept. of SE, August-2002 HCI – Four. 16

Prepared by MSc Luong manh Ba

ấ

ắ

Các d u nh c câu l nh – Command ệ Prompts

i ườ ộ ỗ

i dùng b t g p m t l ắ ặ i. ắ ử ỗ

• Cung c p s tr giúp khi ng ấ ự ợ • Th ng trong d ng d u nh c s a l ấ ườ ở • Th ng có trong l p trình ườ ạ ậ

Update 8-07

 Dept. of SE, August-2002 HCI – Four. 17

Prepared by MSc Luong manh Ba

ữ ả Tr giúp ng c nh

ợ

c thông d ch ượ ấ

• Cung c p các khóa hay ch c năng mà đ ị • Tr giúp m c window Hi n th các Topic khi n F1 ứ ể ứ ợ ấ ị

hay các nút tr giúp ợ

• Tr giúp m c vùng Hi n các ToolTip ứ ợ ệ

Update 8-07

 Dept. of SE, August-2002 HCI – Four. 18

Prepared by MSc Luong manh Ba

Các h

ng d n tr c tuy n ự

ế

ẫ ướ OnLine Tutorial

i dùng làm vi c v i nh ng tr giúp ườ ệ ớ ữ ợ

• Cho phép ng ngay trong ng d ng. ứ ụ

ng d n thông minh ( Cung c p các đ m c • H h ề ụ ẫ ấ

ệ ướ linh ho tạ

Update 8-07

 Dept. of SE, August-2002 HCI – Four. 19

Prepared by MSc Luong manh Ba

Các h

ướ

ng d n tr c tuy n ự

ế ẫ OnLine Tutorial (ti p)ế

Update 8-07

 Dept. of SE, August-2002 HCI – Four. 20

Prepared by MSc Luong manh Ba

Các tài li u tr c tuy n ế

ự

ệ

• Bao g m các tài li u và tài nguyên tr c tuy n

ự

ồ

ế

ệ

ng l n các thông tin không

ớ

• Cung c p m t l ấ ộ

ộ ượ ph thu c vào v n đ riêng nào. ấ

ụ

ề

• Nh là ngu n tham kh o l n và đ y đ

ả ớ

ầ ủ

ư

ồ

ượ

c phát tri n v i r t nhi u ể ớ ấ

ề

• Ngày càng đ ch ng lo i.

ạ

ủ Update 8-07

 Dept. of SE, August-2002 HCI – Four. 21

Prepared by MSc Luong manh Ba

WIN Help

ợ ệ ố ầ

• Là h th ng tr giúp ban đ u cho Microsoft Windows • T t c các version c a Microsoft Windows v n ti p ủ ế

ẫ ấ ả t c h tr tr giúp theo đ nh d ng WinHelp ụ ỗ ợ ợ ạ ị

Update 8-07

 Dept. of SE, August-2002 HCI – Four. 22

Prepared by MSc Luong manh Ba

WIN Help 2000

năm 1998 ể ừ

ề

• Đ c nghiên c u và phát tri n t ứ • Ch y trên n n Window 32-bit. • M r ng các kh năng c b n c a các lo i WinHelp ơ ả ủ ạ ả

tr ượ ạ ở ộ ướ

• Có giao di n nh Explore và trông gi ng nh HTML ư ư ố c đây ệ

Help.

Update 8-07

 Dept. of SE, August-2002 HCI – Four. 23

Prepared by MSc Luong manh Ba

HTML Help

ượ ạ

i dùng ệ ớ ẽ ấ

• Đ c ra đ i vào năm 1997 ờ • Ch y trên n n Window 32-bit ề • Giao di n s d ng s r t thân thi n v i ng ệ ử ụ • Ph i cài trình duy t Internet Explorer 4.0 ho c cao ườ ặ ệ

ả h n n a ơ ữ

Update 8-07

 Dept. of SE, August-2002 HCI – Four. 24

Prepared by MSc Luong manh Ba

WEB Help

c thi

t k đ ch y trên nh ng

ế ế ể ạ

ữ

ộ ạ

ượ

• Là m t d ng HTML Help đ ệ ộ

• S d ng trên r t nhi u h đi u hành khác nhau nh Window ,

ư

trình duy t r ng và đa d ng ấ

ạ ệ ề

ử ụ

ề

UNIX , MACINTOSH hay LINUX

ẽ ạ

• WEB help s t o ra các file đ nh d ng HTML , XML . . . và các ị

c phân b trên các th m c c a

ẽ ượ

ư ụ ủ

ạ ổ i s d ng ho c trên m t server

file imagine, chúng s đ ng

ườ ử ụ

ộ

ặ

Update 8-07

 Dept. of SE, August-2002 HCI – Four. 25

Prepared by MSc Luong manh Ba

Flash Help

WEB Help

ệ • Nâng c p t • Tìm ki m nhanh , hi u qu khi phai qua firewalls và băng ả

i s d ng ườ ử ụ

ộ ợ

ấ ừ ế thông k t n i th p ấ ế ố • Tìm theo yêu c u c a ng ầ ủ • Giao di n Help đ ng, có tích h p các Flash sinh đ ng bao ộ ệ g m c âm thanh ả ồ

Update 8-07

 Dept. of SE, August-2002 HCI – Four. 26

Prepared by MSc Luong manh Ba

Java Help

t k cho các ng d ng vi ứ ụ ế ằ t b ng ngôn ng ữ

c trên h u h t các h đi u hành • Đ c thi ế ế ượ l p trình Java ậ • Có th ch y đ ể ạ ượ ệ ề ế ầ

khác nhau (Window, UNIX, Macintosh , LINUX ) .

Update 8-07

 Dept. of SE, August-2002 HCI – Four. 27

Prepared by MSc Luong manh Ba

ROBO HELP

ộ

ợ

ứ

ụ ạ ụ

ư

ạ

ữ

ỗ ợ ộ

ấ

• Robo Help là m t công c t o ra các Help tr giúp cho các ng d ng ch y ạ trên desktop cũng nh web-based • H tr 10 lo i ngôn ng khác nhau • B công c Robo Help do hãng ả ử ụ

ụ Macromedia s n xu t ộ

ụ ạ ệ

ể ạ

• Robo Help s d ng b công c so n th o Microsoft Word đ t o và hi u ch nh các file topic

ả ỉ Update 8-07

 Dept. of SE, August-2002 HCI – Four. 28

Prepared by MSc Luong manh Ba

ROBOT He lp (Ti p)ế

Demo m t ví d t o Help b ng b công c ụ

ụ ạ

ằ

ộ

Robo Help

Update 8-07

 Dept. of SE, August-2002 HCI – Four. 29

Prepared by MSc Luong manh Ba

10.3 Qui trình thi

t k m t h tr ế ế ộ ệ ợ

giúp

• T o các Help Topic

ạ

• Xác đ nh các c a s đ hi n th Help Topic ử ổ ể ể

ị

ng pháp đ nh h

ng các Help

• Xác đ nh ph ị

ươ

ị

ướ

Topic

Update 8-07

 Dept. of SE, August-2002 HCI – Four. 30

Prepared by MSc Luong manh Ba

T o các Help Topic

ạ

ữ

ơ m t h tr giúp, ch a đ ng t ộ ệ ợ thông tin mà ng

ườ

• Help Topic là đ n v t ch c c b n trong ị ổ ứ ơ ả t c nh ng ấ ả ứ ế

ổ

ể

ấ

ự i dùng tìm ki m • Welcome Topic: Ch đ đ u tiên trong m t ộ ủ ề ầ h tr giúp, bi u di n m c đích t ng th ể ụ ễ ệ ợ c a m t h tr giúp ộ ệ ợ ủ • Overview style topic: cung c p thông tin mang ủ ề tính khái ni m và n n t ng v m t ch đ ề ả

ề ộ

ệ

Update 8-07

 Dept. of SE, August-2002 HCI – Four. 31

Prepared by MSc Luong manh Ba

T o các Help Topic (ti

ạ

p)ế

ễ

ể

ộ

ướ

ườ

c giúp ng ụ ụ ể ắ ầ

ộ

ớ

ộ

ả

ạ

• Procedure style topic: bi u di n m t chu i ỗ i dùng hoàn thành m t các b ộ nhi m v c th , b t đ u v i m t tiêu đ ề ệ m t vài lo i ho t đ ng, ví d : mô t ụ “Creating a Topic”, ho c “ặ To create a Topic inside the Project Tab ”

• Definition style topics: là các mô t

ọ

ả

ng đ

ng n g n ắ c hi n th trong m t c a s ổ ộ ử

ể

ị

ượ

th ườ pop-up Update 8-07

 Dept. of SE, August-2002 HCI – Four. 32

Prepared by MSc Luong manh Ba

T o các Help Topic (ti

ạ

p)ế

ữ

ộ

ỏ

ị ằ

ể ể

ể

ụ

ắ

ộ ứ ề

ơ

ụ ể

ụ

ủ ề

ồ ủ ề ử

ị

ng ti n

ươ

ụ

ễ

• What’s This? Style topics: là nh ng topic pop-up nh có th hi n th b ng cách kích chu t vào m t tính năng giao di n trong m t ng d ng đ cung ệ ng n g n v tính năng, nó đ n c p m t mô t ọ ấ ả ộ các ch c năng c th trên giao gi n ch là mô t ứ ả ỉ ả di n ng d ng ệ ứ • M t s các lo i ch đ khác: bao g m các thông ộ ố ạ i (error message), các ch đ x lý s c đi p l ự ố ệ ỗ (troubleshooting), các ch đ hi n th trong các ủ ề ể ệ ứ Update 8-07

ng d ng trình di n đa ph  Dept. of SE, August-2002

HCI – Four. 33

Prepared by MSc Luong manh Ba

Xác đ nh các c a s hi n th

ử ổ ể

ị

ộ

ử ổ

ả ệ

• Không b t bu c các c a s Help c m ng ữ c nh ph i hoàn thành quá nhi u nhi m v ụ ả • Thi

t k các c a s c m ng c nh “Always

ề ữ ả

ử ổ ả

ắ ả ế ế On Top”

• Không nhét quá nhi u thông tin vào m t màn

ộ

ề

hình Help

ắ

ờ ọ

• Tránh dùng hình nh n n, hình m , màu s c ả ề làm cho văn b n ch đ Help khó đ c ủ ề ả  Dept. of SE, Update 8-07 August-2002

HCI – Four. 34

Prepared by MSc Luong manh Ba

Xác đ nh các c a s hi n th (ti

ử ổ ể

ị

p)ế

• C g ng đ n gi n thi

ả

ơ

ữ

ế ế ộ ệ ố ấ

ẫ ề

ể

ẫ

t k Help, c n r t ít các ấ ầ cho quy c v ki u m u nh t quán; t o các kho ng ả ch c các

ạ đ t ề ể ổ

ứ

ọ

ố ắ ki u m u trong m t h th ng Help, gi ể ướ tr ng theo chi u d c và căn l ề ố thông tin tr giúp sao cho d đ c ễ ọ

• Dùng các b ng khi t

ch c các thông tin ph c t p

ổ ứ

ứ ạ

ợ ả

và khi so sánh

ị

• Dùng các đ nh nghĩa pop-up đ gi ể ả ắ

ậ ộ

ữ

i thích các thu t ng , gom các đ nh nghĩa ng n g n trong m t ọ ị glossary ho c trong m t tab glossary

ộ

ặ

Update 8-07

 Dept. of SE, August-2002 HCI – Four. 35

Prepared by MSc Luong manh Ba

Xác đ nh các c a s hi n th (ti

ử ổ ể

ị

p)ế

• Các lo i c a s : các c a s chính, c a s ử ổ

ạ ử ổ

th c p, và c a s pop-up

ử ổ .

ử ổ

• C a s chính và c a s th c p: c a s tĩnh ử ổ ứ ấ • C a s pop-up: c a s t m th i ờ ử ổ ạ

ứ ấ ử ổ ử ổ

Update 8-07

 Dept. of SE, August-2002 HCI – Four. 36

Prepared by MSc Luong manh Ba

C a s chính

ử ổ

Update 8-07

 Dept. of SE, August-2002 HCI – Four. 37

Prepared by MSc Luong manh Ba

C a s th c p ử ổ ứ ấ

Update 8-07

 Dept. of SE, August-2002 HCI – Four. 38

Prepared by MSc Luong manh Ba

C a s pop-up

ử ổ

Update 8-07

 Dept. of SE, August-2002 HCI – Four. 39

Prepared by MSc Luong manh Ba

Đ nh h

ng các Help Topic

ị

ướ

ế ẫ ớ ế

i các ch đ liên quan ủ ề ả

ng khó b o trì ườ ặ ơ

ế ớ

ề

• Các siêu liên k t d n t – Các siêu liên k t th – Tránh t o ra nhi u h n 4 ho c 5 siêu liên k t t ạ ủ ề

ị

ế ể ể ặ

ử ổ

các ch đ liên quan – s d ng các siêu liên k t đ hi n th thông tin b ổ ử ụ sung trong các c a s pop-up ho c các c a s th ử ổ ứ c pấ

– Các siêu liên k t không đ

ế

ượ

c sâu quá 3 m c ứ

Update 8-07

 Dept. of SE, August-2002 HCI – Four. 40

Prepared by MSc Luong manh Ba

Đ nh h ị

ướ

ng các Help Topic (ti p)ế

• Siêu liên k t và các đi u khi n ch đ liên

ủ ề

ể

ế

ề

ế

quan – Các siêu liên k t chu n ẩ – Các đi u khi n See Also – Các đi u khi n liên k t t khoá ế ừ – Các đi u khi n ch đ liên quan

ề ề ề

ể ể ể

ủ ề

Update 8-07

 Dept. of SE, August-2002 HCI – Four. 41

Prepared by MSc Luong manh Ba

t k ICONS

ngươ XI: Thi

ế ế

Ch

ộ

ẩ

N i dung 11.1. Khái ni m và vai trò c a Icons ủ ệ t k Icon 11.2. Các chu n cho Thi ế ế t kế ế 11.3. Qui trình thi 11.4 Đánh giá

Update 8-07

 Dept. of SE, August-2002 HCI – Four. 42

Prepared by MSc Luong manh Ba

11.1. T ngổ quan

•

ẽ ượ ử ụ ể ượ

ng/ hình v ) đ ữ

ể ồ

Các icon (bi u t hình đ th c hi n s t ể ự • Các bi u t ể ượ

c s d ng trên màn ng tác gi a các ng d ng và ND. ụ ứ ng đ ho có th cung c p s đ c l p v ề ệ ự ươ ạ ấ ự ộ ậ

ữ ớ

ộ ầ ủ ngôn ng trong khi trao đ i thông tin v i ND. ấ

ổ • Là m t ph n c a giao di n đ ho cung c p kh năng ệ ch c năng c a h ệ ớ ể

đó. ồ ạ h c, hi u và ghi nh các ph n t ầ ử th ng và tr giúp ND khi thao tác v i nh ng ph n t ớ ả ủ ầ ử

ọ ố • Th ườ ứ ữ ồ

ệ

ụ ủ ụ ộ ễ

ẩ ng v t lí m t cách gián ti p. ợ ng m t giao di n ng i dùng đ ho – GUI s ộ ẽ ạ ườ ệ cung c p m t bi u di n n d cho các nhi m v c a ND. ễ ẩ ụ ể ộ ấ ng có th bi u di n các n d m t cách Các bi u t ể ể ể ượ tr c ti p, hay m t đ i t ộ ố ượ ự ế ộ ế ậ

Update 8-07

 Dept. of SE, August-2002 HCI – Four. 43

Prepared by MSc Luong manh Ba

11.1. T ngổ quan (ti pế )

ng:

ạ ể ượ

t lý nh đĩa, máy in,… đ i t ng v ư ổ

• Phân lo i bi u t – Bi uể di n các – Bi uể di n các ch c năng cu HT (action Icons) – Bi uể di n các

ng ố ượ ứ ố ượ đi u khi n (data controls) đ i t ể ậ ả ề ễ ễ ễ

i dùng v các bi u t

ng đ i t

Cách hi u c a ng ể

ủ

ườ

ể ượ

ề

ố ượ ng

Update 8-07

 Dept. of SE, August-2002 HCI – Four. 44

Prepared by MSc Luong manh Ba

11.1. T ngổ quan (ti pế )

• C u trúc khái ni m c a đ i t

ng bi u

ố ượ

ủ

ệ

ể

ấ ngượ t

c s d ng đ ch rõ các bi u t

ng đ i

ệ

ượ ử ụ

ể ượ

ể

ỉ

ố

Khung làm vi c đ ng- ISO 11581 t ượ Update 8-07

 Dept. of SE, August-2002 HCI – Four. 45

Prepared by MSc Luong manh Ba

t k ICONS

ngươ XI: Thi

ế ế

Ch

ẩ

11.1. Khái ni m và vai trò c a Icons ủ ệ t k Icon 11.2. Các chu n cho Thi ế ế t kế ế 11.3. Qui trình thi 11.4 Đánh giá

Update 8-07

 Dept. of SE, August-2002 HCI – Four. 46

Prepared by MSc Luong manh Ba

11.2 Các chu n cho thi

t k Icons

ẩ

ế ế

• Có nhi u chu n cho thi t k đ m b o tính ti n d ng ề ẩ ế ế ả ệ ụ ả

(Usability)

Update 8-07

 Dept. of SE, August-2002 HCI – Four. 47

Prepared by MSc Luong manh Ba

11.2 Các chu n (ti p)

ế

ẩ

Update 8-07

 Dept. of SE, August-2002 HCI – Four. 48

Prepared by MSc Luong manh Ba

Các cách ti p c n các chu n ế ậ

ẩ

•

ng x lý (Process-Oriented ISO • Các chu n ISO h ẩ ướ ử

Standards)

ẫ

– –

i dùng trung

c ượ t k ng ế ế ườ

ươ

ệ ố

–

ng tác ng

ườ

ươ

i quá trình , chu trình ,

ng tác ọ ả

ệ ố

ng ng

ờ ướ

ườ

–

i c

ườ ượ

i dùng ng s n ph m (Produit-Oriented

t k h ế ế ướ ả ướ

ng tác ng ươ ọ ng pháp tính dùng đ ươ ng ng ườ ẩ

ISO 9241-11 H ng d n tính dùng đ ướ ISO 13407 : Các quá trình thi tâm cho các h th ng t ISO/TR 18529 : Công thái h c cho t dùng – h th ng . Các mô t vòng đ i h i dùng ISO/TR 16982 : Công thái h c cho t dùng – h th ng. Các ph ệ ố h tr cho thi ỗ ợ • Các chu n ISO h ẩ ISO Standards)

–

ng c a s n

ấ ượ

ủ ả

ẩ

ự

–

c đo

ướ

ISO/IEC 9126 – 1 : mô hình cho ch t l ph m d a trên công ngh , k thu t ậ ệ ỹ c trong các th ISO/IEC 9126 – 2 : tính dùng đ ch t l

ấ ượ

Update 8-07

ượ ng bên trong và bên ngoài  Dept. of SE, August-2002

HCI – Four. 49

Prepared by MSc Luong manh Ba

Chu n ISO 9241 cho tính ti n d ng

ệ ụ

ẩ

Update 8-07

 Dept. of SE, August-2002 HCI – Four. 50

Prepared by MSc Luong manh Ba

Chu n ISO 11581 cho thi

t k ICON

ẩ

ế ế

ể ượ ng

ề ng đ i t ể ượ ng con tr ể ượ ỏ

ng đi u khi n ể ượ ề ể

• ISO/IEC 11581: 6 ph nầ – ISO/IEC 11581 – 1 : T ng quan v các bi u t ổ – ISO/IEC 11581 – 2 : Các bi u t ố ượ – ISO/IEC 11581 – 3 :Các bi u t - ISO/IEC 11581 – 4 các bi u t - ISO/IEC 11581 – 5 các bi u t

ể ượ ụ

ng các thanh công c ng hành đ ng. - ISO/IEC 11581 – 6 : Các bi u t ộ ể ượ

Update 8-07

 Dept. of SE, August-2002 HCI – Four. 51

Prepared by MSc Luong manh Ba

Chu n ISO 11581 cho thi

t k ICON(ti

ẩ

ế ế

p)ế

Update 8-07

 Dept. of SE, August-2002 HCI – Four. 52

Prepared by MSc Luong manh Ba

Bi u t

ng đ i t

ng

ể ượ

ố ượ

• Chú ý "Bi u t

ng đ i t

ậ

ộ

ố ượ

ể ượ

ể ượ ượ ử ụ ả

các bi u t ằ

ng và có th đ

ể ượ

ộ ể

ể

ủ

ng là m t thu t ng ữ c s d ng trong ISO/IEC 11581 đ đ ể ng bi u di n các miêu t ễ ể ch c năng b ng cách liên k t v i m t ứ ế ớ c di chuy n đ i t ố ượ ng khác hay m ra. Các ki u bi u t ể ượ ở trong các ph n khác c a c mô t đ ầ ả ượ chu n này ". ẩ

Update 8-07

 Dept. of SE, August-2002 HCI – Four. 53

Prepared by MSc Luong manh Ba

7 nguyên t c thi

ắ

t k ế ế

1. Approach Icon Design Holistically

"If yo u ne e d to draw s e ve ral ic o ns , yo u ne e d to think o ve r imag e s fo r the who le s e t o f ic o ns be fo re pro c e e ding with illus trating ac tivitie s ." This is o ne o f two majo r po ints made in this artic le o n ic o n de s ig n. He g o e s o n to e xplain ho w failing to plan ho w the who le s e t o f ic o ns will wo rk to g e the r fro m the be g inning will e ns ure time , as a hug e was te o f re de s ig n will be ine vitable .

Update 8-07

 Dept. of SE, August-2002 HCI – Four. 54

Prepared by MSc Luong manh Ba

7 nguyên t c thi

t k (ti p)

ắ

ế ế ế

2. Consider Your Audience

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."

Update 8-07

 Dept. of SE, August-2002 HCI – Four. 55

Prepared by MSc Luong manh Ba

7 nguyên t c thi

t k (ti p)

ắ

ế ế ế

3. Design for the Size the Icon will be Used

At

Update 8-07

 Dept. of SE, August-2002 HCI – Four. 56

Prepared by MSc Luong manh Ba

7 nguyên t c thi

t k (ti p)

ắ

ế ế ế

that covers

The approach taken for small icons and large icon design is immensely different. Firewheel has a good the scaling subject called article Icon Design: Bitmap vs Vector. Also, review this article on Icon Design Sizing over at Mezzoblue. It covers some inherent issues with designing icons for small sizes.

Update 8-07

 Dept. of SE, August-2002 HCI – Four. 57

Prepared by MSc Luong manh Ba

7 nguyên t c thi

t k (ti p)

ắ

ế ế ế

4. Keep Icons Simple and Iconic

The icons below look really cool. It requires a judgment, though, as to whether the loss of some of the quick recognition of the symbol is worth the added design around the symbol. At a large size it works just fine, as they function similar to illustrations. At smaller sizes though, a less-dressed solution may be preferable.

Update 8-07

 Dept. of SE, August-2002 HCI – Four. 58

Prepared by MSc Luong manh Ba

7 nguyên t c thi

t k (ti p)

ắ

ế ế ế

5. Cast Consistent Lighting, Reflections, and

Shadows

The guidebook gives really specific rules for the Vista Icon set. This gives more exacting standards for icon designers and ensures a unified icon system. Following is a specific rule to see an example, "Use shadows to lift objects visually from the background, and to make 3D objects appear grounded, rather than awkwardly floating in space." There are many more rules in this guide.

Update 8-07

 Dept. of SE, August-2002 HCI – Four. 59

Prepared by MSc Luong manh Ba

7 nguyên t c thi

t k (ti p)

ắ

ế ế ế

6. Utilize a Limited Perspective "The various perspectives are achieved by changing the position of an imaginary camera capturing the icon." The image below shows the difference in perspective between an Application Icon (Top) and a Toolbar Icon (Bottom).

Update 8-07

 Dept. of SE, August-2002 HCI – Four. 60

Prepared by MSc Luong manh Ba

7 nguyên t c thi

t k (ti p)

ắ

ế ế ế

7. Create Consistent Icon Set Styles Lighting and Perspective certainly contribute to the style of an icon, though there are many other factors that can contribute to the style as well. If you're trying to fit your icon into a grunge-style Web site design, you'll likely be adding texture to the style of the icon's design.

Update 8-07

 Dept. of SE, August-2002 HCI – Four. 61

Prepared by MSc Luong manh Ba

10 l

ỗ

i hay m c khi thi ắ

t k ế ế

#1 Insufficient differentiation between icons Sometimes within one set of icons, we have icons that look alike and it is very hard to understand what is what. If you miss the legends, you can very easily get the icons mixed up.

Update 8-07

 Dept. of SE, August-2002 HCI – Four. 62

Prepared by MSc Luong manh Ba

10 l

ỗ

i hay m c khi thi ắ

t k ế ế

#2 Too many elements in one icon • The simpler and more laconic the icon, the better. It is preferable to keep

the number of objects in a single icon to a minimum.

• Nevertheless, Microsoft’s designers, inspired by the new format of icons featured in Windows Vista, decided to go big and drew bloated icons to justify their bloated budget:

Update 8-07

 Dept. of SE, August-2002 HCI – Four. 63

Prepared by MSc Luong manh Ba

10 l

ỗ

i hay m c khi thi ắ

t k ế ế

• #3 Unnecessary elements • An icon should be easy to read. The fewer elements it has, the

better. It is better if the whole image is relevant and not only part of it. Therefore, you have to pay attention to the context of using icons.

• Let us take for instance some database icons: The simpler and more laconic the icon, the better. It is preferable to keep the number of objects in a single icon to a minimum.

Update 8-07

 Dept. of SE, August-2002 HCI – Four. 64

Prepared by MSc Luong manh Ba

10 l

ỗ

i hay m c khi thi ắ

t k ế ế

• But if this application (or a separate toolbar) deals only with databases, we can (and should) remove the unnecessary part:

• The sense is not lost here but the icons become much more

discernible (nh n th c đ

c rõ h n).

ứ ượ

ậ

ơ

Update 8-07

 Dept. of SE, August-2002 HCI – Four. 65

Prepared by MSc Luong manh Ba

10 l

ỗ

i hay m c khi thi ắ

t k ế ế

#4 Lack of unity of style within a set of icons

It is a unity of style that unites several icons into a set. The uniting property can be any of the following: color scheme, perspective, size, drawing technique or a combination of several such properties. If there are only a few icons in the set, the designer can keep some rules in his head. If there are many icons in the set and there are several designers working on them (for instance, icons for an operating system), then special instructions are created. Such instructions describe in detail how to draw an icon so that it fits straight into the set.

Update 8-07

 Dept. of SE, August-2002 HCI – Four. 66

Prepared by MSc Luong manh Ba

10 l

ỗ

i hay m c khi thi ắ

t k ế ế

#5 Unnecessary perspective and shadows in small

•

icons Progress does not stand still: interfaces have gained the potential to display semi-transparent objects, lost the limitation on the number of colors and there is now a trend towards 3D icons. But is it really all that useful? Not always! Especially if we are talking about icons sized 16×16 or smaller.

• For example, let us take the application manager from GNOME 2.2.0

(RedHat 9):

Update 8-07

 Dept. of SE, August-2002 HCI – Four. 67

Prepared by MSc Luong manh Ba

10 l

ỗ

i hay m c khi thi ắ

t k ế ế

Perspective in icons of such minute size is unnecessary and even counter-productive. And here is the application manager from Windows XP:

Update 8-07

 Dept. of SE, August-2002 HCI – Four. 68

Prepared by MSc Luong manh Ba

10 l

ỗ

i hay m c khi thi ắ

t k ế ế

#6 Overly original metaphors •

Selecting what is to be displayed in an icon is always a compromise between recognizability and originality. Before a metaphor (image) is developed for an icon it is wise to see how it is done in other products. Maybe the best solution lies not in coming up with something original but rather in adopting the existing solution.

• An example of excessive originality is the bin icon in OS/2 Warp 4, which

is not actually a bin at all but a shredder.

Update 8-07

 Dept. of SE, August-2002 HCI – Four. 69

Prepared by MSc Luong manh Ba

10 l

ỗ

i hay m c khi thi ắ

t k ế ế

#7 National or social characteristics not being

•

taken into account It is always necessary to take into account the conditions in which your icon is going to be used. An important aspect here is national characteristics. Cultural traditions, surroundings and gestures can differ radically from country to country.

• Let us suggest that we need to draw an icon for working with e-mail. It

makes perfect sense to use a metaphor of real paper mail. A mailbox for example.

Update 8-07

 Dept. of SE, August-2002 HCI – Four. 70

Prepared by MSc Luong manh Ba

10 l

ỗ

i hay m c khi thi ắ

t k ế ế

#8 Images of real interface elements in icons • The manual on creating icons for Mac OS X warns us: “Avoid using Aqua interface elements in your icons; they could be confused with the actual interface.” But all in vain! For instance, take a look at the following icon:

• Here is an interesting example from the OmniWeb browser

interface:

Update 8-07

 Dept. of SE, August-2002 HCI – Four. 71

Prepared by MSc Luong manh Ba

10 l

ỗ

i hay m c khi thi ắ

t k ế ế

#9 Text inside icons • This mistake is commonly seen in application icons. Clearly the first thing that comes to mind when working on an application icon is to adapt the application’s logo. What is so bad about the text inside the icon? Firstly, it is directly language-related and so impedes localization. Secondly, if the icon is small, it is impossible to read the text. Thirdly, in the case of application icons, this text is repeated in the name of the application.

Update 8-07

 Dept. of SE, August-2002 HCI – Four. 72

Prepared by MSc Luong manh Ba

10 l

ỗ

i hay m c khi thi ắ

t k ế ế

#10 Outside the pixel framework As a rule, this problem occurs if you use a vector editor for drawing icons. In large size everything looks pretty and clear; but in reality the icons are small, and under rasterization anti-aliasing frets the objects’ borders.

Update 8-07

 Dept. of SE, August-2002 HCI – Four. 73

Prepared by MSc Luong manh Ba

L i khuyên:

ờ

Ge t Starte d with Ic on De s ign

• Designing icons for Web sites is a good way to get started with icon design. Often there are only a few icons needed for a site design. Start simple with a small Web site design project where you are required to design only a handful of icons or less. This is a good way to gain some experience with icon design.

• Start the icon design process with research. Consider the common symbolic metaphor used to describe the icon you're looking to make. Sketch as much as necessary to lock down the concept. Compliment the style of the icon designs with the Web site design you'll be using them on. Consider the color, perspective, and graphic look of the site.

Update 8-07

 Dept. of SE, August-2002 HCI – Four. 74

Prepared by MSc Luong manh Ba

t k ICONS

ngươ X: Thi

ế ế

Ch

ộ

ẩ

N i dung 11.1. Khái ni m và vai trò c a Icons ủ ệ t k Icon 11.2. Các chu n cho Thi ế ế t kế ế 11.3. Qui trình thi 11.4 Đánh giá

Update 8-07

 Dept. of SE, August-2002 HCI – Four. 75

Prepared by MSc Luong manh Ba

11.3 Các b

c c b n trong thi

t k ế ế

ướ ơ ả ICON

1- Thu th p các yêu c u , tìm hi u môi

ể

ầ

tr

ườ

ng

ưở ỡ ủ

ậ ng 2- Xây d ng ý t ự 3- Xác đ nh c c a Icon ị 4- S d ng màu ử ụ 5- Tính h p pháp ợ

Update 8-07

 Dept. of SE, August-2002 HCI – Four. 76

Prepared by MSc Luong manh Ba

ậ

ầ Thu th p yêu c u

c đ u tiên. Icon c n bi u di n đ c môi ướ ầ ễ ể ầ ượ

ớ

• Đây là b ngườ ụ

i là t • Thí d : Khi ph i thi ả KSPM đó có th là ể ổ phòng đó l ủ ự t k kho l u tr thông tin thì v i ư ữ ế ế i v i nhân viên Văn c l đĩa; ng ượ ạ ớ đ ng tài li u. ệ ạ

Update 8-07

 Dept. of SE, August-2002 HCI – Four. 77

Prepared by MSc Luong manh Ba

Xây d ng ý t ự

ưở ng

ng

t kê danh sách các bi u t ả

ể ượ ể ể ệ ộ

• Li ệ • L a ch n hình nh đ th hi n n i dung ự • Thí d n u là Icon cho Web thì có th ch n

ọ

ể

ọ ụ ế qu đ a c u ả ị ầ

• Chú ý: Hình nh có th chi m đ n 80%

ế

ể

ế

ả

• Cu i cùng là k t h p Logo c a hãng v i hình

ế ợ

ủ

ớ

thông tin ố

nh đã ch n

ả

ọ

Update 8-07

 Dept. of SE, August-2002 HCI – Four. 78

Prepared by MSc Luong manh Ba

ỡ

ị

Xác đ nh kích c Icon

ưở

ng l n: S thu hút ph ụ

ự

ớ

ả

ộ

• Kích c còn ph thu c vào đ phân gi

• Kích c có nh h ỡ thu c vào kích c . ỡ ụ

ỡ

ả ủ

ộ

i c a màn hình: 1600 x 1200 , 1280 x 1024, 1024x768

ặ

• C là 40 x 40 ho c 48 x 48 v a th hi n hình ừ t h n đ ng th i giúp Icon đ p h n

ỡ nh chi ti

ể ệ ẹ

ế ơ

ờ

ơ

ồ

ả

Update 8-07

 Dept. of SE, August-2002 HCI – Four. 79

Prepared by MSc Luong manh Ba

Màu s cắ

ị

ể

ộ

ư ỏ ể ệ ự ụ ệ ố

ủ ể ệ

• ISO đã qui đ nh khá rõ. TD gam màu nóng nh đ th hi n s nguy hi m. • B màu c a Icon s ph thu c vào s ố ẽ bit màu th hi n mà h th ng dùng sao cho hài hoà.

Update 8-07

 Dept. of SE, August-2002 HCI – Four. 80

Prepared by MSc Luong manh Ba

Tính h p pháp ợ

• Thông th

ng thì Icon có th đ

ườ

ể ượ

ễ

ả

c i mi n phí tuy nhiên chúng ta dung l ạ c thì lu t pháp quy đ i v i m t s n ậ ọ ố ướ đ nh vi c tr ti n b n quy n khi s ử ề ả ề ệ d ng. Vd nh hãng IBM c a Mĩ. ư

ố ớ ị ụ

ủ

Update 8-07

 Dept. of SE, August-2002 HCI – Four. 81

Prepared by MSc Luong manh Ba

Các yêu c u & Khuy n ngh ị

ế

ầ

• Yêu c u: Nh ng cái b t bu c khi thi

ữ

ộ

ầ

ắ

t k ế ế

Icon

ố

• Khuy n ngh : Là cái mong mu n các nhà

ị t k nên l u tâm.

thi

ế ế ế

ư

Update 8-07

 Dept. of SE, August-2002 HCI – Four. 82

Prepared by MSc Luong manh Ba

Các yêu c u ầ

• ệ ể ễ

ộ ộ

ễ ủ ạ ượ ộ ạ

ng khi bi u di n m t Giao di n c a m t bi u t ể ượ ộ ủ tr ng thái ho c m t ch đ c a h th ng máy tính s ẽ ế ộ ủ ệ ố ặ đ t rõ ràng v i bi u di n c a m t tr ng c phân bi ể ớ ệ thái ho c ch đ khác ế ộ ặ

ấ ễ ệ ộ

ề • M t icon s v n d hi u và d phân bi ẽ ẫ ễ ể ổ

ặ ự ng mà nó đ ườ

• ng s tuân theo m nh đ 4, 5 trong ệ ể ượ ề ẽ

• ng đ ộ

ả

ạ ả ạ ả ạ ế

trên các icon khác. t khi có b t kỳ s thay đ i nào v giao di n do s thay đ i v tr ng ổ ề ạ ệ ự thái ho c ch đ , trong môi tr c s ượ ử ế ộ d ng.ụ T t c các bi u t ấ ả ISO 9241-3:1992 B t c khi nào m t bi u t c di chuy n đè lên ể ượ ể ượ ng khác, nh ng không ph i là kích ho t m t bi u t ư ể ượ b t kỳ m t vùng nh y c m nào, thì vùng nh y c m x p ộ ch ng c a icon d ch chuy n s ể ẽ ở ấ ứ ộ ấ ồ ủ ị

Update 8-07

 Dept. of SE, August-2002 HCI – Four. 83

Prepared by MSc Luong manh Ba

Các yêu c u (ti p) ầ

ế

•

ẽ

ớ

ự ươ

ng tác v i các icon s không xoá S t đi b t c m t d li u nào mà không đ

ượ

ấ ứ ộ ữ ệ c phép c a ng ủ

ư

ễ ủ

ể

i dùng. ườ • Màu s c s không đ c s d ng nh là ắ ẽ ượ ử ụ các ph n t thông tin duy nh t đ phân ầ ử ấ ể bi t gi a các icon tr khi bi u di n c a ừ ữ ệ ch c năng chính là màu đó. ph n t ầ ử ứ

Update 8-07

 Dept. of SE, August-2002 HCI – Four. 84

Prepared by MSc Luong manh Ba

Các yêu c u (ti p) ầ

ế

• ồ ộ ạ ượ ử ụ ư

ở

ụ

ấ . c s d ng nh là các Khi m t icon đ ho đ thành ph n c a các icon khác, ý nghĩa t o nên b i ạ ầ ủ s nh t quán v i t t c các công d ng các ph n t ớ ấ ả ầ ử ẽ c a t ng ph n t ầ ử ủ ừ

Update 8-07

 Dept. of SE, August-2002 HCI – Four. 85

Prepared by MSc Luong manh Ba

Các yêu c u (ti p) ầ

ế

• Các chi ti

ụ

ế ể ể ệ

ế ơ ả

ẫ

ả

t c a nó.

c k t h p vào t ph có th đ ể ượ ế ợ các icon đ th hi n m t cách chi ti t h n ộ các ch c năng, tuy nhiên v n đ m b o tính ứ d nh n bi ậ

ế ủ

ễ

Update 8-07

 Dept. of SE, August-2002 HCI – Four. 86

Prepared by MSc Luong manh Ba

Các Khuy n ngh ị

ế

• ộ ệ ủ

ị ấ ộ ậ ể ồ ạ ố

• c bi u di n ỡ ượ ộ ể

ả các kích c khác ễ ở t k c a icon nên v n ế ế ủ c tính d hi u và d nhìn, đ m b o ễ ẫ ả

ệ ẫ ấ

• ượ ử ụ ế

ượ

ạ

ươ ư

Giao di n c a các icon nên nh t quán trong m t t p các icon, nghĩa là trong m t t p các icon nên ậ c hi n th cùng m t ki u đ ho gi ng nhau. đ ể ượ N u các icon đ ế nhau trên màn hình, thì thi đ m b o đ ả ượ ả ễ ể các thành ph n chính c a nó v n xu t hi n. ủ ầ N u các icon đ c s d ng trên các màn hình khác nhau làm cho các icon đ c hi n th v i nh ng t ể ỷ ữ ị ớ 2 c nh khác nhau, thì các ph t k l ng pháp thi ươ ế ế ệ nên quan tâm đ n vi c t o ra giao di n c a icon ệ ủ ệ ạ ế sao cho nó luôn t t k nh hình nh thi ng t ế ế ả ự ban đ u. ầ Update 8-07

 Dept. of SE, August-2002 HCI – Four. 87

Prepared by MSc Luong manh Ba

Các Khuy n ngh (ti p)

ị ế

ế

• ễ ể

l n quan sát đ u tiên không ph i là m t ả ộ

ễ ậ

• ể

ấ

ộ c thi ng đ ng ho c m t t p các môi tr ộ ậ ườ ượ ế

• c làm gi m tính d hi u và ễ ể

ả t c a m t icon (m c 5 of ISO 9241- ụ ượ ộ ế ủ

T t c các icon đã có s n nên d hi u. Khi tính d ẵ ễ ấ ả hi u t ầ ể ừ ầ c, thì các icon nên có kh yêu c u v tính dùng đ ả ượ ầ ề t. năng h c và d nh n bi ọ ế V trí c a các nhãn liên k t v i icon có th thay đ i ổ ị ế ớ ủ i dùng nên nh t quán bên trong m t môi b i ng ườ ở tr t ườ ặ k đ s d ng cùng nhau. ế ể ử ụ Ho t hình không đ ạ d nh n bi ễ ậ 3:1992)

Update 8-07

 Dept. of SE, August-2002 HCI – Four. 88

Prepared by MSc Luong manh Ba

Các bi n thế

ể

ế

ụ

ộ

ể

ộ ộ

ư

ể

ẳ

đ k t thúc, liên thông, m u, và

• Các bi n th toàn c c cho các thu c tính ng th ng nh : ki u, đ r ng, đi m ể ẫ

ườ ế

Update 8-07

 Dept. of SE, August-2002 HCI – Four. 89

Prepared by MSc Luong manh Ba

Các bi n th (ti p)

ể ế

ế

• Các bi n th toàn c c cho các thu c tính

ụ

ế

ể

ộ canh góc là: cong, vuông, và liên thông

Update 8-07

 Dept. of SE, August-2002 HCI – Four. 90

Prepared by MSc Luong manh Ba

Các bi n th (ti p)

ể ế

ế

t có th đ ế ể ượ c tăng lên đ thêm vào ể

• M c đ chi ti ứ ộ . tính th c t ự ế

• ặ ẫ ề ặ ể

ộ ư ễ ể ủ ắ ả

•

B m t các m u ho c màu s c có th khác nhau toàn b nh ng không làm gi m tính d hi u c a các icon. đ ho đ Các ph n t ầ ử ồ ạ ượ gi m tính d nh n d ng c a icon. ễ ậ ạ c thêm vào không nên làm ủ ả

Update 8-07

 Dept. of SE, August-2002 HCI – Four. 91

Prepared by MSc Luong manh Ba