Báo Cáo Cuối Kỳ Môn Học Thiết Kế Giao Diện Người Dùng.pdf

Với sự phát triển mạnh mẽ của những trang nghe nhạc trực tuyến như Spotify hay Apple Music, người dùng chỉ cần vài cú click chuột chưa tới vài giây là đã có thể thưởng thức được những bả

TỔNG LIÊN ĐOÀN LAO ĐỘNG VIỆT NAM

TRƯỜNG ĐẠI HỌC TÔN ĐỨC THẮNG

KHOA CÔNG NGHỆ THÔNG TIN

BÁO CÁO CUỐI KỲ

TỔNG LIÊN ĐOÀN LAO ĐỘNG VIỆT NAM

TRƯỜNG ĐẠI HỌC TÔN ĐỨC THẮNG

KHOA CÔNG NGHỆ THÔNG TIN

BÁO CÁO CUỐI KỲ

MÔN HỌC THIẾT KẾ GIAO DIỆN

LỜI CẢM ƠN

Để có thể hoàn thành được bài báo cáo này, em xin gửi lời cảm ơn chân thành đến thầy Dzoãn Xuân Thanh - giảng viên đã đồng hành cùng em trong môn học Thiết kế

Trong suốt quá trình làm bài báo cáo thì không thể tránh khỏi những thiếu sót, em rất mong nhận được những ý kiến đóng góp của các thầy cô để rút kinh nghiệm và hoàn thiện hơn ở những bài báo cáo sau

Em xin chân thành cảm ơn ạ!

MỤC LỤC

LỜI CẢM ƠN i

MỤC LỤC 1

DANH MỤC BẢNG BIỂU HÌNH VẼ 3

DANH MỤC HÌNH 3

CHƯƠNG 1 – GIỚI THIỆU CHUNG 4

1.1 Lí do chọn đề tài 4

1.2 Tổng quan hệ thống 5

CHƯƠNG 2 – UNDERSTAND THE CURRENT STATE 6

2.1 Xác định nhóm người dùng 6

2.2 Mục tiêu và hành vi của người dùng 6

2.3 Vai trò và trách nhiệm của người dùng 6

2.3.1 Vai trò 6

2.3.2 Trách nhiệm 6

2.3.3 Đặc điểm và chức năng của Website 7

CHƯƠNG 3 – USER RESEARCH 8

3.1 Câu hỏi khảo sát, kết quả và phân tích 8

3.2 Personas 11

CHƯƠNG 4 – CONCEPT DESIGN 13

4.1 Sơ đồ phân rã chức năng 13

4.2 Bảng thứ tự ưu tiên của các chức năng 13

4.3 Storyboard 16

4.3.1 Use Case thêm vào giỏ hàng 16

4.3.2 Use Case thêm sản phẩm mới 17

4.4 User flow diagram 18

4.4.1 Khách hàng 18

4.4.2 Admin 19

CHƯƠNG 5 – MOCKUPS 20

5.1 Đăng kí 20

5.2 Đăng nhập 20

5.3 Trang chủ 21

5.4 Kết quả tìm kiếm 22

5.5 Giỏ hàng 23

5.6 Đặt hàng 24

DANH MỤC BẢNG BIỂU HÌNH VẼ

DANH MỤC HÌNH

Hình 3 1 Persona 1 11

Hình 3 2 Persona 2 12

Hình 4 1 Sơ đồ phân rã chức năng 13

Hình 4 2 Storyboard use case thêm vào giỏ hàng 17

Hình 4 3 Storyboard use case thêm sản phẩm mới 18

Hình 4 4 Flowchart của khách hàng 19

Hình 4 5 Flowchart của Admin 19

Hình 5 1 Mockup của trang đăng kí 20

Hình 5 2 Mockup của trang đăng nhập 21

Hình 5 3 Mockup của trang chủ 22

Hình 5 4 Mockup của trang kết quả tìm kiếm 23

Hình 5 5 Mockup của trang giỏ hàng 23

Hình 5 6 Mockup của trang đặt hàng 24

CHƯƠNG 1 GIỚI THIỆU CHUNG –

1.1 Lí do chọn đề tài

