ĐỒ ÁN - Nghiên cứu ứng dụng mẫu thiết kế trong tương tác người - máy.doc

DỊCH VỤ VIẾT THUÊ ĐỀ TÀI TRỌN GÓI ZALO / TEL: 0909.232.620
ĐẠI HỌC QUỐC GIA HÀ NỘI
TRƯỜNG ĐẠI HỌC CÔNG NGHỆ
LƯƠNG THỊ NGỌC HÀ
NGHIÊN CỨU ỨNG DỤNG MẪU THIẾT KẾ
TRONG TƯƠNG TÁC NGƯỜI - MÁY
LUẬN VĂN THẠC SĨ
Hà Nội - 2011

ĐẠI HỌC QUỐC GIA HÀ NỘI
TRƯỜNG ĐẠI HỌC CÔNG NGHỆ
LƯƠNG THỊ NGỌC HÀ
NGHIÊN CỨU ỨNG DỤNG MẪU THIẾT KẾ
TRONG TƯƠNG TÁC NGƯỜI - MÁY
Ngành: Công nghệ thông
tin
Chuyên ngành: Công nghệ phần
mềm
Mã số: 60 48 10
LUẬN VĂN THẠC SĨ
NGƯỜI HƯỚNG DẪN KHOA HỌC: PGS.TS Đặng Văn Đức
Hà Nội - 2011

III
MỤC LỤC
Lời cam đoan .......................................................................................................................... I
Lời cảm ơn ............................................................................................................................ II
MỤC LỤC ........................................................................................................................... III
Danh mục các ký hiệu, các chữ viết tắt ................................................................................ V
Danh mục các hình vẽ ......................................................................................................... VI
MỞ ĐẦU ............................................................................................................................... 1
Chương 1- TỔNG QUAN VỀ THIẾT KẾ GUI VÀ MẪU THIẾT KẾ. ............................... 3
1.1 Giới thiệu về UI .......................................................................................................... 3
1.1.1 Định nghĩa UI ...................................................................................................... 3
1.1.2 Tại sao cần thiết kế UI ........................................................................................ 3
1.2 Tính sử dụng được của hệ thống phần mềm ............................................................... 4
1.2.1 Định nghĩa tính sử dụng được ............................................................................. 4
1.2.2 Thuộc tính của tính sử dụng ................................................................................ 5
1.3 Nguyên lý thiết kế GUI ............................................................................................... 6
1.4 Qui trình thiết kế GUI ................................................................................................. 8
1.4.1 Đề xuất bài toán................................................................................................... 8
1.4.2 Phân tích người sử dụng ...................................................................................... 8
1.4.3 Phân tích nhiệm vụ .............................................................................................. 9
1.4.4 Phác hoạ thiết kế ................................................................................................. 9
1.4.5 Prototype giấy ..................................................................................................... 9
1.4.6 Prototype máy tính ............................................................................................ 10
1.4.7 Cài đặt ............................................................................................................... 10
1.4.8 Kiểm thử bởi người sử dụng ............................................................................. 10
1.5 Mẫu trong phát triển phần mềm .............................................................................. 11
1.5.1 Giới thiệu về mẫu .............................................................................................. 11
1.5.2 Mẫu thiết kế ...................................................................................................... 12
Chương 2 – MỘT SỐ MẪU ỨNG DỤNG TRONG THIẾT KẾ GUI ................................ 14
2.1 Các mẫu kiến trúc ..................................................................................................... 14
2.2.1 Abstract Factory ................................................................................................ 14
2.2.2 Builder ............................................................................................................... 15
2.2.3 Adapter .............................................................................................................. 16
2.2.4 Façade................................................................................................................ 17
2.2.5 Observer ............................................................................................................ 17
2.2.6 Mẫu MVC ......................................................................................................... 18
2.2 Các mẫu đồ họa ......................................................................................................... 19
2.2.1 Các mẫu về định vị ............................................................................................ 19
2.2.2. Các mẫu tổ chức trang ...................................................................................... 31
2.2.3 Các mẫu hành động ........................................................................................... 38
2.2.4 Đồ hoạ thông tin ................................................................................................ 46
Chương 3 – PHÁT TRIỂN GUI PHẦN MỀM THỬ NGHIỆM ĐỊNH HƯỚNG MẪU .... 51
3.1 Giới thiệu bài toán .................................................................................................... 51
3.2 Giải quyết bài toán .................................................................................................... 51
3.3 Phân tích người sử dụng và phân tích nhiệm vụ ....................................................... 52
3.3.1 Tiêu đề ............................................................................................................... 52
3.3.2 Phân tích người sử dụng .................................................................................... 52
3.3.3 Phân tích nhiệm vụ ............................................................................................ 54
3.4 Phác hoạ thiết kế ....................................................................................................... 59
3.4.1 Thiết kế tổng quan ............................................................................................. 59
3.4.2 Kịch bản ............................................................................................................ 59

IV
3.5 Xây dựng Prototype giấy .......................................................................................... 61
3.5.1 Login: ................................................................................................................ 61
3.5.2 Sametime Instant Message. ............................................................................... 65
3.5.3 Sametime Call ................................................................................................... 65
3.5.4 Sametime Video Call ........................................................................................ 65
3.6 Xây dựng Prototype máy tính ................................................................................... 66
3.6.1 Log in ................................................................................................................ 66
3.6.2 Sametime Instant Message. ............................................................................... 70
3.6.3 Sametime Call ................................................................................................... 70
3.6.4 Sametime Video Call ........................................................................................ 71
3.7 Một số mẫu ứng dụng trong thiết kế Sametime ........................................................ 71
3.8 Cài đặt ....................................................................................................................... 74
3.9 Kiểm thử bởi người sử dụng ..................................................................................... 74
3.9.1 Thiết kế .............................................................................................................. 74
3.9.2 Cài đặt ............................................................................................................... 76
3.9.3 Đánh giá ............................................................................................................ 78
KẾT LUẬN ......................................................................................................................... 79
TÀI LIỆU THAM KHẢO ................................................................................................... 80

V
Danh mục các ký hiệu, các chữ viết tắt
Thuật ngữ, chữ
Giải thích
viết tắt
HCI Human - Computer Interaction
Tương tác người – máy tính
UI User Interface
Giao diện người sử dụng
GUI Graphical User Interface
Giao diện đồ hoạ

VI
Danh mục các hình vẽ
Hình 1-1. Framework của ISO 9241-11.......................................................................5
Hình 2-1. Mô hình mẫu Façade..................................................................................17
Hình 2-2. Mô hình hoạt động của mẫu MVC.............................................................19
Hình 2-3. Giao diện sử dụng mẫu Clear Entry Point..................................................19
Hình 2-4. Giao diện sử dụng mẫu Hub and Spoke.....................................................21
Hình 2-5. Giao diện sử dụng mẫu Pyramid................................................................23
Hình 2-6. Mô hình Pyramid........................................................................................24
Hình 2-7. Giao diện sử dụng mẫu Modal Panel .........................................................24
Hình 2-8. Giao diện sử dụng mẫu Sequence Map......................................................25
Hình 2-9. Giao diện sử dụng mẫu Breadcrumbs ........................................................26
Hình 2-10. Giao diện sử dụng mẫu Annotated Scrollbar ...........................................27
Hình 2-11. Giao diện sử dụng mẫu Color-Coded Sections ........................................29
Hình 2-12. Giao diện sử dụng mẫu Escape Hatch......................................................30
Hình 2-13. Giao diện sử dụng mẫu Visual Framework..............................................31
Hình 2-14. Giao diện sử dụng mẫu Center Stage.......................................................32
Hình 2-15. Giao diện sử dụng mẫu Titled Sections ...................................................34
Hình 2-16. Giao diện sử dụng mẫu Card Stack..........................................................35
Hình 2-17. Giao diện sử dụng mẫu Closable Panels ..................................................36
Hình 2-18. Giao diện sử dụng mẫu Movable Panels..................................................37
Hình 2-19. Giao diện sử dụng mẫu Button Groups....................................................39
Hình 2-20. Giao diện sử dụng mẫu Action Panel.......................................................40
Hình 2-21. Giao diện sử dụng mẫu Prominent “Done” Button..................................42
Hình 2-22. Giao diện sử dụng mẫu Preview ..............................................................43
Hình 2-23. Giao diện sử dụng mẫu Progress Indicator ..............................................44
Hình 2-24. Giao diện sử dụng mẫu Cancelability ......................................................45
Hình 2-25. Giao diện sử dụng mẫu Overview Plus Detail .........................................46
Hình 2-26. Giao diện sử dụng mẫu Datatips ..............................................................48
Hình 2-27. Giao diện sử dụng mẫu Local Zooming...................................................49
Hình 3-1. Giao diện Log in.........................................................................................60
Hình 3-2. Giao diện Sametime. ..................................................................................60
Hình 3-3. Giao diện chat.............................................................................................61
Hình 3-4. Giao diện Video Call..................................................................................61
Hình 3-5. Giao diện Log in với tài khoản haluong.....................................................62
Hình 3-6. Giao diện Sametime với tài khoản haluong. ..............................................62
Hình 3-7. Giao diện File Menu...................................................................................63
Hình 3-8. Giao diện Edit Menu. .................................................................................63
Hình 3-9. Giao diện View Menu. ...............................................................................64
Hình 3-10. Giao diện Tool Menu. ..............................................................................64
Hình 3-11. Giao diện chát với Nguyen Minh Tuyen..................................................65
Hình 3-12. Giao diện Call với Luong Thanh Tung. ...................................................65
Hình 3-13. Giao diện Video Call với Luong Thanh Tung. ........................................66
Hình 3-14. Giao diện tạo tài khoản mới. ....................................................................66
Hình 3-15. Giao diện Log in bằng prototype máy tính. .............................................67
Hình 3-16. Giao diện Sametime bằng prototype máy tính.........................................67
Hình 3-17. Giao diện File Menu bằng prototype máy tính. .......................................68
Hình 3-18. Giao diện Edit Menu bằng prototype máy tính........................................68
Hình 3-19. Giao diện View Menu bằng prototype máy tính......................................69
Hình 3-20. Giao diện Tool Menu bằng prototype máy tính. ......................................69
Hình 3-21. Giao diện Help Menu bằng prototype máy tính.......................................70

VII
Hình 3-22. Giao diện chat bằng prototype máy tính. .................................................70
Hình 3-23. Giao diện Call bằng prototype máy tính. .................................................70
Hình 3-24. Giao diện Video Call bằng prototype máy tính........................................71
Hình 3-25. Giao diện Notice sử dụng mẫu Model Panel............................................71
Hình 3-26. Giao diện New Contact sử dụng mẫu Button Groups..............................72
Hình 3-27. Giao diện Sametime sử dụng mẫu Closable Panels. ................................72
Hình 3-28. Giao diện Forgotten your password. ........................................................73
Hình 3-29. Giao diện Font sử dụng mẫu Card Stack..................................................74
Hình 3-26. Giao diện New Contact. ...........................................................................75
Hình 3-28. Giao diện Chat History.............................................................................75
Hình 3-29. Giao diện Send File..................................................................................75
Hình 3-30. Giao diện cài đặt Log In...........................................................................76
Hình 3-31. Giao diện cài đặt Menu Sametime. ..........................................................77

