STT Tên màn hình Ý nghĩa / Ghi chú
1 Đăng nhập Đăng nhập vào hệ thống
2 Đăng ký Đăng ký tài khoản mới
3 Trang chủ Trang chủ của hệ thống, chứa các danh mục sản phẩm, sản phẩm đang hot, gợi ý sản phẩm 4 Danh sách sản phẩm Hiển thị danh sách sản phẩm theo danh mục
hoặc theo từ khoá tìm kiếm
5 Chi tiết sản phẩm Hiển thị thông tin chi tiết của sản phẩm 6 Giỏ hàng Hiển thị các sản phẩm đã thêm vào giỏ hàng 7 Xác nhận đặt hàng Xác nhận các thông tin để đặt hàng
8 Yêu thích Hiển thị các sản phẩm đã thêm vào danh sách yêu thích
9 Danh sách đơn mua Hiển thị danh sách các đơn hàng đã mua 10 Chi tiết đơn mua Hiển thị chi tiết đơn hàng đã mua
11 Đánh giá sản phẩm Màn hình dùng để đánh giá sản phẩm 12 Cửa hàng của bạn Hiển thị danh sách sản phẩm đã rao bán 13 Thêm sản phẩm Màn hình dùng để thêm sản phẩm
41 14 Danh sách đơn bán Hiển thị danh sách đơn hàng đã bán
15 Chi tiết đơn bán Hiển thị chi tiết thông tin đơn bán 16 Quản lý tài khoản Hiển thị thông tin cá nhân tài khoản 17 Đổi mật khẩu Màn hình dùng để đổi mật khẩu 18 Chatbot tư vấn Màn hình chatbot tư vấn
5.2.Chi tiết màn hình
5.2.1. Màn hình “Đăng nhập”
Hình 5.1: Màn hình Đăng nhập
Màn hình dùng để đăng nhập vào hệ thống, với các thành phần cơ bản của một trang đăng nhập thường thấy:
Ô text để nhập Tên đăng nhập.
42
Nút Đăng nhập. Khi bấm nút có hai trường hợp xảy ra:
o Nếu thông tin để trống hoặc không đúng, hệ thống sẽ báo lỗi đăng nhập không thành công.
o Nếu thông tin chính xác, hệ thống sẽ điều hướng đến Trang chủ.
Nút Đăng ký ngay: hệ thống sẽ điều hướng đến trang Đăng ký khi người dùng bấm vào nút này.
5.2.2. Màn hình “Đăng ký”
Hình 5.2: Màn hình Đăng ký
Màn hình dùng để đăng ký tài khoản mới, với các thành phần cơ bản của một trang đăng ký thường thấy:
Các ô text để nhập thông tin: họ và tên, địa chỉ email, số điện thoại, tên đăng nhập.
Radio button để chọn giới tính
Các ô password để nhập Mật khẩu và nhập lại để xác nhận.
Checkbox yêu cầu người dùng cam kết đã đọc và đồng ý với điều khoản.
Nút Đăng ký. Khi bấm nút có hai trường hợp xảy ra:
o Nếu thông tin để trống hoặc không đúng, hệ thống sẽ báo lỗi đăng ký không thành công.
43
o Nếu thông tin đầy đủ và mật khẩu khớp, hệ thống sẽ tự động đăng nhập và điều hướng đến Trang chủ.
Nút Đăng nhập ngay: hệ thống sẽ điều hướng đến trang Đăng nhập khi người dùng bấm vào nút này.
5.2.3. Màn hình “Trang chủ”
Hình 5.3: Màn hình Trang chủ (phần trên)
Thiết kế của nhóm em hướng đến sự tối giản, hài hoà, không bị rối mắt. Với tông màu chủ đạo là màu xanh biển, giúp dịu mắt và tạo cảm giác có năng lượng tích cực.
44 Ngoài ra nhóm em còn sử dụng một số icon có animation chuyển động để website sinh động hơn.
Phía trên cùng là phần header của website, bao gồm các thành phần:
Logo của shop: khi nhấn vào sẽ điều hướng đến Trang chủ nếu đang ở trang khác.
Thanh tìm kiếm: để người dùng nhập từ khoá tìm kiếm, và bấm vào biểu tượng kính lúp để tìm.
Nút giỏ hàng: đi đến giỏ hàng.
Nút yêu thích: đi đến danh sách sản phẩm yêu thích.
Mục cá nhân bao gồm 5 phần nhỏ:
Tài khoản: đi đến trang quản lý thông tin cá nhân.
Cửa hàng của bạn: đi đến danh sách sản phẩm bạn đã rao bán.
Đơn mua: đi đến trang quản lý đơn hàng đã mua.
Đơn bán: đi đến trang quản lý đơn hàng đã bán.
Đăng xuất: đăng xuất khỏi hệ thống và quay về trang Đăng nhập. Tiếp theo là phần Danh mục sản phẩm. Vì website có quản lý sản phẩm theo danh mục nên mục này giúp người dùng dễ dàng tìm kiếm sản phẩm hơn.
45
Hình 5.4: Màn hình Trang chủ (phần dưới)
Phần dưới của Trang chủ chứa footer của website, bao gồm một số tiện ích và thông tin liên hệ, mạng xã hội.
46
5.2.4. Màn hình “Danh sách sản phẩm”
Hình 5.5: Màn hình Danh sách sản phẩm
Màn hình Danh sách sản phẩm được mở khi người dùng tìm kiếm một từ khoá hoặc chọn một danh mục trong Danh mục sản phẩm.
Màn hình này bao gồm 4 phần chính:
Danh sách các sản phẩm: nhấn vào một sản phẩm để xem chi tiết.
Bộ lọc tìm kiếm theo giá, số lượng đã bán hoặc lượt đánh giá.
Bộ sắp xếp theo thời gian đăng bán, bán chạy nhất hoặc giá tăng/giảm dần.
47
5.2.5. Màn hình “Chi tiết sản phẩm”
Hình 5.6: Màn hình Chi tiết sản phẩm (phần trên)
Phần trên của màn hình bao gồm các thông tin cơ bản của sản phẩm như: hình ảnh, tên sản phẩm, lượt đánh giá trung bình, số lượt mua, giá, ...
Người dùng có thể chọn phân loại hàng, số lượng, sau đó bấm vào “Thêm vào giỏ hàng” để thêm vào giỏ. Nếu bấm vào nút “Yêu thích”, sản phẩm sẽ được lưu vào danh sách yêu thích để có thể mua sau. Phía dưới là mô tả chi tiết về sản phẩm.
48
Hình 5.7: Màn hình Chi tiết sản phẩm (phần dưới)
Phía dưới mỗi sản phẩm là những đánh giá về sản phẩm đó của các người dùng đã mua, giúp khách hàng có cái nhìn khách quan hơn về chất lượng sản phẩm.
49
5.2.6. Màn hình “Giỏ hàng”
Hình 5.8: Màn hình Giỏ hàng
Màn hình Giỏ hàng bao gồm danh sách các sản phẩm trong giỏ hàng, bao gồm thông tin chung của sản phẩm, và một checkbox bên cạnh mỗi sản phẩm, mang ý nghĩa chọn sản phẩm đó.
Dưới cùng của trang có một thanh control chứa các tuỳ chọn:
Nút tick để chọn tất cả sản phẩm.
Tổng số tiền thanh toán của các sản phẩm đã chọn.
Nút Thanh toán: nhấn vào sẽ đến trang Xác nhận đặt hàng.
50
5.2.7. Màn hình “Xác nhận đặt hàng”
51
Hình 5.10: Màn hình Xác nhận đặt hàng (nửa dưới)
Màn hình Xác nhận đặt hàng hiển thị khi người dùng nhấn vào Thanh toán bên phía giỏ hàng. Nửa trên màn hình này sẽ hiển thị thông tin các sản phẩm mà người dùng đã đặt, bao gồm: hình ảnh, tên sản phẩm, đơn giá, số lượng, thành tiền, tổng giá trị đơn hàng và giảm giá.
Hệ thống giảm giá trên website sử dụng một đơn vị là Xu. Khi người dùng đánh giá về một sản phẩm, họ sẽ nhận được một số Xu để giảm giá cho các đơn hàng sau.
Nửa dưới màn hình bao gồm các thông tin về địa chỉ nhận hàng như tên, số điện thoại, địa chỉ cụ thể. Khi nhấn vào nút Xác nhận đặt hàng, đơn hàng sẽ được chuyển đến cho người bán để xác nhận đơn hàng. Nếu chọn Quay lại giỏ hàng, người dùng sẽ được điều hướng trở lại trang Giỏ hàng.
52
5.2.8. Màn hình “Yêu thích”
Hình 5.11: Màn hình Yêu thích
Về cấu trúc, màn hình này khá giống với Giỏ hàng. Với mỗi sản phẩm yêu thích, người dùng có thể bấm vào “Thêm vào giỏ hàng” để thêm vào giỏ, hoặc bấm “Xoá” để xoá khỏi danh sách yêu thích. Người dùng cũng có thể chọn nhiều sản phẩm và thao tác thêm vào giỏ hàng hoặc xoá hàng loạt qua thanh control bar phía dưới.
53