Mô tả:
TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT TP. HCM
KHOA CÔNG NGHỆ THÔNG TIN
ĐỒ ÁN MÔN HỌC
THƯƠNG MẠI ĐIỆN TỬ
ĐỀ TÀI:
THIẾT KẾ VÀ PHÂN TÍCH WEBSITE
THƯƠNG MẠI ĐIỆN TỬ
SVTH:
MSSV:
HOÀNG TRỌNG TẤN
16110454
HUỲNH THỊ TUYẾT NHI
16110409
NGUYỄN NGỌC TRÚC LINH
16110536
NGUYỄN THỊ THANH TUYỀN 16110514
GVHD: Ths.HOÀNG LONG
Tp. Hồ Chí Minh, tháng 5 năm 2019
TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT TP. HCM
KHOA CÔNG NGHỆ THÔNG TIN
ĐỒ ÁN MÔN HỌC
THƯƠNG MẠI ĐIỆN TỬ
ĐỀ TÀI:
THIẾT KẾ VÀ PHÂN TÍCH WEBSITE
THƯƠNG MẠI ĐIỆN TỬ
SVTH:
MSSV:
HOÀNG TRỌNG TẤN
16110454
HUỲNH THỊ TUYẾT NHI
16110409
NGUYỄN NGỌC TRÚC LINH
16110536
NGUYỄN THỊ THANH TUYỀN 16110514
GVHD: Ths.HOÀNG LONG
Tp. Hồ Chí Minh, tháng 5 năm 2019
MỤC LỤC
Trang
MỤC LỤC
DANH MỤC CÁC HÌNH ẢNH, BIỂU ĐỒ
I.
Chương 1: GIỚI THIỆU
i
iii
1
1.1.
Mục đích
1
1.2.
Yêu cầu
1
II. Chương 2: PHÂN TÍCH TÍNH KHẢ DỤNG
2
2.1.
Header (tiêu đề, navigation)
2
2.2.
Nội dung trang shop(trang chủ)
3
2.3.
Nội dung trang giới thiệu(trang con)
10
2.4.
Trang chi tiết sản phẩm (trang con)
14
2.5.
Giới hạn của Weebly
14
III. Chương 3: PHÂN TÍCH SỐ LIỆU VỚI GOOGLE ANALYTICS
16
3.1.
Số lượng người truy cập
16
3.2.
Số phiên người truy cập
18
3.3.
Thời lượng phiên
20
3.4.
Kênh lưu lượng truy cập
21
3.5.
Nguồn phương tiện truy cập và giới thiệu
22
3.6.
Người dùng có xu hướng như thế nào theo thời gian
23
3.7.
Giữ chân người dùng
24
3.8.
Ngày chuyển đổi nhóm theo giữ chân người dùng
25
3.9.
Thời gian người dùng truy cập vào trang Web trong ngày
26
3.10.
Số phiên truy cập theo quốc gia
27
i
3.11.
Số phiên truy cập theo thiết bị
28
3.12.
Người dùng truy cập theo những trang nào
30
3.13.
Người dùng sử dụng trình duyệt nào để truy cập trang web ?
31
3.14.
Thông tin về thiết bị di động truy cập vào trang web
32
3.15.
Người dùng đang hoạt động
32
3.16.
Luồng truy cập người dùng
34
IV. Chương 4: KẾT LUẬN
35
4.1.
Tính khả dụng của website xây dựng được với weebly
35
4.2.
Google Analytics
36
PHỤ LỤC
PHÂN CÔNG NHIỆM VỤ
37
37
ii
DANH MỤC CÁC HÌNH ẢNH, BIỂU ĐỒ
Hình 2.1 Tiêu đề của website ...................................................................................2
Hình 2.2 Navigation của website .............................................................................2
Hình 2.3 Tổng quan trang shop(trang chính của website) ........................................3
Hình 2.4 Slider sản phẩm là mặt hàng chính ............................................................4
Hình 2.5 Banner giới thiệu thương hiệu và thông tin liên hệ ....................................5
Hình 2.6 Chỉ rõ website phù hợp với nhiều thiết bị ..................................................6
Hình 2.7 Nút quay về đầu trang ...............................................................................7
Hình 2.8 Sản phẩm được khuyễn mãi ......................................................................7
Hình 2.9 Giá với hiệu ứng tăng dần và nút bấm cho sản phẩm mới ra mắt ...............8
Hình 2.10 Nội dung khuyễn mãi với hiệu ứng chuyển động.....................................9
Hình 2.11 Tổng quan về sản phẩm mới ra mắt .........................................................9
Hình 2.12 Banner giới thiệu thương hiệu cà phê .................................................... 10
Hình 2.13 Banner giới thiệu các loại thức ăn phổ biến ........................................... 11
Hình 2.14 Phản hồi và footer ................................................................................. 12
Hình 2.15 Popup với hiệu ứng tada sản phẩn đang sale off ....................................13
Hình 2.16 Trang chi tiết sản phẩm .........................................................................14
Hình 3.1 Biểu đồ số lượng người truy cập sau 14 ngày ..........................................16
Hình 3.2 Biểu đồ chi tiết hơn về số phiên, người dùng mới, xem trang .................. 17
Hình 3.3 Biểu đồ biểu diễn số phiên ......................................................................18
Hình 3.4 Biểu đồ biễu diễn tỷ lệ phiên thoát .......................................................... 19
Hình 3.5 Biểu đồ biễu diễn thời lượng phiên ......................................................... 20
Hình 3.6 Biểu đồ kênh lưu lượng truy cập ............................................................. 21
Hình 3.7 Biểu đồ phương tiện truy cập ..................................................................22
Hình 3.6 Biểu đồ giới thiệu.................................................................................... 22
Hình 3.7 Biểu đồ thể hiện xu hướng của người dùng theo thời gian ....................... 23
Hình 3.8 Biểu đồ thể hiện hoạt động của người dùng............................................. 23
Hình 3.9 Biểu đồ thể hiện mức độ giữ chân người dùng ........................................24
Hình 3.10 Biểu đồ thể hiện mức độ giữ chân người dùng theo ngày ...................... 25
iii
Hình 3.11 Biểu đồ thể hiện mức độ giữ chân người dùng theo ngày và số ngày .....25
Hình 3.12 Biểu đồ thể hiện thời gian (giờ) mà người dùng truy cập ....................... 26
Hình 3.13a Biểu đồ thể hiện số phiên truy cập theo quốc gia dạng bản đồ ............. 27
Hình 3.13b Biểu đồ thể hiện số phiên truy cập theo quốc gia dạng số liệu ............. 27
Hình 3.14a Biểu đồ thể hiện số phiên truy cập theo thiết bị ...................................28
Hình 3.14a Biểu đồ thể hiện số phiên truy cập theo thiết bị ...................................29
Hình 3.15a Biểu đồ thể hiện đường dẫn mà người dùng đã truy cập sơ lượt ..........30
Hình 3.15a Biểu đồ thể hiện đường dẫn mà người dùng đã truy cập chi tiết........... 30
Hình 3.16 Biểu đồ thể hiện trình duyệt mà người dùng sử dụng............................. 31
Hình 3.17 Thông tin về thiết bị di động truy cập vào trang web ............................. 32
Hình 3.18 Thông tin về người dùng đang hoạt động .............................................. 32
Hình 3.19 Thông tin về người dùng đang hoạt động chi tiết về vị trí ...................... 33
Hình 3.20 Biểu đồ thể hiện luồng truy cập của người dùng ....................................34
iv
I.
Chương 1: GIỚI THIỆU
1.1. Mục đích
Tìm hiểu và tạo một website thương mại điện tử đơn giản sử dụng nền tảng được hỗ
trợ cho mọi đối tượng có thể dễ dàng sử dụng qua một vài hướng dẫn như: Weebly,
Wix, WordPress, Web.com, Jimdo
Sử dụng Google Analytics để thu thập dữ liệu, từ những số liệu, biểu đồ có được phân
tích và đưa ra kết luận
1.2. Yêu cầu
Tạo và public một website đảm bảo tối đa các tiêu chí có thể, các tiêu chí này nằm ở
trong cuốn sách có tên: Research-Based Web Design & Usability Guidelines ( Michael
O. Leavitt - Secretary of Health and Human Services and Ben Shneiderman - Professor
of Computer Science, University of Maryland)
Phân tích tính khả dụng của website tạo được với hình ảnh và mô tả chi tiết đi kèm
1
II.
Chương 2: PHÂN TÍCH TÍNH KHẢ DỤNG
2.1. Header (tiêu đề, navigation)
Hình 2.1 Tiêu đề của website
-
Chương 5 tiêu chuẩn 4: Truyền đạt mục đích và ý nghĩa của trang web. Nhìn vào
tên shop thì người dùng dễ dàng nhận ra shop bán các loại nước uống.
-
Chương 5 tiêu chuẩn 1: Kích hoạt quyền truy cập vào trang chủ. Nếu người dùng
đang ở một trang khác vẫn có thể click vào tên shop để quay trở về trang chủ.
Hình 2.2 Navigation của website
-
Chương 5 tiêu chuẩn 1: Kích hoạt quyền truy cập vào trang chủ. Nếu người dùng
ở bất kì đâu của trang web thì chỉ cần nhấn “Home” là có thể quay về trang chủ.
-
Chương 5 tiêu chuẩn 2: Hiển thị tất cả các tùy chọn chính trên trang chủ. Các tuỳ
chọn chính của trang web đều được đặt ở trên đầu trang chủ.
-
Chương 6 tiêu chuẩn 2 + 3: Đặt các mục quan trọng một cách nhất quán và đặt ở
đầu trung tâm trang chủ
-
Chương 7 tiêu chuẩn 1: Cung cấp tùy chọn điều hướng. Các tuỳ chọn của web
cũng là các điều hướng dẫn đến các trang khác của web.
-
Chương 7 tiêu chuẩn 4: Cung cấp phản hồi về vị trí từ người dùng. Khi người dùng
click một tuỳ chọn nào đó thì tuỳ chọn đó sẽ được nổi bật trên nền khác màu, người
dùng nhìn có thể biết mình đang ở trang nào
2
-
Chương 7 tiêu chuẩn 7: Các tab được trình bày 1 cách hiệu quả. Các tab của trang
web được đặt ở đầu và khi ta rê chuột vào thì nền chỗ đó sẽ đổi màu, người dùng
có thể biết được đây là tab có thể click.
-
Chương 9 tiêu chuẩn 1: Sử dụng Nhãn danh mục rõ ràng. Các tab được đặt tên dễ
dàng cho người dùng nhận biết được tab đó trình bày về nội dung gì.
2.2. Nội dung trang shop(trang chủ)
Hình 2.3 Tổng quan trang shop(trang chính của website)
3
-
Theo Chương 1 tiêu chuẩn 1: Cung cấp nội dung hữu ích
-
Tăng trải nghiệm người dùng:
o Logo bằng chữ thay vì logo đơn giản và dễ hiểu
o Navigation được đặt ở phần top(phần cách bởi nền mây - phụ họa cho hiệu
ứng tuyết rơi)
o Navigation chữ chính xác vừa đủ (HOME, SHOP, ABOUT) 5-7 từ
o Animation tuyết rơi: Giúp cho trang nhìn linh hoat và sinh động hơn
-
Theo Chương 1 tiêu chuẩn 3: Hiểu và đáp ứng mong đợi của người dùng
o Khi người dùng có nhu cầu mua hàng, họ đã click vào trang shop với mong
muốn là thấy ngay các sự lựa chọn mua sắm và các thông tin liên quan đến
các sản phẩm ăn uống.
-
Chương 6: Bố cục trang
-
Theo Chương 6 tiêu chuẩn 1:Tránh hiển thị lộn xộn
-
Theo Chương6 tiêu chuẩn 2:Đặt các mục quan trọng một cách nhất quán
-
Hiển thị thông tin rất rõ ràng cụ thể:
o Đâu tiên là banner cung cấp thông tin chi tiết và cách thức liên lạc đến cửa
hàng.
o Sau đó nến ngay phần slider cung cấp các sản phẩm kinh doanh của cửa
hàng.
Hình 2.4 Slider sản phẩm là mặt hàng chính
4
-
Theo Chương 6 tiêu chuẩn 6: Tối ưu hóa mật độ hiển thị
o Nút chuyển slide rõ ràng
o Không hiển thị hết tất cả các sản phẩm của cửa hàng mà chỉ thể hiện vài
item để tránh gây rối mắt và tạo thiện cảm với người dùng. Vì những người
tham gia có xu hướng đến thăm các khu vực thưa thớt trước các nhóm dày
đặc. Nếu người dùng muốn xem thêm có thể click vào các nút xem trái xem
phải.
Hình 2.5 Banner giới thiệu thương hiệu và thông tin liên hệ
-
Chương 10 tiêu chuẩn 5: Lặp lại các liên kết quan trọng. Các tab quan trọng đều
được.
-
Theo chương 6 tiêu chuẩn 11: Sử dụng khoảng trắng vừa phải. Người dùng thích
khoảng trắng vừa phải, nhưng lượng trắng không gian không có tác động đến hiệu
suất tìm kiếm của họ đặt lại ở mỗi trang.
-
Chương 14: Đồ họa, Hình ảnh và Đa phương tiện
-
Theo chương 14 tiêu chuẩn 1: Sử dụng hình nền đơn giản
o Hình ảnh sản phẩm, nhìn vào là biết nó trực quan như thế nào giúp cho khả
năng bán được sản phẩm cao hơn.
-
Theo chương 14 tiêu chuẩn 2: Nhãn Hình ảnh có thể nhấp
5
o Đồng thời có thể nhấp vào hình sản phẩm để đi đến chi tiết.
-
Theo chương 14 tiêu chuẩn 4:Sử dụng video, hoạt hình và âm thanh một cách có
ý nghĩa
Hình 2.6 Chỉ rõ website phù hợp với nhiều thiết bị
-
Theo chương 8 tiêu chuẩn 1: Loại bỏ cuộn ngang
o Không xuất hiện thanh cuộn ngang khi thu phóng màn hình ở các kích thước
khác nhau.
6
Hình 2.7 Nút quay về đầu trang
-
Nút cuộn nhanh lên đầu trang. Button on-top: Button on top giúp người dung
quay về đầu trang nhanh chóng
Hình 2.8 Sản phẩm được khuyễn mãi
-
Chương 9: Tiêu đề và nhãn
-
Theo chương 9 tiêu chuẩn 5: Đánh dấu dữ liệu quan trọng
-
Chương 11: Xuất hiện văn bản
7
o Theo chương 11 tiêu chuẩn 1:Sử dụng màu chữ văn bản trên nền đơn giản,
độ tương phản cao
o Theo chương 11 tiêu chuẩn 5: Sử dụng văn bản in đậm một cách tiết kiệm
o Theo chương 11 tiêu chuẩn 6: Sử dụng các tính năng thu hút sự chú ý khi
thích hợp
o Theo chương 11 tiêu chuẩn 7:Sử dụng Phông chữ quen thuộc
o Theo chương 11 tiêu chuẩn 9: Mã màu
Nhóm màu của web site thống nhất: với mã màu Analgous, Triad,
Compound
Tiêu đề sản phẩm được in đậm viết hoa nổi bật.
Giá sản phẩm mờ hơn --> để người dung không lo ngại về giá, mà
tập trung vào tên và hình ảnh của sản phẩm
Đặc biệt khi có chương trình khuyến mãi: On Sale tag được đặt ngay
dưới bức hình, đồng thời chữ trắng nền đỏ trên style trắng của trang
web gây ấn tượng ngay với người dùng khi lướt qua.
Hình 2.9 Giá với hiệu ứng tăng dần và nút bấm cho sản phẩm mới ra mắt
-
Nút Add to Cart và Buy Now thay đổi về màu nền lẫn màu chữ khi người dùng
hover vào nút.
8
-
Tạo hiệu ứng đặc biệt đến nguời dùng, tăng khả năng tương tác của người dùng
với thông tin trên.
Hình 2.10 Nội dung khuyễn mãi với hiệu ứng chuyển động
-
Dùng hàng chữ chạy nền: thông tin gây chú ý đến người dùng.
Hình 2.11 Tổng quan về sản phẩm mới ra mắt
-
Chèn video giới thiệu về sản phẩm làm tăng thêm khả năng trực quan nhìn nhận
về sản phẩm
-
Share và thích với những hình ảnh để biết bạn bè có ở đó làm tăng khả năng tương
tác và mức độ phổ biến của trang web.
9
2.3. Nội dung trang giới thiệu(trang con)
Hình 2.12 Banner giới thiệu thương hiệu cà phê
-
Hình ảnh này cho thấy web đáp ứng được các yêu cầu:
o Chương 14 tiêu chuẩn 1: Sử dụng hình ảnh đơn giản.
o Chương 14 tiêu chuẩn 3: Hình ảnh không tải chậm.
o Chương 14 tiêu chuẩn 6: Đồ họa không giống như quảng cáo
o Chương 14 tiêu chuẩn 9: Hạn chế sử dụng hình ảnh. Hình ảnh được sử dụng
có liên quan đến sản phẩm shop chứ không sử dụng bừa bãi, linh tinh.
-
Ngoài ra đồ hoạ hiệu ứng tuyết rơi còn để thu hút người sử dụng hơn.
10
Hình 2.13 Banner giới thiệu các loại thức ăn phổ biến
-
Hình ảnh này cho thấy web đáp ứng được yêu cầu:
o Chương 5 tiêu chuẩn 4: Truyền đạt giá trị và mục đích của trang web, nó
cung cấp cho người sử dụng biết những sản phẩm mà shop kinh doanh.
o Chương 14 tiêu chuẩn 1: Sử dụng hình nền đơn giản
o Chương 14 tiêu chuẩn 3: Đảm bảo rằng hình ảnh không tải chậm
o Chương 11 tiêu chuẩn 3: Sử dụng chữ hoa kết hợp chữ thường cho văn bản
văn xuôi
o Chương 11 tiêu chuẩn 5: Sử dụng văn bản in đậm một cách tiết kiệm
11
Hình 2.14 Phản hồi và footer
-
Hình ảnh này cho thấy web đã đáp ứng được các yêu cầu:
o Chương 8 tiêu chuẩn 2: Tạo điều kiện cuộn nhanh trong khi đọc. Web có
sử dụng nút cuộn về đầu trang giúp người xem có thể trở về đầu trang một
cách nhanh chóng mà không phải dùng chuột kéo trang.
o Chương14 tiêu chuẩn 4: Sử dụng video, hoạt hình và âm thanh một cách có
ý nghĩa. Ở đây web sử dụng hình ảnh bản đồ để người dùng có thể biết được
vị trí offline của shop.
-
Bên cạnh đó nhìn tổng quan trang chủ ta có thể thấy web còn đáp ứng được các
yêu cầu:
o Chương 5 tiêu chuẩn 5: Giới hạn văn bản văn xuôi trên trang chủ.
o Chương 5 tiêu chuẩn 7: Giới hạn chiều dài trang chủ.
o Chương 6 tiêu chuẩn 1: Tránh hiển thị lộn xộn.
o Chương 6 tiêu chuẩn 7: Căn chỉnh các mục trên một trang.
o Chương 6 tiêu chuẩn 9: Tránh nút chặn cuộn.
o Chương 6 tiêu chuẩn 11: Sử dụng khoảng trắng vừa phải.
o Chương 8 tiêu chuẩn 1: Loại bỏ cuộn ngang. Trang web không sử dụng
cuộn trang ngang.
o Chương 9 tiêu chuẩn 1: Sử dụng Nhãn danh mục rõ ràng.
12
o Chương15 tiêu chuẩn 8: Văn bản văn xuôi giới hạn trên các trang điều
hướng.
o Chương 16 tiêu chuẩn 1: Sắp xếp thông tin rõ ràng.
o Chương 16 tiêu chuẩn 7: Chỉ hiển thị thông tin cần thiết.
o Chương 15 tiêu chuẩn 2: Tránh biệt ngữ.
o Chương 15 tiêu chuẩn 3: Sử dụng những từ quen thuộc.
o Chương 14 tiêu chuẩn 7: Hạn chế hình ảnh lớn trên màn hình đầu tiên.
o Chương 11 tiêu chuẩn 6: Sử dụng các tính năng thu hút sự chú ý khi thích
hợp.
-
Footer xám cho biết website đã đến phần cuối
Hình 2.15 Popup với hiệu ứng tada sản phẩn đang sale off
-
Popup: Làm mờ nền khi hiển thị pop-up làm tăng sự chú ý, hiệu ứng "tada"
-
Đáp ứng được yêu cầu:
o Chương 5 tiêu chuẩn 3: Tạo ấn tượng đầu tiên tích cực về trang web, tạo
hiệu ứng bất ngờ cho người dùng
o Chương 10 tiêu chuẩn 1: Liên kết đến nội dung liên quan, liên kết đến trang
chứa sản phẩm sale off.
13
2.4. Trang chi tiết sản phẩm (trang con)
Hình 2.16 Trang chi tiết sản phẩm
-
Bố cục rõ ràng:
o Hình ảnh nằm bên trái kich thước vừa phải, mô tả trực quan
o Có tiêu đề in đậm ghi tên sản phẩm, phía dưới là giá sản phẩm
o Đoạn text miêu tả chi tiết thông tin giới thiệu về sản phẩm với font và size
chữ cơ bản
-
Nút quanlity- số lượng ở chi tiết sản phẩm có nút tăng giảm
-
Màu sắc hài hòa tạo thiện cảm với người dùng.
2.5. Giới hạn của Weebly
-
Chưa hỗ trợ nhiều template để hỗ trợ phát triển nhanh chóng hơn
-
Việc phát triển và chỉnh sửa một component của web còn hạn chế: màu sắc, bố
cục, padding, space
14
- Xem thêm -