Wireframing – Thiết kế từ góc nhìn của người dùng

Một giao diện đẹp chưa chắc mang lại trải nghiệm tốt. Trong phát triển website và ứng dụng, điều quan trọng không phải là màu sắc hay hiệu ứng, mà là người dùng có thể dễ dàng tìm thấy thông tin và hoàn thành mục tiêu của mình. Đó là lý do Wireframing luôn được xem là bước khởi đầu trong quy trình thiết kế UX/UI.

Theo bài viết “What is Wireframing?” được đăng trên Figma Resource Librar, một Wireframe hiệu quả cần được xây dựng trên ba tư duy cốt lõi:

• Phân cấp thông tin (Content Hierarchy): Người dùng cần nhìn thấy điều gì trước tiên?
• Luồng người dùng (User Flow): Người dùng sẽ di chuyển qua các màn hình như thế nào?
• Chức năng trước hình thức (Functionality before Aesthetics): Giao diện phải hoạt động tốt trước khi thiết kế vẻ ngoài của nó.

Ngay bây giờ, chúng ta hãy cùng khám phá Wireframing – Thiết kế từ góc nhìn của người dùng, nền tảng giúp biến ý tưởng thành những sản phẩm trực quan, dễ sử dụng và hiệu quả.

Vì sao Wireframing quan trọng?

Nếu bạn đã từng thử thiết kế một website hoặc ứng dụng mà không có Wireframe, bạn sẽ hiểu vì sao quy trình Wireframing lại quan trọng. Không có Wireframe, làm sao bạn và nhóm của mình có thể hình dung được những gì đang cố gắng xây dựng? Làm sao để xác định luồng người dùng (User Flow), hoặc biết nội dung nào nên xuất hiện trên từng màn hình?

Đăng ký ngay

Đăng ký ngay

“Thật khó chịu khi mọi người chỉ góp ý về phần trực quan, trong khi điều bạn thực sự cần là những phản hồi ở cấp độ tổng thể, chẳng hạn như: ‘Đây có phải là điều quan trọng nhất không?'” Đó là chia sẻ của Tom Lowry, Director of Advocacy tại Figma. Ông cho rằng một sản phẩm hoặc website được thiết kế tốt luôn bắt đầu từ một Wireframe được xây dựng hợp lý. Hãy tiếp tục khám phá từng giai đoạn của quy trình Wireframing cùng những mẹo và công cụ mà Figma giới thiệu..

Wireframe là gì?

Wireframe là bản phác thảo cơ bản giúp các thành viên trong nhóm thống nhất yêu cầu của dự án, đồng thời giữ cho các cuộc trao đổi về trải nghiệm người dùng (UX) tập trung và mang tính xây dựng. Bạn có thể hình dung Wireframe như bộ khung (skeleton) của một ứng dụng, website hoặc sản phẩm cuối cùng. Wireframe cho nhóm thiết kế và các bên liên quan thấy cấu trúc cơ bản của những màn hình, thành phần và chức năng thiết yếu, bao gồm:

• Bố cục màn hình (Screen Layouts)
• Thanh điều hướng (Navigation Bars)
• Các thành phần của thiết kế UX và UI (UX/UI Components)
• Các thành phần có khả năng tương tác (Interactive Elements)

Ở giai đoạn đầu của quá trình thiết kế, Wireframe có độ chi tiết thấp (Low-Fidelity Wireframe) thường sử dụng văn bản mẫu (Lorem Ipsum) và các hình chữ nhật đơn giản để thay thế hình ảnh hoặc video. Cách làm này giúp nhóm thiết kế, người viết nội dung và các thành viên khác tập trung vào chức năng cơ bản, từ đó thống nhất đúng định hướng phát triển.

Bắt đầu với một Wireframe đơn giản cũng tạo điều kiện để các nhà thiết kế UI/UX dễ dàng thử nghiệm nhiều phương án khác nhau. Họ có thể thu thập phản hồi sớm từ quá trình kiểm thử người dùng đối với các thành phần UX/UI cốt lõi mà không làm người dùng phân tâm bởi các chi tiết trực quan. Trong quá trình này, nhóm thiết kế sẽ thử nghiệm nhiều ý tưởng, luồng người dùng (User Flow) và mẫu giao diện khác nhau nhằm hướng tới trải nghiệm người dùng tối ưu.

