Quy trình thiết kế UI UX 6 bước: từ nghiên cứu đến bàn giao cho lập trình
Cananest Studio · · 4 min read
Quy trình thiết kế UI UX 6 bước theo Double Diamond: nghiên cứu, xác định vấn đề, wireframe, giao diện, kiểm thử, bàn giao, kèm đầu ra.
Quy trình thiết kế UI UX gồm 6 bước: nghiên cứu người dùng, xác định vấn đề, dựng luồng và wireframe, thiết kế giao diện, làm prototype để kiểm thử, rồi bàn giao cho lập trình và đo lường. Các bước này dựa trên mô hình Double Diamond: mở rộng để hiểu vấn đề, thu hẹp để chọn hướng, rồi lại mở rộng và thu hẹp để tìm giải pháp.
Không phải dự án nào cũng làm đủ từng bước với cùng mức độ. Một trang đích nhỏ có thể gộp các bước, còn ứng dụng nhiều chức năng thường lặp lại bước kiểm thử nhiều lần.
Bài này mô tả từng bước, sản phẩm đầu ra và những gì doanh nghiệp cần chuẩn bị.
1. Mô hình Double Diamond là gì?
Double Diamond là mô hình quy trình thiết kế do Hội đồng Thiết kế Anh (Design Council) tạo ra năm 2003, gồm 4 giai đoạn: Discover (khám phá), Define (xác định), Develop (phát triển) và Deliver (bàn giao). Hai giai đoạn đầu tìm đúng vấn đề, hai giai đoạn sau tìm đúng giải pháp.
Theo Design Council, giai đoạn Define biến kết quả nghiên cứu thành một bản brief nêu rõ thách thức, còn Develop là tạo, thử và tinh chỉnh nhiều giải pháp trước khi chọn một giải pháp để ra mắt.
2. 6 bước thiết kế UI UX trong thực tế
Sáu bước dưới đây là cách Double Diamond được áp dụng cho website và ứng dụng. Mỗi bước có sản phẩm đầu ra cụ thể để doanh nghiệp duyệt.
2.1. Nghiên cứu người dùng
Tìm hiểu người dùng là ai, họ đang làm việc đó thế nào và vướng ở đâu, qua phỏng vấn, khảo sát, xem số liệu website hiện tại và phân tích đối thủ.
2.2. Xác định vấn đề
Gom kết quả nghiên cứu thành persona (chân dung người dùng), hành trình người dùng và danh sách vấn đề ưu tiên. Kết quả là một brief nói rõ thiết kế phải giải quyết điều gì.
2.3. Dựng luồng và wireframe
Vẽ sơ đồ trang (sitemap), luồng thao tác và wireframe, tức bản phác khung màn hình chưa có màu. Bước này chốt cấu trúc trước khi tốn công làm đẹp.
2.4. Thiết kế giao diện
Áp màu, chữ, hình ảnh theo nhận diện thương hiệu lên wireframe, đồng thời xây design system: bộ thành phần dùng chung như nút, ô nhập, thẻ sản phẩm.
2.5. Prototype và kiểm thử
Nối các màn hình thành prototype bấm thử được, nhờ người dùng thật thử làm các việc chính và ghi lại chỗ họ vướng. Sửa và kiểm thử lại cho đến khi luồng chính trơn tru.
2.6. Bàn giao và đo lường
Bàn giao file thiết kế, design system và ghi chú cho lập trình viên; sau khi ra mắt, theo dõi số liệu để biết thiết kế có cải thiện được hành vi người dùng không.
3. Sản phẩm đầu ra của từng bước
Mỗi bước nên kết thúc bằng một sản phẩm cụ thể để doanh nghiệp duyệt trước khi sang bước sau. Duyệt sớm ở bước wireframe rẻ hơn nhiều so với sửa khi đã thiết kế xong giao diện.
| Bước | Sản phẩm đầu ra | Doanh nghiệp duyệt gì |
|---|---|---|
| Nghiên cứu | Báo cáo nghiên cứu, ghi chú phỏng vấn | Kết luận có đúng với khách thật không |
| Xác định vấn đề | Persona, hành trình, brief | Ưu tiên giải quyết vấn đề nào trước |
| Luồng và wireframe | Sitemap, user flow, wireframe | Cấu trúc trang, thứ tự thông tin |
| Giao diện | Thiết kế màn hình, design system | Hình ảnh có đúng thương hiệu không |
| Prototype và kiểm thử | Prototype, kết quả kiểm thử | Các vấn đề đã sửa |
| Bàn giao | File Figma, tài liệu cho lập trình | Đủ trạng thái màn hình (lỗi, trống, đang tải) |
4. Doanh nghiệp cần chuẩn bị gì?
Doanh nghiệp cần chuẩn bị mục tiêu kinh doanh của sản phẩm, thông tin về khách hàng, số liệu website hiện tại nếu có, bộ nhận diện thương hiệu và một người có quyền quyết định để duyệt từng bước. Thiếu người duyệt là lý do hay khiến dự án kéo dài.
Câu hỏi thường gặp
Có bỏ qua bước nghiên cứu được không?
Có thể rút gọn nhưng không nên bỏ hẳn. Với dự án nhỏ, chỉ cần nói chuyện với vài khách hàng và xem số liệu website hiện tại. Bỏ qua hoàn toàn dễ dẫn đến thiết kế đẹp nhưng giải quyết sai vấn đề.
Wireframe và prototype khác nhau thế nào?
Wireframe là bản khung tĩnh, chỉ thể hiện bố cục và thứ tự thông tin. Prototype là các màn hình được nối với nhau để bấm thử như sản phẩm thật, dùng để kiểm thử với người dùng trước khi lập trình.
Thiết kế UI UX mất bao lâu?
Tuỳ số màn hình, độ phức tạp và số vòng kiểm thử. Một trang đích nhanh hơn nhiều so với ứng dụng có tài khoản, thanh toán, quản trị. Nên yêu cầu đơn vị thiết kế chia lịch theo từng bước và mốc duyệt.
Kết luận
Quy trình thiết kế UI UX đi qua nghiên cứu, xác định vấn đề, wireframe, giao diện, kiểm thử và bàn giao, theo tinh thần Double Diamond: hiểu đúng vấn đề rồi mới tìm giải pháp. Duyệt sản phẩm ở từng bước giúp doanh nghiệp tránh sửa tốn kém về sau.
Có website hoặc ứng dụng cần thiết kế? Xem quy trình và dịch vụ UI UX của Cananest.
Tài liệu tham khảo:
