Ứ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

Tổng quan 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; mẫu thiết kế interface và interaction áp dụng trong phát triển và kiểm thử phần mềm; ứ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.

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

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

Chữ ký của GVHD

C ỘNG HÒA XÃ HỘI CHỦ NGHĨA VIỆT NAM

Độc lập – Tự do – Hạnh phúc

Đề 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

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:

- 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

- 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

i

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

ii

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 toá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 yê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 yê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

iii

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

iv

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

v

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 hoà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 toán 57

Hình 3.17 Trang thanh toá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

vi

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

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”

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 toá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 toá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

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

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

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:

- 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

- 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

- 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

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 Ngoà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

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

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

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

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

đổ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

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

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à:

- 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

để hoà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

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 luôn 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ì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ý

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ự

Luôn 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

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 toàn bộ

biểu mẫu để tránh nhìn thấy thông báo lỗi

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

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

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 quá 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ụ yêu thích của người dùng, ch ỉ yê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.12 Tumblr ch ỉ yê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 hoà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 hoà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

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

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 để hoà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

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

Để 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

Mẫu Forgiving Format đơn giản hóa đáng kể giao diện người dùng Tuy nhiên, nó có thể yê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ì hoãn thông tin khác cho đến khi được yê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)

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

Hinh 1.19 T ính năng tiết lộ liên tục của YouTube

YouTube (hinhd 1.19) sử dụng tính năng tiết lộ liên tục khi người dùng tùy chỉnh giao diện của trình phát video Khi người dùng nhấp vào biểu tượng, các tính năng tùy chỉnh sẽ mở ra bên dưới

1.11 Lazy Registration (Đăng ký lười biếng)

Để đánh giá đầy đủ vấn đề đăng ký, ta nên xem xét một bức xúc đã dẫn đến

ý kiến rằng các hình thức đăng ký phải chết Điều này chắc chắn không có nghĩa

là chúng nên được bỏ qua hoàn toàn mà đúng hơn là chúng chỉ nên là một phần trong quá trình giới thiệu người dùng đến một hệ thống và sẽ đến muộn trong quá trình này Cách tiếp cận như vậy được gọi là “đăng ký lười biếng” và liên quan đến kiểu đăng ký tài khoản

Khi nào bạn thực sự sử dụng đăng ký lười biếng? Mặc dù có vẻ như đăng

ký lười biếng có thể được sử dụng mọi lúc, nhưng một số trường hợp là lý tưởng:

− Khi người dùng được phép dùng thử sản phẩm hoặc dịch vụ trang web

của bạn trước khi đưa ra quyết định (tuy nhiên, điều này không phải trang web nào cũng cho phép)

− Khi người dùng làm quen với hệ thống của bạn trước khi đăng ký là điều quan trọng, đây có thể là một bước quan trọng trong quá trình họ quyết định có đăng ký hay không

khi đăng ký

Mẫu này (hình 1.20) nhằm cho phép người dùng sử dụng hệ thống của bạn

và thực hiện hành động trước khi đăng ký Nếu hài lòng với dịch vụ của bạn cho đến nay, người dùng sẽ coi hành động đăng ký nhanh chóng này chỉ là một bước

nhỏ khác trong toàn bộ quy trình và không phải là nghĩa vụ Giỏ hàng là một ví

dụ điển hình cho mô hình này: người dùng có thể duyệt và chọn sản phẩm và chỉ phải đăng ký khi họ tiến hành thanh toán

Hình 1.21 M ẫu đăng ký của Picnik

Picnik là một ví dụ điển hình khác về việc lười đăng ký Người dùng có thể

sử dụng tất cả các chức năng của dịch vụ để chỉnh sửa ảnh trực tuyến Họ chỉ được yêu cầu đăng ký trước khi lưu công việc của họ

1.12 Calendar Picker (m ẫu lịch)

Sử dụng khi người dùng muốn dễ dàng chọn ngày hoặc phạm vi ngày để

gửi, theo dõi, sắp xếp hoặc lọc dữ liệu

Khi kích hoạt, một hộp có lịch tháng được hiển thị trên trang hiện tại, nhắc người dùng chọn một ngày trong hộp Thông thường nhất là chỉ hiển thị một tháng, nhưng một số giao diện hiển thị lịch 3 tháng bên cạnh nhau để giảm bớt gánh nặng

