Làm wireframe và bản mẫu tương tác trước khi code

Nhiều dự án lao thẳng vào lập trình khi ý tưởng còn nằm trong đầu mỗi người một kiểu. Tới lúc thấy sản phẩm thật mới phát hiện luồng không hợp, thiếu màn này, thừa bước kia, và sửa lúc đó rất đắt vì phải đập phần đã code. Càng để muộn, đổi một chỗ càng kéo theo nhiều chỗ.

Wireframe và bản mẫu tương tác đảo lại cách đó. Thay vì tưởng tượng, bạn nhìn và bấm thử sản phẩm khi nó mới là bản phác, sửa thoải mái khi chưa tốn tiền code. Đây là cách rẻ nhất để chốt ý trước khi giao việc cho lập trình viên.

Có một con số hay được nhắc trong ngành phần mềm: sửa một lỗi thiết kế ở bước phác thảo tốn công gần như bằng không, còn sửa đúng lỗi đó sau khi đã code xong có thể tốn gấp nhiều lần, vì phải đổi cả giao diện lẫn phần xử lý phía sau. Không cần tin đúng con số tuyệt đối, chỉ cần nhớ chiều hướng: sửa càng muộn, giá càng đắt.

Ví dụ dễ hình dung, một cửa hàng bán đồ handmade muốn làm app đặt hàng. Nếu code thẳng theo mô tả miệng, rất dễ ra một luồng đặt hàng 5 bước, tới khi dùng thử mới thấy khách bỏ giữa chừng vì rối. Nếu luồng đó được bấm thử trên bản mẫu trước, chủ shop tự nhận ra ngay chỗ rườm, rút còn 3 bước, và lập trình viên chỉ code đúng bản đã chốt.

Hai chữ này hay bị dùng lẫn nhưng phục vụ hai việc khác nhau. Wireframe lo phần khung: màn hình có gì, đặt ở đâu, đi từ đâu tới đâu. Chưa tính tới màu sắc hay hiệu ứng, chỉ chốt cấu trúc đã.

Qua tới prototype thì khác, đó là lúc khung đã thành thứ bấm được. Bạn đi thử một lượt các màn như đang cầm sản phẩm thật trong tay, thấy ngay chỗ nào mượt, chỗ nào khựng. Bản mẫu kiểu này Web22 gọi là Web22 Design Live (giao diện chạy thật do Web22 tự code cho bạn duyệt trước, thay cho bản vẽ tĩnh), mở trên máy tính hay điện thoại đều bấm được, không phải nhìn hình tĩnh rồi tự hình dung phần còn thiếu.

Ba mức độ trung gian giữa hai đầu này

Trong thực tế công việc, wireframe và prototype không tách bạch hẳn mà có vài mức ở giữa, mỗi mức phù hợp một giai đoạn quyết định khác nhau.

• Low-fidelity (độ chi tiết thấp): khối chữ nhật, đường kẻ thay chữ, không màu. Dùng khi còn đang bàn cấu trúc tổng thể, đổi ý là xoá vẽ lại trong vài phút, chưa cần bấm thử.
• Mid-fidelity (độ chi tiết vừa): đã có chữ thật, khoảng cách gần đúng, một số nút đã bấm chuyển màn được. Dùng khi cấu trúc đã chốt, cần xem luồng đi có hợp lý không.
• High-fidelity (độ chi tiết cao): gần như giao diện thật, đủ màu, đủ hiệu ứng chuyển động, bấm được toàn bộ luồng chính. Đây là mức Web22 dùng cho bản Design Live gửi khách duyệt cuối, vì nhìn và cảm nhận sát nhất với sản phẩm sau khi code.

Đi thẳng vào high-fidelity ngay từ đầu thường lãng phí, vì càng chi tiết càng mất công sửa mỗi lần đổi ý. Web22 thường bắt đầu từ low-fidelity để chốt cấu trúc trước, rồi mới nâng dần lên mức đủ thật để bạn cảm nhận đúng sản phẩm.

Web22 bắt đầu từ mục tiêu của sản phẩm và người dùng, phác khung các màn chính cùng cách đi giữa chúng, rồi cùng bạn soát cho luồng gọn. Khi khung đã ổn, Web22 dựng bản chạy thử để bạn và đội của bạn bấm qua, góp ý ngay trên đó.

Vòng duyệt này lặp vài lần cho tới khi bạn hài lòng, và vì đang ở bước bản mẫu nên sửa nhanh và rẻ. Chốt xong, chính bản mẫu đó thành bản thiết kế rõ ràng để lập trình bám theo, thợ code không phải đoán, sản phẩm dựng ra đúng như bạn đã duyệt.

Công cụ Web22 dùng để dựng bản mẫu

Web22 dựng wireframe và prototype trên Figma, công cụ thiết kế giao diện phổ biến nhất hiện nay, cho cả web lẫn app di động. Figma cho phép nhiều người cùng xem và góp ý trực tiếp trên bản vẽ qua trình duyệt, không cần cài phần mềm.

• Auto Layout: tính năng giúp khối giao diện tự giãn theo nội dung, gần với cách trình duyệt thật hiển thị, nên bản mẫu ít lệch so với sản phẩm sau khi code.
• Liên kết giữa các màn (interactive components): gắn nút bấm chuyển từ màn này sang màn khác, tạo cảm giác đang dùng app thật khi bấm thử.
• Chia sẻ bằng đường dẫn: bạn nhận một link, mở trên trình duyệt máy tính hoặc điện thoại là bấm thử được ngay, không cần tài khoản Figma.
• Bình luận trực tiếp trên bản vẽ: bạn ghim góp ý đúng vào chỗ cần sửa, Web22 nhận và chỉnh, đỡ mô tả qua lại bằng lời dễ hiểu nhầm.

