TRƯỜNG ĐẠI HỌC BÁCH KHOA HÀ NỘI

LUẬN VĂN THẠC SĨ
Ứng dụng phương pháp Design pattern trong
phát triển và kiểm thử phần mềm hệ thống
thương mại điện tử VNPT Lào Cai

PHÙNG THANH HỊA
Ngành Cơng Nghệ Thơng Tin và Truyền Thơng

Giảng viên hướng dẫn:

PGS.TS. Huỳnh Quyết Thắng

Viện:

Công nghệ thông tin

HÀ NỘI, 2020


TRƯỜNG ĐẠI HỌC BÁCH KHOA HÀ NỘI

LUẬN VĂN THẠC SĨ
Ứng dụng phương pháp Design pattern trong
phát triển và kiểm thử phần mềm hệ thống
thương mại điện tử VNPT Lào Cai

PHÙNG THANH HỊA
Ngành Cơng Nghệ Thơng Tin và Truyền Thơng

Giảng viên hướng dẫn:

PGS.TS. Huỳnh Quyết Thắng
Chữ ký của GVHD

Viện:

Công nghệ thông tin

HÀ NỘI, 2020


CỘNG HÒA XÃ HỘI CHỦ NGHĨA VIỆT NAM
Độc lập – Tự do – Hạnh phúc

BẢN XÁC NHẬN CHỈNH SỬA LUẬN VĂN THẠC SĨ
Họ và tên tác giả luận văn: Phùng Thanh Hòa
Đề tài luận văn: Áp dụng kỹ thuật thiết kế mẫu trong phát triển và
kiểm thử phần mềm hệ thống thương mại điện tử VNPT Lào Cai
Chuyên ngành: Công nghệ thông tin
Mã số SV: CB180084
Tác giả, Người hướng dẫn khoa học và Hội đồng chấm luận văn xác
nhận tác giả đã sửa chữa, bổ sung luận văn theo biên bản họp Hội đồng ngày
31/10/2020 với các nội dung sau:
I. Chỉnh sửa phần cấu trúc luận văn
- Bổ sung, chỉnh sửa chương mở đầu : Trình bày khái niệm mẫu thiết kế
giao diện người dùng, đặc điểm các mẫu thiết kế giao diện người dùng và
giới thiệu chi tiết một số mẫu phổ biến.
- Chương 2 : Làm rõ, mô tả việc áp dụng các mẫu thiết kế sử dụng trong hệ
thống thương mại điện tử VNPT Lào Cai, ý nghĩa của việc áp dụng mang

lại lợi ích gì, sửa theo các góp ý trong nhận xét của các thầy cô.
- Chương 3 : Bổ sung việc áp dụng pattern nào và được kết quả giao diện
nào đối với mỗi sơ đồ activity diagram.
II. Chỉnh sửa cách trình bầy luận văn
- Sắp xếp lại bố cục luận văn chuẩn quy định của viện sau đại học trường
Đại học Bách Khoa Hà Nội.
- Thêm các trích dẫn tài liệu tham khảo.
- Thêm các trích dẫn hình ảnh sử dụng và tham chiếu.
Ngày 13 tháng 12 năm 2020
Giáo viên hướng dẫn

Tác giả luận văn

CHỦ TỊCH HỘI ĐỒNG


MỤC LỤC
MỤC LỤC...................................................................................................................................... i
DANH MỤC HÌNH VẼ ............................................................................................................. iv
DANH MỤC BẢNG................................................................................................................... vi
MỞ ĐẦU ....................................................................................................................................... 1
1. Đặt vấn đề................................................................................................................................ 1
2. Tính cấp thiết của đề tài......................................................................................................... 1
3. Phạm vi nghiên cứu................................................................................................................ 2
4. Mục đích của đề tài ................................................................................................................ 2
5. Phương pháp nghiên cứu....................................................................................................... 2
6. Bố cục của luận văn ............................................................................................................... 2
CHƯƠNG 1: MẪU THIẾT KẾ, CÁC MẪU, CHI TIẾT CÁC MẪU THIẾT KẾ TRONG
PHÁT TRIỂN PHẦN MỀM ....................................................................................................... 3
1.1.


Khái niệm cơ bản về mẫu thiết kế giao diện người dùng ........................................... 3

1.1.1.

Khái niệm cơ bản...................................................................................................... 3

1.1.2.

Các mẫu thiết kế giao diện người dùng phổ biến ................................................. 3

1.2.

Mẫu Breadcrumbs ........................................................................................................... 5

1.2.1. Những Breadcrumbs điển hình : ................................................................................ 5
1.2. 2. Breadcrumbs theo thuộc tính ..................................................................................... 6
1.2.3. Breadcrumbs theo đường dẫn Path Breadcrumbs .................................................... 6
1.3. Mẫu Hover Controls (Điều khiển chuột) ......................................................................... 6
1.4. Mẫu Steps Left .................................................................................................................... 7
1.5. Subscription Plans (Mẫu gói đăng ký) ............................................................................. 9
1.6. Required Field Marker (Điểm đánh dấu trường bắt buộc) .......................................... 10
1.7. Account Registration (Đăng ký tài khoản) .................................................................... 11
1.8. Clear Primary Actions ...................................................................................................... 13
1.9 Forgiving Format ............................................................................................................... 14
1.10 Mẫu Progressive Disclosure ........................................................................................... 15
1.11 Lazy Registration (Đăng ký lười biếng) ....................................................................... 17
1.12 Calendar Picker (mẫu lịch) ............................................................................................ 19
i