nhấp chuột của người dùng và cung cấp cái nhìn tổng quan hơn

Bộ chọn lịch là một giao diện đồ họa quen thuộc mà người dùng thường hiểu Nó giúp người dùng dễ dàng chọn ngày hoặc phạm vi ngày để gửi thông tin

hoặc lọc dữ liệu

1.13 Setup Wizard

Sử dụng khi người dùng cần thực hiện một nhiệm vụ hoặc một mục tiêu yêu cầu nhiều hơn một bước Khi người dùng cần thực hiện một tác vụ phức tạp bao gồm một số tác vụ phụ đáng tin cậy

Bằng cách chia nhỏ một nhiệm vụ phức tạp thành một chuỗi các phần nhỏ,

bạn có thể đơn giản hóa công việc một cách hiệu quả Mỗi phần thể hiện một không gian tinh thần riêng biệt, dễ giải quyết một mình hơn là một toàn bộ Trái ngược với mẫu Các bước còn lại, các bước cần thiết để thực hiện một mục tiêu có thể khác nhau tùy thuộc vào thông tin được nhập trong các giai đoạn trước đó

Khi người dùng buộc phải tuân theo một tập hợp các bước được xác định trước, họ ít có khả năng bỏ lỡ các khía cạnh quan trọng của quy trình và do đó sẽ

ít mắc lỗi hơn

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

VNPT Lào Cai là một tập hợp các hoạt động tổ chức trong đó Phòng Giải pháp 2 - Trung tâm CNTT VNPT Lào Cai có trách nhiệm xây dựng và phát triển Website hệ thống thương mại điện tử VNPT Lào Cai

Những câu hỏi được đặt ra ở đây là:

1 Nhân sự: Phòng Giải pháp 2 - Trung tâm CNTT VNPT Lào Cai

2 Thời gian: bắt đầu từ 10/5/ 2015 đến 30/10/2015

3 Phương pháp: Thiết kế và xây dựng hệ thống dựa trên hệ thống Server

đã có sẵn của VNPT Tỉnh

4 Công cụ: Sử dụng Design pattern MVC C#

5 Chi phí: Chi phí chủ yếu là thời gian và nhân lực của Trung Tâm CNTT VNPT Lào Cai, lợi nhuận là quảng bá thương hiệu VNPT tại Tỉnh Lào Cai đến khách hàng, từ đó khách hàng sẽ đăng ký sử dụng dịch vụ từ khi xây dựng hệ thống đến hiện tại

6 Mục tiêu: Để tiếp cận với khách hàng của Tỉnh Lào Cai muốn sử dụng dịch vụ của VNPT Lào Cai

Có 4 thao tác là nền tảng của hầu hết các quy trình phát triển hệ thống:

1 Đặc tả: Định nghĩa được các chức năng, điều kiện hoạt động của phần mềm

2 Phát triển phần mềm: Là quá trình xây dựng các đặc tả

3 Đánh giá phần mềm: Phầm mềm phải được đánh giá để chắc chắn rằng

ít nhất có thể thực hiện những gì mà tài liệu đặc tả yêu cầu

4 Tiến hóa phần mềm: Đây là quá trình hoàn thiện các chức năng cũng như giao diện để ngày càng hoàn thiện phần mềm cũng như các yêu cầu đưa ra từ phía khách hàng

Áp dụng linh hoạt các mô hình nghiên cứu cho quá trình phát tri ển website

h ệ thống thương mại điện tử VNPT Lào Cai

- Phân tích và xác định yêu cầu cụ thể đối với VNPT Lào Cai

- Thiết kế hệ thống: Thiết kế giao diện, lập trình chức năng, biên tập nội dung

- Cài đặt và kiểm thử đơn vị

- Tích hợp và kiểm thử hệ thống

- Vận hành và bảo trì

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

2.1 Yêu c ầu chung mẫu thiết kế

2.1.1 Kh ả năng sử dụng và trải nghiệm người dùng

Về bản chất, trải nghiệm người dùng liên quan đến việc nâng cao tính dễ

