Điều hướng tiện ích Làm thế nào nó ảnh hưởng đến thiết kế trải nghiệm người dùng
Để thiết kế một điều hướng hiệu quả và thân thiện với người dùng, chúng ta không chỉ cần nghĩ về cách nhóm nội dung của chúng tôi vào các menu có cấu trúc tốt để cho phép người dùng dễ dàng tìm thấy những gì họ muốn, nhưng cũng về cách thiết kế các công cụ họ sẽ cần để tương tác với trang web
Điều hướng không liên quan chặt chẽ đến nội dung và giúp người dùng thực hiện các hành động khác nhau được gọi là điều hướng tiện ích, và đó là một khía cạnh ít được thảo luận rộng rãi nhưng cực kỳ quan trọng của thiết kế trải nghiệm người dùng. Thanh tìm kiếm, hình thức đăng nhập và đăng ký, đăng ký, chia sẻ và in nút, giỏ mua hàng, menu theo ngữ cảnh và công cụ cho phép người dùng chuyển đổi ngôn ngữ hoặc kích thước phông chữ là những ví dụ điển hình của điều hướng tiện ích.
Thiết kế chúng không dễ như thoạt nhìn, nó đòi hỏi phải xem xét để tìm ra những yếu tố chúng ta cần, nơi đặt và cách hiển thị chúng để đảm bảo rằng khách truy cập của chúng tôi có thể nhanh chóng tìm thấy chúng và hiểu cách chúng hoạt động.
Cách điều hướng tiện ích tác động đến UX
Khi chúng tôi thiết kế điều hướng tiện ích, chúng tôi cần quyết định cách chúng tôi muốn người dùng tương tác với trang web của chúng tôi. Chúng tôi cần cung cấp cho họ một cấu trúc tương tác phù hợp với mục tiêu kinh doanh của chúng tôi, dẫn dắt người dùng trong suốt hành trình của khách hàng, cung cấp cho họ các tùy chọn dễ hiểu và cung cấp cho họ trải nghiệm người dùng dễ chịu.
Đầu tiên, họ cần có thể nhanh chóng thực hiện các hành động họ muốn. Nếu chúng tôi cho phép họ làm như vậy, sự hài lòng của khách hàng sẽ tăng lên và người dùng hài lòng có xu hướng dành nhiều thời gian hơn và nhiều tiền hơn cho các trang web.
Trang chủ của AirBnB tuân theo nguyên tắc UX này và menu trên cùng của nó chỉ chứa các công cụ tiện ích. Đây không phải là một giải pháp thông thường, nhưng nếu chúng ta xem tốc độ tăng trưởng đáng kinh ngạc của AirBnB, thì đó là sự lựa chọn hoàn hảo cho họ.
4 mục menu trên cùng nhắm đến 4 mục chính thường truy cập trang web của AirBnB: những người quan tâm đến việc trở thành chủ nhà (“Trở thành chủ nhà”), những người muốn giải quyết vấn đề xảy ra trong khi họ sử dụng dịch vụ (“Cứu giúp”), người dùng mới và người dùng cũ“Đăng ký” và “Đăng nhập”). Trang chủ tập trung vào tiện ích của AirBnB cũng chứa một thanh tìm kiếm nhanh là một công cụ quan trọng trên trang web cho thuê chỗ ở.
Thứ hai, Người dùng không cần các tiện ích thừa, vì quá nhiều lộn xộn làm mất tập trung và giảm sự tập trung. Những công cụ nào là cần thiết trong điều hướng tiện ích của chúng tôi và những gì không phụ thuộc vào bản chất của trang web của chúng tôi. Ví dụ: có thể hữu ích khi bao gồm chế độ xem In trên blog hoặc trang web tin tức, nhưng tính năng tương tự có thể là một sự xao lãng không cần thiết trên bảng diễn đàn hoặc trang web truyền thông xã hội.
Ví dụ, Washington Post hiển thị điều hướng tiện ích trên các trang bài đăng khác nhau trên trang chủ. Bằng cách này, người dùng chỉ đáp ứng các công cụ tiện ích có liên quan và không bị làm phiền với các tùy chọn mà họ không muốn sử dụng.
Có 3 mục điều hướng tiện ích mà khách truy cập có thể muốn sử dụng trên toàn trang web. Chúng được bao gồm thông minh trong thanh trên cùng cố định (công cụ tìm kiếm, “Đăng nhập”, và “Theo dõi”), nhưng người dùng không phải suy nghĩ về các tùy chọn liên quan đến các bài đăng đơn lẻ, chẳng hạn như “Danh sách đọc” khi họ đang duyệt trang chủ hoặc một trong các trang chuyên mục.
Thứ ba, Người dùng cần nhanh chóng hiểu những gì họ có thể làm trên trang web của chúng tôi. Khách truy cập không nhất thiết phải biết những gì họ muốn, vì vậy chúng tôi luôn cần cung cấp cho họ thông tin về các tùy chọn họ có.
Nếu bạn nhìn vào ảnh chụp màn hình bên dưới, bạn có thể thấy rằng Thời báo New York thông báo cho người dùng về sự sẵn có của 3 phiên bản khác nhau: Người Mỹ, Quốc tế, và Trung Quốc, và cũng cho phép họ nhanh chóng chuyển đổi giữa ba. Ví dụ tuyệt vời này về điều hướng tiện ích thông minh cho người dùng thấy các tùy chọn ít rõ ràng hơn mà họ có thể không tự mình tìm thấy, theo cách không khó hiểu và thanh lịch.
Tìm nơi tốt nhất
Có những vị trí điển hình để điều hướng tiện ích nơi người dùng trực quan tìm kiếm các công cụ này, vì đó là những gì họ đã sử dụng trên phần lớn các trang web. Phá vỡ các quy ước thiết kế web được coi là thực tiễn trải nghiệm người dùng tồi và điều này đặc biệt đúng đối với điều hướng tiện ích, trong hầu hết các trường hợp, là về khả năng sử dụng hơn là sáng tạo.
Vì điều hướng tiện ích là thứ yếu so với điều hướng dựa trên nội dung trong hầu hết các trang web, nên nó thường được đặt ở các khu vực ít nổi bật hơn nhưng vẫn có thể nhìn thấy. Điều này thường có nghĩa là (1) góc trên bên phải của trang web và (2) phần dưới của chân trang. nó là một ý tưởng tốt để làm theo những quy ước này, như đây là những nơi mà hầu hết người dùng tìm kiếm các công cụ tiện ích đầu tiên.
Như bạn có thể thấy bên dưới, Reuters đã định vị hầu hết các công cụ tiện ích của mình vào hai khu vực điển hình này, góc trên cùng bên phải của trang web và phần dưới của chân trang bên dưới điều hướng dựa trên nội dung. Giải pháp độc đáo ở đây là phần chân cố định thêm với 2 mục tiện ích mà các nhà thiết kế cho là quan trọng nhất: “Đăng nhập hay đăng ký” và “Mới nhất từ My Wire”.
Thật thú vị khi lưu ý rằng khu vực điều hướng tiện ích bổ sung vẫn được đặt vào một loại chân trang nơi người dùng thường tìm kiếm các công cụ tương tự, vì vậy các nhà thiết kế của Reuters đã sáng tạo theo cách nhưng vẫn tuân theo các quy ước thiết kế web để duy trì khả năng sử dụng.
Xây dựng cấu trúc logic
Nhóm các công cụ tiện ích thành một cấu trúc logic là rất quan trọng nếu chúng ta muốn xây dựng một trang web có tỷ lệ chuyển đổi cao. Đây có thể là một thách thức ngay cả khi chúng tôi không muốn cung cấp cho người dùng nhiều tùy chọn, nhưng Amazon đưa sự phức tạp của điều hướng tiện ích lên cấp độ tiếp theo. Amazon có một điều hướng tiện ích cực kỳ phức tạp với nhiều tùy chọn, Nhưng nếu chúng ta sử dụng Amazon đủ thường xuyên, nó sẽ không xuất hiện. Đây là sự kỳ diệu của thiết kế thông minh.
Họ không chỉ đặt điều hướng tiện ích ở góc trên bên phải nơi người dùng mong muốn tìm thấy nó, nhưng họ cũng chia nó thành 3 nhóm chính: (1) một thanh tìm kiếm, (2) thông tin liên quan đến người dùng (bên dưới thanh tìm kiếm ) và (3) hành động mà người dùng có thể thực hiện trên trang web.
Thật thông minh bởi vì, nhờ các tín hiệu thị giác như giỏ mua hàng hoặc biểu tượng tìm kiếm, khách hàng có thể quyết định trong nháy mắt nhóm nào họ muốn sử dụng và từ đó họ có thể bỏ qua hai nhóm kia. Chỉ có một nhóm (“Tài khoản của bạn”, “Cố gắng làm tốt”, “Cái rổ”, và “Danh sách mong muốn”) có các menu con cũng được cấu trúc logic và các nhóm menu con khác nhau được phân chia bằng các dấu tách kín nhưng có thể nhìn thấy để giúp người dùng nhanh chóng tìm thấy những gì họ muốn.
Tạo một thiết kế trực quan hiệu quả
Thiết kế trực quan của điều hướng tiện ích hiệu quả cần tuân theo nguyên tắc KISS nổi tiếng (Keep It Simple, St ngu). Bạn nên cung cấp các biểu tượng với nhãn văn bản, làm cho các điều khiển trông giống như các điều khiển và nhấn mạnh trực quan các hành động quan trọng nhất. Cũng có thể là một ý tưởng tốt để phân biệt điều hướng dựa trên nội dung và tiện ích bằng cách sử dụng một thiết kế hơi khác.
Hai ví dụ tuyệt vời về thiết kế hình ảnh hiệu quả có thể được tìm thấy trên trang web của Walmart và Etsy. Các nhà thiết kế đã đặt điều hướng tiện ích trên cùng của cả hai trang web và tô sáng nó bằng các màu khác với phần còn lại của điều hướng, Walmart với nền màu xanh lam và Etsy với phông chữ màu xanh.
Cả hai trang web nhấn mạnh các hành động quan trọng nhất của người dùng với các yếu tố thiết kế hình ảnh khác nhau, Walmart sử dụng màu vàng cho các nút Tìm kiếm và Đăng nhập, trong khi Etsy cung cấp đường viền màu xanh kín đáo cho nút Đăng nhập và bao gồm biểu tượng giỏ hàng màu xám phía trên menu Giỏ hàng.
Đây là nơi duy nhất mà Etsy sử dụng một biểu tượng trong menu tiện ích của nó, trong khi Walmart hiển thị một biểu tượng bên cạnh mỗi mục, nhưng vẫn không quên bao gồm các nhãn văn bản cần thiết ngay bên cạnh các biểu tượng.