1.13 Setup Wizard ................................................................................................................... 20
1.14. Tiến trình phát triển Website hệ thống thương mại điện tử VNPT Lào Cai ........... 21
CHƯƠNG 2: MẪU THIẾT KẾ INTERFACE VÀ INTERACTION ÁP DỤNG TRONG
PHÁT TRIỂN VÀ KIỂM THỬ PHẦN MỀM ....................................................................... 22
2.1. Yêu cầu chung mẫu thiết kế............................................................................................. 22
2.1.1 Khả năng sử dụng và trải nghiệm người dùng......................................................... 22
2.1.2. Quy trình thanh tốn thương mại điện tử ................................................................ 23
2.1.3. Mục tiêu đề xuất các mẫu thiết kế giao diện và tương tác .................................... 23
2.2. Các mẫu thiết kế tương tác và giao diện ........................................................................ 24
2.2.1. Đánh giá Các mẫu thiết kế tương tác và giao diện................................................. 24
2.2.2. Danh sách mẫu thiết kế tương tác và giao diện ...................................................... 24
2.3. Áp dụng Các mẫu thiết kế tương tác và giao diện trong phát triển phần mềm ......... 26
2.4. Áp dụng Các mẫu thiết kế tương tác và giao diện trong kiểm thử phần mềm .......... 30
2.4.1. Interface trong kiểm thử phần mềm ......................................................................... 30
2.4.2. Các loại Interface trong kiểm thử phần mềm ......................................................... 32
2.5. Ý tưởng áp dụng trong hệ thống Web tại VNPT Lào Cai ........................................... 33
CHƯƠNG 3: ỨNG DỤNG PHƯƠNG PHÁP THIẾT KẾ MẪU TRONG PHÁT TRIỂN
VÀ KIỂM THỬ PHẦN MỀM HỆ THỐNG THƯƠNG MẠI ĐIỆN TỬ VNPT LÀO CAI
...................................................................................................................................................... 34
3.1

Giới thiệu bài toán ......................................................................................................... 34

3.1.1. Phát biểu bài toán ....................................................................................................... 34
3.1.2. Các thành phần của hệ thống .................................................................................... 34
3.1.3. Kiến trúc mơi trường hệ thống ................................................................................. 35
3.2

Thu thập và phân tích u cầu – Mơ hình USE CASE ............................................. 35


3.2.1. Mục tiêu của hệ thống................................................................................................ 35
3.2.2. Đặc tả các chức năng hệ thống ................................................................................ 35
3.2.3. Nhận biết và mơ hình các tác nhân và trường hợp sử dụng.................................. 36
3.2.4. Biểu đồ Use cases (Hình 3.1) ................................................................................... 37
3.2.5. Mơ hình hóa nghiệp vụ.............................................................................................. 38
3.3

Thu thập và phân tích u cầu – Mơ hình khái niệm ................................................ 40

3.3.1. Nhận biết các khái niệm (thiết kế mẫu)................................................................... 40
3.3.2. Thuộc tính các lớp ...................................................................................................... 40
ii


3.3.3. Nhận biết các quan hệ các khái niệm....................................................................... 41
3.4

Hành vi hệ thống – Các biểu đồ trình tự..................................................................... 42

3.4.1. Biểu đồ trình tự hệ thống........................................................................................... 42
+ Breadcrumbs đường dẫn phân cấp từ trang quản trị đến trang dịch vụ...................... 44
+ Clear Primary Actions xóa tất cả thơng tin nội dung trên form để nhập lại. ............. 45
+ Steps Left người dùng thao tác bấm nút next để sang các bước tiếp theo, xem thông
tin khách hang nhập nội dung trên form ............................................................................ 45
+ Clear Primary Actions xóa tất cả thông tin nội dung trên form để nhập lại. ............. 46
+ Clear Primary Actions xóa tất cả thơng tin nội dung trên form để nhập lại. ............. 47
3.5

Thiết kế hệ thống ........................................................................................................... 48


3.5.1. Các biểu đồ cộng tác.................................................................................................. 48
3.5.2. Các biểu đồ lớp thiết kế............................................................................................. 49
3.5.3. Thiết kế triển khai ...................................................................................................... 49
3.5.4. Bổ sung thiết kế .......................................................................................................... 51
3.5.5. Mơ hình hóa dữ liệu................................................................................................... 53
3.6

Cài đặt thiết kế ............................................................................................................... 54

3.6.1

Biểu đồ thành phần................................................................................................. 54

3.6.2

Biểu đồ triển khai:.................................................................................................. 54

3.6.3

Kết quả triển khai Trang chủ hệ thống ................................................................ 56

3.7. Đánh giá ứng dụng phương pháp .................................................................................... 59
KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN .............................................................................. 61
4.1. Kết luận .............................................................................................................................. 61
4.2. Hướng phát triển ............................................................................................................... 61
TÀI LIỆU THAM KHẢO......................................................................................................... 63

iii