sử dụng và trải nghiệm của một sản phẩm nhất định Điều tương tự cũng đúng đối với khả năng sử dụng, tuy nhiên, trải nghiệm người dùng cũng thiên về cung cấp cho người dùng trải nghiệm thú vị Trong thực tế, khả năng sử dụng có một số lượng lớn các định nghĩa ([1], [2] và [3]) Tuy nhiên, hầu hết chúng đều liên quan đến nhau và chứa đựng phần lớn các khía cạnh giống nhau Trong ISO 9241-11 (2008) [1], ISO định nghĩa khả năng sử dụng như sau:

"Mức độ mà một sản phẩm có thể được sử dụng bởi những người dùng cụ

thể để đạt được các mục tiêu cụ thể với hiệu lực, hiệu quả và sự hài lòng trong

một bối cảnh sử dụng cụ thể."

Các định nghĩa về khả năng sử dụng khác nêu rõ rằng sản phẩm “phải dễ

học (và dễ nhớ)” Điều này có thể liên quan đến hiệu lực và hiệu quả của việc đạt được các mục tiêu đã định [4] Người ta cũng thường tuyên bố rằng sản phẩm phải hấp dẫn [4], dễ sử dụng [2] hoặc khơi gợi cảm xúc tích cực của người dùng [3] Định nghĩa ISO về khả năng sử dụng được trích dẫn ở trên cung cấp một bản tóm tắt tốt về tất cả các khía cạnh này

Mặc dù định nghĩa khả năng sử dụng được đưa ra ở trên cũng đề cập đến

sự hài lòng (giống như các định nghĩa tương tự được đề cập ở trên), định nghĩa về

trải nghiệm người dùng chuyển trọng tâm nhiều hơn sang khía cạnh này ISO 9241-210 (2010) [5] mới hơn định nghĩa trải nghiệm người dùng là: “Nhận thức

và phản ứng của một người là kết quả của việc sử dụng hoặc dự kiến sử dụng một

sản phẩm, hệ thống hoặc dịch vụ.”

Bản thân khả năng sử dụng cũng rất quan trọng đối với thanh toán thương

mại điện tử Điều này được chứng minh qua nghiên cứu mà Jakob Nielsen, một nhà nghiên cứu quan trọng trong lĩnh vực khả năng sử dụng, đã thực hiện về chủ

đề này ([14]) Trong nghiên cứu này, Nielsen đã đánh giá một số trang web thương mại điện tử bằng cách cho điểm từng trang dựa trên các nguyên tắc về khả năng

sử dụng của mình Ông nhận thấy rằng (tại thời điểm đó) Amazon.com đã đạt 72%

về các nguyên tắc của ông; 9 trang thương mại điện tử có doanh thu cao khác đạt

51%; 10 trang web có doanh thu trung bình đạt 37%, cho thấy mối tương quan thuận giữa thành công (dựa trên doanh thu) và khả năng sử dụng Một trích dẫn từ anh ấy thậm chí còn nói rằng “cải thiện khả năng sử dụng lên 50% thường làm tăng doanh số bán hàng lên 400%” Những nguồn khác cũng chứng minh rằng khả năng sử dụng có thể có tác động mạnh mẽ đến chuyển đổi và ý định mua hàng, xem ví dụ: [15]

Đề tài này cố gắng xem xét tất cả khả năng sử dụng và trải nghiệm người dùng

2.1.2 Quy trình thanh toán thương mại điện tử

Quy trình thanh toán là một khía cạnh quan trọng của các trang web thương

mại điện tử Nhiệm vụ của họ là cho phép khách hàng thực sự đặt hàng các sản phẩm họ đã chọn Hiệu suất của các quy trình thanh toán này liên quan trực tiếp đến doanh thu cho các trang web đó Họ càng hoạt động tốt, càng nhiều khách truy cập sẽ quản lý để hoàn thành quá trình thanh toán từ đầu đến cuối Quá trình này bao gồm tất cả các bước từ khi khách hàng nhấp vào “Thêm vào giỏ hàng” cho đến khi khách hàng đã đặt mua sản phẩm

Phần trăm số người đạt được mục tiêu này, so với số người đã bắt đầu thanh toán, được gọi là phần trăm chuyển đổi thanh toán Nâng cao khả năng sử dụng làm cho quá trình dễ dàng hơn và do đó có thể tăng đáng kể tỷ lệ phần trăm này, cũng như sự hài lòng của người dùng và sau đó là lòng trung thành với thương