Ba kiểu Wireframe

Mặc dù khả năng thiết kế UX gần như không có giới hạn, nhưng hầu hết các Wireframe đều thuộc một trong ba mức độ chi tiết (fidelity). Trong quá trình phát triển sản phẩm, bạn có thể lần lượt sử dụng cả ba mức độ này trước khi hoàn thiện sản phẩm cuối cùng.

Wireframe mức độ chi tiết thấp (Low-Fidelity Wireframe)

Là dạng Wireframe đơn giản nhất, tập trung vào bố cục (Layout), điều hướng (Navigation) và kiến trúc thông tin (Information Architecture). Mục tiêu của nó là thể hiện giao diện sẽ được tổ chức như thế nào và minh họa luồng người dùng (User Flow) thông qua các thành phần giao diện (UI) cơ bản.

Ở giai đoạn đầu, bạn có thể phác thảo nhanh trên giấy hoặc bảng trắng. Tuy nhiên, cách này không phải lúc nào cũng thuận tiện cho việc chia sẻ, lưu trữ hoặc chỉnh sửa. Với các công cụ Wireframing trực tuyến như Figma, bạn có thể tạo, chia sẻ và cải tiến các Low-Fidelity Wireframe một cách nhanh chóng.

Wireframe mức độ chi tiết trung bình (Mid-Fidelity Wireframe)

Là dạng Wireframe giúp nhóm thiết kế tiếp tục hoàn thiện và định hình sản phẩm. Ở giai đoạn này, nhóm có thể bổ sung ghi chú (Annotations) và nội dung (Content), đồng thời thử nghiệm nhiều cách tổ chức luồng người dùng (User Flow) và các thành phần giao diện (UI). Việc này giúp xác định rõ chức năng cốt lõi và các tương tác chính trước khi bổ sung các yếu tố thiết kế trực quan.

Wireframe mức độ chi tiết cao (High-Fidelity Wireframe)

Là dạng Wireframe có hình thức gần giống với bản mô phỏng (Mockup) của sản phẩm, bao gồm nhiều yếu tố trực quan và khả năng tương tác hơn. Tuy nhiên, đây vẫn chưa phải là sản phẩm hoàn chỉnh. Ở giai đoạn này, bạn có thể bổ sung các yếu tố nhận diện thương hiệu như phông chữ (Fonts), màu sắc (Colors) và logo (Logos) để mô phỏng giao diện gần với sản phẩm cuối cùng, phục vụ cho quá trình kiểm thử với người dùng.

Khi nào có thể bỏ qua một đoạn Wireframe?

Nhiều nhóm thiết kế cho rằng họ cần bắt đầu bằng Wireframe mức độ chi tiết thấp và phát triển dần từ đó. Cách tiếp cận này phù hợp khi bạn đang khám phá các ý tưởng sản phẩm mới, giúp nhóm thống nhất về các thành phần quan trọng, thử nghiệm nhiều phương án khác nhau, sau đó mới bổ sung các chi tiết thiết kế trực quan. Tuy nhiên, theo Tom, trong một số trường hợp bạn có thể bắt đầu trực tiếp với Wireframe mức độ chi tiết cao

“Nếu bạn đã có một hệ thống thiết kế (Design System) hoàn chỉnh và thiết kế bạn đang khám phá tương tự với những sản phẩm đã tồn tại, các cuộc trao đổi có thể sẽ không bị lệch hướng bởi các chi tiết thiết kế trực quan,” Tom giải thích. “Trong những trường hợp này, việc khám phá một ý tưởng thiết kế ở mức độ chi tiết cao hơn có thể nhanh chóng và hiệu quả tương đương.”

Bảy nguyên tắc thiết kế Wireframe hiệu quả

Một Wireframe hiệu quả có thể đơn giản như một bản phác thảo trên giấy hoặc phức tạp như một bản mô phỏng sản phẩm tĩnh. Bằng cách áp dụng các nguyên tắc thiết kế Wireframe dưới đây, bạn có thể nhanh chóng thống nhất định hướng với nhóm và tiến tới phương án phù hợp nhất.