DANH MỤC HÌNH VẼ
Hình 1.1. Ví dụ mẫu Breadcrumbs............................................................................................... 5
Hình 1.2. Một loại Breadcrumbs theo thuộc tính ....................................................................... 6
Hình 1.3. Ví dụ về các liên kết Path Breadcrumbs dựa trên đường dẫn hiển thị hai đường
dẫn để điều hướng đến trang mục tiêu......................................................................................... 6
Hình 1.4. Liên kết "Chỉnh sửa" được tiết lộ khi người dùng di chuột qua từng phần của trang
hồ sơ Facebook của họ. ................................................................................................................. 7
Hình 1.5. Ví dụ mẫu Home ........................................................................................................... 7
Hình 1.6. Ví dụ mẫu các bước cịn lại StatementStacker.......................................................... 8
Hình 1.7. Ví dụ mẫu các bước cịn lại Delicious........................................................................ 9
Hình 1.8.Mẫu Wufoo hiển thị rõ ràng các gói đăng ký của mình, giá cả và sự khác biệt giữa
chúng.............................................................................................................................................. 10
Hình 1.9. Mẫu Bảng đăng ký của Crazyegg thu hút sự chú ý đến gói "Cơ bản". ................ 10
Hình 1.10. Haveamint.com đặt các điểm đánh dấu “Bắt buộc” bên cạnh các nhãn trường
trên biểu mẫu liên hệ của nó. ...................................................................................................... 11
Hình 1.11.mẫu Vimeo có hình thức đăng ký đơn giản nhưng hấp dẫn................................. 12
Hình 1.12. Tumblr chỉ yêu cầu thông tin tối thiểu của người dùng để đăng ký................... 13
Hình 1.13. Clearleft phân biệt giữa các hành động chính và phụ bằng màu sắc.................. 13
Hình 1.14. Flickr làm nổi bật hành động chính bằng cách đặt hành động phụ vào một nhãn
nhỏ bên dưới. ................................................................................................................................ 14
Hình 1.15. Tìm kiếm thời tiết của Yahoo cho phép người dùng tìm kiếm theo thành phố
hoặc mã zip. .................................................................................................................................. 15
Hình 1.16. Google Maps cho phép người dùng tìm kiếm theo thành phố, đường phố, mã zip
và thậm chí cả giá trị vĩ độ và kinh độ....................................................................................... 15
Hình 1.17. Ví dụ mẫu Progressive Disclosure.......................................................................... 16
Hình 1.18. Người dùng có thể đọc nhận xét khi nhấp vào liên kết "Trả lời" ....................... 16
Hinh 1.19. Tính năng tiết lộ liên tục của YouTube.................................................................. 17
Hình 1.20. Amazon cho phép bạn duyệt và thêm sản phẩm vào giỏ hàng trước khi đăng ký.
........................................................................................................................................................ 18

Hình 1.21. Mẫu đăng ký của Picnik........................................................................................... 19
Hình 2.1. Mẫu Location Breadcrumbs áp dụng cho VNPT.................................................... 26
Hình 2.2. Mẫu Date & time Picker áp dụng cho VNPT.......................................................... 26
Hình 2.3. Mẫu Good default áp dụng cho VNPT..................................................................... 27
Hình 2.4. Mẫu các Tab áp dụng cho VNPT.............................................................................. 28
Hình 2.5. Mẫu Tab đặt dịch vụ áp dụng cho VNPT ............................................................... 29
Hình 2.6. Phương thức cửa sổ..................................................................................................... 30
Hình 3.1. Lược đồ User case quản lý dịch vụ........................................................................... 37
Hình 3.2. Lược đồ Xem dich vu ................................................................................................. 38
iv


Hình 3.3. Lược đồ Đat hang........................................................................................................ 39
Hình 3.4. Biểu đồ trình tự cho chức năng “Publish dịch vụ” ................................................. 42
Hình 3.5. Biểu đồ trình tự cho chức năng “Quản lý Orders”.................................................. 43
Hình 3.6. Biểu đồ trình tự cho chức năng “Publish dịch vụ” ................................................. 48
Hình 3.7. Biểu đồ trình tự cho chức năng “Quản lý Orders”.................................................. 48
Hình 3.8. Thiết kế triển khai ....................................................................................................... 49
Hình 3.9. biểu đồ lớp chi tiết ...................................................................................................... 50
Hình 3.10. Biểu đồ lớp hồn thiện ............................................................................................. 52
Hình 3.11. Mơ hình cơ sở dữ liệu quan hệ của hệ thống quản lý dịch vụ............................. 53
Hình 3.12. Biểu đồ thành phần của hệ thống quản lý dịch vụ ................................................ 54
Hình 3.13. Biểu đồ triển khai cho hệ thống quản lý dịch vụ .................................................. 55
Hình 3.14. Trang chủ hệ thống ................................................................................................... 56
Hình 3.15. Trang chi tiết dịch vụ................................................................................................ 56
Hình 3.16. Trang thanh tốn ....................................................................................................... 57
Hình 3.17. Trang thanh tốn dịch vụ ......................................................................................... 58
Hình 3.18. Trang quản trị đơn đặt hàng .................................................................................... 58
Hình 3.19. Trang chi tiết Đơn đặt hàng ..................................................................................... 59


v


DANH MỤC BẢNG
Bảng 2.1. Danh sách các mẫu ..................................................................................................... 25
Bảng 3.1. Thông tin về dịch vụ .................................................................................................. 44
Bảng 3.2. Cập nhật các thông tin về dịch vụ ............................................................................ 44
Bảng 3.3. Các thông tin của đơn đặt hàng ................................................................................ 44
Bảng 3.4. Kiểm tra các thông tin của đơn đặt hàng ................................................................. 45
Bảng 3.5. Kiểm tra tình trạng của dịch vụ ................................................................................ 46
Bảng 3.6. Cập nhật các thông tin về đơn đặt hàng................................................................... 47

vi


MỞ ĐẦU
1. Đặt vấn đề
Các ngơn ngữ lập trình là công cụ để tạo ra các sản phẩm phần mềm. Mỗi
cơng cụ có điểm mạnh, điểm yếu nếu sử dụng công cụ không đúng cách, ta sẽ
không thể tạo ra một sản phẩm tốt. Vậy làm thế nào để sử dụng cơng cụ một cách
đúng cách. Đó chính là tư duy giải thuật lập trình. Tư duy về giải thuật là cách
chúng ta chia bài toán thành từng bước nhỏ, từng bước, và lắp ráp chúng thành
một sản phẩm đúng.
Khi xây dựng một hệ thống phần mềm luôn gặp phải các vấn đề cần giải
quyết, vấn đề có thể đơn giản, cũng có thể phức tạp, khó khăn. Để có thể giải quyết
vấn đề chúng ta cần tìm ra các lời giải thích hợp nhất như mục tiêu mong muốn
dựa trên khả năng cũng như hạn chế của hệ thống, trải nghiệm người dùng trong
tương lai sẽ như nào.
Đó là nguyên nhân ra đời của một thứ gọi là Design Patterns – Các Mẫu
Thiết Kế. Ta hầu hết đã nghe nói đến nó trong lĩnh vực xây dựng kiến trúc phần