Vì bản mẫu và bản thiết kế cuối cùng dùng chung một file Figma, những gì đã chốt ở bước duyệt được giữ nguyên khi chuyển qua dựng giao diện chi tiết, không phải làm lại từ đầu.

Ba bước Web22 thực hiện khi dựng bản mẫu

• Bước 1, phác khung (wireframe): Web22 liệt kê các màn hình cần có dựa trên mục tiêu sản phẩm, sau đó vẽ khối bố cục cho từng màn. Bạn duyệt cấu trúc tổng thể ở bước này trước khi đi sâu vào chi tiết.
• Bước 2, dựng bản chạy thử (prototype): Web22 gắn liên kết giữa các màn, thêm chữ và hình gần với thật, để bạn bấm đi hết một luồng như dùng sản phẩm thật.
• Bước 3, duyệt và chốt: bạn cùng đội của bạn góp ý trực tiếp trên bản mẫu, Web22 chỉnh theo từng vòng cho tới khi luồng mượt và đúng ý, sau đó bản mẫu này trở thành bản thiết kế để lập trình bám theo.

Thời gian dựng phụ thuộc số màn hình cần làm. Một sản phẩm gọn khoảng 5-8 màn thường mất vài ngày làm việc, sản phẩm nhiều luồng hơn (đặt hàng, thanh toán, quản trị) thì kéo dài hơn tương ứng. Mốc bàn giao cụ thể Web22 chốt ngay sau buổi trao đổi đầu, khi đã rõ danh sách màn cần làm.

Bản mẫu đáng làm nhất khi sản phẩm có nhiều màn hình và luồng phức tạp, hoặc khi nhiều người cùng quyết mà chưa thống nhất hình dung. Vài trường hợp nên có bản mẫu trước:

• Dựng web app hoặc app: nhiều màn, nhiều luồng, nên duyệt kỹ trước khi code cho đỡ sửa đắt.
• Gọi vốn hoặc thuyết phục nội bộ: một bản bấm được thuyết phục hơn nhiều lời mô tả suông.
• Nhiều người cùng quyết: bản mẫu cho mọi người nhìn chung một thứ, chốt cho rõ trước khi làm.
• Đổi mới một sản phẩm đang chạy: khi web hoặc app cũ cần làm lại giao diện, bản mẫu giúp so sánh cách cũ và cách mới trước khi đụng vào code đang chạy thật, tránh vừa sửa vừa lo ảnh hưởng người dùng hiện tại.

Ngược lại, một trang giới thiệu vài màn hình đơn giản, cấu trúc rõ ràng ngay từ đầu, thì bước bản mẫu riêng có thể không cần thiết. Trường hợp đó, phần phác thảo gộp luôn vào bước đầu của thiết kế website cũng đủ nhanh và tiết kiệm hơn tách riêng.

Chi phí tính theo số màn hình

Web22 không báo một giá trọn gói chung cho mọi dự án bản mẫu, vì một sản phẩm 8 màn và một sản phẩm 20 màn nhiều luồng rõ ràng khác nhau về công sức. Dải giá tham khảo và cách tính theo hạng mục xem ở trang bảng giá, con số chính xác chốt sau khi Web22 nắm được bạn cần dựng bao nhiêu màn.

Nếu bạn đã có bản mẫu do bên khác làm và chỉ cần dựng thêm vài màn mới, Web22 vẫn nhận, báo giá riêng theo đúng phần việc thêm đó, không bắt làm lại từ đầu.

Từ bản mẫu sang lập trình

Bản mẫu là bước đầu tự nhiên của việc dựng một sản phẩm số. Sau khi duyệt, nó nối thẳng sang lập trình web app hoặc lập trình ứng dụng di động. Nếu bạn đang thử một ý tưởng mới, bản mẫu cũng là cách rẻ để kiểm chứng trước khi dựng MVP.

Một việc khác hay đi kèm bản mẫu là kiểm tra lại trải nghiệm của sản phẩm đang chạy thật, xem người dùng vấp ở đâu trước khi quyết định làm lại màn nào. Nếu bạn đã có sản phẩm và muốn biết chỗ nào đang khiến người dùng bỏ đi, xem thêm audit UX của Web22.

Web22 áp dụng những cam kết này với mọi dự án bản mẫu, không phân biệt quy mô lớn nhỏ.

• File Figma bàn giao đầy đủ, bạn có toàn quyền chỉnh sửa sau khi hoàn tất, không bị khoá vào tài khoản của Web22.
• Sửa theo góp ý trong phạm vi đã thống nhất, không giới hạn cứng số vòng duyệt miễn còn nằm trong luồng đã chốt ban đầu.
• Bản mẫu bấm được trên cả máy tính và điện thoại, đúng với cách người dùng thật sẽ trải nghiệm sản phẩm sau này.
• Bản mẫu đã duyệt trở thành tài liệu thiết kế cho lập trình, không phải làm lại từ đầu khi chuyển sang bước code.

Web22 không nhận làm bản mẫu cho những màn hình chưa rõ mục tiêu hoặc chưa có ai đứng ra chốt góp ý, vì khi đó vòng duyệt dễ kéo dài không điểm dừng, tốn thời gian cả hai bên. Nếu bạn chưa chắc sản phẩm cần những màn hình nào, Web22 dành thời gian trao đổi trước để cùng xác định phạm vi rõ ràng, rồi mới bắt đầu dựng bản mẫu.