Trong thời đại mà cuộc cách mạng công nghiệp 4.0 vẫn đang diễn ra như hiện nay, mọi thứ đều được số hoá, đặc biệt là âm nhạc Nếu như trong quá khứ, người ta thường nghe nhạc thông qua những chiếc đĩa CD, những chiếc bằng casette thì ngày nay việc thưởng thức âm nhạc không còn là một vấn đề gì quá to lớn Với sự phát triển mạnh

mẽ của những trang nghe nhạc trực tuyến như Spotify hay Apple Music, người dùng chỉ cần vài cú click chuột chưa tới vài giây là đã có thể thưởng thức được những bản nhạc

mà mình yêu thích Đây được gọi là hình thức nghe nhạc trực tuyến (digital music) Tuy vậy, những tưởng sẽ không còn chỗ cho những chiếc album vật lý (physical music) nhưng nhiều người vẫn lựa chọn hình thức nghe nhạc này Thông thường những chiếc album này sẽ được bày bán tại những cửa hàng đĩa CD, trung tâm thương mại hoặc những cửa hàng hoạt động online

Hiện nay, việc tiếp cận với Internet không còn mấy xa lạ Mỗi người đều sỡ hữu cho riêng mình một chiếc smartphone, laptop,… và Internet phát triển kéo theo nhiều dịch vụ phát triển theo đi liền với nó điển hình là xu hướng mua bán qua mạng ngày càng trở nên phổ biến hơn Với việc bất cứ ai cũng có thể tiếp cận với Internet khiến cho nó

đã trở thành một công cụ phổ biến và không thể thiếu trong đời sống Cùng với sự phát triển của thương mại điện tử, việc đưa công nghệ thông tin vào các quy trình quản lý bán hàng ngày càng trở nên rộng rãi và phổ biến Ở Việt Nam việc mua bán qua mạng hay thương mại điện tử ngày càng phổ biến và đa dạng với các mặt hàng Khách hàng chỉ với một chiếc điện thoại hay máy tính có kết nối Internet có thể tìm kiếm, lựa chọn và mua sắm sản phẩm mình yêu thích mọi lúc mọi nơi Và album vật lý cũng là một mặt hàng được được lưu thông trên thị thường thông qua hình thức thương mại điện tử Xuất phát từ nhu cầu tìm kiếm thêm nhiều khách hàng tiềm năng, quảng bá sản phẩm cũng như là tối ưu hoá công việc, nhóm chúng em quyết định triển khai đề tài “Thiết kế giao

thống bán hàng trực tuyến giúp cửa hàng có nhiều cơ hội hơn trong việc mở rộng thị trường không chỉ trong nước cũng như ngoài nước, tiết kiệm được nguồn nhân lực

1.2 Tổng quan hệ thống

Website mua bán album vật lý của tiệm đĩa HappyCD giúp khách hàng tìm được những chiếc album để thưởng thức những bản nhạc mà mình yêu thích Bên cạnh đó, còn giúp tăng doanh thu mảng album vật lý cho những nghệ sĩ Những mặt hàng của tiệm chủ yếu đến từ thị trường Hàn Quốc và nhằm phục vụ cho nhu cầu của những khách hàng tại thị trường Việt Nam

Khách hàng muốn mua hàng thì phải tạo một tài khoản trên hệ thống Sau khi cung cấp những thông tin cần thiết và đăng ký thành công, người dùng cần phải đăng nhập vào hệ thống để mua sản phẩm Trong trường hợp quên mật khẩu, người dùng có thể khôi phục lại thông qua email đã đăng ký

Sau khi đăng nhập thành công, người dùng có thể tìm kiếm album mình cần mua theo tên album, tên nghệ sĩ, thể loại, giá tiền,… Sau khi tìm được những sản phẩm cần mua, người dùng sẽ tiền hành thêm sản phẩm vào giỏ hàng Ở đây khách hàng có thể thay đổi số lượng, thêm, xoá sản phẩm trong giỏ hàng Người dùng cũng có thể xem chi tiết những mặt hàng trong giỏ

Khi mua hàng khách hàng sẽ phải điền thông tin nhận hàng Sau đó, hệ thống sẽ hiển thị những mặt hàng đã mua, thông tin đơn vị vận chuyển và quá trình vận chuyển đơn hàng Khi nhận được hàng, khách hàng sẽ truy cập vào Website và xác nhận đơn hàng đã được giao thành công và quá trình mua hàng kết thúc

Trên Website, khách hàng còn có thể xem được những mục như thông tin cá nhân, lịch sử mua hàng