1
MỞ ĐẦU
Tương tác người – máy (HCI – Human Computer Interaction) là lĩnh vực
nghiên cứu, lập kế hoạch và thiết kế về việc con người và máy tính cùng làm
việc với nhau như thế nào để nhu cầu của con người được thoả mãn cao nhất.
Nói cách khác HCI là lĩnh vực nghiên cứu về tương tác giữa con người, máy
tính và nhiệm vụ. HCI liên quan đến việc hiểu sự tương tác của con người và hệ
thống trên cơ sở máy tính để thực hiện nhiệm vụ và hiểu biết về việc thiết kế các
hệ thống tương tác. HCI là đa lĩnh vực, nó sử dụng tri thức của nhiều ngành
khác nhau như: khoa học máy tính, trí tuệ nhân tạo, nhân loại học, công thái học,
ngôn ngữ học, triết học, nghệ thuật, xã hội học, thiết kế, tâm lý học, kỹ nghệ và
sinh lý học. HCI là lĩnh vực rộng, nó liên quan đến nhiều ngành khoa học.
Nhưng trong phạm vi người sử dụng tin học thì ta chỉ quan tâm đến lĩnh vực
thiết kế giao diện người sử dụng cho hệ thống tương tác.
Giao diện người sử dụng (UI – User Interface) là một phần của máy tính
và của hệ thống phần mềm mà con người có thể nhìn, sờ, nói với nó. Nếu hệ
thống có giao diện tốt thì chúng ta sẽ dễ sử dụng, sản phẩm dễ bán, thời gian lập
trình được giảm bớt và tăng năng suất lao động. Do đó việc thiết kế giao diện
người sử dụng trở nên rất quan trọng. Nhưng thiết kế giao diện tốt cho một hệ
thống thông tin không phải là việc làm dễ dàng. Để có thể thiết kế một giao diện
tốt, tăng tính sử dụng và thiết kế được nhanh chóng thì chúng ta phải sử dụng
những kinh nghiệm, những tri thức và những kết quả đã có từ trước. Đó chính là
mẫu thiết kế. Do đó luận văn nghiên cứu “Nghiên cứu ứng dụng mẫu thiết kế
trong tương tác người – máy”.
Mục tiêu của quá trình thiết kế là đạt được giao diện người sử dụng có
tính sử dụng cao. Quá trình thiết kế không phải chỉ một lần mà phải thực hiện
lặp các giai đoạn như thiết kế, cài đặt và đánh giá. Dựa vào kết quả đánh giá để
tái thiết kế giao diện. Nếu thiết kế giao diện bằng mã trình sẽ mất rất nhiều thời
gian, khi được đánh giá, góp ý để chỉnh sửa sẽ rất khó khăn. Một số thiết kế có
nhiều thiếu sót nghiêm trọng nhưng ta không nỡ vứt bỏ đi vì đã làm việc cật lực
để có nó. Để khắc phục điều đó thì có rất nhiều công cụ phần mềm với khả năng
hỗ trợ việc thiết kế giao diện người dùng. Và có rất nhiều các trung tâm mở các
lớp dạy sử dụng phần mềm để thiết kế giao diện người dùng.
Luận văn sử dụng công cụ phần mềm để thiết kế giao diện đồ hoạ (GUI –
Graphical User Interface) là GUI Design Studio. Khi dùng GUI Design Studio,
bản mẫu được xây dựng nhanh hơn nhiều so với cài đặt cuối cùng, ta có thể
đánh giá sớm và nhận được phản hồi sớm về những điểm tốt và điểm xấu của
thiết kế. Nếu phát hiện vấn đề trong thiết kế thì bản mẫu dễ dàng được chỉnh sửa

2
vì nó được xây dựng nhanh. Quan trọng nhất là nếu thiết kế có nhiều thiếu sót
nghiêm trọng thì bản mẫu có thể bị loại bỏ.
Luận văn được bố cục thành 3 chương. Chương 1 tìm hiểu về thiết kế
GUI và mẫu thiết kế. Chương 2 trình bầy về một số mẫu ứng dụng trong thiết kế
GUI. Chương 3 phát triển GUI phần mềm thử nghiệm định hướng mẫu.

3
Chương 1- TỔNG QUAN VỀ THIẾT KẾ GUI VÀ MẪU THIẾT KẾ.
Chương 1 tập chung tìm hiểu thiết kế GUI và mẫu thiết kế. Nội dung của
chương được bố cục thành 5 mục. Mục 1 giới thiệu về UI. Mục 2 trình bày tính
sử dụng được của hệ thống phần mềm. Mục 3 đưa ra những nguyên lý thiết kế
GUI. Mục 4 trình bày quy trình thiết kế GUI. Mục 5 tìm hiểu mẫu trong phát
triển phần mềm.
1.1 Giới thiệu về UI
1.1.1 Định nghĩa UI
Trong nhiều tài liệu, khái niệm UI có ý nghĩa tương tự với HCI. Nhưng sự
thật UI là tập con của lĩnh vực nghiên cứu HCI. UI được hiểu như sau:
UI bao gồm các khái niệm về hệ thống máy tính và cách thức sử dụng
chúng để hoàn thành các công việc khác nhau của người sử dụng. Do vậy UI
không chỉ là những cái gì mà con người có thể nhìn, sờ và nghe thấy mà còn hơn
thế.
UI là tập hợp các phương tiện để con người tương tác với máy móc, thiết
bị, chương trình máy tính hay hệ thống phức tạp [3].
UI được hiểu là tiến trình thiết kế phần mềm ghép nối sao cho hệ thống
máy tính trở nên hiệu quả, dễ sử dụng và làm được những gì con người muốn
chúng làm.
UI là bộ mặt, là thành phần trung gian để thực hiện giao tiếp giữa con
người với máy tính. Do đó ta cần nghiên cứu về thiết kế UI.
1.1.2 Tại sao cần thiết kế UI
Có rất nhiều lý do để tập trung nghiên cứu thiết kế UI. Sau đây là một vài
lý do chính:
UI là điểm chính nơi giao tiếp giữa người sử dụng và hệ thống máy tính.
Nó là một phần của hệ thống, nơi mà người sử dụng nhìn, sờ, nghe và giao tiếp.
Người sử dụng không thể xâm nhập vào hệ thống máy tính nếu không có UI.
Phụ thuộc vào giao diện mà hệ thống có thể thắng lợi hay thất bại trong
việc giúp người sử dụng thực hiện nhiệm vụ. Nhiều người sử dụng đánh giá hệ
thống thông qua UI, họ cho rằng hệ thống là tồi nếu UI của nó tồi. UI tồi làm hệ
thống khó sử dụng đôi khi rất nguy hiểm khi sử dụng hệ thống với UI tồi.

Hệ thống liệu pháp bức xạ chữa bệnh ung thư Therac-25 đã gây chết
người do có UI tồi [2].



Hệ thống rada Aegis trên tàu chiến USS Vincennes đã bắn nhầm máy
bay dân sự của Iran cũng do có UI thiết kế tồi [2].


4
Với thiết kế giao diện tồi, các vấn đề sau đây sẽ nảy sinh: năng suất lao
động thấp, thời gian học sử dụng và mức độ lỗi xảy ra không chấp nhận được.
Do vậy, dẫn tới việc người sử dụng từ chối sử dụng hệ thống.
Thông thường mã trình xử lý giao diện với người sử dụng trong phần
mềm ứng dụng chiếm khoảng 50-70%, do vậy nguồn lực (thời gian, kinh phí)
dành cho phát triển UI là khá lớn. Theo thống kê với 74 dự án phần mềm thực
hiện vào năm 1992 thì UI chiếm khoảng 50% thời gian thiết kế, thời gian cài
đặt, thời gian bảo trì và kích thước mã trình.
Phần mềm giao diện ngày càng phức tạp, đặc biệt với GUI. Công việc
phát triển GUI là khó khăn vì tương tác giữa người sử dụng và hệ thống là khá
phức tạp.
GUI tốt làm giảm chi phí cho công việc bảo trì hệ thống.
Việc thiết kế UI tốt là rất quan trọng trong nhiều lĩnh vực. Nhưng giao
diện đó phải đảm bảo có tính sử dụng được.
1.2 Tính sử dụng được của hệ thống phần mềm
1.2.1 Định nghĩa tính sử dụng được
Tính sử dụng được (Usability) là chỉ số quan trọng đối với hệ thống phần
mềm tương tác. Tính sử dụng được Bennett đề xuất lần đầu vào năm 1979, sau
đó có nhiều nghiên cứu khác. Vào năm 1991, Shacked định nghĩa tính sử dụng
như “khả năng hệ thống được sử dụng bởi con người một cách dễ dàng và hiệu
quả”.
Tính sử dụng được xác định bởi “người sử dụng có thể sử dụng tốt các
chức năng hệ thống như thế nào”
Hiện tại có nhiều chuẩn: ISO 9241-11 (1998), ISO/IEC 9126 (2001),
IEEE Std.610.12 (1990) và mô hình khái niệm Metrics for Usability Standards
in Computing –MUSiC (1997) về tính sử dụng
Theo ISO 9241-11, tính sử dụng được xem như phạm vi trong đó sản
phẩm được sử dụng bởi nhóm người xác định để đạt được những mục tiêu xác
định với tính hiệu quả, năng suất và sự thoả mãn trong ngữ cảnh sử dụng xác
định [3].
 Mục tiêu: Kết quả dự kiến.

 Hiệu quả: Đem lại kết quả đúng như dự kiến. Đạt được mục tiêu một cách
chính xác và đầy đủ (ví dụ tốc độ thực hiện cao, không lỗi).

 Năng suất: Tiêu hao năng lượng và tài nguyên phù hợp để đạt được mục
tiêu một cách chính xác và đầy đủ. Là thước đo mức độ cố gắng của
người sử dụng để đạt được mục tiêu đề ra.

5
 Sự thỏa mãn: Không bực dọc, lo lắng và có quan điểm tích cực với việc
sử dụng sản phẩm.

 Ngữ cảnh ứng dụng: Người sử dụng, nhiệm vụ, thiết bị (phần cứng, phần
mềm, …), môi trường vật lý, xã hội.

 Nhiệm vụ: Các hoạt động cần thiết để đạt được mục tiêu.

Framework của ISO 9241-11: Nhằm đặc tả các thành phần tính sử dụng
và quan hệ giữa chúng. Khung làm việc hỗ trợ đánh giá sản phẩm:
Hình 1-1. Framework của ISO 9241-11
Với khung làm việc của tính sử dụng thì: Hiệu năng (performance): hiệu
quả và năng suất. Do đó hiệu năng và sự thỏa mãn của người sử dụng được sử
dụng vào việc đo tính sử dụng. Độ đo về hiệu năng và sự thỏa mãn của người sử
dụng là nền tảng của sự so sánh tính sử dụng của các hệ thống khác nhau. Tính
sử dụng có thể được cải thiện bằng cách tích hợp các đặc trưng, thuộc tính đã
biết trong ngữ cảnh sử dụng cụ thể.
Tính sử dụng được định nghĩa theo nhiều cách khác nhau trong các tài
liệu khác nhau. Các chuẩn hoặc các tác giả khác nhau đã đề xuất tập khác nhau
về các thuộc tính của tính sử dụng được.
1.2.2 Thuộc tính của tính sử dụng
Các thuộc tính của tính sử dụng được do Nielsen đề xuất năm 1993 gồm
sáu thuộc tính sau:
 Hiệu quả: Tính chính xác và tính đầy đủ mà với nó người sử dụng đạt
được mục tiêu xác định trước.

 Tính học được: Hệ thống có dễ học không?

 Năng suất: Một khi đã dễ học, có được sử dụng nhanh không?

 Tính nhớ được: Có dễ nhớ những gì đã học?

 Các lỗi: Ít lỗi xảy ra và dễ vượt qua lỗi?

 Thoả mãn mục đích: Có thích thú sử dụng hệ thống?

6
Năm 1994, Mandel đã liệt kê 10 vi phạm ảnh hưởng đến tính sử dụng
theo báo cáo của các chuyên gia tại hãng IBM. Bao gồm:
1. Menu và biểu tượng nhập nhằng.
2. Ngôn ngữ chỉ cho phép đi theo một hướng trong hệ thống.
3. Hạn chế đầu vào và thao tác trực tiếp.
4. Hạn chế lựa chọn và điểm nổi bật.
5. Trình tự các bước không rõ ràng.
6. Nhiều bước quản lý giao diện hơn thực hiện nhiệm vụ.
7. Liên kết phức tạp với các ứng dụng khác và giữa các ứng dụng.
8. Phản hồi và khẳng định không phù hợp.
9. Hệ thống kém đề phòng và kém thông minh.
10. Các thông điệp lỗi, trợ giúp, tài liệu không phù hợp.
Có rất nhiều các tiêu chí để đạt được tính sử dụng của hệ thống. Dựa vào
các tiêu chí này người ta xây dựng nguyên lý thiết kế hệ thống có tính sử dụng
được. Nguyên lý thiết kế GUI thoả mãn các nguyên lý thiết kế hệ thống có tính
sử dụng được.
1.3 Nguyên lý thiết kế GUI
Don Norman đề xuất sáu nguyên lý thiết kế để hệ thống có tính sử dụng,
bao gồm: Sự rõ ràng, phản hồi, ràng buộc, ánh xạ, nhất quán, gợi ý [2].
 Sự rõ ràng: được xem như những phần của hệ thống liên quan đến tương
tác phải được nhìn thấy. Sự rõ ràng có thể là nguyên tắc cơ bản nhất trong
mô hình giao tiếp với người sử dụng. Giao diện người sử dụng cần có khả
năng giúp người sử dụng nhận biết trạng thái hiện hành của hệ thống và
cần biết phải thực hiện thao tác nào.

Ví dụ: Khi di chuột đến một vị trí bất kỳ trên màn hình, người sử
dụng cần được biết cái gì xảy ra khi nhấn chuột.

 Sự phản hồi: là cái hệ thống thể hiện khi người sử dụng thực hiện hành
động. Khi bất kỳ cái gì thay đổi, nó cần phải được nhìn thấy.

Ví dụ: Khi xoá tệp hệ thống không chỉ đơn giản hiển thị “sẵn sàng”.
Khi thực hiện hành động thì phím có thể bị nhấn hay nhả, thanh trượt dịch
chuyển hay các đối tượng dịch chuyển theo con chạy chuột.

Các loại phản hồi bao gồm: thị giác, âm thanh và xúc giác.

 Sự ràng buộc: Mức độ khó sử dụng của một hệ thống liên quan trực tiếp
đến tổng số khả năng. Sự ràng buộc là các giới hạn vật lý, ngữ nghĩa, văn
hóa và logíc trên tổng số khả năng.

7
Ví dụ với đồ chơi xe gắn máy (12 chi tiết), thiết kế của nó tận dụng
lợi thế ràng buộc để cho ta khả năng lắp ráp đơn giản. Ta có các ràng
buộc sau:

Vật lý: Bánh trước chỉ lắp vừa vào một vị trí.



Ngữ nghĩa: Tài xế ngồi trên ghế và mặt quay về phía trước.



Văn hóa: Đèn đỏ lắp phía sau, đèn vàng lắp phía trước.



Logic: Hai đèn màu xanh và 2 đèn màu trắng đi với nhau.


 Qui ước: là ràng buộc về văn hoá. Các ràng buộc này ban đầu là tuỳ ý,
nhưng được chấp nhận dần theo thời gian. Tuy nhiên các quy ước vẫn còn
rất khác nhau nó phụ thuộc vào nền văn hóa khác nhau: Ví dụ:

Tắt công tắc đèn: Mỹ: Bật xuống; Anh: Bật lên.



Mở van vòi nước: Mỹ: Vặn ngược chiều kim đồng hồ; Anh: Vặn theo
chiều kim đồng hồ.



Màu đỏ: Mỹ: Nguy hiểm; Ai cập: Chết chóc; Ấn độ: Sống; Trung
quốc: Hạnh phúc.


Bàn phím máy tính: Tiếng Anh: QWERTY; Pháp: AZERTY.


 Ánh xạ: là quan hệ giữa các điều khiển và ảnh hưởng của nó trên hệ
thống. Điều khiển là khái niệm liên quan đến các đối tượng đồ họa trong
giao diện phần mềm. Ánh xạ tự nhiên đem lại lợi thế của sự tương ứng vật
lý và các chuẩn văn hóa. Ánh xạ tự nhiên phải tương quan với tri thức về
thế giới thực. Ví dụ:

Xoay tai lái ôtô về phía phải để rẽ phải.



Sử dụng âm thanh lớn hơn để nhập số lớn hơn và ngược lại trong giao
diện người sử dụng sử dụng âm thanh.


 Nhất quán: trong việc nhìn và cảm giác là yếu tố mấu chốt trong tương
tác người máy tốt. Ví dụ:

Bố trí thực đơn nhất quán với chuẩn Windows.



Bố trí nhất quán các phím OK và Cancel trong các ứng dụng


Windows.

 Sự gợi ý: là tập các thao tác hay thủ tục có thể thực hiện trên đối tượng.
“Gợi ý quan sát” là cái người sử dụng nghĩ rằng nó có thể thực hiện trên
đối tượng. Khả năng tưởng tượng liên quan đến khả năng người sử dụng
xác định cách sử dụng đối tượng chỉ bằng quan sát chúng.

Đối với các đối tượng vật lý, hình dáng bề ngoài chỉ ra cách sử dụng
nó như thế nào. Ví dụ:

Cái ghế gợi ý ngồi.



Tay cửa gợi ý xoay.


8
Sự gợi ý GUI:

Con chạy chuột gợi ý trỏ.



Phím chuột gợi ý nhấn.



Màn hình gợi ý sờ.



Bàn phím gợi ý gõ.

Từ nguyên lý thiết kế GUI ta xây dựng được quy trình thiết kế GUI.
1.4 Qui trình thiết kế GUI
Tính sử dụng là mục tiêu đầu tiên của việc thiết kế hệ thống tương tác.
Quy trình thiết kế GUI giúp chúng ta nâng cao khả năng phân tích, thiết kế, cài
đặt và kiểm thử giao diện người sử dụng. Thiết kế UI là tiến trình lặp, nên UI
không chỉ được xây dựng một lần mà được thực hiện lặp nhiều lần để có được
prototype ngày càng đầy đủ, độ tin cậy ngày càng cao hơn.
1.4.1 Đề xuất bài toán
Vấn đề: Mô tả vấn đề mà bài toán sẽ giải quyết dưới góc nhìn của người
sử dụng. Mục tiêu của người sử dụng là gì?
Người sử dụng: Tính cách hóa nhóm người sử dụng đối mặt với vấn đề sẽ
giải quyết. Tìm ra các đặc điểm của người sử dụng.
Giải pháp: Mô tả giải pháp chính có thể áp dụng để giải quyết vấn đề.
Không cần mô tả chi tiết ở đây vì giải pháp có thể tìm ra trong khi xây dựng và
đánh giá một vài prototype ở giai đoạn sau.
1.4.2 Phân tích người sử dụng
Phân tích người sử dụng là quá trình thu thập thông tin về người sử dụng
cho bản thiết kế đầu tiên. Mục tiêu của phân tích người sử dụng:

Nhận biết ai là người sử dụng phần mềm do ta thiết kế?



Kỹ năng và mức độ của người sử dụng?



Cách thức sử dụng hệ thống của người sử dụng?



Hiểu biết môi trường sử dụng hệ thống tương tác



Quan hệ giữa người sử dụng với người sử dụng khác trong tổ chức
(làm việc độc lập hay giúp đỡ nhau)


Người bắt đầu, người có kinh nghiệm hay là chuyên gia



Tần suất sử dụng: Thường xuyên sử dụng hay thỉnh thoảng
Các kỹ thuật phân tích người sử dụng:



Tìm ra người đại diện để thu thập từ họ những thông tin về người sử
dụng



Trả lời bảng câu hỏi thăm dò để có được các tính chất nổi trội


9

Kỹ thuật khác là phỏng vấn trực tiếp người sử dụng



Quan sát người sử dụng thực hiện nhiệm vụ hàng ngày để biết các chi
tiết về ngữ cảnh và môi trường sử dụng.

1.4.3 Phân tích nhiệm vụ
Phân tích nhiệm vụ là tiến trình phân tích cách mà người sử dụng thực
hiện nhiệm vụ của họ với hệ thống. Phân tích chi tiết các nhiệm vụ dẫn tới mô tả
nhiệm vụ rõ ràng, đảm bảo rằng giao diện người sử dụng phù hợp với nhiệm vụ
của người sử dụng. Các câu hỏi cần trả lời khi phân tích nhiệm vụ:

Người sử dụng làm cái gì?



Họ làm việc bằng công cụ gì?



Họ cần có hiểu biết gì khi làm việc?
Kỹ thuật phân tích nhiệm vụ:



Phỏng vấn, quan sát người sử dụng thực hiện công việc hàng ngày.



Phân rã chức năng

1.4.4 Phác hoạ thiết kế
Sau khi phân tích nhiệm vụ, hãy hình thành kịch bản (ví dụ thực, cụ thể về
nhiệm vụ). Mô tả nhiệm vụ là khá trừu tượng thì các kịch bản cần được mô tả
đầy đủ và chi tiết.
Thiết kế ban đầu: biểu diễn phác họa các cửa sổ, hộp thoại, cây thực đơn,
các điều khiển dành cho người sử dụng và diễn giải ngắn gọn về các chức năng
của chúng.
Kịch bản: Với mỗi kịch bản, mô tả việc sử dụng giao diện ban đầu như
thế nào để thực hiện nhiệm vụ. Phác họa mô tả hình dáng giao diện tại một số
điểm quan trọng của nhiệm vụ. Khi phác họa giao diện, không cần quá chi tiết
như chọn nhãn, biểu tượng hay bố trí màn hình. Hãy để cho UI thật đơn giản mà
tập trung vào mô hình dự định giao tiếp với người sử dụng.
1.4.5 Prototype giấy
Prototype là lựa chọn tuyệt vời cho những vòng lặp thiết kế đầu tiên.
Prototype giấy là mô hình vật lý của giao diện làm từ giấy.

