1.03 Tìm kiếm và lọc sách - thanhstar260/CNPM GitHub Wiki

#I. Tìm kiếm sách

Ý tưởng

Tìm kiếm giúp người dùng tiết kiệm thời gian tìm sách, không cần duyệt qua hàng trăm cuốn sách một cách thủ công để tìm kiếm cuốn sách phù hợp. Người dùng có thể tìm kiếm theo tên, thể loại, tên tác giả, ... trang web sẽ lọc ra những cuốn sách chứa thông tin tìm kiếm và hiển thị cho người dùng. vd: Người dùng muốn tìm kiếm sách có tên "Nghĩ giàu và làm giàu", trang web sẽ hiển thị tất cả các cuốn sách chứa thông tin (tên, thể loại, tác giả, ...) có 1 trong 4 từ khóa "nghĩ", "giàu", "và", "làm".

Hiện thực hóa trên website

  • Bước 1: Trên trang chủ và trang hiển thị sách của website có thanh tìm kiếm ở giữa đầu trang, người dùng sẽ nhập thông tin cuốn sách cần tìm(tên, thể loại, tác giả, ...). Sau khi nhập xong, bên cạnh thanh tìm kiếm có nút màu xanh, bên trong là hình kính lúp màu trắng, người dùng nhấn vào đó, thao tác tìm kiếm hoàn thành, trang web bắt đầu tìm kiếm kết quả.
  • Bước 2: Sau khi tìm kiếm, nếu có kết quả trang web sẽ hiển thị kết quả tìm kiếm ở dạng lưới 3x4, mỗi ô sẽ chứa thông tin về sách bao gồm ảnh bìa sách, tên tác giả, tên sách, số sao đánh giá, giá thuê mặc định theo ngày và nút thêm vào giỏ hàng.
  • Bước 3: Người dùng có thể thay đổi dạng hiển thị thành danh sách: trên lưới danh sách bên trái có icon và chữ "Filter", bên cạnh chữ "Filter" là icon list(dạng danh sách) và icon grid(dạng lưới), người dùng muốn thay đổi dạng hiển thị có thể chọn 1 trong 2 icon này. Người dùng cũng có thể chọn thứ tự hiển thị(hiển thị theo giá từ thấp đến cao hoặc từ cao xuống thấp): trên lưới danh sách bên phải 1 ô nút hình chữ nhật bên trong có chữ "Thứ tự mặc định" và mũi tên đi xuống. người dùng nhấn vào đó ngay lập tức hiển thị 2 dòng chữ "theo giá từ thấp đến cao" và "theo giá từ cao xuống thấp", người dùng nhấn chọn thứ tự hiển thị mà mình muốn.
  • Bước 4: Với các kết quả hiển thị, người dùng có thể lọc tiếp theo giá, đánh giá hoặc quốc gia. Bên cạnh lưới sản phẩm phía bên trái có thanh bộ lọc chứa các lựa chọn như giá, đánh giá, quốc gia.
    • Với giá, có 2 ô "Từ" và "Đến", người dùng nhập vào cận dưới và cận trên của khoảng giá của các sản phẩm muốn hiển thị.
    • Với đánh giá, có 5 lựa chọn gồm: từ 1 sao trở lên, 2 sao trở lên, từ 3 sao trở lên, từ 4 sao trở lên và 5 sao, người dùng chọn 1 trong các lựa chọn để trang web lọc ra và hiển thị kết quả.
    • Với quốc gia, có các lựa chọn như: Việt Nam, Canada, Nhật Bản, Mỹ, ... ở dưới có nút xem thêm hiện thêm 1 vài quốc gia nếu các quốc gia hiển thị không phải quốc gia người dùng muốn lọc, người dùng tick vào ô trống trước quốc gia rồi enter để lọc.
  • Bước 5: Trong trường hợp trang web không tìm thấy kết quả nào phù hợp với tìm kiếm của khách hàng, trang web sẽ hiển thị thông báo "Không có kết quả tìm kiếm phù hợp" và đề xuất 1 vài sách phổ biến để người dùng xem thử. Ví dụ tìm kiếm sách với từ khóa "Dòng chảy"(tìm kiếm có kết quả): Ví dụ tìm kiếm sách với từ khóa "Dòng chảy"(không có kết quả):

User Flow

#II. Lọc sách