mềm. Và giờ đây, ta nói tới các mẫu thiết kế trong lĩnh vực xây dựng giao diện
phần mềm. Mẫu thiết kế giao diện là những giải pháp để giải quyết những vấn đề
thường gặp trên giao diện và tương tác của người dùng phần mềm. Nó là những
bản mẫu, ta dựa vào đó xây dựng nên giao diện tương tác. Nó giúp ta có những
thiết kế mềm dẻo, dễ thay đổi.
Design pattern là lợi thế khi thiết kế giao diện. Thực tế cho thấy rằng khi
áp dụng các mẫu thiết kế vào hệ thống đã và sẽ đem lại phần mềm thương mại
chất lượng cao, tin cậy, dễ mở rộng, dễ tái sử dụng, phù hợp với yêu cầu người
dùng đang mong đợi. Ngoài tiết kiệm thời gian và cơng sức, chúng cịn cho khả
năng trải nghiệm người dùng thật dễ dàng thông qua giao diện và tương tác trên
hệ thống.
2. Tính cấp thiết của đề tài
Với mong muốn tìm hiểu và ứng dụng phương pháp Design pattern UI để
có thể xây dựng các ứng dụng hiệu quả hơn cho VNPT Lào Cai, học viên đã chọn
làm đồ án: “Áp dụng kỹ thuật thiết kế mẫu trong phát triển và kiểm thử phần
mềm hệ thống thương mại điện tử VNPT Lào Cai”.

1


3. Phạm vi nghiên cứu
Các kết quả của luận án đã bước đầu triển khai ứng dụng thử nghiệm trong
hệ thống kinh doanh của VNPT Lào Cai. Tuy nhiên với thời gian có hạn, luận văn
chắc cịn nhiều thiếu sót, rất mong nhận được các ý kiến đóng góp của các thầy cơ
giáo và bạn bè đồng nghiệp.
4. Mục đích của đề tài
Mục tiêu của nghiên cứu này là để tăng trải nghiệm người dùng về quy
trình thanh tốn thương mại điện tử bằng cách cung cấp tổng quan về các mẫu
thiết kế giao diện và tương tác có liên quan và hiệu suất của chúng.
Đây không chỉ là mục tiêu cá nhân của luận văn, mà còn là mục tiêu của

VNPT Lào Cai - công ty giúp tác giả thực hiện nghiên cứu.
Nhìn vào mục tiêu kỹ chi tiết hơn, có những khía cạnh chính sau đây: trải
nghiệm người dùng, quy trình thanh tốn thương mại điện tử và các mẫu thiết kế
giao diện và tương tác. Dưới đây, đầu tiên giới thiệu ngắn gọn từng khía cạnh
trong ba khía cạnh này.
5. Phương pháp nghiên cứu
Đề tài được thực hiện theo phương pháp nghiên cứu lý thuyết về các mẫu
thiết kế giao diện người dùng và tương tác, phương pháp xây dựng mẫu thiết kế.
Vận dụng kết quả nghiên cứu lý thuyết để áp dụng xây dựng các mẫu cho
phát triển và kiểm thử phần mềm hệ thống thương mại điện tử VNPT Lào Cai.
6. Bố cục của luận văn
Phần tiếp theo của luận văn gồm 3 chương với nội dung như sau
Chương 1: Giới thiệu phương pháp và các mẫu, trình bày khái niệm mẫu
thiết kế, đặc điểm các mẫu thiết kế giao diện người dùng và giới thiệu chi tiết một
số mẫu phổ biến.
Chương 2: Áp dụng mẫu thiết kế giao diện và tương tác trong phát triển và
kiểm thử phần mềm hệ thống thương mại điện tử VNPT Lào Cai.
Chương 3: Trình bày ứng dụng phương pháp phân tích thiết kế và một số
mẫu thiết kế vào bài toán Áp dụng kỹ thuật thiết kế mẫu trong phát triển và kiểm
thử phần mềm hệ thống thương mại điện tử VNPT Lào Cai

2


CHƯƠNG 1: MẪU THIẾT KẾ, CÁC MẪU, CHI TIẾT CÁC
MẪU THIẾT KẾ TRONG PHÁT TRIỂN PHẦN MỀM
Khái niệm cơ bản về mẫu thiết kế giao diện người dùng

1.1.


1.1.1. Khái niệm cơ bản
Các mẫu thiết kế giao diện người dùng (UI) là các thành phần có thể tái sử
dụng / lặp lại mà các nhà thiết kế sử dụng để giải quyết các vấn đề phổ biến trong
thiết kế giao diện người dùng.
Một số loại định nghĩa mẫu thiết kế
Các trang web và ứng dụng có giao diện thơng thường do các mẫu thiết kế
như điều hướng chung và thanh tab. Trong Thiết kế giao diện người dùng, ta có
thể sử dụng các mẫu thiết kế như một cách nhanh chóng để xây dựng giao diện
giải quyết vấn đề — ví dụ: mẫu thiết kế bộ chọn ngày để cho phép người dùng
chọn nhanh một ngày trong biểu mẫu. Vì vậy, các mẫu thiết kế giao diện người
dùng đóng vai trị là bản thiết kế cho phép các nhà thiết kế chọn các giao diện tốt
nhất và thường được sử dụng cho bối cảnh cụ thể mà người dùng phải đối mặt.
Mỗi mẫu thường chứa:
-