Giao diện được phác họa bằng tay trên các mẩu giấy.



Mẩu giấy biểu diễn các phần tử khác nhau như thực đơn, hộp thoại
hay cửa sổ.



Tương tác: trỏ bằng tay tương ứng với trỏ bằng chuột, viết trên các

mẩu giấy tương ứng với gõ bàn phím.
Ta cần xây dựng Prototype giấy vì:

10

Phác họa bằng tay trên giấy sẽ nhanh hơn việc viết mã trình hay phác
họa bằng máy tính.



Giấy là dễ thay đổi.



Xây dựng nhanh.



Phác họa bằng tay làm tăng phản hồi nhận được từ người sử dụng.



Không đòi hỏi kỹ năng đặc biệt nào.


Bảng áp phích trắng (11” x14”): Làm nền, khung cửa sổ.



Số lượng lớn các thẻ chỉ mục (4” x 6” , 5” x8”): Làm menus, window
contents, và dialog boxes.



Hồ dán: Để dán các mẩu giấy.



Băng giấy trắng: Để làm text fields, checkboxes, short messages.



Giấy bóng kính: Để người sử dụng “typing” (viết lên chúng).



Máy sao chụp: Để tạo ra nhiều phần tử trong bản mẫu.



Bút, kéo và băng giấy.

1.4.6 Prototype máy tính
Prototype máy tính là mô phỏng phần mềm tương tác. Sử dụng prototype
máy tính để khám phá thiết kế đồ họa của giao diện cuối cùng.

Bố trí màn hình: Rõ ràng, phức tạp hay làm rối bời hay không? Người
sử dụng có thể tìm thấy các phần tử quan trọng không?



Màu, font, icon và các phần tử khác: Lựa chọn phù hợp chưa?



Phản hồi tương tác: Có khả năng thông báo với người sử dụng bằng
thông điệp, thanh trạng thái, thay đổi hình dáng con chạy và cách
phản hồi khác.

Kỹ thuật để xây dựng prototype máy tính là Storyboard. Storyboard là
trình tự của các màn hình cố định. Mỗi màn hình có một hoặc nhiều điểm nóng
(hotspots) hoặc hyperlink mà ta có thể nhấn chuột để nhảy đến màn hình khác.
StoryBoard được sử dụng cho các kịch bản, chuyển dần đến chi tiết hơn. Nó là
dãy các phác thảo/khung hình cơ bản.
1.4.7 Cài đặt
Thực hiện cài đặt UI demo theo prototype đã xây dựng. Hoàn thiện cài đặt
các nhiệm vụ quan trọng đã nhận ra khi phân tích nhiệm vụ để người sử dụng có
thể kiểm thử. Cài đặt cần có cả thành phần chính và hệ thống.
1.4.8 Kiểm thử bởi người sử dụng
Kiểm thử bởi người sử dụng là kỹ thuật được sử dụng để đánh giá sản
phẩm bằng cách người sử dụng thử nghiệm nó. Phương pháp này cho phép quan

11
sát trực tiếp người sử dụng khi họ đang sử dụng ứng dụng. Ta có các bước kiểm
thử bởi người sử dụng:

Phát triển kế hoạch kiểm thử: Mô tả mục đích kiểm thử, lý lịch người
sử dụng, phương pháp, danh sách nhiệm vụ.



Chọn lựa người tham gia: Chọn người sử dụng, phân nhóm, quản lý
cơ sở dữ liệu người sử dụng



Chuẩn bị vật liệu kiểm thử: Kịch bản nhiệm vụ, mẫu thu thập dữ
liệu, hướng dẫn thảo luận, các câu hỏi sau kiểm thử, lập danh sách
các kiểm thử sẽ thực hiện.


Thực hiện kiểm thử thí điểm (Pilot Test)



Thực hiện kiểm thử thật (Real Test)



Phân tích và báo cáo cuối cùng

Để thiết kế UI một cách nhanh chóng thì ngoài thiết kế theo quy trình thiết
kế GUI ta cũng cần phải sử dụng những kinh nghiệm, tri thức và kết quả đã có
từ trước. Các kết quả này được trừu tượng hoá thành một mẫu.
1.5 Mẫu trong phát triển phần mềm
1.5.1 Giới thiệu về mẫu
Mục đích của việc phát triển phần mềm là tạo ra phần mềm đáp ứng được
yêu cầu của người sử dụng. Do đó phát triển phần mềm cần hạn chế việc thoái
hóa thiết kế, phần mềm cần có tính sử dụng lại cao.
Việc sử dụng lại phần mềm là một cách tiếp cận để xúc tiến quá trình phát
triển phần mềm. Một câu hỏi đặt ra là: “ta có thể sử dụng lại gì và sử dụng như
thế nào?”. Mã nguồn thường được sử dụng lại nhiều nhất, ta duyệt Internet tìm
mã nguồn mở mà ta có thể mượn, sửa đổi, và sử dụng lại. Còn việc sử dụng lại
những thiết kế được làm ít hơn việc sử dụng lại mã. Vì sự phức tạp và khó khăn
của việc xây dựng thiết kế và khởi tạo chúng. Hơn nữa, mã thì hữu hình hơn
thiết kế, ta có thể triển khai và thực thi mã với ít hoặc không có sự cải biến nào.
Tuy nhiên, rất mạo hiểm để sửa đổi mã nguồn. Ta có thể làm hỏng sự toàn vẹn
thành phần và tính hoạt động của nó được xây dựng trước đấy. Bởi vậy, nhiều
nhà phát triển phần mềm thích sử dụng lại ý tưởng của giải pháp và thực hiện nó
theo cách của họ. Những ý tưởng của giải pháp được sử dụng lại này, nó được
giới thiệu ở mức cao hơn, đó chính là mẫu (pattern).
Một mẫu mô tả một vấn đề thường xuyên xảy ra trong thiết kế và thực thi
phần mềm, mô tả giải pháp của vấn đề theo cách mà nó được sử dụng lại. Một
cặp vấn đề/giải pháp có thể được áp dụng trong những ngữ cảnh mới. Mẫu được
giới thiệu là tài liệu tốt để thực hành thiết kế; là phương tiện phổ biến kiến thức

12
và kinh nghiệm từ những chuyên gia đến người tập sự. Mẫu là lời khuyên từ
những người thiết kế giàu kinh nghiệm, giúp đỡ những người thiết kế trong tình
huống mới. Vì vậy, ta có thể sử dụng mẫu để cải thiện thiết kế hệ thống của
mình, có thể áp dụng mẫu tại bất kỳ thời điểm nào trong một chu trình của dự
án.
Có rất nhiều loại mẫu, nhưng trong giới hạn của luận văn ta chỉ nghiên
cứu về các mẫu thiết kế.
1.5.2 Mẫu thiết kế
Mẫu thiết kế là khái niệm rộng và bao quát trong công đoạn thiết kế phần
mềm. Giống như các yêu cầu của thiết kế và phân tích hướng đối tượng, việc sử
dụng các mẫu cũng cần đạt được khả năng tái sử dụng các giải pháp chuẩn đối
với các vấn đề thường xuyên xảy ra. Mẫu thiết kế nhằm thúc đẩy sử dụng lại
trong pha thiết kế vì chúng cung cấp từ vựng chung cho thiết kế, chúng cung cấp
những phương tiện để hiểu thiết kế, và chúng được tạo thành khối hợp nhất từ
đó xây dựng những ứng dụng phức tạp hơn.
Mẫu thiết kế không đơn thuần là một bước nào đó trong giai đoạn phát
triển phần mềm mà nó đóng vai trò là sáng kiến để giải quyết một bài toán thông
dụng nào đó. Các giai đoạn phần mềm vẫn hoàn chỉnh mà không có mẫu thiết
kế, nhưng sự góp mặt của mẫu thiết kế sẽ giúp cho việc xác định bài toán cần
giải quyết nhanh gọn hơn, từ đó đưa ra cách giải quyết hợp lý.
Mẫu thiết kế không chỉ được sử dụng để xác định bài toán và cách giải
quyết mà mẫu thiết kế còn được sử dụng nhằm cô lập các thay đổi trong mã
nguồn, từ đó làm cho hệ thống có khả năng tái sử dụng cao.
Cũng giống như mẫu trong phần mềm nói chung, mẫu thiết kế là sự hình
thức hóa của các cách tiếp cận một vấn đề thường gặp trong một ngữ cảnh cụ
thể. Mỗi mẫu thiết kế là một giải pháp cho một vấn đề thiết kế cụ thể trong một
ngữ cảnh xác định. Giải pháp được đưa ra đã được kiểm nghiệm, được sử dụng
nhiều lần đem lại kết quả tốt và do đó được trìu tượng hóa thành một mẫu. Mẫu
thiết kế chính là kinh nghiệm thiết kế được đúc kết lại thành mẫu chuẩn mực. Sử
dụng mẫu thiết kế người thiết kế không phải thiết kế hệ thống từ đầu, không phải
giải quyết lại những bài toán đã được giải quyết mà sử dụng các kinh nghiệm, tri
thức và kết quả đã có từ trước. Điều này làm cho chất lượng thiết kế tốt hơn,
tăng tính sử dụng của bản thiết kế và tạo điều kiện cho người thiết kế tập trung
vào sáng tạo những cái mới.

13
Kết luận
Mỗi sản phẩm phần mềm đều có một yếu tố quyết định đến sự lựa chọn
của khách hàng, nó góp phần không nhỏ vào sự thành công của sản phẩm, đó là
UI - bộ mặt của sản phẩm. UI như một bảng chỉ dẫn không lời, thực hiện sứ
mạng mang lại sự tiện lợi, đơn giản và hiệu quả cho người dùng. Một giao diện
hấp dẫn sẽ có lợi thế rất lớn trong nhiều lĩnh vực.
Nhưng có một giao diện đẹp không có nghĩa là đã có hệ thống với tính sử
dụng cao. Do đó ta cần thiết kế hệ thống phần mềm có tính sử dụng được. Hệ
thống đó phải thoả mãn nguyên lý thiết kế GUI và được thực hiện theo đúng quy
trình thiết kế GUI. Khi thiết kế theo quy trình thiết kế GUI ta sẽ xây dựng được
bản mẫu một cách nhanh chóng, khi được góp ý bản mẫu được chỉnh sửa dễ
dàng và quan trọng là nó nhận được đánh giá sớm và phản hồi sớm về những
điểm tốt và điểm xấu của thiết kế.
Để thiết kế được UI một cách nhanh chóng và hiệu quả thì ngoài thiết kế
theo quy trình GUI thì người ta cũng cần sử dụng các kinh nghiệm, tri thức và
kết quả đã có từ trước. Các kinh nghiệm, tri thức và kết quả này được đúc kết lại
thành mẫu thiết kế. Khi sử dụng mẫu thiết kế người thiết kế không phải thiết kế
hệ thống từ đầu, không phải giải quyết lại những bài toán đã được giải quyết.
Điều này làm cho chất lượng thiết kế tốt hơn và tạo điều kiện cho người thiết kế
tập trung vào sáng tạo những cái mới.

