4 - 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 topphần cách bởi nề
Trang 1TRƯỜ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Ử
Trang 2TRƯỜ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Ử
Trang 3i
MỤC LỤC
Trang
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
III Chương 3: PHÂN TÍCH SỐ LIỆU VỚI GOOGLE ANALYTICS 16
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.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
Trang 4ii
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
4.1 Tính khả dụng của website xây dựng được với weebly 35
Trang 5iii
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
Trang 6iv
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
Trang 7Sử 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
Trang 82
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
Trang 93
- 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)
Trang 104
- 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
Trang 11Hì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
Trang 126
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
Trang 137
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
Trang 148
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
Trang 159
- 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
Trang 1610
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
Trang 1711
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
Trang 1812
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
Trang 1913
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
Trang 2014
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
Trang 2115
- Các app(như là extention) có khá nhiều nhưng chưa có hướng dẫn cụ thể (các bản free thử nghiệm thấy hỗ trợ rất tốt còn các app phải trả phí thì chưa thẩm
định được
- Cách kéo thả của weebly chưa linh hoạt đối với các theme được chỉnh sửa sẵn
- Chưa có tùy chọn về xử lý hình ảnh(ví dụ như tự cắt hình theo chiều dọc, theo
chiều ngang, căn chỉnh pixel
- Theme đều đa số ở dạng flat(đã qua thời website phát triển ở mức độ này) bây
giờ xu hướng đã đi theo hướng khác phổ biến như:
o Drop shadows & depth: Hiệu ứng bóng và hỗ trợ chiều sâu
o Color schemes: Hệ thống màu
o Particle backgrounds: Hiệu ứng nền hạt chuyển động
o Mobile first: Đầu tư vào giao diện Mobile
o Custom illustrations: Tùy chỉnh “minh họa”
o Big, bold typography: Các Typo to, đậm
o Grid layouts: Các Layouts “gãy”
o Integrated animations: Tích hợp hoạt ảnh
o Dynamic gradients: Dải màu sống động
- Đối với xu thế mà người dùng chủ yếu truy cập website từ thiết bị di động ngang ngửa với các loại thiết bị màn hình khác cộng lại thì weebly không phù hợp để làm một kênh thương mại điện tử
- Phù hợp với các trang profile, banner giới thiệu, quảng bá sản phẩm không đa dạng về mẫu mã, còn đối với đặc thù những sản phẩm nhiều loại như điện thoại, laptop và các thiết bị điện tử đa chủng loại khác thì weebly sẽ gây khó quản lý
Trang 2216
III Chương 3: PHÂN TÍCH SỐ LIỆU VỚI GOOGLE ANALYTICS
3.1 Số lượng người truy cập
Hình 3.1 Biểu đồ số lượng người truy cập sau 14 ngày
- Số lượng người truy cập là 96 người sau 14 ngày Con số này cho biết lượng người truy cập vào website ,ước tính trung bình có 7 người truy cập mỗi ngày
- Chỉ số này sẽ thống kê cho bạn biết được số lượng người đã ghé thăm website của bạn Trong đó, bạn sẽ được biết thêm số lượng người dùng mới truy cập website
và số lượng người dùng cũ quay lại website Từ đó Google sẽ chia ra làm 2 loại là người dùng mới và người dùng cũ
Trang 2317
Hình 3.2 Biểu đồ chi tiết hơn về số phiên, người dùng mới, xem trang
- Qua số liệu từ hình ảnh ta thầy lượng người dùng mới là 44%, trong khi đó người dùng quay trở lại trang web là 56% => cho thấy mức độ quan tâm, tin cậy của trang web, cung cấp thông tin mà người dùng mong muốn, thu hút thị hiếu và đáp ứng mức độ quan tâm cho người dùng
- Con số người dùng quay trở lại trang web càng nhiều chứng tỏ sản phẩm, dịch vụ của bạn tạo được sự quan tâm của khách hàng, có có thể dần hình thành ý định mua hàng của họ
- Con số người dùng mới cũng chứng tỏ được mức độ mở rộng, lan tỏa của trang web trên thị trường Trang web nào càng nhiều người dùng mới chứng minh rằng mức độ phổ biến, quan tâm, đáp ứng đúng nhu cầu càng cao từ họ
- Tuy nhiên con số mà Google Analytics theo dõi người dùng mới đến website và người dùng cũ cũng có nhiều sai lệch Người dùng quay lại được theo dõi bằng
“cookie” lưu trữ trên máy tính, có nghĩa là bất cứ ai xóa trình duyệt web của họ và truy cập lại vào trang web thì đều được xem là người dùng mới Hoặc có thể người dùng đã truy cập trang web trên một thiết bị khác trước đó, sẽ được tính là người dùng mới thay vì người dùng cũ