Thiết kế các nhân tố chính và cấu trúc ứng dụng của website hoàng hà mobile

BỘ THÔNG TIN VÀ TRUYỀN THÔNG HỌC VIỆN CÔNG NGHỆ BƯU CHÍNH VIỄN THƠNG BÀI TIỂU LUẬN THIẾT KẾ CÁC NHÂN TỐ CHÍNH VÀ CẤU TRÚC ỨNG DỤNG CỦA WEBSITE HOÀNG HÀ MOBILE Giảng viên giảng dạy: TS Lê Thị Ngọc Diệp MỤC LỤC DANH MỤC HÌNH ẢNH I Thiết kế nội dung II Thiết kế theo phân đoạn trình diễn III Thiết kế cấu trúc ứng dụng 14 IV Thiết kế tương tác 17 V Thiết kế giới hạn tiếp cận 18 VI Mô tả phân đoạn trình diễn 18 VII Tài liệu tham khảo 26 DANH MỤC HÌNH ẢNH Hình minh họa nguyên tắc Hình 2 minh họa nguyên tắc Hình minh họa nguyên tắc Hình minh họa nguyên tắc Hình 5: minh họa nguyên tắc Hình 6: minh họa Phân đoạn trình diễn Giới thiệu Hình 7: minh họa Phân đoạn trình diễn Chi tiết danh mục sản phẩm 10 Hình 8: minh họa trang danh mục sản phẩm 10 Hình 9: minh họa trang tin tức 11 Hình 10: minh họa trang hệ thống siêu thị 11 Hình 11: minh họa trang tuyển dụng 12 Hình 12: minh họa trang sản phẩm xem 13 Hình 13: minh họa tra cứu đơn hàng 13 Hình 1: minh họa trang chủ 14 Hình 2: minh họa footer trang chủ 15 Hình 3: minh họa danh mục sản phẩm 15 Hình 4: minh họa trang sản phẩm Tai nghe AirPords Pro 16 Hình 5: minh họa trang giỏ hàng 16 Hình 6: minh họa trang đặt hàng & toán 17 Hình 6: minh họa trang đặt hàng & toán Error! Bookmark not defined I Thiết kế nội dung  Thiết kế nội dung giao diện Trang chủ Cung cấp cho người dùng nội dung thông tin khái quát Website chức đăng nhập, đăng ký, tìm kiếm sản phẩm (1) Phân đoạn nội dung: bao gồm có đoạn nội dung sản phẩm bật, sản phẩm bán chạy, sản phẩm khuyến Các đoạn nội dung bao gồm hình ảnh sản phẩm, tên sản phẩm giá sản phẩm kèm giá khuyến (nếu có) Ngồi cịn có Tin cơng nghệ Khách hàng Hồng Hà (2) Cách tiếp cận cấu trúc: Cấu trúc theo nhóm logic, sản phẩm tổ chức theo mức độ: flash sale, bật, bán chạy (3) Phương tiện truyền thơng: Phương tiện tĩnh (kết hợp hình ảnh văn bản),  Thiết kế nội dung giao diện Danh mục sản phẩm Nội dung trang cung cấp cho người dùng thông tin tất danh mục sản phẩm mà Hoanghamobile cung cấp (1) Phân đoạn nội dung: Tất sản phẩm xếp thành đoạn nội dung bao gồm hình ảnh sản phẩm, tên sản phẩm giá sản phẩm kèm giá khuyến quà tặng (nếu có) (2) Cách tiếp cận cấu trúc: Cấu trúc truyền thống: Điện thoại, Đồng hồ, Laptop,… (3) Phương tiện truyền thông: Phương tiện tĩnh (kết hợp hình ảnh văn bản)  Thiết kế nội dung giao diện trang Chi tiết sản phẩm Nội dung cung cấp cho người dùng xem thơng tin cụ thể sản phẩm lựa chọn (1) Phân đoạn nội dung: Hình ảnh sản phẩm phóng to, theo nội dung chi tiết sản phẩm cung cấp đầy đủ ảnh chi tiết sản phẩm, mô tả sản phẩm, giá bán khuyến Phía sản phẩm liên quan xếp thành đoạn nội dung Sau bình luận sản phẩm đánh giá sản phẩm (2) Cấu trúc nội dung: Cấu trúc theo nhóm logic với mức độ u thích từ đến đánh giá sản phẩm khách hàng Ngồi cịn có phần bình luận trao đổi sản phảm khách hàng với quản trị viên (3) Phương tiện truyền thông: Đa phương tiện (kết hợp video, hình ảnh văn bản)  Thiết kế nội dung giao diện Giỏ hàng Nội dung cho phép người dùng kiểm tra chi tiết sản phẩm chuyển đến trang toán để tiến hành toán cho khách hàng (1) Phân đoạn nội dung: Đoạn nội dung tên sản phẩm, số lượng, giá bán khuyến Bên cạnh phiếu nhập thông tin người đặt hàng mã giảm giá (nếu có) Phía sản phẩm liên quan xếp thành đoạn nội dung (2) Phương tiện truyền thông: Phương tiện tĩnh (kết hợp hình ảnh văn bản)  Thiết kế nội dung giao diện Thanh toán Nội dung cho phép người dùng đặt hàng chọn giỏ hàng tiến hành toán (1) Phân đoạn nội dung: Thông tin người đặt hàng bao gồm họ tên, số điện thoại, phương thức toán, địa chỉ, ghi chú… Bên danh sách sản phẩm đặt hàng (2) Phương tiện truyền thông: Phương tiện tĩnh (văn bản)  Thiết kế nội dung giao diện Đăng ký Nội dung cho người dùng đăng ký thông tin cá nhân (1) Phân đoạn nội dung: Đoạn nội dung tên tài khoản muốn đăng ký, thông tin cá nhân gồm: họ tên, email, số điện thoại, địa chỉ… (2) Phương tiện truyền thơng: Phương tiện tĩnh (hình ảnh văn bản)  Thiết kế nội dung giao diện Đăng nhập Nội dung giúp người dùng đăng nhập thông tin đăng ký (1) Phân đoạn nội dung: Đăng nhập Facebook, Gmail tài khoản đăng ký Ngồi cịn có nội dung Qn mật để người dùng lấy lại mật quên mật (2) Phương tiện truyền thông: Phương tiện tĩnh (hình ảnh văn bản) II Thiết kế theo phân đoạn trình diễn Phân đoạn trình diễn (presentation segment) đơn vị thiết kế gồm nhiều đoạn nội dung kết hợp tạo thành phần trình diễn ứng dụng Đối với website Hoanghamobile với phân đoạn trình diễn mơ tả sau: Phân đoạn trình diễn giao diện Trang chủ  Nguyên tắc 1:  Banner quảng cáo: Thơng báo chương trình khuyến hành  Tìm kiếm: Giúp tìm kiếm sản phẩm theo nhu cầu khách hàng  Kiểm tra đơn hàng: Tra cứu đơn hàng khách hàng  Giỏ hàng: Nơi lưu lại sản phẩm thêm vào giỏ hàng  Bản mobile: Dành cho khách hàng muốn sử dụng giao diện điện thoại  Giới thiệu: Giới thiệu doanh nghiệp Hoàng Hà mobile  Sản phẩm xem: Các sản phẩm khách hàng xem qua  Trung tâm bảo hành: Nơi khách hàng kiểm tra sản phẩm bảo hành  Hệ thống 100 siêu thị: Hệ thống cửa hàng Hoàng Hà Mobile  Tuyển dụng: Nơi đăng tin tuyển dụng doanh nghiệp  Đăng nhập: Dành cho khách hàng đăng ký tài khoản để nhận khuyến mại  Danh mục sản phẩm: Bao gồm sản phẩm công nghệ Điện thoại, Laptop, Tablet, Phụ kiện… Hình minh họa nguyên tắc  Nguyên tắc 2:  Điện thoại: Sau click vào mục điện thoại, tất sản phẩm điện thoại SAMSUNG, iPhone, OPPO… mà hiển thị mục Điện thoại  Tương tự mục Laptop, Tablet, Âm thanh, Smarthome, Phụ kiện… Hình 2 minh họa nguyên tắc  Nguyên tắc 3:  Chi tiết sản phẩm: Khi ấn vào sản phẩm Laptop “Macbook Air 13” 2020 - M1 256GB ” nhảy sang trang cung cấp thông tin sản phẩm, giá, mua ngay, khuyến mãi, tin tức Macbook Air, sản phẩm tương tự, bình luận, Tương tự thành phần Bộ lọc Hãng, Giá, Loại điện thoại… Hình minh họa nguyên tắc   Nguyên tắc 4: Kiểm tra đơn hàng: Để xem sản phẩm bạn lựa chọn thêm vào giỏ hàng, trước bạn phải điền mã đơn hàng bạn Hình minh họa nguyên tắc  Nguyên tắc 5:  Logo: Khi nhấn vào logo cho dù người dùng có nơi trang web trở trang chủ  Tương tự có: Tìm kiếm, Đăng nhập, Giỏ hàng,  Phân đoạn trình diễn có icon mạng xã hội giúp người dùng điều hướng trực tiếp tới Fanpage Hoàng Hà Mobile Facebook, Instagram, Youtube, Tiktok Đồng thời phân đoạn có icon Back-to-top để trở đầu trang web Hình 5: minh họa nguyên tắc Phân đoạn trình diễn giao diện trang Giới thiệu  Nguyên tắc 1: Khối nội dung chứa đoạn nội dung giới thiệu chung Hoàng Hà mobile, dấu mốc quan trọng, tôn hoạt động, tầm nhìn sứ mệnh Hình 6: minh họa Phân đoạn trình diễn Giới thiệu Phân đoạn trình diễn giao diện trang chi tiết sản phẩm Mở sản phẩm tìm kiếm, lựa chọn nhấp vào sản phẩm để biết thêm nội dung chi tiết Phân đoạn trình diễn giao diện trang chi tiết sản phẩm bao gồm:    Nguyên tắc  Điện thoại: hiển thị tất loại sản phẩm hiển thị ảnh, tên, giá, dung lượng điện thoại, giúp người dùng dễ dàng so sánh điện thoại với  Tương tự cho Laptop, Tablet, Phụ kiện, Âm thanh, Smarthome, Đồng hồ Nguyên tắc  Chi tiết sản phẩm:Khi ấn vào sản phẩm Laptop “Macbook Air 13” 2020 - M1 256GB ” nhảy sang trang cung cấp thông tin sản phẩm, giá, mua ngay, khuyến mãi, tin tức Macbook Air, sản phẩm tương tự, bình luận,  Tương tự sản phẩm khác Laptop, Tablet, Phụ kiện, Âm thanh, Đồng hồ… Nguyên tắc 5: Phân đoạn trình diễn có icon mạng xã hội giúp người dùng điều hướng trực tiếp tới Fanpage Hoàng Hà Mobile Facebook, Instagram, Youtube, Tiktok Đồng thời phân đoạn có icon Back-to-top để trở đầu trang web Hình 7: minh họa Phân đoạn trình diễn Chi tiết danh mục sản phẩm Phân đoạn trình diễn giao diện trang Danh mục sản phẩm   Nguyên tắc 1:  Danh mục sản phẩm phân chia thành danh mục sản phẩm khác giúp người dùng dễ dàng tìm kiếm sản phẩm cơng nghệ theo ý muốn Nguyên tắc 3:  Sau chọn danh mục sản phẩm tùy chọn Điện thoại, Đồng hồ, Laptop, Tablet, Âm thanh, SmartHome, Phụ kiện, Đồng chơi công nghệ, Máy trôi, Sửa chữa… Hình 8: minh họa trang danh mục sản phẩm Phân đoạn trình diễn giao diện trang Tin tức   Nguyên tắc 1: Giúp tìm kiếm sản phẩm theo nhu cầu khách hàng Với thành phần hệ thống làm khác so với trang khác nhiên bao gồm Công cụ, Logo, Điều hướng, Footer Nguyên tắc 3: Khi người đọc muốn tìm hiểu nội dung Tin tức cơng nghệ, người dùng điều hướng click chuột vào “Tin tức” menu Khi hiển thị phần nội dung tin tức khác Các khối nội dung Tin tức bật, Các sản phẩm công nghệ… Phân đoạn trình diễn giao diện Trang Tuyển dụng   Nguyên tắc 1: Nơi đăng tin tuyển dụng doanh nghiệp Nguyên tắc 3: Khi click vào “Tuyển dụng” xuất khối nội dung như: Việc làm bật, Khu vực, Đãi ngộ, Hình 11: minh họa trang tuyển dụng  Nguyên tắc 5: Phân đoạn trình diễn có icon mạng xã hội giúp người dùng điều hướng trực tiếp tới Fanpage Hoàng Hà Mobile Facebook, Instagram, Youtube, Tiktok Đồng thời phân đoạn có icon back-to-top để trở đầu trang web Phân đoạn trình diễn giao diện Trang Sản phẩm xem  Nguyên tắc 1: Hiển thị sản phẩm mà khách xem qua  Nguyên tắc 3: Sau người dùng chọn vào sản phẩm xem chi tiết sản phẩm  Ngun tắc 5: Phân đoạn trình diễn có icon mạng xã hội giúp người dùng điều hướng trực tiếp tới Fanpage Hoàng Hà Mobile Facebook, Instagram, Youtube, Tiktok Đồng thời phân đoạn có icon back-to-top để trở đầu trang web Hình 12 : minh họa trang sản phẩm xem Phân đoạn Trang tra cứu đơn hàng   Nguyên tắc 1: Tra cứu đơn hàng khách hàng Nguyên tắc 4: Khi người dùng muốn tra cứu thông tin đơn hàng, người dùng phải bổ sung mã đơn hàng Hình 13: minh họa tra cứu đơn hàng  Nguyên tắc 5: Phân đoạn trình diễn có icon mạng xã hội giúp người dùng điều hướng trực tiếp tới Fanpage Hoàng Hà Mobile Facebook, Instagram, Youtube, Tiktok Đồng thời phân đoạn có icon back-to-top để trở đầu trang web Phân đoạn cung cấp chức đăng nhập giúp người dùng quản lý đơn hàng cá nhân trải nghiệm website tốt III Thiết kế cấu trúc ứng dụng Thiết kế cấu trúc “Trang chủ”: +Trang chủ sử dụng cấu trúc theo lớp logic, nội dung xếp từ banner quảng cáo đến khuyến (Flash sale), bật xu hướng loại sản phẩm +Trang chủ liên kết với trang Chat trực tiếp, Logo, giỏ hàng,kiểm tra đơn hàng, danh mục sản phẩm, chi tiết sản phẩm,hỏi đáp + Thanh điều hướng bên trái liên kết với trang mạng xã hội +Thanh điều hướng bên phải liên kết với Chatbox Hình 1: minh họa trang chủ +Phần footer Trang chủ cung cấp thông tin hỗ trợ dịch vụ, thông tin liên hệ, hệ thống siêu thị, tổng đài, hình thức tốn, vận chuyển Ngồi cịn địa doanh nghiệp, số đăng ký kinh doanh Hình : minh họa footer trang chủ Thiết kế cấu trúc danh mục sản phẩm +Trang danh mục sản phẩm xây dựng hub page, kết nối với danh mục chủ đề dịch vụ chi tiết Từ cung cấp thơng tin nhìn tổng quan nhanh cho người dùng Trang danh mục sản phẩm không theo cấu trúc theo lớp mà theo cấu trúc logic gồm lọc xếp sản phẩm theo:điện thoại ,đồng hồ, laptop,tablet, âm thanh,phụ kiện, đồ chơi công nghệ,… +Danh mục sản phẩm liên kết với: Trang chủ, điện thoại, đồng hồ, laptop,tablet, âm thanh,phụ kiện, đồ chơi cơng nghệ,… Hình 3: minh họa danh mục sản phẩm Thiết kế cấu trúc Chi tiết sản phẩm: +Chi tiết sản phẩm Hoàng Hà Mobile sử dụng cấu trúc nội dung theo lớp: Các nội dung sản phẩm tổ chức từ tổng quát đến chi tiết Tổng quát sản phẩm từ trang chủ, trang danh mục sản phẩm đến chi tiết sản phẩm trang chi tiết sản phẩm, trang toán (tuân theo nguyên tắc click, người dùng đến trang chi tiết sản phẩm với tối đa lần nhấp chuột) +Chi tiết sản phẩm liên kết với: danh mục sản phẩm, giỏ hàng, đặt hàng& tốn Hình 4: minh họa trang sản phẩm Tai nghe AirPords Pro Thiết kế cấu trúc Giỏ hàng: +Giỏ hàng sử dụng cấu trúc logic bao gồm tên sản phẩm, số lượng, màu sắc, giá bán, mã giảm giá, thông đặt hàng +Liên kết với trang chi tiết sản phẩm, đặt hàng& tốn Hình 5: minh họa trang giỏ hàng Thiết kế cấu trúc trang đặt hàng & toán +Trang toán chia thành phần Một bên tên sản phẩm, giá khuyến Một bên chi tiết đơn hàng mà khách hàng muốn đặt (màu sắc, số lượng, thơng tin khách hàng, hình thức nhận hàng) +Liên kết tới trang chủ, giỏ hàng, chi tiết sản phẩm Hình 6: minh họa trang đặt hàng & toán IV Thiết kế tương tác -Điều hướng xác định trước Ví dụ: Sau khách hàng tốn hồn tất, có điều hướng để lựa chọn “Quay trang chủ” -Điều hướng người sử dụng xác định Ví dụ: Điều hướng từ mục “Đồng hồ” menu Trang chủ, thực trình lựa chọn số mục mà hệ thống phân loại “Apple Watch”, “Samsung”… -Điều hướng xác định thích ứng Ví dụ: Khi người dùng sử dụng cơng cụ tìm kiềm để tìm kiếm sản phẩm Apple q trình xem thơng tin Hệ thống vào nội dung người dùng tìm kiếm để điều hướng người dùng đến trang thông tin chứa đoạn nội dung phù hợp nhu cầu như: Tai nghe Apple Airpod, iPhone 12, … V Thiết kế giới hạn tiếp cận  Với thông tin cá nhân Bao gồm cá nhân hay tổ chức sở hữu thông tin cá nhân người tổ chức sở hữu hệ thống TMĐT Trong hệ thống TMĐT Website Hồng Hà Mobile, thơng tin cá nhân SĐT, Địa chỉ, Họ tên, ngày sinh, email, cước công dân khách hàng thông tin bị giới hạn tiếp cận Cụ thể đối tượng phép tiếp cận người dùng sở hữu thông tin cá nhân Đối tượng phép tiếp cận người cần thông tin người dùng cách đáng, ví dụ đơn vị bán cần thông tin cá nhân người dùng như: Tên, số điện thoại, địa để vận chuyển hàng hóa, lưu hóa đơn  Với thơng tin kế tốn Thơng tin kế tốn chứa liệu quan trọng Trong khoản nội dung người dùng khơng có quyền tiếp cận, nhân viên kế toán nhà quản lý tổ chức kinh doanh phép tiếp cận thông tin  Với thông tin giá doanh thu bán hàng Đối với thông tin doanh thu bán hàng hệ thống Website Hoàng Hà Mobile, nội dung bị giới hạn tiếp cận, phép tiếp cận người bán - người tổ chức kinh doanh Hoàng Hà Mobile Các thông tin giá thông tin sản phẩm không bị giới hạn tiếp cận, người bán người dùng tiếp cận thông tin qua nội dung phân đoạn nội dung  Sự hạn chế tiếp cận bổ sung Dựa sách Hồng Hà Mobile Người dùng yêu cầu phải định danh cách sử dụng tên người dùng mật để quyền truy cập vào phân đoạn trình diễn bị hạn chế VI Mơ tả phân đoạn trình diễn Trang chủ Xác định phân đoạn trình diễn Tên phân đoạn Trang chủ Diễn giải Giao diện Trang chủ cung cấp thơng tin tổng qt website Hồng Hà Mobile Các yêu cầu phân đoạn phục vụ Nội dung phân đoạn bao hàm Thông tin tổng quát Website; đoạn nội dung sản phẩm bật, sản phẩm bán chạy, sản phẩm khuyến mãi, Flash sale,… Người dùng Tất người phân đoạn phục vụ Nội dung yếu tố cần thiết kế Nhiệm vụ phân đoạn phục vụ -Cung cấp thông tin sản phầm -Chọn mua, toán -Hỏi đáp, phản hồi, đánh giá Liên kết với phân đoạn khác Liên kết với tất phân đoạn khác hệ thống kiểm tra đơn hàng, danh mục sản phẩm, tin tức, liên hệ, đăng nhập, đăng ký, giỏ hàng, chitiết sản phẩm, Những thuộc tính, Sản phẩm bật, sản phẩm đặc điểm, nội dung bán chạy, sản phẩm phân đoạn khuyến mãi(Flash sale) Các đoạn nội dung bao gồm hình ảnh sản phẩm, tên sản phẩm giá sản phẩm kèm giá khuyến Hoạt động thực thông qua tương tác với phân đoạn Hiển thị chi tiết thông tin nội dung, đoạn nội dung phân đoạn trình diễn khác Giới hạn tiếp cận, truy cập Khơng Trang đăng ký Xác định phân đoạn trình diễn Tên phân đoạn Đăng ký Diễn giải Nơi người dùng cung cấp thông tin cá nhân chi tiết để đăng ký trở thành khách hàng Hoàng Hà Mobile Các yêu cầu Nội dung phân phân đoạn bao hàm đoạn phục vụ Người dùng phân đoạn phục vụ Nội dung yếu tố cần thiết kế Đoạn nội dung Tạo tài khoản bao gồm Tài khoản, Email, Mật khẩu, Họ tên người dùng, Số điện thoại, Địa chỉ, Ngày tháng năm sinh, Giới tính Tất người dùng Nhiệm vụ phân đoạn phục vụ Điền thông tin Tài khoản, Email, Mật khẩu, Họ tên người dùng, Số điện thoại, Ngày tháng năm sinh, Địa chỉ, Giới tính Liên kết với phân đoạn khác Liên kết với Trang chủ, Trang giỏ hàng, Trang giới thiệu, Trang Sản phẩm xem, Trang thông tin bảo hành, Trang tuyển dụng, Trang tra cứu đơn hàng, Trang danh mục sản phẩm, Trang đăng nhập Những thuộc tính, đặc điểm, nội dung phân đoạn Tài khoản người dùng: - Tên tài khoản - Email - Mật - Họ tên - Số điện thoại - Địa - Giới tính - Ngày tháng năm sinh Hoạt động thực Hệ thống gửi xác minh thông báo việc đăng ký thông qua tài khoản thành công lỗi phát sinh tương tác với phân đoạn Giới hạn tiếp cận, truy cập Không Trang đăng nhập Xác định phân đoạn trình diễn Tên phân đoạn Đăng nhập Diễn giải Người dùng dùng tài khoản tạo để đăng nhập vào Website Hoàng Hà Mobile Các yêu cầu phân đoạn phục vụ Nội dung phân đoạn bao hàm Nội dung đăng nhập bao gồm nhập Tài khoản Mật đăng nhập tài khoản mạng xã hội Người dùng phân đoạn phục vụ Người dùng đăng ký tài khoản Nhiệm vụ phân đoạn phục vụ Người dùng nhập Tài khoản Mật hợp lệ đăng ký đăng nhập tài khoản mạng xã hội Liên kết với phân đoạn khác Liên kết với Trang chủ, Trang giỏ hàng, Trang giới thiệu, Trang Sản phẩm xem, Trang thông tin bảo hành, Trang tuyển dụng, Trang tra cứu đơn hàng, Trang danh mục sản phẩm, Trang đăng ký Những thuộc tính, đặc điểm, nội dung phân đoạn Tài khoản người dùng: - Tài khoản - Mật Quên mật (Nếu cần) Hoạt động thực thông qua tương tác với phân đoạn Hệ thống thông báo lỗi cần đăng nhập lại người dùng nhập sai thơng tin, thơng báo đăng nhập thành cơng Sau người dùng tiếp tục thao tác website hệ thống xem sản phẩm, thực trình đặt hàng, tốn Giới hạn tiếp cận, truy cập Khơng Nội dung yếu tố cần thiết kế Trang danh mục sản phẩm Xác định phân đoạn trình diễn Tên phân đoạn Danh mục sản phẩm Diễn giải Cung cấp thơng tin tồn loại hình sản phẩm cơng nghệ mà Hồng Hà Mobile cung cấp Các yêu cầu Nội dung phân phân đoạn bao hàm đoạn phục vụ Người dùng phân đoạn phục vụ Nội dung yếu tố cần thiết kế Các doanh mục sản phẩm mà Hoàng Hà Mobile cung cấp điện thoại, máy tính, đồng hồ, máy tính bảng, loa, phụ kiện, Tất người dùng Nhiệm vụ phân đoạn phục vụ Xem loại hình sản phẩm Liên kết với phân đoạn khác Liên kết với Trang chủ, Trang giỏ hàng, Trang giới thiệu, Trang Sản phẩm xem, Trang thông tin bảo hành, Trang tuyển dụng, Trang tra cứu đơn hàng, Trang đăng nhập Những thuộc tính, đặc điểm, nội dung phân đoạn Tên tất loại hình sản phẩm cơng nghệ mà Hồng Hà Mobile cung cấp Hoạt động thực Người dùng xem nội dung đoạn thông qua nội dung danh mục sản phẩm mà họ cần tương tác với phân tìm kiếm đoạn Giới hạn tiếp cận, truy cập Không Trang giỏ hàng Xác định phân đoạn trình diễn Tên phân đoạn trình diễn Diễn giải Giỏ hàng Nội dung cho phép người dùng kiểm tra chi tiết sản phẩm chuyển đến trang toán để tiến hành toán cho khách hàng Các yêu cầu phân đoạn phục vụ Nội dung mà phân đoạn bao hàm Người dùng phân đoạn phục vụ Đoạn nội dung tên sản phẩm, số lượng, màu sắc, giá bán khuyến Bên cạnh phiếu nhập thông tin người đặt hàng mã giảm giá (nếu có) Phía sản phẩm liên quan xếp thành đoạn nội dung Chỉ khách hàng thêm sản phẩm vào giỏ hàng Nhiệm vụ phân đoạn phục vụ Lưu trữ sản phẩm mà khách hàng mua mua tương lai Công cụ mà phân đoạn thay Thanh điều hướng, Thanh tìm kiếm Liên kết tới phân đoạn khác Trang chủ, Danh mục sản phẩm, Thanh toán, Đăng nhập/đăng ký Nội dung yếu tố cần thiết kế Những thuộc tính, đặc điểm, nội dung phân đoạn Hoạt động thực thông Click vào logo đưa khách hàng vào qua tương tác với phân trang chủ đoạn Ấn xác nhận đặt hàng để vào trang Thanh toán Ấn điều hướng để tương tác với danh mục sản phẩm Giới hạn tiếp cận/truy cập Chỉ người dùng muốn mua sản phẩm giỏ hàng Những u cầu khác Khơng Trang chi tiết sản phẩm Xác định phân đoạn trình diễn Tên phân đoạn Các yêu cầu phân đoạn phục vụ Nội dung yếu tố cần thiết kế Chi tiết sản phẩm Diễn giải Cung cấp thông tin chi tiết loại sản phẩm người dùng có nhu cầu mua tìm hiểu Nội dung phân đoạn bao hàm Các đoạn nội dung bao gồm tên sản phẩm, hình ảnh,video, giá sản phẩm(giá khuyến có), số lượng, màu sắc, giới thiệu công dụng sản phẩm, so sánh sản phẩm tương tự, bình luận, đánh giá gợi ý sản phẩm liên quan Người dùng phân đoạn phục vụ Khách hàng có nhu cầu mua tìm hiểu chi tiết sản phẩm Nhiệm vụ phân đoạn phục vụ Xem thông tin chi tiết, thêm vào giở hàng, đặt hàng sản phẩm, bình luận đánh giá sản phẩm sau mua Liên kết với phân đoạn khác Liên kết với Trang chủ trang Danh mục Sản phẩm, Giỏ hàng, Thanh tốn Những thuộc tính, đặc điểm, nội dung phân đoạn -Tên phẩm, mô tả chi tiết sản phẩm màu sắc, giá bán, cơng dụng,… -Thêm vào giỏ hàng -Mua hàng -Bình luận, đánh giá Hoạt động thực thông qua tương tác với phân đoạn -Người dùng chọn sản phẩm xem chi tiết, chọn Mua , lựa chọn màu sắc, số lượng sau điền thơng tin người dùng, hình thức đặt hàng -Tiến hành đặt hàng -Bình luận, đánh giá sản phẩm Giới hạn tiếp cận, truy cập Khơng Trang đặt hàng& tốn Tên phân đoạn Đặt hàng & Thanh toán Diễn giải Cung cấp cho khách hàng thơng tin q trình từ q trình đặt hàng đến tốn Thơng tin liên hệ, Địa giao hàng, Phương thức tốn, Đặt hàng, Thơng tin khuyến mại Xác định phân đoạn trình diễn Các yêu cầu phân đoạn phục vụ Nội dung yếu tố cần thiết kế Nội dung phân đoạn bao Hàm Người dùng phân đoạn phục vụ Người dùng có đơn hàng cần tốn Nhiệm vụ phân đoạn phục vụ Nhập thông tin liên hệ ,nhập địa giao hàng, nhập hình thức nhận hàng, xác nhận click đặt hàng Liên kết với phân đoạn Khác Liên kết với Giỏ hàng, Trang chủ, Danh mục sản phẩm, Chi tiết sản phẩm Những thuộc tính, đặc điểm, nội dung phân đoạn - Thông tin đơn hàng ( Tên sản phẩm, Đơn giá, Số lượng, Thành tiền) - Thông tin địa giao hàng (Tên, Số điện thoại, Địa chỉ, Email) - Thông tin cách thức nhận hàng (Tại cửa hàng, nhà) VII Tài liệu tham khảo TS Lê Thị Ngọc Diệp (2021), Bài giảng Phân tích thiết kế hệ thống thương mại điện tử, Học viện Cơng nghệ Bưu Viễn thơng Trần Đình Quế (2017), Giáo trình Phân tích thiết kế hệ thống thông tin, Học viện Công nghệ Bưu Viễn thơng Website Hồng Hà Mobile ( link: https://hoanghamobile.com ) ... người dùng quản lý đơn hàng cá nhân trải nghiệm website tốt III Thiết kế cấu trúc ứng dụng Thiết kế cấu trúc “Trang chủ”: +Trang chủ sử dụng cấu trúc theo lớp logic, nội dung xếp từ banner quảng... I Thiết kế nội dung II Thiết kế theo phân đoạn trình diễn III Thiết kế cấu trúc ứng dụng 14 IV Thiết kế tương tác 17 V Thiết kế giới hạn... nghệ mà Hoàng Hà Mobile cung cấp Các yêu cầu Nội dung phân phân đoạn bao hàm đoạn phục vụ Người dùng phân đoạn phục vụ Nội dung yếu tố cần thiết kế Các doanh mục sản phẩm mà Hoàng Hà Mobile cung