14
Chương 2 – MỘT SỐ MẪU ỨNG DỤNG TRONG THIẾT KẾ GUI
Chương 2 trình bày một số mẫu ứng dụng trong thiết kế GUI. Bố cục của
chương gồm 2 mục. Mục 1 tìm hiểu các mẫu kiến trúc. Mục 2 tìm hiểu các mẫu
đồ hoạ.
2.1 Các mẫu kiến trúc
Mẫu kiến trúc biểu thị một mô hình tổ chức cấu trúc cơ bản cho những hệ
thống phần mềm. Nó cung cấp một tập hợp các hệ thống con hoặc những thành
phần, và bao gồm quy tắc chỉ đạo để tổ chức những mối quan hệ giữa chúng.
Những mẫu kiến trúc là phương tiện của kiến trúc cung cấp tài liệu cho hệ thống
phức tạp, nó giúp đỡ việc quản lý sự phức tạp của ứng dụng. Ta tìm hiểu một số
mẫu kiến trúc sau:
2.2.1 Abstract Factory
a. Vấn đề đặt ra
Trong các hệ điều hành giao diện đồ hoạ, một bộ công cụ muốn cung cấp
một giao diện người dùng dựa trên chuẩn look-and-feel, như chương trình trình
diễn tài liệu Microsoft Office PowerPoint. Có rất nhiều kiểu giao diện look-and-
feel và cả những hành vi giao diện người dùng khác nhau như thanh cuộn tài liệu
(scroll bar), cửa sổ (window), nút bấm (button), hộp soạn thảo (editbox)...
Nếu coi chúng là các đối tượng thì ta thấy chúng có một số đặc điểm và hành vi
khá giống nhau về mặt hình thức nhưng lại khác nhau về cách thực hiện. Ví dụ,
đối tượng button và window, editbox có cùng các thuộc tính là chiều rộng, chiều
cao, toạ độ… Có các phương thức là Resize(), SetPosition()... Nhưng các đối
tượng này không thể gộp chung vào một lớp được vì theo nguyên lý xây dựng
lớp thì các đối tượng thuộc lớp phải có các phương thức hoạt động giống nhau.
Mà các đối tượng này có cùng giao diện nhưng cách thực hiện các hành vi tương
ứng lại hoàn toàn khác nhau.
Do đó ta phải xây dựng một lớp tổng quát, có thể chứa hết những điểm
chung của các đối tượng này để từ đó có thể dễ dàng sử dụng lại.
b. Định nghĩa:
Abstract Factory là mẫu thiết kế mà cung cấp cho trình khách một giao
diện cho một họ hoặc một tập các đối tượng thuộc các lớp khác nhau nhưng có
cùng chung giao diện với nhau mà không phải trực tiếp làm việc với từng lớp
con cụ thể [4].
c. Các tình huống áp dụng
- Khi hệ thống muốn xác định quá trình khởi tạo và sử dụng đối tượng tại
thời điểm chạy chương trình.

15
- Hệ thống muốn tương tác với một họ trong một tập hợp họ đối tượng và
việc chọn họ đối tượng được xác định tại thời điểm chạy.
- Hệ thống muốn ràng buộc tính sử dụng đồng thời của các phần tử trong
một họ đối tượng.
d. Thuận lợi và hạn chế:
- Tạo sự độc lập giữa các thành phần: Client thao tác dựa trên giao diện lập
trình mà không quan tâm sản phẩm gì được trả về, quá trình tạo lập sản
phẩm được che dấu hoàn toàn.
- Dễ dàng chuyển đổi giữa các họ sản phẩm nhờ tính độc lập, khi cần thay
đổi họ sản phẩm, client chỉ việc thay đổi điều kiện tạo lập đối tượng, các
phần mã chương trình cũ vẫn giữ nguyên.
- Khó bổ sung loại sản phẩm mới do khi đó phải bổ sung vào lớp Abstract
Factory và sẽ ảnh hưởng đến hầu hết các lớp khác.
2.2.2 Builder
Trong những ứng dụng lớn có nhiều chức năng phức tạp và mô hình giao
diện đồ sộ. Việc khởi tạo ứng dụng thường gặp nhiều khó khăn. Ta không thể
dồn tất cả công việc khởi tạo này cho một hàm khởi tạo. Vì rất khó kiểm soát
hết, và không phải lúc nào các thành phần của ứng dụng cũng được khởi tạo một
cách đồng bộ. Có thành phần được tạo ra vào lúc dịch chương trình nhưng cũng
có thành phần tuỳ theo từng yêu cầu của người dùng, tuỳ vào hoàn cảnh của ứng
dụng, mà nó sẽ được tạo ra. Do vậy người ta giao công việc này cho một đối
tượng chịu trách nhiệm khởi tạo, và chia việc khởi tạo ra riêng rẽ, để có thể tiến
hành khởi tạo riêng biệt ở các hoàn cảnh khác nhau.
Ví dụ, ta coi việc tạo ra đối tượng giống như việc ta tạo ra chiếc xe đạp.
Đầu tiên ta tạo ra khung xe, sau đó tạo ra bánh xe, tạo ra buđông xe, xích, líp...
Việc tạo ra các bộ phận này không nhất thiết phải được thực hiện một cách đồng
thời hay theo một trật tự nào cả, và nó có thể được tạo ra một cách độc lập bởi
nhiều người. Nhưng trong một mô hình sản xuất, việc tạo ra chiếc xe luôn được
khép kín để tạo ra chiếc xe hoàn chỉnh, đó là nhà máy sản xuất xe đạp. Ta gọi
đối tượng nhà máy sản xuất xe đạp này là Builder.
b. Định nghĩa
Builder là mẫu thiết kế hướng đối tượng được tạo ra để chia một công
việc khởi tạo phức tạp của một đối tượng ra riêng rẽ từ đó có thể tiến hành khởi
tạo đối tượng ở các hoàn cảnh khác nhau [8].

16
- Khi tạo đối tượng phức hợp độc lập với thành phần.
- Tiến trình khởi tạo cho phép nhiều đại diện khác nhau của đối tượng cũng
được khởi tạo.
d. Thuận lợi và hạn chế:
- Về phía người dùng: nó chỉ là những thành phần con, do dó làm giảm số
lượng các đối tượng mà người dùng phải sử lý và làm cho hệ thống dễ sử
dụng hơn.
- Làm giảm sự móc nối giữa các đối tượng.
- Nó cho phép sử dụng các lớp con của hệ thống.
2.2.3 Adapter
Đôi khi một lớp công cụ được thiết kế cho việc sử dụng lại, lại không thể
sử dụng lại chỉ bởi giao diện không thích hợp với miền giao diện đặc biệt mà
một ứng dụng yêu cầu. Adapter đưa ra một giải pháp cho vấn đề này.
Ta muốn sử dụng một lớp đã tồn tại nhưng giao diện của nó không phù
hợp với giao diện của một lớp mà ta yêu cầu. Ta muốn tạo ra một lớp có khả
năng được dùng lại, lớp đó cho phép kết hợp với các lớp không liên quan hoặc
không được dự đoán trước, các lớp đó không nhất thiết phải có giao diện tương
thích với nhau. Nhưng thực tế là không thể làm được vì giao diện của các lớp
không tương thích. Mà để làm được điều này ta dùng một đối tượng Adapter để
biến đổi giao diện lớp cha của nó.
b. Định nghĩa
Adapter là mẫu thiết kế dùng để biến đổi giao diện của một lớp thành một
giao diện khác mà clients yêu cầu. Adapter cho phép các lớp làm việc cùng nhau
mà bình thường là không thể do sự không tương thích về giao diện [8].
- Khi muốn sử dụng một lớp đã có sẵn nhưng giao diện của lớp đó không
tương thích với yêu cầu của bạn.
- Muốn tạo một lớp có thể sử dụng lại. Lớp này có thể làm việc được với
lớp khác không liên hệ gì vì nó là những lớp không cần thiết có những
tương thích trong giao diện.
d. Thuận lợi và hạn chế.
- Adapter làm tăng khả năng tái sử dụng các thành phần của hệ thống, cho
phép 2 hay nhiều đối tượng có thể tương tác được với nhau dù chúng
không tương thích với nhau về kiểu, loại đối tượng.

17
- Việc lạm dụng Adapter có thể dẫn tới sự không tương tác các chức năng
trong hệ thống. Do đó cần có chiến lược quản lý và đảm bảo chức năng
của mỗi lời gọi hàm bên Adapter.
- Việc truyền tham số qua lại giữa Adapter và hệ thống: các tham số giữa
Adapter và Framework không phải lúc nào cũng tương thích.
2.2.4 Façade
Khi cấu trúc hóa một hệ thống thành các hệ thống con sẽ giúp làm giảm
độ phức tạp của hệ thống. Một mục tiêu thiết kế thông thường là tối thiểu hóa sự
giao tiếp và phụ thuộc giữa các hệ thống con. Một cách để đạt được mục tiêu
này là đưa ra đối tượng Façade, đối tượng này cung cấp một giao diện đơn giản
để dễ dàng tổng quát hóa cho một hệ thống con.
Hình 2-1. Mô hình mẫu Façade.
b. Định nghĩa
Mẫu Façade cung cấp một giao diện thống nhất cho một tập các giao diện
trong một hệ thống con. Façade định nghĩa một giao diện ở mức cao hơn, giao
diện này làm cho hệ thống con được sử dụng dễ dàng hơn [4].
- Muốn cung cấp một giao diện lập trình cô đọng, đơn giản thay vì nhiều
giao diện phức tạp.
- Giảm sự phụ thuộc của client với giao diện của các lớp trong phân hệ.
- Tạo nên kiến trúc tầng (layer)
2.2.5 Observer
a. Định nghĩa
Observer định nghĩa một phụ thuộc một - nhiều giữa các đối tượng để khi
một đối tượng thay đổi trạng thái thì tất cả các phụ thuộc của nó được nhận biết
và cập nhật tự động [4].

18
b. Các tình huống áp dụng
- Khi ứng dụng mối quan hệ phụ thuộc, đối tượng này phụ thuộc vào đối
tượng kia.
- Khi sự thay đổi ở đối tượng này dẫn đến sự thay đổi đối tượng khác và ta
không biết đích xác có bao nhiêu đối tượng phải thay đổi theo.
c. Thuận lợi và hạn chế
- Observer giúp ta sử dụng những subject và observer một cách độc lập.
Chúng ta có thể sử dụng lại những subject mà không phải sử dụng lại các
Observer của nó và ngược lại. Chúng ta có thể thêm vào một hoặc nhiều
Observer mà không phải sửa lại Subject hoăc các observer khác
2.2.6 Mẫu MVC
a. Định nghĩa
Mẫu thiết kế MVC (Model-View-Controller) được đề xuất và áp dụng
trong thiết kế vào những năm 80 của thế kỷ trước, áp dụng lần đầu trong UI của
SmallTalk-80.
MVC là mẫu thiết kế sử dụng để tách logic nghiệp vụ khỏi giao diện, tách
phần dữ liệu khỏi phần trình diễn, tách đầu vào khỏi đầu ra. MVC bao gồm ba
loại đối tượng: Model, View và Controller.
 Model: Có trách nhiệm với dữ liệu. Quản lý trường dữ liệu (trạng thái ứng
dụng). Cài đặt hành vi thay đổi trạng thái. Thông báo cho
Views/Controllers liên quan biết có sự thay đổi.

 View: Có trách nhiệm với đầu ra. Chiếm vùng màn hình. Lấy dữ liệu từ