Xác định mục tiêu thiết kế

Trước khi bắt đầu phác thảo hoặc chỉnh sửa các mẫu Wireframe có sẵn, hãy xác định rõ mục tiêu thiết kế. Hãy xem xét nhu cầu của người dùng và những hành động bạn muốn họ thực hiện để đạt được mục tiêu đó. Có thể bạn muốn giúp người dùng giải quyết một vấn đề bằng cách mua một sản phẩm hữu ích hoặc đăng ký nhận bản tin giáo dục. Hãy thống nhất mục tiêu này với nhóm thiết kế, để các thiết kế Wireframe hướng tới việc hỗ trợ mục tiêu đó.

Chọn kích thước phù hợp cho Wireframe

Wireframe nên phù hợp với kích thước màn hình mà nhóm người dùng mục tiêu sẽ sử dụng. Một website hoặc ứng dụng sẽ có cách hiển thị khác nhau trên máy tính xách tay so với thiết bị di động. Vì vậy, kích thước Wireframe tiêu chuẩn cho từng loại màn hình như sau:

• Thiết bị di động (Mobile): rộng 393 pixel × cao 852 pixel
• Máy tính bảng 11 inch (11” Tablet): rộng 834 pixel × cao 1194 pixel
• Máy tính để bàn (Desktop): rộng 1440 pixel × cao 1024 pixel

Giữ thiết kế Wireframe đơn giản

Hãy bắt đầu Wireframe bằng màu xám (Grayscale), giới hạn số lượng Font chữ và thay thế hình ảnh bằng các khối hình chữ nhật. Đảm bảo bản thiết kế khung (Blueprint) đáp ứng được các yêu cầu cơ bản nhất của người dùng. Nếu tập trung vào những chi tiết như lỗi chính tả hoặc cách phối màu, bạn có thể bỏ qua những vấn đề trong trải nghiệm người dùng. Đối với các thiết kế đơn giản ở giai đoạn đầu, bản xem trước rút gọn (Truncated Preview) hoặc các thẻ nội dung (Cards) có thể đã đủ. Tuy nhiên, với các giao diện chứa nhiều nội dung, Tom khuyến nghị sử dụng nội dung thực tế thay vì văn bản mẫu “Lorem Ipsum”. “Khi bạn bắt đầu áp dụng kiến trúc thông tin (Information Architecture) vào giao diện người dùng, việc liệt kê các mục menu như 1-2-3-4 sẽ không mang lại nhiều giá trị,” Tom giải thích. “Lúc này, bạn nên sử dụng nội dung thực tế.”

Duy trì tính nhất quán trong thiết kế

Wireframe không nên tạo ra sự phân tâm hoặc nhầm lẫn. Các thành phần tương tự nhau nên có cách thể hiện giống nhau trên tất cả Wireframe, giúp chúng dễ hiểu, dễ cải tiến và dễ lập trình. Ngay cả khi có sự khác biệt nhỏ giữa hai thành phần liên quan, các thiết kế khác nhau có thể tạo ra sự không chắc chắn cho lập trình viên khi triển khai trên nhiều màn hình hoặc trong các vòng lặp thiết kế khác nhau.

Làm cho việc điều hướng trở nên rõ ràng

Luồng người dùng (User Flow) cần phải mượt mà và trực quan. Khi áp dụng kiến trúc thông tin (Information Architecture) vào Wireframe, hãy xem xét những vị trí cần hỗ trợ bằng các thành phần điều hướng (Navigation) và dấu hiệu định hướng (Wayfinding Cues). Nếu người dùng phải tham khảo sơ đồ Website (Sitemap), điều đó cho thấy hệ thống điều hướng và kiến trúc thông tin cần được cải thiện.

Không nên quá gắn bó với Wireframe

Ngay cả một Wireframe độ chi tiết cao (High-Fidelity Wireframe) vẫn chỉ là bản thiết kế ban đầu và cần được thay đổi để trở thành sản phẩm cuối cùng. Sau khi nhóm thiết kế hoàn thiện Wireframe, bước tiếp theo là phối hợp với lập trình viên và các thành viên khác trong nhóm sáng tạo để bổ sung chức năng.