Khả năng sử dụng của người dùng -vấn đề liên quan.

-

Các bối cảnh / tình huống nơi mà vấn đề đó xảy ra.

-

Các nguyên tắc tham gia - ví dụ quản lý lỗi.

-

Các giải pháp đã được chứng minh cho các nhà thiết kế để thực hiện để
giải quyết cốt lõi của vấn đề.


-

Lý do tồn tại của mẫu thiết kế và cách nó có thể ảnh hưởng đến khả năng
sử dụng.

-

Hiển thị ứng dụng thực tế thành cơng của mẫu (ví dụ: ảnh chụp màn hình
và mô tả).

-

Một số mẫu bao gồm hướng dẫn chi tiết.

1.1.2. Các mẫu thiết kế giao diện người dùng phổ biến
Các mẫu thiết kế là giải pháp cho các vấn đề lặp lại. Nói cách khác, các mẫu
thiết kế giao diện người dùng là giải pháp cho các vấn đề giao diện người dùng
phổ biến. Dưới đây sẽ giới thiệu 10 mẫu thiết kế UI mà ta có thể sử dụng trong
các dự án. Trên thực tế, ta có thể đã sử dụng mà khơng biết.
Ta có thể quan tâm đến các mẫu thiết kế sau:
3


-

Breadcrumbs: Sử dụng các đường dẫn được liên kết để cung cấp điều hướng.
Hiển thị đường dẫn từ trang trước đến trang hiện tại trong hệ thống phân cấp.

-


Lazy Registration - Biểu mẫu có thể khiến người dùng khơng cần đăng ký.
Người dùng sử dụng mẫu đăng ký này để cho phép người dùng lấy mẫu
những gì trang web / ứng dụng cung cấp miễn phí hoặc tự làm quen với nó.
Sau đó, cho họ xem một mẫu đăng ký. Ví dụ: Amazon cho phép điều hướng
khơng hạn chế và tải vào giỏ hàng trước khi nhắc người dùng đăng ký tài
khoản.
-

Khi nội dung chỉ có thể truy cập được đối với người dùng đã
đăng ký hoặc người dùng phải tiếp tục nhập thông tin chi tiết,
hãy cung cấp cho họ biểu mẫu đăng ký đơn giản / tốn ít công
sức.

-

Giảm thiểu / Tránh các trường thông tin tùy chọn. Sử dụng mẫu
Điểm đánh dấu trường bắt buộc để hướng dẫn người dùng nhập
dữ liệu cần thiết.

-

Forgiving Format - Cho phép người dùng nhập dữ liệu ở nhiều định dạng
khác nhau (ví dụ: thành phố / thị trấn / làng hoặc mã zip).

-

Clear Primary Actions - Làm cho các nút nổi bật với màu sắc để người dùng
biết phải làm gì (ví dụ: “Gửi”). Để người dùng có thể phải quyết định hành
động nào được ưu tiên.


-

Progressive Disclosure - Chỉ hiển thị cho người dùng các tính năng có liên
quan đến nhiệm vụ hiện tại, một tính năng trên mỗi màn hình. Nếu chia nhỏ
nhu cầu đầu vào thành các phần, sẽ giảm tải nhận thức (ví dụ: “Hiển thị
thêm”).

-

Hover Controls (Điều khiển di chuột) - Ẩn thông tin không cần thiết trên các
trang chi tiết để cho phép người dùng tìm thấy thơng tin liên quan dễ dàng
hơn.

-

Steps Left (Các bước) - Các nhà thiết kế thường kết hợp điều này với một
mẫu thuật sĩ. Nó cho biết người dùng phải thực hiện bao nhiêu bước để hoàn
thành một tác vụ. Ta có thể dung trị chơi hóa (một mẫu thiết kế khuyến
khích) ở đây để tăng cường sự tương tác.

-

Subscription Plans (Gói đăng ký) - Cung cấp cho người dùng menu tùy chọn
(bao gồm các nút “Đăng ký”) để tham gia với mức giá nhất định.
4


-

Leaderboard (Bảng xếp hạng) - Người dùng có thể tăng mức độ tương tác

nếu sử dụng mẫu truyền thông xã hội này.

-

Dark Patterns (Các mẫu tối) - Một số nhà thiết kế sử dụng các mẫu này để
dẫn dắt hoặc lừa người dùng thực hiện các hành động nhất định, thường là
trong thương mại điện tử để họ chi tiêu nhiều hơn hoặc tiết lộ thông tin cá
nhân. Các mẫu tối có mức độ độc hại. Một số nhà thiết kế để mặc định một
ô chọn không tham gia được chọn để bảo mật thông tin khách hàng. Những
người khác chuyển các mặt hàng vào giỏ hàng. Để sử dụng các mơ hình tối
một cách có trách nhiệm, ta phải có đạo đức và có sự đồng cảm với người
dùng của mình. Các mơ hình tối có rủi ro vì sự khơng tin tưởng và phản hồi
của người dùng có thể phá hủy danh tiếng của thương hiệu trong một đêm.

Sau đây là chi Tiết các mẫu thiết kế phổ biến

Commented [MOU1]: Phải viết thành câu văn đầy đủ, không viết
cụt, sai cú pháp

1.2.