hiệu Cũng cần lưu ý rằng sự thuyết phục có thể ảnh hưởng tích cực đến những khía cạnh này

2.1.3 M ục tiêu đề xuất các mẫu thiết kế giao diện và tương tác

Mục tiêu của đề xuất các mẫu thiết kế giao diện và tương tác này là xác định các mẫu thiết kế giao diện và tương tác có thể nâng cao khả năng sử dụng khi thanh toán thương mại điện tử của khách hàng mới Các mẫu thiết kế như vậy tương tự như các mẫu thiết kế phần mềm, mặc dù trọng tâm là khác nhau Các

mẫu phần mềm mô tả các giải pháp cho các thách thức thiết kế lặp lại trong một bối cảnh nhất định Tương tự với các mẫu thiết kế giao diện và tương tác này Các

mẫu này giống như các khối xây dựng cho giao diện người dùng Chúng giải quyết các khía cạnh như cấu trúc tương tác (chẳng hạn như địa chỉ giao hàng hoặc thanh toán, trên mỗi trang so với một trang có nhiều phần), vị trí phần tử và kiểu văn bản

Các mẫu giao diện tập trung vào các yếu tố tĩnh hơn và các mẫu tương tác

tập trung nhiều hơn vào tương tác Các tài liệu như [6] và [7] giải thích rằng các nguyên tắc thường mang tính quy định và ngắn gọn hơn (ví dụ: "tắt chức năng dán

trong trường xác nhận email"), trong khi các mẫu có thể liên quan đến nhau Cần nhìn thực dụng và rộng hơn về các mẫu được thực hiện ở đây liên quan đến sự trùng lặp một phần giữa các mẫu thiết kế và các hướng dẫn cụ thể hơn Mặt khác

là các mẫu thiết kế và các nguyên tắc thiết kế trừu tượng nghiêng về hướng dẫn

Bộ sưu tập các mẫu thiết kế giao diện và tương tác cũng rất phong phú như trong [9], [10], [11], [12] và [13])

Do đó, mục tiêu của nghiên cứu này là: Phân biệt các mẫu mới được điều

chỉnh để nâng cao trải nghiệm người dùng về quy trình thanh toán

2.2 Các m ẫu thiết kế tương tác và giao diện

2.2.1 Đánh giá Các mẫu thiết kế tương tác và giao diện

Xây dựng Các mẫu thiết kế tương tác và giao diện là cần thiết để cho phép đánh giá thực tế Tuy nhiên, trong phạm vi đề tài nghiên cứu này là giới hạn về thời gian, số lượng nguyên mẫu phải hiệu quả nhất có thể Các số lượng nguyên

mẫu không chỉ ảnh hưởng đến thời gian và nỗ lực cần thiết để xây dựng chúng,

mà còn có thể tác động đến thời gian liên quan đến việc thực hiện đánh giá người dùng và xử lý kết quả Số lượng mẫu thấp hơn ảnh hưởng đến tất cả các khía cạnh

thời gian nói trên theo một cách tích cực Trong đó, xây dựng chỉ một mẫu sẽ hiệu quả nhất có thể, miễn là nó cho phép tất cả các mẫu liệt kê ở phần trình bày phía trên để được đánh giá Tuy nhiên, bằng cách nhìn vào các mẫu, người ta có thể nhận ra rằng một số các mẫu không thể được kết hợp và đặc biệt là các mẫu thay

thế cho một số mẫu không thể được kết hợp trong cùng một mẫu Rõ ràng nhất là

mô hình sử dụng càng ít trang càng tốt: sử dụng một trang hoặc chỉ sử dụng một vài trang Khía cạnh này được thể hiện qua thanh toán của một trang so với nhiều trang

Kết luận vấn đề cho chúng ta thấy rằng Các mẫu thiết kế tương tác và giao

diện là một lựa chọn có lợi cho luận văn này và mỗi nguyên mẫu sẽ kết hợp một trong hai cấu trúc trang này Hai mẫu được xây dựng cho luận văn này cho phép tất cả các mẫu đã nói ở trên được đánh giá tùy theo mức độ khác nhau