Admin là người quản trị toàn bộ hệ thống và thực hiện một số chức năng như quản lý sản phẩm, quản lý thông tin người dùng, quản lý đơn hàng,…

Các thông tin được hiển thị trên Website bao gồm các sản phẩm, tìm kiếm, đăng

ký, đăng nhập, giỏ hàng, thông tin người dùng, lịch sử mua hàng

CHƯƠNG 2 – UNDERSTAND THE CURRENT STATE

2.1 Xác định nhóm người dùng

Đối tượng sử dụng website gồm có: Admin quản trị hệ thống và Khách hàng

2.2 Mục tiêu và hành vi của người dùng

- Tham khảo giá cả thị trường

2.3 Vai trò và trách nhiệm của người dùng

2.3.1 Vai trò

• Admin: Thực hiện các công việc quản trị hệ thống

• Khách hàng: Tìm kiếm, xem và đặt mua sản phẩm

2.3.2 Trách nhiệm

• Admin: Đảm bảo các thông tin về sản phẩm là chính xác, cần phải phát hiện lỗi

• Xem thông tin sản phẩm

• Xem và chỉnh sửa giỏ hàng

• Đặt hàng

• Xem lịch sử mua hàng

• Quản lý sản phẩm (Thêm/Xoá/Sửa)

• Quản lý tài khoản (Xoá/Sửa)

• Quản lý đơn hàng (Sửa)

CHƯƠNG 3 – USER RESEARCH

3.1 Câu hỏi khảo sát, kết quả và phân tích

• Câu hỏi 1: Độ tuổi của bạn là

➔

➔ Phần lớn người dùng đều là những người trẻ, có nhiều cơ hội được tiếp xúc với

Internet Cần phải thiết kế giao diện trẻ trung, năng động, không bị lỗi thời

• Câu hỏi 2: Nghề nghiệp của bạn

• Câu hỏi 3: Thu nhập cá nhân của bạn

➔ Đa số người dùng là học sinh, sinh viên nên thu nhập thường chưa có hoặc chỉ dưới

➔ Điện thoại di động được sử dụng để truy cập nhiều nhất nên bên cạnh thiết kế giao diện website cho máy tính ta cũng cần quan tâm đến giao diện website trên điện thoại

• Câu hỏi 5: Bạn có thường xuyên mua hàng trên website không?

➔ Tần suất truy cập website cao nên cần phải thiết kế giao diện thu hút người sử dụng

hơn Từ đó tăng doanh thu bán hàng

• Câu hỏi 6: Điều gì làm bạn hài lòng về website

• Câu hỏi 7: Điều gì làm bạn chưa hài lòng về website

➔ Bố cục website và tốc độ tải trang là 2 thứ cần được cải thiện.

3.2 Personas

Hình 3 1 Persona 1

Hình 3 2 Persona 2

CHƯƠNG 4 – CONCEPT DESIGN

4.1 Sơ đồ phân rã chức năng

Hình 4 1 Sơ đồ phân rã chức năng

4.2 Bảng thứ tự ưu tiên của các chức năng

Requirement Description Importance Business Importance User Feasibility Technical Feasibility Resource

6 Xem thông tin sản phẩm

người dùng

xem thông tin

chi tiết của

sản phẩm

Tuỳ vào nhu

cầu của người

Hình 4 2 Storyboard use case thêm vào giỏ hàng

4.3.2 Use Case thêm sản phẩm mới

Hình 4 3 Storyboard use case thêm sản phẩm mới

4.4 User flow diagram

4.4.1 Khách hàng

Hình 4 4 Flowchart của khách hàng

4.4.2 Admin

Hình 4 5 Flowchart của Admin

CHƯƠNG 5 – MOCKUPS

5.1 Đăng kí

Hình 5 1 Mockup của trang đăng kí

5.2 Đăng nhập

Hình 5 2 Mockup của trang đăng nhập

5.3 Trang chủ

Hình 5 3 Mockup của trang chủ

5.4 Kết quả tìm kiếm

Hình 5 4 Mockup của trang kết quả tìm kiếm

5.5 Giỏ hàng

Hình 5 5 Mockup của trang giỏ hàng

5.6 Đặt hàng

Hình 5 6 Mockup của trang đặt hàng

TÀI LIỆU THAM KHẢO