BA Kỳ 7: Sketch, wireframe, mockup, prototype, phân biệt cho đúng

Chuỗi Business Analyst · Kỳ 7 trên 11

Có một lần cậu thiết kế gửi cho chị Hà “bản mockup màn hình đặt cơm”. Chị Hà bấm thử vào nút “Đặt cơm” trên hình, và… chẳng có gì xảy ra. Chị bảo: “Sao bấm không được vậy em?” Cậu thiết kế cười: “Dạ, đây là mockup, chưa bấm được ạ. Chị cần bản prototype mới bấm được.” Chị Hà ngơ ngác: “Mockup, prototype, cái nào cũng là hình mà?”

Chuyện này rất hay gặp. Bốn từ sketch, wireframe, mockup, prototype thường bị gọi lẫn lộn, ngay cả trong nghề. Kỳ 7 phân biệt từng cái bằng ví dụ xây nhà, rồi áp vào tiệm cơm của chị Hà.

(Chị Hà và tiệm cơm là tình huống tưởng tượng để minh họa.)

Cách hình dung bằng chuyện xây nhà

Giả sử bạn định xây một căn nhà. Trước khi đổ móng, bạn sẽ đi qua các bước sau:

1. Vẽ nháp ý tưởng lên giấy để bàn với gia đình: phòng khách ở đâu, bếp ở đâu. Đó là sketch.
2. Bản vẽ mặt bằng sạch sẽ chỉ có đường nét, không màu sắc: tường, cửa, kích thước. Đó là wireframe.
3. Ảnh phối cảnh có màu tường, gỗ, ánh sáng, nhìn gần giống nhà thật. Đó là mockup.
4. Nhà mẫu để bạn đi vào, mở cửa, bật đèn thử. Đó là prototype.

Từ ý tưởng thô đến gần như thật. Mỗi bước tốn nhiều công hơn bước trước, nên người ta thường đi từ rẻ đến đắt, và sửa ở bước sớm thì rất rẻ.

Sketch: bản phác tay

Sketch là bản vẽ nhanh, thường bằng tay trên giấy hoặc bảng trắng, để diễn đạt ý tưởng và bàn bạc. Không cần đẹp, không cần đúng tỉ lệ. Chỉ cần ai nhìn vào cũng hiểu “màn hình này có những phần gì”.

Ở tiệm chị Hà, BA có thể ngồi cùng chị và bếp trưởng, vẽ nhanh trên giấy: trên cùng là danh sách món, giữa là ô chọn số lượng, dưới cùng là nút đặt cơm. Cả bàn xúm vào chỉnh: “Chị thấy nên cho khách chọn giờ nhận ngay phía trên.” Mất mười phút, tốn một tờ giấy. Nếu làm sai hướng thì xé đi vẽ lại.

Wireframe: khung xương của màn hình

Wireframe là bản vẽ khung của một màn hình, chỉ thể hiện bố cục và các thành phần: chỗ nào để danh sách, nút bấm, ô nhập, và chúng sắp xếp thế nào. Thường dùng nét đen trắng, hộp xám, chữ giả, không màu sắc, không hình ảnh đẹp.

Vì sao cố tình làm “xấu” như vậy? Để mọi người tập trung vào cái gì nằm ở đâu thay vì cãi nhau xem màu xanh hay màu cam. Wireframe trả lời câu hỏi: khách nhìn thấy gì, làm được gì, theo thứ tự nào.

BA thường là người tự vẽ hoặc phác wireframe để minh họa yêu cầu, rồi đưa cho người thiết kế làm tiếp. Wireframe cũng giúp bạn phát hiện sớm thiếu sót, ví dụ “màn hình này chưa có chỗ nào để khách hủy đơn”.

Mockup: bản thiết kế có màu có hình

Mockup là bản thiết kế tĩnh của màn hình, đã có màu sắc, phông chữ, hình ảnh, logo, trông gần giống sản phẩm thật. Nhưng như câu chuyện chị Hà, nó chỉ là một bức hình: bấm vào không có gì xảy ra.

Mockup trả lời câu hỏi: sản phẩm sẽ trông ra sao. Đây thường là việc của người thiết kế giao diện, dựa trên wireframe và nhận diện thương hiệu của tiệm. Khách hàng xem mockup để duyệt “đẹp, hợp ý, đúng phong cách tiệm”.

Prototype: bản bấm thử được

Prototype là bản mô phỏng có tương tác: bạn bấm nút thì chuyển sang màn hình tiếp theo, chọn món thì hiện giỏ hàng. Nó chưa phải phần mềm thật, phía sau chưa có hệ thống xử lý, nhưng đủ để người dùng trải nghiệm luồng đi.

Prototype trả lời câu hỏi: dùng nó có thuận tay không. Chị Hà cầm điện thoại, bấm thử đặt cơm và bảo: “Nút này nhỏ quá, chị bấm trượt hoài.” Phát hiện được điều đó ở prototype thì sửa trong nửa ngày. Phát hiện sau khi lập trình xong thì sửa cả tuần.

Bảng so sánh nhanh

BA nên dùng loại nào, lúc nào?

Một nguyên tắc dễ nhớ: bắt đầu từ cái rẻ nhất đủ để trả lời câu hỏi hiện tại.

• Mới thảo luận ý tưởng với khách? Dùng sketch.
• Cần chốt bố cục và các thành phần của từng màn hình? Dùng wireframe.
• Cần khách duyệt hình thức? Dùng mockup.
• Cần kiểm tra luồng dùng thật có suôn không? Dùng prototype.

Đừng nhảy ngay sang mockup đẹp lung linh khi còn chưa chốt được “màn hình cần những gì”. Khi hình thức quá đẹp, khách dễ bị “mê” hình thức và quên phản biện nội dung.

Mấy lỗi hay gặp

1. Gọi lẫn các từ nên người này hiểu một kiểu, người kia hiểu một kiểu. Cứ hỏi lại “ý anh là bản bấm được hay bản hình tĩnh?” cho chắc.
2. Làm quá đẹp quá sớm, tốn công mà ý tưởng chưa chốt.
3. Wireframe thiếu các trường hợp đặc biệt, như màn hình khi chưa có đơn nào, khi báo lỗi, khi hết giờ chốt đơn.
4. Quên hỏi người dùng thật mà chỉ nhìn bằng mắt của nhóm dự án.

Tạm kết

Bốn bản vẽ này đi từ thô đến tinh, từ rẻ đến đắt. Hiểu đúng từng loại giúp bạn chọn đúng công cụ và tiết kiệm rất nhiều thời gian cho cả nhóm.

Kỳ trước là use case, ERD và BPMN. Kỳ sau là phần mình thấy nhiều bạn quan tâm nhất: BA Kỳ 8: Kỹ năng mềm của BA, những thứ không ghi trong tin tuyển dụng nhưng quyết định bạn đi xa đến đâu.

Xem việc làm đang tuyển của Kanata →