2.2.2 Danh sách m ẫu thiết kế tương tác và giao diện

Bảng dưới đây cho thấy các mẫu được phân chia giữa hai mẫu Bảng này cũng bao gồm các tác động cho sự phân chia cụ thể giữa các mẫu Trong một số trường hợp thời gian các ràng buộc đã ngăn cản việc tạo ra hai phiên bản, trong

những trường hợp như vậy cả hai mẫu đều kết hợp cùng một mô hình và được để

trống Hơn nữa, trong một số trường hợp không có lý do thuyết phục cho việc đặt

mẫu trong một mẫu cụ thể, hành động cũng bị bỏ trống Nó cần lưu ý rằng nhìn

chung hầu hết các lựa chọn đều bắt nguồn từ việc có một trang so với việc có nhiều trang

B ảng 2.1 Danh sách các mẫu

Mẫu Giao diện Các m ẫu thiết

k ế tương tác

Áp d ụng VNPT Lào Cai

Quản lý danh mục

dịch vụ Các Tab dịch vụ

Link liên kết các loại dịch vụ Có Quản lý dịch vụ

Các ô gồm ảnh, tiêu đề, mô tả, tag dịch vụ trên trang

di chuyển chuột, kéo thanh cuộn

click vào các tab, nhâp thông tin liên hệ, chọn hình thức thanh toán

Có

Quản lý user

Form giao diện các ô textbox thông tin người dùng : tài khoản, mật khẩu, email,

Link đến các trường quản trị Có

Báo cáo thống kê

Gồm thông tin về đơn đặt hang, ngày tháng đặt hàng, tên dịch vụ, tên khách hang, địa chỉ

Tìm kiếm, xem Có

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

Sau khi hình dung các bước (hoặc khung) cho một tương tác cụ thể Luận văn đã lập một danh sách các phần đã áp dụng :

a) Location Breadcrumbs hiển thị cho người dùng biết vị trí dịch vụ

hiện tại đang vào của khách hàng trên hệ thống (xem phần 1.2)

Vấn đề : Khách hàng cần quay lại danh mục dịch vụ hoặc về trang chủ

Gi ải pháp : được 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 (danh mục dịch vụ + dịch

vụ)

b) Date & time Picker : Bộ chọn ngày tháng

V ấn đề : Khách hàng cần chọn ngày trên trang

Gi ải pháp : Chọn ngày là một trong những công việc phổ biến nhất mà

người dùng có thể bắt gặp (xem phần 1.12)

Tùy thuộc vào ngữ cảnh, VNPT Lào Cai có một số tùy chọn để cho phép khách hàng chọn ngày Khách hàng có thể sử dụng một cuộn ngày cho hầu hết

mọi lựa chọn ngày

Nếu ngày trong tuần hoặc tháng có liên quan đến khách hàng thì việc sử

dụng lịch có thể giúp khách hàng hình dung lịch tốt hơn Sử dụng lịch giúp đánh

dấu những ngày quan trọng đối với khách hàng

Sử dụng một phím số để chọn ngày nếu việc nhập có ý nghĩa hơn Xác thực giá trị đang được nhập và chỉ cho phép định dạng chính xác bằng cách tắt các khóa không phù hợp với định dạng ngày

c) Good default : Mặc định tốt

V ấn đề : Khách hàng muốn hoàn thành các hành động một cách nhanh

chóng

Gi ải pháp : Cung cấp giá trị mặc định tốt là chìa khóa để có tỷ lệ chuyển

đổi cao Nếu khách hàng cần nhập dữ liệu, VNPT Lào Cai cung cấp giá trị mặc định thông minh thay vì để trống các trường hoặc chỉ chọn giá trị khả dụng đầu tiên Giá trị mặc định có thể có tác động lớn đến việc hoàn thành biểu mẫu Sử

dụng điều này khi ta có thể phỏng đoán đủ điều kiện về những gì khách hàng có thể chọn Sử dụng dữ liệu có sẵn, như cài đặt vị trí, ngôn ngữ, ngày và giờ hiện tại

mà không cần hỏi người dùng Theo ngữ cảnh, lấy các giá trị mặc định tốt theo lẽ thường