Tận dụng các công cụ Wireframing

Nhóm thiết kế cần những Wireframe có thể chia sẻ, lưu trữ và chuyển đổi thành Mockup trực tuyến. Các công cụ Wireframing trực tuyến giúp người thiết kế tạo, chỉnh sửa và phát triển Wireframe trong quá trình thiết kế sản phẩm.

Checklist đánh giá Wireframe

Quy trình Wireframing giúp bạn lập kế hoạch, xây dựng và cộng tác trong suốt quá trình thiết kế cũng như phát triển sản phẩm. Tuy nhiên, làm thế nào để biết khi nào bạn đã hoàn thành? Khi có thể kiểm tra được các nội dung trong danh sách công việc Wireframing dưới đây, Wireframe của bạn đã sẵn sàng để chuyển sang bước tạo Mockup và Prototype có mức độ chi tiết cao hơn.

Sau khi hoàn thành Wireframe, hãy xem lại phạm vi công việc ban đầu. Khi đã phác thảo được sản phẩm cuối cùng, bạn có thể điều chỉnh lại các ước lượng ban đầu. Ngay cả khi chỉ là một bản phác thảo với nội dung thay thế, Wireframe vẫn cần thể hiện được:

• Những màn hình cần thiết để đáp ứng nhu cầu người dùng.
• Luồng người dùng trong các quy trình chuyển đổi.
• Các yếu tố cân nhắc về khả năng sử dụng, bao gồm điều hướng và tổ chức dữ liệu.
• Mục tiêu chính và luồng người dùng của từng màn hình.
• Các yếu tố giao diện chủ chốt, đi kèm nội dung và chức năng tương tác của từng màn hình.
• Cách các thành phần thiết kế kết hợp với nhau để tạo thành các mẫu màn.

Dấu hiệu nhận biết bản Wireframe tối ưu

Việc đánh giá mức độ thành công của Wireframe khá khó nếu không có dữ liệu định lượng, nhưng Tom cho rằng có một số tiêu chí định tính mà bạn có thể áp dụng. Ông khuyến nghị thực hiện kiểm thử người dùng có điều phối để xem người dùng có thể hoàn thành trải nghiệm mà không cần hướng dẫn hay không – thay vì bị “mắc kẹt hoặc không biết phải làm gì tiếp theo”.

Một dấu hiệu khác cho thấy Wireframe thành công là sự thống nhất với các bên liên quan. “Nếu sau một buổi làm việc sáng tạo, bạn cảm thấy mình nhận được loại phản hồi mong muốn và có thể tự tin tiến tới các bước tiếp theo, thì tôi cho rằng Wireframe của bạn đã thực sự thành công,” Tom chia sẻ.

Tuy nhiên, nếu các bên liên quan tập trung vào những chi tiết nhỏ hoặc yếu tố thẩm mỹ thay vì nhu cầu cốt lõi của người dùng, Tom cho rằng: “Đó có thể là dấu hiệu bạn nên giảm mức độ chi tiết của Wireframe (Wireframe Fidelity). Hãy loại bỏ bớt các yếu tố hoàn thiện về mặt hình thức trong những tài liệu bạn chia sẻ, cho đến khi nhận được những phản hồi cần thiết.”

Tạo và tùy chỉnh thiết kế Wireframe với Figma.

Các nhóm cần Wireframe để kết nối và cùng nhau lên ý tưởng thiết kế UX/UI – và bộ công cụ Wireframe của Figma sẽ giúp bạn bắt đầu. Bạn có thể xác thực ý tưởng và tăng tốc quy trình thiết kế trên nền tảng thiết kế cộng tác của Figma – và khởi động các dự án thiết kế web với bộ công cụ tạo Wireframe website miễn phí của Figma. Để có thêm thông tin chi tiết và cảm hứng, Tom khuyên bạn nên kết nối với cộng đồng Figma. “Cộng đồng của chúng tôi chia sẻ rất nhiều ý tưởng Wireframe và mẫu giao diện người dùng,” ông nói.

Giảng viên Lê Thanh Nhân