Nguyên tắc thiết kế giao diện tốt

Khi khách hàng của Anh Chị bấm nhầm, hỏi lại, hoặc bỏ trang giữa chừng, phản ứng đầu tiên thường là "cần làm lại cho đẹp hơn". Nhưng hầu hết trường hợp, vấn đề không phải ở thẩm mỹ. Vấn đề là giao diện đang vi phạm một nguyên tắc nền nào đó khiến khách không hiểu mình đang ở đâu, không chắc hệ thống có nhận lệnh của mình không, hoặc không biết bước tiếp theo là gì. Có một bộ nguyên tắc đã được kiểm chứng để soi đúng những chỗ đó.

Bộ nguyên tắc nền tảng cần biết

Jakob Nielsen, nhà nghiên cứu khả dụng (usability: mức độ dễ dùng của một sản phẩm) người Đan Mạch, đúc kết mười nguyên tắc heuristic từ năm 1994 và cập nhật năm 2020. Đây không phải luật cứng mà là quy tắc kinh nghiệm đủ rộng để soi mọi loại giao diện, từ trang web đến ứng dụng di động, vì chúng xây trên hành vi con người chứ không phụ thuộc vào công nghệ. Sinh Vũ dùng bộ này như checklist bắt buộc trước khi bàn tới bất kỳ quyết định thẩm mỹ nào.

Trong mười nguyên tắc đó, có bốn cái mà Sinh Vũ thấy bị vi phạm thường xuyên nhất trong thực tế làm việc với khách Việt Nam:

• Tính thấy được của trạng thái hệ thống: khách luôn phải biết chuyện gì đang diễn ra. Bấm một nút mà không có phản hồi nào, khách sẽ bấm lại, bấm nhiều lần, hoặc nghĩ trang bị lỗi.
• Nhận ra thay vì phải nhớ: bày lựa chọn ra trước mắt, đừng bắt khách phải nhớ thông tin từ bước trước để dùng ở bước sau.
• Ngăn lỗi và cho phép quay lại: thiết kế để khách khó làm sai, và sửa được khi lỡ sai. Không có nút "quay lại" hoặc "huỷ" là một lỗi thiết kế, không phải lựa chọn tối giản.
• Thẩm mỹ và tối giản: mỗi phần tử thừa không chỉ vô dụng mà còn làm loãng những phần tử thật sự cần thiết. Thêm một thứ vào màn hình nghĩa là lấy đi một phần chú ý của khách khỏi những thứ khác.

Định luật Jakob và chuyện quen thuộc

