Wireframe, Prototype & phối hợp Designer
Khi BA nhận yêu cầu từ stakeholder, việc diễn đạt ý tưởng bằng lời nói thường chưa đủ. Wireframe và prototype giúp biến ý tưởng thành hình ảnh cụ thể — giúp mọi người trong team hiểu đúng, phát hiện mâu thuẫn sớm và tiết kiệm chi phí sửa đổi sau này.
Lo-fi vs Hi-fi Wireframe
Lo-fi (Low-fidelity) là bản phác thảo thô — thường vẽ tay hoặc dùng hình chữ nhật, đường kẻ đại diện cho nội dung. Không có màu sắc, font chữ, hay hình ảnh thật. Mục đích: thể hiện bố cục và luồng điều hướng nhanh nhất có thể.
- Ví dụ thực tế: BA đang phân tích tính năng "Đặt lịch hẹn tư vấn mentor" trên nền tảng Vietnam Product Management. Lo-fi wireframe chỉ cần 3 ô vuông ghi "Danh sách mentor", "Chi tiết mentor", "Form đặt lịch" và mũi tên nối chúng.
- Ưu điểm: nhanh, rẻ, dễ thay đổi, không gây tranh cãi về màu sắc hay font.
- BA không cần làm hi-fi. Nhưng BA cần review hi-fi để kiểm tra logic nghiệp vụ: ví dụ form đặt lịch có hiển thị đúng múi giờ? Nút "Xác nhận" có xuất hiện chỉ khi đã chọn ngày giờ?
Prototype là gì?
Prototype là wireframe có thể tương tác — click vào nút thì chuyển màn hình, điền form thì thấy thông báo. Prototype không chạy code thật mà chỉ mô phỏng trải nghiệm.
Có hai loại:
- Prototype giấy (paper prototype): in wireframe ra, người dùng dùng tay để "click" — BA cầm tờ giấy trang tiếp theo đặt lên. Cực kỳ nhanh và hữu ích cho user testing sớm.
- Prototype số (digital prototype): dùng Figma, Adobe XD để tạo link tương tác. Gửi link cho stakeholder xem và góp ý mà không cần deploy code.
Công cụ phổ biến
| Công cụ | Loại | Dùng khi nào |
|---|---|---|
| Balsamiq | Lo-fi | Phác thảo nhanh, họp với PM/stakeholder |
| Figma | Lo-fi → Hi-fi → Prototype | Cộng tác thời gian thực với Designer |
| Miro / FigJam | Whiteboard | Brainstorm luồng, user journey mapping |
| Pen & paper | Lo-fi | Workshop nhanh, không cần máy tính |
Nguyên tắc UX cơ bản BA cần biết
BA không cần trở thành UX Designer nhưng cần hiểu đủ để đặt câu hỏi đúng và review thiết kế hiệu quả.
1. Hierarchy thị giác (Visual Hierarchy): Người dùng đọc theo thứ tự F-pattern hoặc Z-pattern. Thông tin quan trọng nhất phải nằm ở vị trí mắt đọc trước. Ví dụ: nút CTA "Đăng ký ngay" phải nổi bật hơn link "Tìm hiểu thêm".
2. Affordance: Mỗi element phải trông như chức năng của nó. Nút phải trông như nút, link phải có màu/gạch chân. BA cần hỏi: "Người dùng có biết đây là nút có thể click không?"
3. Feedback & Status: Sau mỗi hành động người dùng cần biết hệ thống đang làm gì. Ví dụ: sau khi click "Đặt lịch", phải có loading indicator, rồi thông báo thành công/thất bại rõ ràng.
4. Error Prevention vs Error Recovery: Tốt hơn là ngăn lỗi (disable nút Submit khi form chưa đủ) thay vì chỉ hiện thông báo lỗi sau khi submit.
5. Consistency: Cùng một hành động phải có cùng cách thao tác trên toàn app. BA cần đối chiếu design mới với các màn hình đã có.
Cách BA phối hợp với Designer
Giai đoạn Discovery: BA chia sẻ user story, acceptance criteria, và flow diagram cho Designer trước khi Designer bắt tay vào làm. BA không nên nói "tôi muốn màn hình trông như thế này" mà nên nói "người dùng cần hoàn thành việc X trong vòng 2 bước".
Giai đoạn Design Review: BA kiểm tra wireframe/prototype theo checklist:
- Tất cả trạng thái có được thiết kế chưa? (empty state, loading, error, success)
- Edge case: tên người dùng dài 50 ký tự có bị vỡ layout không?
- Permission: người dùng chưa đăng nhập thấy gì?
- Mobile responsiveness: màn hình 375px trông như thế nào?
Handoff: Khi design được approve, BA đảm bảo spec đủ rõ cho dev: mô tả validation rule, API endpoint cần gọi, business rule ẩn sau UI.
Tự luyện
- Dùng Balsamiq (bản free online) hoặc vẽ tay, tạo lo-fi wireframe 3 màn hình cho tính năng "Học viên đăng ký khóa học" (trang danh sách → trang chi tiết → trang thanh toán).
- Xem một file Figma mẫu (tìm trên Figma Community từ khóa "learning platform") và liệt kê 3 vấn đề UX bạn phát hiện theo framework: Hierarchy / Affordance / Feedback.
- Viết một checklist 5 câu hỏi bạn sẽ hỏi Designer khi review màn hình "Quên mật khẩu".