Ứ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

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ệ

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

Giảng viên hướng dẫn: PGS.TS Huỳ nh Quy t Th ng ế ắ

HÀ NỘI, 2020

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

Giả ng viên hư ớ ng dẫn: PGS.TS Huỳ nh Quy t Th ng ế ắ

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

Độ ậ c l p – Tự – H do ạ 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ế ẫu trong phát tri n và m ể

ki ể m thử ần mề ph 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ấ rúc luận văn u t

- 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

T CHỦ Ị CH H I ĐỒNG Ộ

i

MỤC LỤC

MỤC LỤ C i

DANH MỤC HÌNH VẼ iv

DANH MỤC BẢNG vi

M Ở ĐẦ 1U 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

Bảng 2.1 Danh sách các mẫu 25Bảng 3.1 Thông tin về ị d ch vụ 44Bảng 3.2 Cập nh t các thông tin về ịậ d ch vụ 44Bả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ụ 46Bảng 3.6 Cập nh t các thông tin về đơn đặt hàng 47ậ

M Ở ĐẦU

1 Đặ t v n đ ấ ề

một sản phẩm đúng

tương s lai ẽ như nào

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ả

h ệ thống

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

3 Phạm vi nghiên cứu

giáo và bạn bè đồng nghiệp

trong ba khía cạnh này

5 Phương pháp nghiên cứu

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

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ế

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

giải quyết cốt lõi của vấn đề

s dử ụng

và mô tả)

- Breadcrumbs: Sử ụ d ng các đường d n đượẫ c liên k t để cung cấp đi u hưế ề ớng

kho n.ả

s c ứ

- Giảm thiểu / Tránh các trường thông tin tùy chọn Sử dụng mẫu

dữ liệu cần thiết

động nào được ưu tiên

thêm”)

hơn

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

- Subscription Plans (Gói đăng ký) - Cung cấp cho người dùng menu tùy chọn

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

trang

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

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ể

Hình 1.2 Một loại Breadcrumbs theo thuộc tính

phẩm, người dùng có thể biết được mình đang tìm hiểu tiêu chí nào

Hình 1.3 Ví dụ ề v các liên kết Path Breadcrumbs dựa trên đườn g dẫn hiển thị

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

Khi giao diện người dùng có nhiều thành phần mà người dùng có thể thực

đổ ữ ệ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ọ

Hình 1.5 Ví dụ ẫ m u Home

chuột qua mỗi tweet

Hình 1.6 Ví dụ ẫ m u các bước còn lại StatementStacker

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 ổ ế ể

một màu khác

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

sau:

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

khác biệt giữa chúng

Hình 1.9 Mẫu Bảng đăng ký của Crazyegg thu hút sự chú ý đến gói "Cơ bản"

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

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 ờ

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ó ệ ủ

1.7 Account Registration (Đăng ký tài khoản)

quan:

được

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

Hình 1.11.mẫu Vimeo có hình thức đăng ký đơn gi n nhưng h ả ấp dẫ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

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

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

− 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

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 ỏ

1.9 Forgiving Format

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

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

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 độ ị

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

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

bước trên một trang

Hình 1.17 Ví dụ mẫu Progressive Disclosure

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ả

l s ời ẽ đượ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"

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

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

− 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

định có đăng ký hay không

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ý

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

1.12 Calendar Picker (mẫu lịch)

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ấp chuột của người dùng và cung cấp cái nhìn tổng quan hơn

Hình 1.22 Mẫu Calendar Picker

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

Hình 1.23 Mẫu Setup Wizard

í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

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

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

dung

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ế

đượ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

51%; 10 trang web có doanh thu trung bình đạt 37%, cho th y mấ ối tương quan

xem ví dụ: [15]

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

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

bản

trong trường xác nhận email"), trong khi các mẫu có thể liên quan đến nhau Cần

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 ẫ ụ ể ặ

[9], [10], [11], [12] và [13])

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

trang

2.2.2 Danh sách mẫu thiết kế tương tác và giao diệ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

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

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ỉ

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

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

Hình 2.1 Mẫu Location Breadcrumbs áp dụng cho VNPT

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

v ) ụ

Hình 2.2 Mẫu Date & time Picker áp dụng cho VNPT

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)

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

Hình 2.3 Mẫu Good default áp dụng cho VNPT

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

thường