Mẫu Breadcrumbs
Breadcrumbs hay Breadcrumbs trail là một loại thẻ điều hướng với nhiều
đường link phân cấp khác nhau thường được đặt ở đầu trang. Dễ hiểu hơn,
Breadcrumbs là một đường dẫn Anchor text được phân cấp thường nằm ở đầu
trang.
Breadcrumbs giúp người dùng biết được họ đang ở đâu trên website.
Breadcrumbs cũng cho biết mức độ phân cấp của nội dung đang xem. Ngồi vị trí
thường gặp ở đầu trang, Breadcrumbs có thể nằm dưới banner chính, thanh menu
hoặc top headers.

1.2.1. Những Breadcrumbs điển hình :
Location Breadcrumbs hay còn gọi là Location-based breadcrumbs, hiển
thị cho người dùng biết vị trí hiện tại của họ trên website.

Hình 1.1. Ví dụ mẫu Breadcrumbs
Loại breadcrumb này thường được dùng và cũng là loại khuyên dùng cho
những website có cấu trúc site được chia theo nhiều tầng hoặc có số tầng lớn hơn
hặc bằng 2 (chuyên mục + bài viết). Đây được đánh giá là loại Breadcrumbs phổ
biến nhất hiện nay.
5


1.2. 2. Breadcrumbs theo thuộc tính
Breadcrumbs theo thuộc tính (Attribute breadcrumbs) có chức năng thể
hiện các thuộc tính của một page trong website.

Hình 1.2. Một loại Breadcrumbs theo thuộc tính
Loại breadcrumb này đặc biệt được ưa chuộng trong những trang web
thương mại điện tử có số lượng mẫu mã sản phẩm lớn, với nhiều các tiêu chí để
phân loại. Ví dụ như sản phẩm điện thoại di động, có thể được phân loại theo giá
thành, theo hãng sản xuất, theo hệ điều hành, hoặc theo những thuộc tính khác.
Như vậy, Breadcrumbs trong trường hợp này sẽ là các tiêu chí phân loại cho sản
phẩm, người dùng có thể biết được mình đang tìm hiểu tiêu chí nào.
1.2.3. Breadcrumbs theo đường dẫn Path Breadcrumbs
Breadcrumbs theo đường dẫn (Path Breadcrumbs hay còn gọi là Path-based
Breadcrumbs). Nó hiển thị cho người dùng các bước hoặc đường dẫn mà người
dùng đã đi qua. Loại Breadcrumbs này hiện nay ít cịn được sử dụng rộng rãi bởi
do bản chất của nó tương tự nút “Back”. Hơn nữa, người dùng cũng khó có thể
biết vị trí hiện tại của mình trong cấu trúc website.
Trong hình 1.3 là ví dụ về các liên kết Path Breadcrumbs dựa trên đường

dẫn hiển thị hai đường dẫn để điều hướng đến trang mục tiêu.

Hình 1.3. Ví dụ về các liên kết Path Breadcrumbs dựa trên đường dẫn hiển thị
hai đường dẫn để điều hướng đến trang mục tiêu.
1.3. Mẫu Hover Controls (Điều khiển chuột)
Khi giao diện người dùng có nhiều thành phần mà người dùng có thể thực
hiện các hành động, trang có thể trở nên lộn xộn và khó quét. Điều này đặc biệt
phổ biến trong phần quản trị của các ứng dụng Web, nơi người dùng có thể thay
6


đổi dữ liệu bảng. Một cách tốt để xử lý điều này là ẩn từng phần tử và hiển thị khi
người dùng di chuột qua khu vực đó.

Hình 1.4. Liên kết "Chỉnh sửa" được tiết lộ khi người dùng di chuột qua từng
phần của trang hồ sơ Facebook của họ.
Việc ẩn các điều khiển và hiển thị chúng khi di chuột làm xáo trộn đáng
kể giao diện người dùng mà khơng làm mất chức năng.

Hình 1.5. Ví dụ mẫu Home
Twitter hiển thị các liên kết “Trả lời” và “Yêu thích” khi người dùng di
chuột qua mỗi tweet.
1.4. Mẫu Steps Left
Mô hình này được thực hiện rộng rãi khi người dùng phải điền dữ liệu theo
nhiều bước. Mục đích của mẫu này là:
7


- Hướng dẫn người dùng,
- Giải thích phạm vi của quy trình bằng cách nêu rõ cần có bao nhiêu bước

để hồn thành quy trình,
- Hiển thị vị trí hiện tại của người dùng trong quy trình bằng cách đánh dấu
trực quan bước hiện tại.

Hình 1.6. Ví dụ mẫu các bước còn lại StatementStacker
StatementStacker hiển thị rõ ràng số bước và làm nổi bật bước hiện tại. Các
bước thường được hiển thị theo chiều ngang và được nối với nhau bằng các mũi
tên, hiển thị thứ tự các bước sẽ được thực hiện. Ngoài ra, mỗi bước thường được
đánh dấu bằng một số lượng lớn và mô tả rất ngắn gọn về những gì người dùng
nên làm trong bước đó. Điều quan trọng ở đây là tính nhất quán: chỉ báo tiến trình
phải ln xuất hiện ở cùng một vị trí trên các trang và hiển thị cho người dùng biết
họ đang ở đâu.
Mẫu này thường được kết hợp với mẫu "thuật sĩ" nổi tiếng để tạo ra một
quy trình gồm nhiều bước, chẳng hạn như đăng ký hoặc giỏ hàng.
Hình 1.7, mẫu Delicious có một chỉ báo tiến độ đẹp mắt xác định rõ mục
đích của từng bước. Nó cũng làm nổi bật bước hiện tại bằng cách hiển thị nó bằng
một màu khác.

8


