Vì sao nhất quán giao diện quan trọng
Mỗi lần giao diện khác chuẩn là một lần khách phải học lại, và lòng tin mất đi từng chút một.
Nhất quán giúp khách dùng kiến thức đã có từ những trang quen thuộc để thao tác trên trang của Anh Chị mà không cần học lại từ đầu. Điều đó giảm bối rối, tăng tốc độ hoàn thành tác vụ, và tạo cảm giác thương hiệu đáng tin. Sinh Vũ chỉ phá lệ khi việc phá lệ thật sự giúp khách hiểu nhanh hơn, không phá lệ vì muốn khác người.
Khi khách truy cập trang của Anh Chị, họ không đến với tâm thế học một ngôn ngữ mới. Họ mang theo toàn bộ kinh nghiệm từ hàng chục trang web đã dùng qua: giỏ hàng ở góc trên phải, link có gạch chân, nút chính nổi bật hơn nút phụ. Giao diện nhất quán, cả bên trong sản phẩm lẫn với quy ước ngành, cho phép khách dùng ngay vốn kiến thức đó. Mỗi lần Anh Chị phá lệ mà không có lý do rõ ràng là một lần khách phải dừng lại, suy nghĩ, và tự hỏi mình đang làm đúng không.
Hai loại nhất quán cần phân biệt
Nhất quán bên trong (internal consistency) nghĩa là cùng một sản phẩm dùng chung màu sắc, bố cục, cách gọi tên trên mọi trang. Nút xác nhận đơn hàng trông và hoạt động giống nút xác nhận thông tin cá nhân. Tên chức năng không thay đổi giữa các màn hình.
Nhất quán bên ngoài (external consistency) nghĩa là bám vào quy ước mà người dùng đã quen từ những sản phẩm khác trong cùng ngành. Điều này không có nghĩa là sao chép đối thủ, mà là tôn trọng những kỳ vọng hình thành qua nhiều năm dùng sản phẩm. Nielsen Norman Group gọi đây là Heuristic (nguyên tắc trải nghiệm người dùng) thứ 4 trong 10 nguyên tắc nền tảng của thiết kế khả dụng.
Bốn tầng cần giữ đều
- Hình ảnh và biểu tượng: cùng một icon phải đại diện cho cùng một ý nghĩa ở mọi nơi. Dùng biểu tượng cái chuông cho thông báo ở trang chủ thì không thể dùng nó cho cài đặt âm thanh ở trang khác.
- Bố cục và vị trí nút: khách học vị trí bằng mắt, không bằng chữ. Dời nút sang chỗ khác giữa các bước trong cùng một luồng là nguồn gây lỗi thao tác phổ biến nhất.
- Định dạng dữ liệu: ngày tháng, số điện thoại, giá tiền cần hiển thị theo cùng một quy ước xuyên suốt sản phẩm.
- Giọng văn: nếu trang chính xưng hô thân thiện mà trang thanh toán lại cứng nhắc và lạnh lùng, khách sẽ cảm thấy đang nói chuyện với hai người khác nhau trong cùng một cửa hàng.
Khi nào giữ, khi nào được phép phá lệ
Luôn giữ nhất quán: ở tầng công cụ, tức là nút bấm, form nhập liệu, thanh điều hướng, thông báo lỗi. Đây là nơi khách cần đoán được hành vi, không cần bất ngờ. Bất kỳ sự khác biệt nào ở đây đều tạo thêm gánh nặng nhận thức (cognitive load) mà khách phải xử lý trước khi hoàn thành tác vụ.
Chấp nhận phá lệ có chủ đích: ở những khoảnh khắc thương hiệu như trang giới thiệu, màn hình chào, hero section, nếu việc đó giúp khách hiểu hoặc nhớ tốt hơn và không cản thao tác. Điều kiện là phá lệ phải phục vụ khách, không phải phục vụ sở thích thẩm mỹ của đội thiết kế.
Khách không nên phải phân vân xem những từ, tình huống hay hành động khác nhau có cùng ý nghĩa hay không.
Nielsen Norman Group, Usability Heuristic #4
Lỗi thường gặp nhất
- Mỗi trang một kiểu nút, hoặc cùng một hành động được gọi bằng nhiều tên khác nhau trên các màn hình, buộc khách phải dừng lại và suy đoán.
- Đặt lại vị trí các phần tử quen thuộc để trông khác đối thủ, nhưng thực chất đang đánh đổi sự dễ dùng lấy sự lạ mắt.
- Giọng văn lệch nhau giữa các trang vì nhiều người viết nội dung mà không có bộ quy tắc chung.
- Nhầm nhất quán với đơn điệu, sợ lặp lại đến mức phá vỡ những mẫu vốn nên giữ ổn định.
Góc nhìn của Sinh Vũ
Sinh Vũ xử lý nhất quán bằng hệ thiết kế (design system) và token, nghĩa là một bộ quy tắc được mã hóa vào công cụ, thay vì trông cậy vào trí nhớ của từng thành viên. Khi tất cả nút chính đều kéo màu từ cùng một biến, thay đổi thương hiệu chỉ cần sửa một chỗ và mọi trang cập nhật theo.
Điều này đặc biệt quan trọng khi bàn giao sản phẩm cho đội khách tự vận hành. Nếu nhất quán chỉ tồn tại trong đầu người thiết kế ban đầu, thì sau ba tháng đội tự thêm trang, sản phẩm sẽ dần trôi khỏi ngôn ngữ thị giác ban đầu. Hệ thiết kế là cách Sinh Vũ giúp nhất quán tồn tại độc lập với con người cụ thể.
Ranh giới Sinh Vũ giữ là: nhất quán ở tầng công cụ, để dành khoảng phá lệ có chủ đích cho những điểm chạm mang tính cách thương hiệu. Không phá lệ vì muốn độc đáo, chỉ phá lệ khi có bằng chứng rõ ràng rằng việc đó giúp khách hiểu nhanh hơn hoặc nhớ lâu hơn.
Nguồn tham khảo
Nielsen Norman Group, Maintain Consistency and Adhere to Standards (Usability Heuristic #4). Kinh nghiệm thực hành Sinh Vũ Studio.
Câu hỏi thường gặp
Nhất quán có nghĩa là giao diện phải đơn điệu, nhìn chán không?
Không. Nhất quán và đơn điệu là hai chuyện khác nhau. Nhất quán nghĩa là cùng một nút, cùng một hành động thì trông và cư xử giống nhau ở mọi nơi trong sản phẩm. Anh Chị vẫn có thể dùng hình ảnh, màu sắc, ngôn ngữ phong phú ở những điểm chạm mang tính cách thương hiệu, miễn là những yếu tố đó không cản thao tác của khách.
Khi nào thì cần xây hệ thiết kế thay vì chỉ dùng bản hướng dẫn thương hiệu?
Khi sản phẩm bắt đầu có nhiều người cùng dựng nhiều trang, và nhất quán không thể phụ thuộc vào trí nhớ của một người nữa. Bản hướng dẫn thương hiệu nói về màu sắc và font chữ, còn hệ thiết kế chứa các thành phần dùng được ngay, giúp đội tự thêm trang mới mà vẫn giữ được ngôn ngữ chung.
Có trường hợp nào phá lệ giao diện là đúng không?
Có, nhưng phải có lý do rõ ràng. Sinh Vũ chấp nhận phá lệ ở những khoảnh khắc thương hiệu như trang giới thiệu hoặc hero, nếu việc đó giúp khách hiểu hoặc nhớ tốt hơn và không cản thao tác. Ở những phần tử công cụ như nút, form, điều hướng thì không phá lệ, vì đây là nơi khách cần đoán được, không cần bất ngờ.