Hướng dẫn phân tích UX – Ví dụ batdongsan.com.vn và điền bảng.md

Hướng dẫn phân tích UX – Ví dụ batdongsan.com.vn

Bảng điền kết quả Make a copy sheet rồi điền thông tin thu thập được và đánh giá

1. Cấu trúc & điều hướng

• Menu chính: Quan sát header: “Mua Bán”, “Cho Thuê”, “Dự Án”, “Tin Tức”…

  • Ghi chú: menu có dropdown khi hover, hiển thị nhiều mục con.
  • Đánh giá: Rõ ràng, dễ nhìn, nhưng dropdown hơi dài → có thể đánh giá 4/5.

• Breadcrumb: xuất hiện khi xem chi tiết tin rao (ví dụ: “Trang chủ > Nhà đất > Hà Nội > Căn hộ”)

  • Ghi chú: giúp người dùng biết vị trí, dễ quay lại.

2. Link & tương tác

• Các link:

  • Link listing bất động sản có underline khi hover → dễ nhận biết.
  • CTA “Liên hệ môi giới” nổi bật bằng màu cam → dễ nhấn.

• Behavior khi click:

  • Link listing mở trong cùng tab, nút “Xem chi tiết” cũng vậy.

3. Biểu mẫu (Forms)

• Form tìm kiếm:

  • Các input rõ ràng: “Tỉnh/Thành phố”, “Loại BĐS”, “Mức giá”.
  • Dropdown custom, khi click xổ xuống và chọn → có animation nhẹ.
  • Khi nhập sai (ví dụ giá min > giá max) → hiện tooltip lỗi.

• Submit button:

  • “Tìm kiếm” có hover effect màu đậm, click xong loading spinner → phản hồi tức thì.

4. Hover & focus

• Link, nút, hình ảnh đều có hover effect: đổi màu, shadow, underline.
• Trên bàn phím (tab) → focus ring rõ ràng, dễ thấy.

5. Nội dung & thông tin

• Tiêu đề h1/h2 rõ ràng, thứ tự hợp lý: H1 là “Mua Bán Nhà Đất”, H2 là danh sách tin.
• Text content dễ đọc, font size và line-height hợp lý.
• Hình ảnh listing hiển thị thumbnail, hover có shadow → giúp nổi bật tin.

6. Trải nghiệm nâng cao

• Responsive: kiểm tra trên mobile → menu chuyển sang hamburger, dropdown chuyển thành accordion.
• Animation: nhẹ nhàng khi hover ảnh listing, loading spinner khi tìm kiếm.
• Tốc độ load: khá nhanh trên desktop, mobile đôi khi chậm nếu nhiều hình.
• Công cụ tìm kiếm nội bộ dễ dùng, autocomplete khi gõ địa điểm.

7. Accessibility

• Contrast màu chữ và nền ổn → dễ đọc.
• Hình ảnh có alt text cơ bản.
• Tab order hợp lý, nhưng một số dropdown hơi khó thao tác bằng bàn phím.

8. Tổng quan

• Điểm mạnh UX:

  • Menu rõ ràng, dropdown đầy đủ.
  • Form tìm kiếm tiện dụng, có phản hồi lỗi.
  • Responsive tốt, hover/focus nhất quán.

• Điểm yếu UX:

  • Dropdown menu quá dài → đôi khi khó chọn nhanh.
  • Một số hình ảnh load chậm trên mobile.

• Đề xuất cải thiện:

  • Rút gọn dropdown, nhóm mục con hợp lý.
  • Tối ưu hình ảnh mobile.

---

Gợi ý cách học viên điền vào bảng checklist:

• Cột Page quan sát nhập link của trang được quan sát
• Cột Ghi chú/Quan sát: ghi chi tiết như ví dụ hover link đổi màu, dropdown animation, spinner.
• Cột Đánh giá 1–5: dựa trên mức độ UX tốt → ví dụ dropdown menu dài nhưng vẫn dễ dùng → đánh giá 4/5.
• Cột Có/Không: tick nhanh cho các yếu tố (breadcrumb, hover effect, form, responsive…).