Hình 1.7. Ví dụ mẫu các bước cịn lại Delicious
1.5. Subscription Plans (Mẫu gói đăng ký)
Hình thức này phù hợp nếu trang web cung cấp một sản phẩm hoặc dịch
vụ đi kèm với các gói khác nhau và yêu cầu thanh toán thường xuyên, thường là
thanh toán hàng tháng. Mỗi kế hoạch phải được mô tả và cung cấp các thông tin
sau:
- Tên của kế hoạch, chẳng hạn như "Cơ bản" hoặc "Chuyên nghiệp",
Giá của gói đăng ký và thời hạn của gói đăng ký,
- Danh sách các tính năng (gói rẻ nhất thường có ít tính năng nhất),

Nút đăng ký.

9


Hình 1.8.Mẫu Wufoo hiển thị rõ ràng các gói đăng ký của mình, giá cả và sự
khác biệt giữa chúng
Ln hiển thị các kế hoạch của bạn theo thứ tự. Các kế hoạch thường được
sắp xếp theo thứ tự từ đắt nhất đến rẻ nhất. Bạn có thể làm nổi bật gói mà bạn
muốn người dùng mua bằng cách sử dụng màu hoặc kích thước khác.

Hình 1.9. Mẫu Bảng đăng ký của Crazyegg thu hút sự chú ý đến gói "Cơ bản".
1.6. Required Field Marker (Điểm đánh dấu trường bắt buộc)
Làm cho giao diện người dùng rõ ràng là điều cần thiết. Điều này cũng áp
dụng nhiều cho các biểu mẫu Web. Một trong những cách tốt nhất để làm cho giao
diện của biểu mẫu Web trở nên rõ ràng là đánh dấu các trường bắt buộc. Mục đích
của những điểm đánh dấu này là để cảnh báo người dùng về thông tin họ sẽ cần
cung cấp. Bằng cách này, người dùng sẽ không cảm thấy họ phải điền vào tồn bộ
biểu mẫu để tránh nhìn thấy thơng báo lỗi.
10


Tốt nhất, ta nên xóa tất cả các trường tùy chọn và chỉ để người dùng nhập
thông tin cần thiết cho tương tác. Quy tắc ngón tay cái: biểu mẫu web càng đơn
giản và ngắn gọn thì trải nghiệm người dùng càng tốt. Một ý tưởng thú vị khác là
giúp người dùng có thể xóa tất cả các trường tùy chọn - bạn có thể tìm thêm về
cách triển khai nó trong thực tế (cũng như tập lệnh sẵn sàng sử dụng) trong bài
viết của Andy Clarke.

Hình 1.10. Haveamint.com đặt các điểm đánh dấu “Bắt buộc” bên cạnh các

nhãn trường trên biểu mẫu liên hệ của nó.
Có thể đặt các điểm đánh dấu trường bắt buộc ở một trong hai vị trí:
− Bên cạnh nhãn, cho phép người dùng quét biểu mẫu một cách nhanh chóng.
− Bên cạnh hoặc bên trong các trường đầu vào; nếu các trường có cùng chiều
rộng, người dùng sẽ có thể quét biểu mẫu một cách nhanh chóng.
Khi quyết định yêu cầu trường nào, hãy tính đến tổng số trường trong biểu
mẫu. Nếu biểu mẫu phức tạp và hầu hết các trường của nó là bắt buộc, thì người
dùng có thể sẽ thấy nó là sự lộn xộn không cần thiết.
1.7. Account Registration (Đăng ký tài khoản)
Định nghĩa của mẫu Đăng ký tài khoản (Account Registration) thay đổi tùy
theo từng nơi, nhưng chúng ta có thể nói rằng nó giải quyết được ba vấn đề có liên
quan:
− Một số nội dung nhất định chỉ người dùng đã đăng ký mới có thể truy cập
được.
− Người dùng cần nhập lại dữ liệu cá nhân của họ thường xuyên.
− Người dùng cần có khả năng truy cập nội dung được cá nhân hóa trên hệ
thống.

11


Giải pháp cho phép người dùng truy cập nội dung được bảo vệ là yêu cầu
họ đăng ký một tài khoản trên hệ thống và lưu trữ dữ liệu cá nhân của họ, để sử
dụng lại sau này. Những lợi ích là rất nhiều. Ví dụ: người dùng có thể được hiển
thị các đề nghị được cá nhân hóa, như đã thấy trên Amazon. Người dùng cũng có
thể thực hiện các tác vụ hiệu quả hơn nếu hệ thống sử dụng lại thơng tin được gửi
trong q trình đăng ký. Lưu trữ chi tiết vận chuyển chỉ là một ví dụ. Bởi vì điền
vào biểu mẫu khơng phải là một nhiệm vụ u thích của người dùng, chỉ u cầu
thơng tin cần thiết là quan trọng. Một điều quan trọng khác là làm nổi bật rõ ràng
tất cả những lợi ích mà người dùng sẽ nhận được, để họ trở nên sẵn sàng đăng ký

hơn.

Hình 1.11.mẫu Vimeo có hình thức đăng ký đơn giản nhưng hấp dẫn.

12


Hình 1.12. Tumblr chỉ u cầu thơng tin tối thiểu của người dùng để đăng ký.
1.8. Clear Primary Actions
Các biểu mẫu Web đơn giản thường chỉ cho phép một hành động (“Gửi”,
“Lưu” hoặc “Gửi”). Người dùng biết chính xác hành động cuối cùng của họ khi
điền vào biểu mẫu, bởi vì họ chỉ có một lựa chọn. Tuy nhiên, người dùng đơi khi
có thể phải đối mặt với một số tùy chọn và phải phân biệt giữa hành động chính
và hành động phụ.