Một trong những nguyên tắc quan trọng nhất mà Sinh Vũ thấy nhiều doanh nghiệp bỏ qua là Định luật Jakob (Jakob's Law of Internet User Experience). Nội dung: khách dành phần lớn thời gian trực tuyến trên các trang khác, không phải trang của Anh Chị. Vì vậy, họ mang sang trang của Anh Chị toàn bộ kỳ vọng đã hình thành từ những nơi khác.

Kết luận thực tiễn: giao diện càng tuân theo quy ước quen thuộc, khách càng ít phải học và càng nhanh thấy tin cậy. Điều này không có nghĩa là phải giống hệt đối thủ. Sự khác biệt thương hiệu nên nằm ở nội dung, giọng điệu, màu sắc và cảm xúc. Còn cách đặt menu, cách bố trí nút hành động, cách hiển thị trạng thái: nên theo quy ước ngành, không phải chỗ để sáng tạo.

Thẩm mỹ và dễ dùng: không chọn một

Cần thêm một sắc thái: nghiên cứu của Nielsen Norman Group ghi nhận hiệu ứng thẩm mỹ và khả dụng (aesthetic-usability effect), tức là giao diện đẹp thường được người dùng cảm nhận là dễ dùng hơn, ngay cả khi thực tế chưa hẳn vậy. Điều này có nghĩa thẩm mỹ không phải không quan trọng, mà là không được thay thế cho dễ dùng. Cả hai phải có mặt cùng lúc.

Khách dành phần lớn thời gian trên các trang khác. Họ muốn trang của bạn hoạt động theo cách giống những trang họ đã biết.

Jakob Nielsen, Nielsen Norman Group

Lỗi thường gặp khi thiết kế giao diện

• Ưu tiên độc đáo hơn dễ hiểu: phá vỡ quy ước quen thuộc để trông khác biệt, khiến khách phải học lại cách dùng những thứ vốn đã có chuẩn sẵn.
• Không phản hồi khi khách thao tác: bấm nút không có gì xảy ra, tải trang không có chỉ báo tiến độ, gửi form không có xác nhận. Khách đoán mò và mất tin.
• Dàn đều mọi thứ cùng độ nổi bật: khi không có gì thật sự nổi bật hơn, khách không biết nhìn vào đâu trước, không biết bước tiếp theo là gì.
• Áp nguyên tắc máy móc không hiểu vì sao: chép heuristic từ blog mà không hiểu bối cảnh, dẫn tới dùng sai ngữ cảnh. Ví dụ: "tối giản" không có nghĩa là bỏ hết nhãn và chỉ để icon, vì icon một mình thường không đủ rõ nghĩa với đại đa số người dùng.

Góc nhìn của Sinh Vũ

Sinh Vũ coi bộ nguyên tắc khả dụng là lớp nền bắt buộc, phải làm xong trước khi bàn tới nhận diện và cảm xúc thương hiệu trên màn hình. Cụ thể hơn, quy trình thiết kế của Sinh Vũ bắt đầu từ chiến lược nội dung và luồng trải nghiệm theo cách khách ra quyết định, rồi mới tới wireframe (bản phác thảo bố cục), rồi mới tới giao diện hoàn chỉnh. Đúng thứ tự đó, không đi ngược.

Trật tự ưu tiên thị giác cũng là thứ Sinh Vũ chú trọng riêng: cái quan trọng nhất phải nổi bật nhất. Không dàn đều. Một màn hình mà mọi thứ cùng to, cùng đậm, cùng màu thực chất là không có gì quan trọng cả, và khách sẽ cảm nhận điều đó dù không nói ra được.

Câu hỏi thường gặp

Tôi thuê designer làm giao diện đẹp rồi, sao khách vẫn không dùng được?

Đẹp và dễ dùng là hai thứ khác nhau. Designer có thể ưu tiên hình thức độc đáo mà vô tình phá vỡ những quy ước mà khách đã quen từ các trang khác. Kết quả là khách phải học lại cách dùng những thứ vốn có chuẩn sẵn, cảm thấy mệt và bỏ đi. Cần soi lại giao diện qua bộ nguyên tắc heuristic trước khi kết luận vấn đề nằm ở đâu.

Giao diện có cần phải khác biệt so với đối thủ không?

Không nhất thiết, và thường thì không nên. Theo Định luật Jakob, khách dành phần lớn thời gian trên các trang khác nên họ mang kỳ vọng từ nơi quen sang trang của Anh Chị. Giao diện càng tuân theo quy ước quen thuộc, khách càng ít phải học và càng thấy tin cậy. Sự khác biệt nên nằm ở nội dung, giọng điệu và nhận diện thương hiệu, không phải ở cách bố trí các nút và luồng điều hướng.

Tôi có cần thuê chuyên gia UX riêng hay designer thường làm được?

Phụ thuộc vào mức độ phức tạp của sản phẩm. Với trang web thương hiệu thông thường, một designer hiểu và áp dụng đúng bộ nguyên tắc heuristic là đủ. Với ứng dụng có nhiều luồng nghiệp vụ phức tạp hoặc đối tượng dùng đặc thù, cần người có chuyên môn UX riêng để nghiên cứu hành vi người dùng thực tế. Sinh Vũ sẽ tư vấn cụ thể sau khi hiểu rõ sản phẩm của Anh Chị.