Model để vẽ trên màn hình. “Nghe” sự thay đổi ở model để vẽ lại màn
hình. Mỗi View chỉ có một Model. Một Model có thể có nhiều View.

 Controller: Có trách nhiệm với đầu vào. “Nghe” sự kiện phím và chuột.
Ra lệnh cho Model hoặc View thay đổi cho phù hợp. Mỗi Controller chỉ
có một Model và một View.

b. Biểu diễn hoạt động của MVC
- Event yêu cầu Controller thay đổi Model, View
- Khi Controller thay đổi dữ liệu của Model, View tự cập nhật
- Khi Controller tác động trên (chọn) View, View lấy dữ liệu từ Model và
tự hiển thị.

19
Hình 2-2. Mô hình hoạt động của mẫu MVC
2.2 Các mẫu đồ họa
2.2.1 Các mẫu về định vị
Mục đích của các mẫu định vị là làm sao người sử dụng biết được họ đang
ở đâu, họ phải đi tới đâu và làm sao họ tới được đích cần tới. Khi bạn tạo một
website hay một chương trình lớn và bạn cần chia thành các mục lớn, nhỏ, các
trang, các cửa sổ, các hướng dẫn. Bằng cách nào đó bạn có thể giúp người sử
dụng tìm đường.
Để làm được điều này người ta sử dụng các mẫu định vị sau:
2.2.1.1 Clear Entry Points
Hình 2-3. Giao diện sử dụng mẫu Clear Entry Point
a. Định nghĩa
Clear Entry Points chỉ trình bầy một số điểm vào trên các giao diện, điều
này làm chúng ta tập trung vào các điểm chính [12].
Khi bạn đang thiết kế một chương trình kết nối với công việc hoặc một
chương trình bất kì được sử dụng bởi những người mới sử dụng. Mục đích của
chương trình khá rõ ràng đối với người lập ra nó, nếu có nhiều định vị khiến bạn
khó chịu thì tốt nhất nên dùng mẫu Clear Entry Points.
c. Tại sao
Một số chương trình và website khi bạn mở ra thì giống như một rừng
thông tin và cấu trúc: có nhiều biểu bảng, các quảng cáo, các toolbar không hoạt

20
đông… Tất cả những cái đó không giúp cho người sử dụng bất kì hướng dẫn rõ
ràng nào.
Vì người sử dụng bạn nên lập ra một số lựa chọn để bắt đầu. Do đó người
sử dụng sẽ lựa chọn một khả năng thích hợp và bắt đầu làm việc với nó. Còn nếu
không thì ít nhất họ cũng biết đây là chương trình gì bởi bạn đã đặt những nhiệm
vụ chính và phân loại lên trên.
d. Bằng cách nào.
Khi một site được tìm kiếm hay một chương trình được bắt đầu chúng thể
hiện các điểm vào như các "cửa" vào trong nội dung chính của site hay chương
trình. Từ đó nó hướng dẫn người sử dụng vào trong chương trình cho tới khi họ
có đủ thông tin để tự bắt đầu.
Những điểm vào đã đủ nói lên tại sao họ lại ở đây. Có thể là một điểm vào
hoặc hai hoặc nhiều hơn, điều đó phụ thuộc vào cái gì phù hợp với thiết kế của
bạn. Nhưng bạn nên sử dụng ngôn ngữ đơn giản cho người sử dụng ít kinh
nghiệm.
Nên trình bầy những điểm vào bằng cách nhấn mạnh vào tỉ lệ quan trọng
của chúng. Hình 2-3 ING DIRECT hướng dẫn người sử dụng trực tiếp tới tài
khoản tiết kiệm của họ. ING DIRECT đặt chúng vào vị trí đầu tiên, trung tâm,
viết đậm nét và màu đậm, vây quanh là màu trắng. Ba nhiệm vụ khác (được sử
dụng thường xuyên bởi khách hàng) được trình bầy vào một nhóm với những
điểm nhấn ngang hàng.
Những trang này có các trang liên kết định vị khác như: About, Contact,
Pricacy Policy. Chúng thường trình bầy nhỏ hơn, và không nằm ở trung tâm các
trang vì những thông tin đó không quan trọng.
2.2.1.2 Global Navigation
a. Định nghĩa
Global Navigation sử dụng một bộ phận nhỏ của từng trang và trình bầy
một chuỗi các liên kết hoặc nút nhấn dẫn người sử dụng tới các bộ phận chính
của site hoặc chương trình.
b. Các tính huống áp dụng
Bạn dùng một website hay chương trình với những bộ phận hay công cụ
tách biệt. Trong cả hai tình huống người sử dụng đều có xu hướng di chuyển từ
bộ phận này tới bộ phận khác. Khi thực hiện sẽ có nhiều khoảng trống, do đó
bạn nên sử dụng mẫu Global Navigation trên mỗi trang.
c. Tại sao

21
Trên các web, Global Navigation là những thông lệ phổ biến, nghĩa là
người sử dụng chờ đợi sự có mặt của chúng. Điều quan trọng là một tập các liên
kết hay nút nhấn phản ánh cấu trúc UI. Nó giúp người sử dụng có một cái nhìn
khái quát về UI và tìm được những gì họ cần. Nó làm cho sự thăm dò và di
chuyển dễ dàng hơn bằng cách đặt các bộ phận gần nhau chỉ bằng một click.
d. Bằng cách nào
Đầu tiên ghi ra một cấu trúc tổ chức thông minh, giữ chỉ một số bộ phận
và thử chúng vào không gian hiển thị. Đặt tên cho các bộ phận nhưng không nên
sử dụng quá nhiều từ và tuân theo những thông lệ hợp lý.
Đối với panel Global Navigation, thiết kế một panel đơn giống nhau và
giống nhau tên từng trang mà nó xuất hiện. Trên web nó phải có mặt trên từng
trang.
Để người sử dụng biết họ đang ở đâu thì làm cho liên kết ở phần hiện tại
trông khác với những bộ phận còn lại. Ví dụ như sử dụng màu tương phản.
Để nhận dạng khác biệt của mục định vị và các link khác trên web. Người
sử dụng có thể đặt Global Navigation ở phía đầu các trang thì phần trái và phải
dùng cho các link khác, hoặc đặt chúng vào mục nội dung chính.
Trang chủ và cửa sổ chính cần có sự bố trí khác biệt hơn các trang khác
trong UI. Nếu mục đích của trang chủ và cửa sổ là đạt đến các bộ phận khác
nhau của UI thì Global Navigation phải nổi bật hơn những thứ khác.
Không phải mọi người sử dụng sẽ sử dụng hoặc để ý những thiết bị định
vị. Các nhà thiết kế thường nghĩ rằng người sử dụng sẽ tìm kiếm tổng thể trước
và sau đó quyết định tới đâu. Nhưng không phải vậy, người sử dụng không quan
tâm trang web hay UI được tổ chức thế nào, họ chỉ nhấn vào những mục nổi bật
và rõ ràng cho tới khi họ tìm thấy những gì họ cần.
2.2.1.3 Hub and Spoke
Hình 2-4. Giao diện sử dụng mẫu Hub and Spoke

22
a. Định nghĩa
Hub and Spoke tách biệt các bộ phận ứng dụng thành các bộ phận ứng
dụng nhỏ hơn, mỗi bộ phận với một đường vào (từ trang chính) và một đường ra
(trở lại trang chính) [12].
UI bao gồm các nhiệm vụ riêng biệt, các ứng dụng phụ, thành phần nội
dung như các dạng: trò chơi, mục chuyên tải, các công cụ độc lập... Tuy nhiên
bạn không muốn kết nối chúng với nhau bởi những lý do sau:
- Duy trì sự tách biệt của các ứng dụng phụ.
- Giới hạn các dòng công việc để hoàn thành (hoặc ngừng) của một
nhiệm vụ.
- Loại bỏ sự hỗn loạn trong hiển thị.
- Khoảng trống được ngắn lại.
Hub and Spoke được thiết kế phù hợp cho các thiết bị màn hình
nhỏ. c. Tại sao
Khi sử dụng Hub and Spoke để định vị sẽ làm người sử dụng trải nghiệm
điều khác biệt hơn là tìm kiếm trên web. Bạn yêu cầu người sử dụng tập trung
vào một bộ phận và sau đó trở lại Hub để tìm một bộ phận khác. Điều này sẽ
giảm sự lộn xộn trên các trang "spoke" và người sử dụng mất ít thời gian hơn để
tìm thấy.
Hub and Spoke làm hạn chế các định vị trên các trang, giúp ngăn chặn các
lỗi. Không có các nút định vị thì người sử dụng không thể rời trang web nửa
đường để nhảy sang một trang khác. Họ sẽ có ít cơ hội để làm cho UI mâu thuẫn
và lộn xộn.
Mặt khác hạn chế định vị nghĩa là bạn sẽ có sự quản lý chặt chẽ hơn trong
tình huống mà giao diện cần giải quyết để dẫn đến một ứng dụng đơn giản hơn.
Do đó ta thiết kế cho người sử dụng trải nghiệm với "spoke" như một UI
đơn giản. Nhưng điều này không phải lúc nào cũng tốt, nó có thể làm người sử
dụng khó chịu, nhất là khi họ quen với định vị tự do. Người sử dụng sẽ thấy rất
rõ ràng bởi cấu trúc Hub and Spoke hiển thị trong nhiều khung cảnh. Bạn nhấn
vào Spoke và làm công việc của bạn sau đó trở về Hub nếu bạn muốn làm một
công việc khác.
d. Bằng cách nào.
Chia nội dung thành những ứng dụng nhỏ theo nhiệm vụ hoặc công việc
theo cách mà bạn thấy phù hợp nhất. Những cái đó là Spoke.

23
Trên trang Hub, sắp xếp các link tới spoke. Trên trang Spoke (mỗi spoke
có thể có vài trang như là wizard) di chuyển các định vị bởi chúng không liên
quan đến nhiệm vụ chính.
Sử dụng những chức năng phù hợp như các nút Back, Next, Cancel, Exit
và Perhaps. Khi người sử dụng đến điểm kết thúc của những nhiệm vụ được làm
trên Spoke, bạn cần cung cấp tín hiệu rằng công việc đã hoàn thành bằng các nút
như "done" hoặc "cancel". Cả hai nút này sẽ dẫn người sử dụng trở lại Hub.
2.2.1.4 Pyramid
Hình 2-5. Giao diện sử dụng mẫu Pyramid
a. Định nghĩa
Pyramid kết nối các trang với liên kết Back/Next. Kết hợp sự trình bầy nối
tiếp với các trang chính mà chúng kết nối đến hoặc từ tất cả các trang nối tiếp
nhau [14].
Site hoặc ứng dụng thường có các trang nối tiếp nhau mà người sử dụng
thường xem cái nọ nối tiếp cái kia, như slideshow, wizard, các chương trong
một quyển sách. Người sử dụng sẽ tới trang đầu tiên sau đó kế tiếp các trang
khác, trang đầu tiên được coi như điểm xuất phát.
Sử dụng mô hình này nếu bạn có một trang mà nó liên hệ với nhiều trang
giống nhau nhưng không được kết nối.
Pyramid thường được tìm thấy trong hầu hết các ứng dụng cửa sổ đơn,
trong các thiết bị và trang web.
c. Tại sao
Pyramid giúp giảm bớt số lần click, cải thiện các định vị và cùng lúc thể
hiện mọi quan hệ liên quan giữa các trang. Các nút Back/Next thường rất hữu
dụng và người sử dụng luôn biết cách dùng.
Đặt một link vào trang chủ trên các trang phụ sẽ làm tăng lựa chọn cho
người sử dụng. Khi đó sẽ có ba chức năng định vị thay vì hai, đó là: Back, Next

