Đặc tả Component: Thành phần Thu thập Phản hồi (Feedback Component)
| Mã tài liệu: | EZD-DES-CMP-001 | Phiên bản: | 1.0 |
|---|---|---|---|
| User Story liên quan: | User Story 01, User Story 02, User Story 03 |
Ngày hiệu lực: | 14/09/2025 |
| Người soạn: | Stephen | Người phê duyệt: | Stephen |
1. Mục tiêu của Component
Cung cấp một cơ chế đơn giản, nhanh chóng và không phô trương để thu thập phản hồi của người dùng về chất lượng câu trả lời của AI. Dữ liệu này là đầu vào tối quan trọng để đo lường mức độ hài lòng, xác thực giả định về giá trị cho người dùng, và là cơ sở để cải tiến hệ thống liên tục.
2. Vị trí & Bối cảnh Hiển thị
- Các màn hình áp dụng: Component này sẽ được hiển thị trên các màn hình trả về kết quả cuối cùng, bao gồm:
- Vị trí cụ thể: Nằm ở góc dưới bên phải của màn hình, bên trong
Vùng An toàn 48px. Vị trí này đảm bảo component dễ dàng được nhìn thấy nhưng không che mất nội dung chính. - Thời điểm xuất hiện: Component sẽ mờ dần xuất hiện (fade in) sau khoảng 1.5 giây kể từ khi AI kết thúc phần trả lời bằng giọng nói. Việc xuất hiện có độ trễ này nhằm mục đích để người dùng tập trung vào việc tiếp thu câu trả lời trước, sau đó mới được mời gọi đưa ra phản hồi.
3. Phân rã các Thành phần
Component là một khối ngang nhỏ gọn, bao gồm các thành phần con sau:
- a. Nhãn Văn bản (Text Label):
- Vị trí: Bên trái của khối.
- Nội dung: Một câu hỏi ngắn gọn, thân thiện: "Thông tin này có hữu ích không?"
- Tiêu chuẩn áp dụng: Kiểu chữ
Body Small (18px, Regular), màu#8B949E(Text Gray) để thể hiện vai trò phụ.
- b. Nút "Hữu ích" (Thumbs Up Button 👍):
- Vị trí: Bên phải Nhãn Văn bản, khoảng cách
16px. - Mô tả: Một nút chỉ chứa icon, không có chữ.
- Icon: Sử dụng icon "Thumb Up" từ bộ icon chuẩn (Material Symbols/Phosphor Icons).
- Tiêu chuẩn áp dụng: Vùng chạm của nút phải đảm bảo kích thước tối thiểu
48x48px.
- Vị trí: Bên phải Nhãn Văn bản, khoảng cách
- c. Nút "Không hữu ích" (Thumbs Down Button 👎):
- Vị trí: Bên phải nút "Hữu ích", khoảng cách
16px. - Mô tả & Tiêu chuẩn: Tương tự như nút "Hữu ích".
- Vị trí: Bên phải nút "Hữu ích", khoảng cách
4. Hành vi Tương tác & Trạng thái
- Trạng thái
Default: Cả hai nút 👍 và 👎 đều ở trạng thái chưa được chọn, có thể dùng màu#8B949E(Text Gray) cho icon. - Trạng thái
Pressed: Khi người dùng nhấn giữ, nút sẽ có hiệu ứng phản hồi ngay lập tức (ví dụ: thu nhỏ nhẹ hoặc thay đổi độ sáng). - Trạng thái
Selected:- Khi người dùng bấm vào một nút (ví dụ: 👍), icon của nút đó sẽ đổi sang màu
#0A74DA(EZD Blue) và có thể có hiệu ứng sáng nhẹ xung quanh. - Đồng thời, nút còn lại (👎) sẽ bị vô hiệu hóa và giảm độ mờ (opacity) xuống 50%.
- Khi người dùng bấm vào một nút (ví dụ: 👍), icon của nút đó sẽ đổi sang màu
5. Hành vi Chuyển tiếp
- Chuyển vào (Transition In):
- Component mờ dần xuất hiện trong
150mssau khoảng thời gian chờ 1.5 giây như đã mô tả ở Mục 2.
- Component mờ dần xuất hiện trong
- Chuyển ra (Transition Out):
- Sau khi người dùng phản hồi: Sau khi người dùng bấm vào một trong hai nút, component sẽ giữ trạng thái
Selectedtrong 2 giây (để người dùng thấy hành động của mình đã được ghi nhận), sau đó sẽ tự động mờ dần và biến mất. - Khi hết giờ: Nếu người dùng không tương tác, component sẽ cùng mờ dần và biến mất với toàn bộ màn hình khi hết 15 giây timeout toàn cục.
- Sau khi người dùng phản hồi: Sau khi người dùng bấm vào một trong hai nút, component sẽ giữ trạng thái
6. Triết lý Thiết kế
- Không phô trương (Unobtrusive): Thiết kế phải tinh tế. Mục tiêu chính là thu thập dữ liệu mà không làm gián đoạn hay gây khó chịu cho hành trình chính của người dùng.
- Không ma sát (Frictionless): Chỉ cần một lần chạm duy nhất. Không có hộp thoại xác nhận, không có các bước phức tạp. Điều này giúp tối đa hóa tỷ lệ người dùng cung cấp phản hồi.