Dựng mẫu prototype để làm gì

Sinh Vũ hay nghe câu này từ khách: "Làm mẫu cho mất thời gian, cứ dựng thẳng lên website luôn cho nhanh." Nghe có vẻ hợp lý, nhưng đây chính là lúc chi phí sửa sai tăng cao nhất. Mẫu không phải bước thừa, mà là trạm chốt quyết định trước khi tiền và công sức thật sự được đổ vào.

Mẫu là một giả thuyết, không phải bản nháp

Cách nhìn đúng về prototype: đây là cách phát biểu một giả thuyết thiết kế dưới dạng có thể kiểm tra được. Giả thuyết đó có thể là "người dùng sẽ hiểu nút này nghĩa là gì", hoặc "luồng đặt hàng ba bước này sẽ không làm khách bỏ giữa chừng". Khi dựng mẫu, Anh / Chị đang đặt câu hỏi, không phải đưa ra câu trả lời.

Vì là giả thuyết, mẫu luôn có thể sai và cần sửa. Xé bỏ một tờ giấy phác thảo không tốn gì. Đập bỏ hai tuần lập trình thì tốn rất nhiều.

Hai mức độ tinh và khi nào chọn từng loại

Có hai trục chính cần phân biệt:

• Mẫu độ thô thấp (low-fidelity): phác thảo trên giấy, khung xám (wireframe), chưa có màu sắc hay hình ảnh thật. Người xem hiểu ngay đây là bản đang làm dở, nên thoải mái góp ý mọi mặt, kể cả chê thẳng.
• Mẫu độ tinh cao (high-fidelity): bấm được, gần như sản phẩm sống, có màu sắc, font chữ, hình ảnh thật. Người dùng hành xử thật hơn vì cảm giác đang dùng hệ thống thật.

Bốn câu hỏi cần trả lời trước khi dựng

Trước khi mở Figma hay lấy tờ giấy ra, Anh / Chị cần biết rõ bốn điều này:

• Mẫu này đang kiểm tra giả thuyết gì? Luồng người dùng, bố cục màn hình, cách gọi hành động (call to action), hay cảm giác thương hiệu?
• Ai sẽ xem hoặc dùng mẫu này? Khách nội bộ duyệt, người dùng thật trong buổi kiểm thử, hay lập trình viên đọc để dựng? Mỗi đối tượng cần mức độ tinh khác nhau.
• Còn bao nhiêu thời gian và khả năng sửa? Nếu tuần tới đã phải gửi cho lập trình thì không nên dùng mẫu thô rồi không kịp nâng lên.
• Sau buổi kiểm thử, Anh / Chị sẽ quyết định điều gì? Nếu không có câu trả lời cho câu này, mẫu đó chưa đủ lý do để dựng.

Lỗi thường gặp khi dùng mẫu sai cách

• Đánh bóng mẫu quá sớm: làm mẫu trông gần như bản cuối trong khi vẫn còn nhiều thứ chưa chốt. Hệ quả là khách ngại chê, nhà thiết kế ngại sửa, và cả hai cùng bảo vệ một bản chưa được kiểm chứng.
• Lỗi vận hành mẫu: bấm nút ra sai trang, link chết, luồng bị đứt giữa chừng. Người dùng mất phương hướng và không còn tin vào cả buổi kiểm thử nữa. Luôn chạy thử mẫu (pilot test) trước ít nhất một lần.
• Dựng mẫu xong không rút ra quyết định gì: mẫu được xem, được khen, rồi cất vào thư mục. Mỗi mẫu phải dẫn đến ít nhất một quyết định: giữ hướng này, sửa điểm kia, hay bỏ hẳn ý tưởng đó.
• Chọn sai mức độ tinh: dùng mẫu tinh cao khi còn phải sửa nhiều thì tốn công dựng lại. Dùng mẫu quá thô khi cần đo phản ứng thật thì không thu được dữ liệu có giá trị.

Mẫu là công cụ để học, không phải sản phẩm để bàn giao. Khi nhà thiết kế bắt đầu lo mẫu có đẹp hay không thay vì lo mẫu có trả lời được câu hỏi hay không, bước làm mẫu đã đi lệch mục tiêu.

Kinh nghiệm thực hành, Sinh Vũ Studio

Sinh Vũ làm như thế nào

Trong dịch vụ thiết kế sản phẩm số (P1), Sinh Vũ chia làm hai lớp mẫu rõ ràng. Lớp đầu là bản đồ hành trình và khung giao diện xám, dùng để làm rõ khách cần gì và doanh nghiệp muốn khách làm gì trên từng màn hình. Đây là mẫu thô, mục đích là để bàn và sửa nhanh. Lớp thứ hai là giao diện Figma hoàn chỉnh với màu sắc, font chữ và nội dung thật, dùng để duyệt lần cuối trước khi bàn giao cho lập trình.

Hai lớp này không phải làm lại từ đầu, mà là nâng dần theo mức độ chắc chắn của quyết định. Khi quyết định còn mờ thì mẫu phải thô. Khi quyết định đã rõ thì mẫu mới nên tinh.