24
và Up. Nó không làm cho công việc phức tạp hơn mà lại rất thuận tiện cho
người sử dụng.
Kết nối các trang (không liên quan đến nhau) thường rất hữu dụng cho
người sử dụng khi họ muốn xem tất cả các trang. Nếu không có liên kết Back và
Next thì họ phải trở lại trang chủ liên tục.
Đặt các nút hoặc các liên kết Back, Next và Up trên các trang nối tiếp và
đặt link của các trang phụ trên trang chủ. Nó tạo nên một cấu trúc kim tự tháp
giống như hình sau:
Hình 2-6. Mô hình Pyramid
Không cần phải dùng các tên Back, Next và Up mà bạn có thể dùng các
tên của các trang bên cạnh để thay thế. Nút Up nên được đặt tên là "Back to…"
hoặc khả năng khác. Việc nhóm ba link này thường hữu dụng bởi vì chúng giảm
sự di chuyển và củng cố bộ nhớ. Nếu nhấn vào nút Next ở cùng một vị trí trên
các trang mà người sử dụng không cần phải di chuyển chuột là điều rất tốt.
Pyramid là trạng thái tuyến tính nối tiếp, giống như slideshow nơi mà
người thiết kế đặt trang này kế tiếp trang khác.
Để trạng thái tuyến tính nối tiếp thành vòng tròn thì ta kết nối trang cuối
tới trang đầu mà không trở về trang chủ. Kết nối lại với trang chủ đôi khi không
cần thiết vì khi bạn đã chọn một sơ đồ, thì tốt hơn nên đi trực tiếp đến cái tiếp
theo thay vì quay đi quay lại trang chủ.
2.2.1.5 Modal Panel
Hình 2-7. Giao diện sử dụng mẫu Modal Panel
a. Định nghĩa
Modal Panel chỉ thể hiện trên một trang, không có lựa chọn (định vị) nào
khác cho tới khi người sử dụng giải quyết được vấn đề [12].

25
Trong những ứng dụng có trạng thái mà nó không thể đi xa hơn nếu
không có sự giúp đỡ của người sử dụng. Ví dụ, trong tài liệu word nút save luôn
yêu cầu người sử dụng đặt tên cho document nếu như họ chưa làm điều đó.
c. Tại sao
Một hộp thoại đơn sẽ cắt ngang các chương trình khác từ người sử dụng.
Do đó ta không thể bỏ qua hộp thoại và đến nơi khác, người sử dụng phải giải
quyết nó ngay. Khi thực hiện xong thì ta có thể trở lại chỗ cũ.
Đây là một mô hình đơn giản và được sử dụng rộng rãi trong thời gian
vừa qua. Modal panel thường ngắt quãng người sử dụng. Nếu người sử dụng
chưa trả lời nó thì nó sẽ ngắt quãng công việc của họ và buộc họ trả lời. Khi đã
được trả lời Model panel có thể đòi hỏi người sử dụng đi tới những sự lựa chọn
tiếp theo. Sẽ không có những chức năng khác khiến người sử dụng mất tập
trung.
Ở trung tâm của màn hình nơi mà người sử dụng tập trung nhất bạn có thể
đặt panel, hộp thoại hay trang mà nó đòi hỏi thông tin từ người sử dụng. Nó cần
phải ngăn không cho người sử dụng dùng bất kì chương trình nào khác ngoại trừ
ứng dụng này. Nó cần phải gọn gàng sao cho người sử dụng chỉ chú ý đến
nhiệm vụ của nó.
Đây là mẫu liên quan đến định vị. Bạn nên đặt tên các lựa chọn cẩn thận
và không nên có quá nhiều. Chỉ cần một, hai hoặc ba. Các trường hợp chính thì
chúng nên ngắn gọn như save, don't save hoặc cancel. Sau khi nhấn vào đó
người sử dụng phải được trở về trang cũ mà họ đang dùng.
2.2.1.6 Sequence Map
Hình 2-8. Giao diện sử dụng mẫu Sequence Map
a. Định nghĩa
Trên mỗi trang trong chuỗi liên tiếp thể hiện sơ đồ của tất cả các trang
theo thứ tự và cho biết vị trí hiện tại họ đang ở đó [15].

26
Khi bạn thiết kế một bài tường thuật, một slideshow, wizard hay bất kì
thứ gì khác mà người sử dụng triển khai từ trang này qua trang khác.
Nếu địa hình định vị lớn và nhiều thứ bậc thì bạn nên sử dụng mẫu
Breadscrumbs, bởi vì bạn không có đủ không gian để trình bầy Sequence Map.
c. Tại sao
Một game thủ từng nói "bị lạc thì chẳng có gì thú vị cả". Một phần trò
chơi là định vị ở một nơi xa lạ để hoàn thành nhiệm vụ. Với các ứng dụng thực
tiễn thì người sử dụng không nên bị mất thời gian để biết được họ đang ở đâu.
Trạng thái "bị lạc" không phải là vấn đề, vấn đề ở chỗ bạn không biết cần
phải đi bao xa nữa. Một bản đồ về tuần tự của các trang sẽ giúp người sử dụng
tìm được phương hướng như: họ nhận ra các bước mà họ đã đi, chỗ mà họ đang
ở và còn bao nhiêu bước nữa.
Sơ đồ tuần tự có chức năng định vị, giúp người sử dụng có thể nhảy qua
các bước bằng cách click lên bản đồ.
Gần rìa của trang đặt một sơ đồ nhỏ về các trang theo tuần tự. Đặt chúng
vào một hàng hoặc một cột để giữa chúng khác biệt so với nội dung chính của
trang. Tạo các chỉ dẫn trên trang hiện tại đặc biệt hơn, như làm chúng nhạt màu
hơn hoặc đậm hơn so với phần còn lại, sau đó chọn hiệu ứng khác cho các trang
đã được thăm.
Để thuận tiện bạn nên đặt sơ đồ gần chức năng định vị chính như
Back/Next.
Đặt tên các trang trên sơ đồ: Nếu các trang hoặc các bước được đặt theo
số thì rất tốt. Vì nó ngắn gọn và dễ hiểu, còn nếu không thì đặt tên các trang trên
sơ đồ. Nếu tựa đề quá dài sẽ không đẹp mắt, bạn nên làm cho các tựa đề ngắn
gọn hơn hoặc giấu chúng ở tooltips hoặc cửa sổ cuộn.
2.2.1.7 Breadcrumbs
Hình 2-9. Giao diện sử dụng mẫu Breadcrumbs
a. Định nghĩa
Trên mỗi trang theo thứ bậc thể hiện một sơ đồ của tất cả các trang chính
tới trang chủ [15].

27
Breadcrumbs là một sự thay thế cho Sequence Maps. Bạn có thể dùng sơ
đồ tuần tự để giúp người sử dụng tìm phương hướng nhưng một sơ đồ thường
quá lớn và khó vừa vào một khoảng nhỏ, bởi vậy bạn cần một giải pháp khác.
c. Tại sao
Breadcrumbs thể hiện mọi mức độ của thứ bậc dẫn tới trang hiện tại. Nó
thể hiện một phần tuyến đơn trên tổng thể sơ đồ của một site hay ứng dụng. Do
đó tránh sự phức tạp của toàn sơ đồ.
Giống như Sequence Map, Breadcrumbs giúp người sử dụng biết được họ
đang ở đâu. Điều này rất quan trọng nhất là khi họ mất phương hướng như tìm
kiếm. Điều khác biệt với Sequence Map đó là Breadcrumbs không cho người sử
dụng biết họ sẽ tới đâu hoặc đã ở đâu. Nó chỉ đưa ra thông tin về hiện tại.
Breadcrumbs cho biết bạn đang ở đâu. Nó nói về khung cảnh chứ không
phải quá khứ. Hình 2-9, chỉ ra họ đang ở bộ phận “Products and Technologies”.
Breadcrumbs cung cấp thông tin hữu hiệu về cấu trúc của trang web hoặc ứng
dụng.
Breadcrumbs thường là các link hoặc nút có thể nhấn được, khi bạn nhấn
vào thì nó chuyển thành một định hướng công cụ theo cách của nó.
Gần đầu trang đặt một tựa đề hoặc biểu tượng cho thấy mục hiện tại của
thứ bậc. Bắt đầu với mục trên cùng ở phía bên phải. Đặt một mục tiếp theo, cứ
như vậy xuống dưới cho tới trang hiện tại. Giữa các bậc đặt một biểu tượng hoặc
đề mục (thường là một mũi tên) để thể hiện sự di chuyển từ bậc này qua bậc
khác.
Nhãn chỉ định mỗi trang phải giống với tên mỗi trang. Người sử dụng
phải nhận biết được những trang mà họ đã đi qua, còn nếu không các tựa đề cần
phải dễ hiểu để người sử dụng biết được nội dung của trang đó. Nếu các tựa đề
quá dài, bạn cần làm chúng ngắn lại hoặc giấu chúng ở tooltips hoặc cửa sổ
cuộn.
2.2.1.8 Annotated Scrollbar
Hình 2-10. Giao diện sử dụng mẫu Annotated Scrollbar