Hình 1.13. Clearleft phân biệt giữa các hành động chính và phụ bằng màu sắc.
Hành động chính và phụ là gì? Các hành động chính dẫn đến việc hồn
thành một biểu mẫu; ví dụ: nhấp vào “Lưu” hoặc “Gửi”. Các hành động phụ
thường khơng dẫn đến việc hồn thành biểu mẫu; chúng bao gồm việc nhấp vào
“Hủy bỏ”. Tuy nhiên, vẫn có những ngoại lệ. Hành động chính và phụ khi bạn
nhìn thấy tất cả các nút “Lưu”, “Lưu và tiếp tục” và “Xuất bản” liên tiếp? Khi
13


người dùng có một số tùy chọn, việc làm nổi bật các hành động chính và khơng
nhấn mạnh các hành động phụ là cách tốt.
Điều này có thể được thực hiện theo hai cách:
− Bằng cách cho các hành động chính và phụ có màu sắc khác nhau; ví dụ:
cho các hành động chính có màu sắc rực rỡ và các hành động phụ có màu
xám.

− Bằng cách tạo kiểu hành động chính dưới dạng nút và hành động phụ dưới
dạng liên kết.

Hình 1.14. Flickr làm nổi bật hành động chính bằng cách đặt hành động phụ
vào một nhãn nhỏ bên dưới.
Cả hai cách đều phân biệt rõ ràng giữa hành động chính và hành động phụ,
giúp người dùng khơng phải suy nghĩ về việc chọn tùy chọn nào để hồn thành
nhiệm vụ của họ.
1.9 Forgiving Format
Các chức năng tìm kiếm có thể cung cấp cho người dùng nhiều tùy chọn
khác nhau và đơi khi phức tạp. Ví dụ: khi tìm kiếm bản đồ thời tiết và đường phố,
người dùng có thể sử dụng các tiêu chí như tên thành phố, tên đường phố và mã
zip. Để cho người dùng biết rằng họ có thể sử dụng một số tiêu chí, các giao diện
có xu hướng hiển thị nhiều tùy chọn và trở nên quá phức tạp. Thay vì thêm sự lộn
xộn vào giao diện, hãy sử dụng mẫu định dạng tha thứ, cho phép người dùng nhập
dữ liệu ở nhiều định dạng khác nhau và để hệ thống phân tích dữ liệu.

14


Hình 1.15. Tìm kiếm thời tiết của Yahoo cho phép người dùng tìm kiếm theo
thành phố hoặc mã zip.
Để chuyển tải các định dạng nào được hỗ trợ, hãy cung cấp cho người dùng
gợi ý về cách tìm kiếm, cho dù bằng cách liệt kê tất cả các định dạng có sẵn, như
trong ví dụ trên hay bằng cách cung cấp liên kết đến trang trợ giúp, như trong ví
dụ bên dưới.

Hình 1.16. Google Maps cho phép người dùng tìm kiếm theo thành phố, đường
phố, mã zip và thậm chí cả giá trị vĩ độ và kinh độ.
Mẫu Forgiving Format đơn giản hóa đáng kể giao diện người dùng. Tuy

nhiên, nó có thể u cầu rất nhiều cơng việc từ các nhà phát triển back-end. Người
dùng càng có nhiều tùy chọn, việc phân tích cú pháp càng trở nên khó khăn hơn.
1.10 Mẫu Progressive Disclosure
Mẫu này được sử dụng để chỉ hiển thị thơng tin hoặc tính năng có liên quan
đến hoạt động hiện tại của người dùng và để trì hỗn thơng tin khác cho đến khi
được u cầu. Bằng cách ẩn các tính năng phức tạp hơn hoặc không thường xuyên
được sử dụng, bạn làm lộn xộn giao diện người dùng; bằng cách chỉ tiết lộ chúng
khi cần thiết, bạn sẽ giúp người dùng thực hiện một quy trình phức tạp gồm nhiều
bước trên một trang.
Mục đích là chỉ hiển thị thông tin cần thiết trong bước đầu tiên và sau đó
mời người dùng thực hiện bước tiếp theo. Khi người dùng hoàn thành một bước,
bạn sẽ tiết lộ thông tin trong bước tiếp theo, giữ tất cả các bước trước đó hiển
thị. Bằng cách hiển thị các bước trước đó, bạn cho phép người dùng thay đổi
những gì họ đã nhập. Và dữ liệu họ nhập vào trong bước hiện tại có thể ảnh hưởng
đến hành vi của bước tiếp theo (Hình 1.17).
15


Hình 1.17. Ví dụ mẫu Progressive Disclosure
Digg sử dụng tiết lộ tiến bộ trong phần bình luận của nó. Người dùng có
thể đọc nhận xét và bằng cách nhấp vào liên kết "Trả lời" (Hình 1.18), xem tất cả
các câu trả lời cho nhận xét đó. Liên kết cũng cho bạn biết có bao nhiêu câu trả
lời sẽ được hiển thị.

Hình 1.18. Người dùng có thể đọc nhận xét khi nhấp vào liên kết "Trả lời"
Khi các câu trả lời được tiết lộ, người dùng khơng chỉ có thể đọc chúng mà
cịn có thể trả lời và xếp hạng chúng. Các nhận xét dưới ngưỡng xem được thu
gọn theo mặc định và được hiển thị bằng cách nhấp vào “Hiển thị”.
Ví dụ về tiết lộ tiến bộ có ở khắp mọi nơi. Liên kết đơn giản “Hiển thị
thêm” tiết lộ thêm thơng tin là một trong những hình thức đơn giản nhất của việc

tiết lộ tiến bộ. Nhưng nó có thể được sử dụng cho các trường hợp phức tạp hơn,
chẳng hạn như điền vào biểu mẫu Web. Hãy thử mở tài khoản trên Picnik (mà
chúng tôi đã đề cập trong mẫu đăng ký lười biếng) để xem cách tiết lộ thơng tin
liên tục có thể được sử dụng ở cấp độ phức tạp hơn như thế nào.

16