Đăng ký Đăng nhập
Trang chủ Thiết kế và phân tích website thương mại điện tử...

Tài liệu Thiết kế và phân tích website thương mại điện tử

.PDF
43
100
104

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 -

Tài liệu liên quan