28
a. Định nghĩa
Scrollbar thực hiện hai nhiệm vụ là sơ đồ nội dung và chỉ thị "bạn đang ở
đây" [12].
b. Các tính huống áp dụng
Khi xây dựng một ứng dụng tài liệu hoặc bất kì ứng dụng nào có không
gian ảo lớn như tài liệu, danh sách, hình ảnh. Người sử dụng sẽ nhìn lướt qua
ứng dụng này để tìm các dữ liệu hoặc ghi chú như số trang hoặc mốc giới hạn.
Họ có thể gặp khó khăn trong việc đoán ra họ đang ở đâu hoặc phải đến đâu. Do
đó cần sử dụng mẫu Annotated Scrollbar.
c. Tại sao
Mặc dù người sử dụng ở trong giới hạn không gian của UI khi họ lướt qua
các nội dung, các bảng chỉ dẫn. Nhưng khi lướt nhanh, họ thấy các tài liệu rất
khó đọc, thậm chí nếu dừng lại một chút thì họ thấy phần tài liệu mà họ đọc có
thể chẳng liên quan gì cả. Bởi vậy những chỉ định về vị trí là rất cần thiết.
Ta cần một scrollbar vì đó là nơi mà người sử dụng tập trung vào. Khi đặt
bảng chỉ dẫn, người sử dụng sẽ nhìn thấy và sử dụng chúng khi họ lướt thay vì
nhìn vào cả hai bên màn hình cùng lúc. Bạn có thể đặt bảng chỉ dẫn gắn với
scrollbar mà vẫn đạt được hiệu quả, đặt càng gần càng tốt.
Scrollbar thể hiện các chỉ thị ở đường đi của nó, ta thấy giống như một
chiều tổng thể và chi tiết. Đường đi là tổng thể, cửa sổ scrollbar là chi tiết.
Đặt một chỉ thị vị trí lên trên hoặc gần scrollbar, cả chỉ thị tĩnh hoặc động.
Chỉ thị tĩnh là cái không thay đổi, giống như các khối màu trong đường
scrollbar.
Chỉ thị động thay đổi khi người sử dụng lướt, chúng thường được sử dụng
như tooltips. Khi vị trí cuốn thay đổi, tooltip từ chỗ gần bên thanh cuốn chuyển
sang thể hiện thông tin về nội dung ở đó. Điều này sẽ thay đổi tuỳ vào bản chất
của ứng dụng. Hình 2-10, Word đặt số trang và tiêu đề trong các tooltips.
Trong mỗi tình huống bạn cần biết người sử dụng đang tìm kiếm gì và từ
đó tìm ra những chú thích cần thiết. Cấu trúc nội dung là một điểm bắt đầu tốt.
Nếu nội dung bằng code thì cần nêu tên của chức năng hoặc phương pháp hiện
tại. Nếu là trang số thì cần chỉ số hạng,…Nếu người sử dụng tìm kiếm mối liên
hệ thì chú thích cần phải thể hiện về điều đó.

29
2.2.1.9 Color-Coded Sections
Hình 2-11. Giao diện sử dụng mẫu Color-Coded Sections
a. Định nghĩa
Color-Coded Sections sử dụng màu để nhận dạng bộ phận nào của ứng
dụng hoặc site thuộc về trang đó [12].
Khi UI là một ứng dụng lớn với nhiều trang hoặc cửa sổ, nơi mà chúng
được phân loại theo bộ phận (hoặc chương hoặc ứng dụng phụ). Và bạn cần mỗi
bộ phận có một cái nhìn riêng biệt như một nhãn riêng biệt hay một mục đích.
c. Tại sao
Hình 2-11, là một ví dụ về bảng chỉ thị, nó cho người sử dụng biết được
họ đang ở đâu. Nếu bạn làm một cách khéo léo thì màu sắc sẽ hiển thị mà người
sử dụng sẽ không nhận ra ngay từ đầu. Khi người sử dụng đã quen với khung
màu đó thì họ sẽ sử dụng chúng. Họ sẽ biết khi nào dời một trang và tới trang
mới nếu họ để ý màu sắc đã được thay đổi.
Color-coded có nhiệm vụ phân biệt bộ phận này với bộ phận khác, làm
cho ranh giới rõ ràng. Giúp người sử dụng hình dung dễ hơn khoảng định vị chi
tiết một khu vực thay vì toàn bộ trang cùng lúc.
Sử dụng các màu sắc khác nhau một cách sáng tạo có thể làm cho giao
diện nhìn đẹp mắt và không nhàm chán. Nó góp phần tạo nên nhãn cho UI.
Chọn một trong các màu trên bề mặt chung và thay đổi chúng tại mỗi bộ
phận. Thường các màu nền là hay thay đổi. Các thiết kế được sử dụng màu rõ
ràng, như đường viền, màu nền của một văn bản nhỏ.
Những người mù màu thì sẽ không thấy sự khác biệt giữa các màu. Nên
màu sắc không phải là cách duy nhất để phân biệt các bộ phận với nhau. Do đó
bạn cũng cần sử dụng các bảng tín hiệu như các tên trang và cửa sổ.

30
2.2.1.10 Escape Hatch
Hình 2-12. Giao diện sử dụng mẫu Escape Hatch
a. Định nghĩa
Trên mỗi trang có ít lựa chọn về định hướng, hãy đặt một nút hay link để
giúp cho người sử dụng thoát khỏi trang đó và trở lại trang quen thuộc [14].
Khi ứng dụng có một số trang có cấu tạo là một chuỗi quá trình như
wizard hay những trang mà nó "khoá" người sử dụng vào một tình huống định
hướng bị hạn chế như Hub and Spoke hay Modal Panel.
Nếu có Sequence Maps hay Breadcrumbs trên trang thì không cần thiết
phải dùng Escape Hatches. Người sử dụng nếu hiểu chúng thì có thể sử dụng
chúng để trở lại chỗ cũ.
c. Tại sao
Hạn chế về định hướng là một chuyện nhưng không có lối ra lại là chuyện
khác. Nếu bạn đưa người sử dụng một con đường đơn giản và rõ ràng để thoát
khỏi một trang thì họ sẽ không cảm thấy mắc kẹt ở đó.
Đây là một đặc điểm mà người sử dụng cảm thấy an toàn thám hiểm một
ứng dụng hay site. Nó giống như đặc tính của Undo, khuyến khích người sử
dụng chứ không có cảm giác bắt buộc.
Nếu người sử dụng đến các trang nhờ tìm kiếm kết quả qua quá trình từng
bước thì Escape Hatches càng quan trọng và cần được đặt ở mỗi trang. Họ có thể
nhấn vào đó để trở về một trang "thường", nơi cho biết rõ hơn họ đang ở đâu.
Đặt một nút hay link trên trang mà nó đưa người sử dụng trở về "chỗ an
toàn". Ví dụ, bạn có thể sử dụng một trang chủ, một trang trung tâm ở thiết kế
Hub and Spoke hoặc bất kì trang nào với định hướng và giải thích trên đó. Trang
liên kết cái gì thì phụ thuộc vào thiết kế ứng dụng.

31
2.2.2. Các mẫu tổ chức trang
Bố cục trang là nghệ thuật lôi kéo sự chú ý của người sử dụng vào trang,
để truyền đạt ý tưởng, sự nối tiếp và các điểm tác động qua lại. Như các nhà làm
phim kiếm sống bằng cách lôi kéo sự chú ý của khán giả qua các bộ phim và
màn ảnh nhỏ. Các chủ bút, những người sắp xếp các đoạn báo, tựa đề và quảng
cáo. Nếu tất cả các nội dung được trình bầy giống nhau và không có điểm nhấn
nào thu hút sự chú ý thì bạn sẽ rất khó nhận biết cái gì là quan trọng và cái gì
không.
Các mô hình dưới đây sẽ đưa ra các cách cụ thể để có được bố cục hợp lý.
2.2.2.1 Visual Framework
Hình 2-13. Giao diện sử dụng mẫu Visual Framework
a. Định nghĩa
Visual Framework nhằm thiết kế các trang bằng cách sử dụng bố cục cơ
bản giống nhau, cùng màu, cùng thành phần mẫu mã, tuy nhiên cùng lúc tạo khả
năng để thiết kế có thể thay đổi theo nội dung các trang khác nhau [12].
Khi bạn thiết kế một website với nhiều trang hoặc một UI với nhiều cửa
sổ, hoặc hầu hết các phần mềm phức tạp. Bạn muốn chúng ở cùng nhóm và
trông giống nhau nhưng được thiết kế khác nhau. Chúng cần phải dễ sử dụng và
dễ định hướng.
c. Tại sao
Khi một UI sử dụng màu giống nhau, các phông chữ, các bố cục tương tự,
các tựa đề và các hướng dẫn định vị ở vị trí giống nhau thì người sử dụng sẽ biết
họ đang ở đâu và phải tìm kiếm ở đâu. Họ không cần phải làm quen với bố cục
mới mà mỗi lầm họ chuyển nội dung từ trang này qua trang khác.
Một Visual Framework tốt, được lặp lại trên mỗi trang sẽ giúp nội dung
trang nổi bật hơn. Một số thì dễ bị mờ nhạt trong mắt người sử dụng, và một số
sự thay đổi thì được chú ý. Hơn nữa, thêm các yếu tố vào Visual Framework sẽ
giúp bạn đưa tên tuổi của website hoặc sản phẩm.

32
Thiết kế thống nhất về look-and-feel cho mỗi trang hoặc cửa sổ mà bạn
xây dựng. Các trang chủ và cửa sổ chính là đặc biệt và được bố trí hơi khác biệt
so với các trang phụ, tuy nhiên chúng vẫn có chung một số đặc điểm với các
phần còn lại. Ví dụ:
- Màu sắc: màu nền, màu chữ, và màu nhãn.
- Phông chữ: tựa đề chính, tựa đề phụ, chữ thường, chữ nhỏ.
- Kiểu viết và ngữ pháp: tựa đề, tên, nội dung, miêu tả ngắn, các đoạn văn
dài, các phần sử dụng ngôn ngữ.
Tất cả các trang hay cửa sổ khác cũng cần có chung những điểm sau:
- Tựa đề, logo,…
- Các thiết bị định hướng: một tập các link, nút OK/Cancel, Back, Quit
hoặc Exit và các mẫu định vị như Global Navigation, Sequence Map và
Breadcrumbs.
- Khoảng cách và liên kết: lề trang, khoảng cách các dòng, khoảng cách
giữa các nhãn và các điều khiển, các chữ.
- Hệ thống bố cục: sắp xếp mọi thứ trên trang, trong mỗi cột hay dòng,
xem xét khoảng cách lề được đặt ở đâu.
Nếu bạn quen thuộc với các định nghĩa về thiết kế đồ hoạ thì bạn có thể
nhận ra các kỹ thuật này như bao gồm hệ thống bố cục. Một hệ thống bố cục là
một mẫu có hệ thống cho một loạt các trang hay bố cục. Trên mỗi trang các
nhãn khác nhau nhưng tất cả các trang sử dụng chung một lề nhất định và sắp
xếp nội dụng của chúng trong phạm vi dòng. Một Visual Framework tốt thường
bao gồm một hệ thống bố cục, nhưng cũng có lúc bao gồm khía cạnh look-and-
feel.
2.2.2.2 Center Stage
Hình 2-14. Giao diện sử dụng mẫu Center Stage

ĐỒ ÁN - Nghiên cứu ứng dụng mẫu thiết kế trong tương tác người - máy.doc

ĐỒ ÁN - Nghiên cứu ứng dụng mẫu thiết kế trong tương tác người - máy.doc

Recommended

Recommended

More Related Content

Similar to ĐỒ ÁN - Nghiên cứu ứng dụng mẫu thiết kế trong tương tác người - máy.doc

Similar to ĐỒ ÁN - Nghiên cứu ứng dụng mẫu thiết kế trong tương tác người - máy.doc (18)

More from Dịch Vụ Viết Bài Trọn Gói ZALO 0917193864

More from Dịch Vụ Viết Bài Trọn Gói ZALO 0917193864 (20)

Recently uploaded

Recently uploaded (20)

ĐỒ ÁN - Nghiên cứu ứng dụng mẫu thiết kế trong tương tác người - máy.doc