Website đóng vai trò quan trọng trong các điểm chạm của người dùng trong hành trình mua hàng của doanh nghiệp. Để có một trải nghiệm tốt trên website, Navigation Bar là thanh điều hướng có vai trò quan trọng về mặt cấu trúc thông tin của website, giúp người dùng có thể dễ dàng tìm thấy thông tin mà họ đang tìm kiếm. Để hiểu rõ hơn các thông tin chi tiết một thanh điều hướng mang đến trải nghiệm tốt cho người dùng, cùng theo dõi bài viết dưới đây nhé!

Điều hướng website là gì?

Về mặt kỹ thuật, điều hướng website là một tập hợp các thành phần cấu thành nên giao diện người dùng, giúp người truy cập tìm thấy nội dung và các tính năng trên một website. Việc điều hướng không chỉ giúp người dùng có thể di chuyển từ website này sang website khác mà nó còn giúp người dùng hiểu được mối quan hệ giữa các trang riêng lẻ.

Theo chia sẻ của nhà phân tích AI – Nathaniel Davis trong một bài báo về UX matters. Kiến trúc thông tin của một trang web được chia thành 2 phần lớn của một tảng băng. Việc điều hướng trang web được ví như bề nổi của tảng băng đó, chúng được xem là kiến trúc thông tin (information architecture) của một website (IA).

Bên dưới mặt nước là các phần của tảng băng mà khách truy cập giao diện tương tác người dùng (front-end) không thể nhìn thấy được như: nghiên cứu, chiến lược, quản lý và tổ chức. Đó là những thứ đã xây dựng nên cấu trúc thông tin của website. Còn phía trên của mặt nước là giao diện điều hướng (Interface) thường được thể hiện dưới dạng một chuỗi các liên kết siêu văn bản và một thanh tìm kiếm.

Hình 1: Kiến trúc thông tin của một website được ví như “một tảng băng trôi”

Nói cách khác, kiến trúc thông tin (IA ) của website sẽ không hiển thị trong giao diện điều hướng, nhưng nó lại là nền tảng của giao diện đó. Điều này mang đến cho khách truy cập cảm giác các nội dung được kết nối, phân loại để đáp ứng nhu cầu và mong muốn tìm kiếm của họ – mà không cần thực sự hiển thị tất cả các bảng tính (spreadsheets) và các sơ đồ rối rắm để xác định và tổ chức các mối quan hệ giữa nội dung đó.

Dưới đây là một ví dụ về hệ thống phân cấp của một website. Thoạt nhìn thì hơi đáng sợ, đúng không? Tuy nhiên, sơ đồ này là phần mà người dùng truy cập website không nhìn thấy. Họ chỉ thấy được các mục trong menu điều hướng chính như ba mục từ cấp đầu tiên. Các trang phụ sẽ được lồng vào trong một menu điều hướng phụ (cùng thông tin, mục đích) với danh mục lớn của cấp đầu tiên. Để hiểu hơn, cùng nhìn vào sơ đồ phía dưới đây nhé!

Hình 2: Sơ đồ hệ thống phân cấp của một website

Điều hướng phụ trên một website là gì?

Điều hướng phụ – còn được biết đến là điều hướng cục bộ – là giao diện mà tại đó khách truy cập có thể tìm thấy các danh mục có cấp độ thấp hơn của kiến trúc thông tin (IA) website. Đây thường là các danh mục phụ điển hình của các liên kết điều hướng chính.

Ví dụ: trên website Shockz - thương hiệu tai nghe thể thao chuyên nghiệp, menu điều hướng chính chứa mục điều hướng “Sản phẩm”. Khi bạn di chuột đến mục điều hướng “Sản phẩm”, menu điều hướng phụ sẽ xuất hiện và đưa ra nhiều điều hướng phụ (mục nhỏ) để bạn có thể nhấn vào tham khảo các dòng sản phẩm của Shockz như: “Openswim”, “Openrun Pro”, “Openrun”, “Openmove”.

Hình 3: Giao diện điều hướng trên website của thương hiệu tai nghe truyền âm qua xương Shokz

Điều hướng website tốt sẽ mang đến điều gì?

Khả năng điều hướng dễ dàng chính là một trong những tính năng hữu ích nhất của một website. Bởi vì điều hướng website cho phép khách truy cập website có thể nhanh chóng và dễ dàng tìm thấy thông tin mà họ đang tìm kiếm (chẳng hạn như một bài đăng trên blog hoặc trang sản phẩm). Nó cũng có thể giúp họ tìm thấy thông tin quan trọng mà họ không nghĩ là sẽ cần như giá, trang đăng ký email hoặc thông tin liên hệ.

Điều này khiến việc điều hướng trở thành một phần thiết yếu trong trải nghiệm người dùng và trong chiến lược website của bạn. Hệ thống điều hướng cho phép khách truy cập tìm thấy nội dung bằng cách tìm kiếm và lướt xem, điều đó không chỉ có thể cải thiện cơ hội khách truy cập xem trang web của bạn lâu hơn – mà nó còn có thể cải thiện các cơ hội thực hiện hành động của khách truy cập trên trang web của bạn.

Để đảm bảo rằng bạn có thể thiết kế một hệ thống điều hướng có thể đáp ứng các nhu cầu của khách truy cập. Trong bài viết này, chúng ta sẽ xem xét kỹ hơn về điều hướng website là gì và những cách triển khai nó trên website của mình. Sau đó, chúng ta sẽ đi đến khám phá một số phương pháp tốt nhất để thiết kế giao diện điều hướng và xem các ví dụ từ các website thực tế.

Các loại điều hướng website

Điều hướng là một trong những thành phần thiết kế nếu không muốn nói là quan trọng nhất trên một website. Nó cũng ảnh hưởng đến việc khách truy cập sẽ đến thăm trang chủ của bạn và lướt xem hay sẽ nhấp chuột vào nút “Quay lại”.

Vì vậy, cách thiết lập cấu trúc điều hướng website của bạn sẽ phụ thuộc vào đối tượng mục tiêu của bạn. Từ đó, bạn sẽ chọn được định dạng điều hướng website nào mà bạn nghĩ là sẽ trực quan và dễ tiếp cận, dễ sử dụng nhất đối với người dùng. Sau đây là một số kiểu điều hướng website phổ biến, dễ dàng tiếp cận với khách hàng mà bạn có thể tham khảo và lựa chọn cho trang web của mình.

Thanh điều hướng theo chiều ngang

Thanh điều hướng ngang là menu điều hướng website phổ biến nhất. Nó liệt kê các trang điều hướng chính nằm cạnh nhau và đặt chúng trong tiêu đề website. Nhiều website có các mục giống nhau, chẳng hạn như “Giới thiệu”, “Sản phẩm”, “Giá cả” và “Liên hệ”, bởi vì đó là những gì mà khách truy cập muốn tìm hiểu của trang web đó. Tuy nhiên, không nhất thiết các trang web đều phải sử dụng và sắp xếp thông tin theo cách điều hướng phổ biến này.

Để dễ hiểu hơn, lấy thanh điều hướng trên Elle.vn (trang báo điện tử về làm đẹp, thời trang) làm ví dụ. Các phần nổi bật (mục chính) của thanh điều hướng (thanh menu) nó bao gồm sáu loại nội dung: “Thời trang”, “Làm đẹp”, “Văn hóa”, “Lifestyle”, “Chào ngày mới”, “Video” và cá trang liên kết đến trang review, mua sắm: “Elle Shop” và trang về lĩnh vực cưới: “Elle Bride” của họ. Việc phân chia các mục lớn có chứa các trang này giúp khách truy cập có nhiều cơ hội hơn để dễ dàng vào các trang mà họ đang tìm kiếm theo nhu cầu làm đẹp, thời trang hơn là các trang tiêu chuẩn như: Giới thiệu, Giá cả và Liên hệ.

Vì thế, khi thiết kế thanh điều hướng, hãy lưu ý đến mục đích của người dùng trang web là gì để có thể tạo và thiết kế kiến trúc thông tin (IA) phù hợp, để tạo trải nghiệm tốt, giữ chân người xem lâu hơn trong trang web của bạn.

Hình 4: Thanh điều hướng ngang được sử dụng trên website của Elle Việt Nam

Menu điều hướng Dropdown (menu thả xuống)

Menu điều hướng Dropdown còn được gọi là menu thả xuống, đây là mô hình lý tưởng cho các website giàu nội dung với một lượng kiến trúc thông tin (IA) phức hợp.

Nếu bạn muốn trang bao gồm nhiều liên kết đến các trang vào trong thanh điều hướng của mình, bạn không thể liệt kê tất cả chúng bên cạnh nhau. Bởi nếu liệt kê tất cả thì chúng trông lộn xộn và không thể điều chỉnh tất cả sao cho khớp theo chiều ngang. Thay vào đó, bạn có thể liệt kê các mục quan trọng nhất hoặc các mục chung tại thanh điều hướng cấp cao và đưa phần còn lại vào menu thả xuống.

Sephora là một ví dụ tuyệt vời cho menu điều hướng dạng Dropdown. Lý do Sephora sử dụng loại điều hướng web này là vì nó cung cấp rất nhiều sản phẩm và dịch vụ.

Như minh họa, bạn có thể thấy trên website của Sephora, khi bạn di chuột đến bất kỳ danh mục điều hướng chính nào thì sẽ có một menu chi tiết dạng thả xuống sẽ xuất hiện. Menu điều hướng Dropdown sẽ chứa tất cả các phân loại danh mục cụ thể của website.

Hình 5: Menu điều hướng Dropdown trên website của Sephora

Menu điều hướng dạng hamburger

Menu hamburger là dạng menu thường thấy nhất trong thiết kế website dành cho thiết bị di động. Với kiểu menu điều hướng này, các mục điều hướng thường được liệt kê theo chiều ngang và được đặt trên màn hình lớn hơn và thu gọn lại ở phía sau nút dạng hamburger trên các kích thước màn hình nhỏ hơn.

Khi khách truy cập nhấp vào biểu tượng ba gạch ngang (giống hình hamburger) này, các liên kết điều hướng sẽ xuất hiện dưới dạng xổ xuống theo chiều dọc hoặc xuất hiện theo chiều ngang. Kiểu thiết kế này là mô hình lý tưởng cho các ứng dụng di động hoặc các trang web nơi mà có không gian hiển thị giới hạn.

Hãy xem menu dạng hamburger trên website dành cho thiết bị di động của Adidas Việt Nam.

Hình 6: Menu điều hướng dạng hamburger trên website của Adidas Việt Nam

Menu điều hướng Vertical Sidebar

Với loại menu này, các mục điều hướng sẽ được xếp chồng lên trên một mục điều hướng khác và được bố trí trên thanh bên cạnh (sidebar). Mặc dù kiểu menu điều hướng này ít phổ biến hơn điều hướng dạng ngang, nhưng điều hướng Vertical Sidebar cũng mang lại một vài lợi ích.

Do bề mặt hiển thị của kiểu menu điều hướng Vertical Sidebar không bị giới hạn, nên bạn có thể thêm các liên kết điều hướng dài hơn và có thể đưa vào nhiều tùy chọn cấp cao hơn. Nó cũng có thể hoạt động tốt đối với các nhà hàng, agency và các doanh nghiệp sáng tạo khác.

Hãy xem Vertical Sidebar của Lost Bird (trang web kiến tạo nội dung giá trị) bên dưới.

Hình 7: Menu điều hướng Vertical Sidebar của Lost Bird

Menu điều hướng Footer

Menu Footer thường được ghép nối hoặc mở rộng theo thanh điều hướng dạng ngang. Nếu khách truy cập không tìm thấy liên kết điều hướng mà họ đang tìm kiếm trong tiêu đề thì họ có thể cuộn xuống phía cuối trang để có thêm nhiều tùy chọn.

Lấy ví dụ về tờ New York Times có 19 liên kết điều hướng trong menu điều hướng dạng ngang ở đầu trang. Menu Footer của nó có hơn 50 liên kết điều hướng, hầu hết trong số đó thuộc một trong các danh mục được liệt kê trong menu điều hướng chính. Điều này giúp bạn dễ dàng truy cập vào các danh mục phụ của các mục phổ biến nhất trong website.

Hình 8: Menu điều hướng Footer của tờ New York Times

Thiết kế thanh điều hướng website

Không có cách thiết kế điều hướng website nào là hoàn hảo n. Chỉ đơn giản là bạn cần phải xem xét làm thế nào để khiến khách truy cập có thể truy cập vào website lần đầu và lặp lại điều đó vì một mục đích nào đó của họ khi vào website của bạn, chẳng hạn như xem thông tin để mua sắm, đọc tin tức,...

Do đó, tập trung vào quy trình thiết kế website của bạn xoay quanh những khách truy cập đặc trưng, nó sẽ giúp cấu trúc điều hướng của bạn trông riêng biệt và hoạt động khác với cấu trúc điều hướng trên một website khác. Đó là một điều khá tốt.

Vậy một thanh điều hướng phù hợp với người dùng sẽ bao gồm những gì? Hãy cùng xem qua các giai đoạn trong quy trình thiết kế thanh điều hướng website dưới đây nhé!

Thanh điều hướng website nên bao gồm những gì?

Với tất cả các trang trên website của bạn, thật khó để xác định trang nào là đủ quan trọng để trở thành một phần của điều hướng chung. Vì mục đích của SEO và trải nghiệm người dùng, Orbit Media khuyên bạn nên giới hạn thanh điều hướng của mình với 7 mục là tối đa.

Vậy làm thế nào để bạn bắt đầu thu hẹp phạm vi các thông tin cho website? Hãy tham khảo ý kiến của các phòng ban khác trong doanh nghiệp và chọn lọc các góp ý để cải thiện website. Tuy nhiên, đó chỉ là ý kiến của họ, việc quan trọng cuối cùng của bạn là nên lưu ý đến khách truy cập website của mình, từ đó xác định được hướng đi tốt nhất.

Những phương pháp xác định thiết kế điều hướng website

Card Sorting

Card Sorting là một kỹ thuật trải nghiệm người dùng đơn giản giúp bạn đi sâu vào suy nghĩ của khách truy cập website của mình và thiết kế điều hướng theo cách nhìn của họ. Tin tốt là bạn không cần phải có bất kỳ trải nghiệm UX nào để thực hiện điều này.

Hãy mời mọi người bên ngoài tổ chức của bạn tham gia một bài tập đơn giản trong 20 phút. Đặt một chồng thẻ mục lục lên bàn, mỗi thẻ sẽ đại diện cho một trang chính trên website của bạn. Sau đó, yêu cầu người tham gia sắp xếp các thẻ đó theo bất kỳ cách nào mà họ thấy phù hợp. Tìm kiếm xu hướng dựa trên cách những người tham gia phân nhóm các trang trên website của bạn và hỏi họ về cách mà họ đặt tên cho từng danh mục. Kết quả của sự sắp xếp này có thể giúp xây dựng “xương sống” cho website của bạn.

Hình 9: Card Sorting là một cách giúp tìm ra các mục quan trọng nhất để xây dựng nên “xương sống” cho website

Báo cáo phân bổ

Nếu phần mềm phân tích marketing của bạn cung cấp tính năng này thì báo cáo phân bổ là lựa chọn hoàn hảo để quyết định điều gì sẽ được đưa vào điều hướng chính của bạn. Báo cáo này phân bổ các kết nối được tạo mới đến các tương tác của chúng với doanh nghiệp của bạn, vì vậy bạn có thể hiểu rõ hơn về nội dung và chức năng trên website của mình để biến những khách truy cập thành những khách hàng tiềm năng. Dưới đây là một số báo cáo mẫu có sẵn trong công cụ báo cáo của HubSpot.

Hình 10: Một mẫu báo cáo phân bổ trong công cụ báo cáo phân bổ của HubSpot

Users Flow

Nếu không có báo cáo phân bổ, bạn vẫn có thể biết được những trang nào là quan trọng trên website của mình thông qua báo cáo Users Flow trong Google Analytics. Mặc dù mẫu báo cáo này không phân biệt lượng truy cập tiêu chuẩn từ khách hàng, nhưng nó sẽ làm nổi bật cách thức mà người dùng cho là điều hướng phù hợp với trải nghiệm của họ trên website của bạn.

Nói theo cách riêng của Google thì “Báo cáo Users Flow là bản trình bày đồ họa về các đường dẫn mà người dùng đã đi qua website của bạn, từ nguồn trang, qua các trang khác nhau và đâu là nơi dẫn họ đã thoát ra khỏi website của bạn.”

Sắp xếp thứ tự các mục điều hướng như thế nào là phù hợp cho website?

Thứ tự có ý nghĩa quan trọng trong điều hướng website. Các nghiên cứu nhận thức cung cấp bằng chứng cho thấy rằng những người xem website có xu hướng ghi nhớ các liên kết ở đầu và cuối của một điều hướng sâu sắc nhất. Điều này thường được gọi là hiệu ứng đầu tiên và hiệu ứng tức thì (primacy and recency effects), chúng nói về hiện tượng mà các từ được trình bày đầu tiên hoặc cuối cùng trong danh sách thường có xu hướng thu hút nhiều sự chú ý của người xem hơn.

Vì vậy, đối với website của bạn, hãy nên lên kế hoạch về những mục mà bạn đặt ở những vị trí này (đầu tiên và cuối cùng). Hãy suy nghĩ xem điều gì là quan trọng nhất đối với khách truy cập đặc trưng của bạn.

Trong một bài viết cho blog của Neil Patel, chiến lược giá web – Andy Crestodina nói: “Hãy đặt các mục quan trọng nhất của bạn ở phần mở đầu của điều hướng và đặt các mục ít quan trọng nhất ở phần giữa.” Theo đó. mục ‘Liên hệ’ nên là mục cuối cùng trong danh sách, đặt nó ở ngoài cùng bên phải ở vị trí cấp cao trên điều hướng dạng ngang, đây là một vị trí tiêu chuẩn.

Diễn đạt các tùy chọn điều hướng như thế nào?

Cách thức bạn diễn đạt các tùy chọn điều hướng của mình sẽ tùy thuộc vào loại hình kinh doanh hoặc tổ chức của bạn. Bạn có thể lựa chọn cách thức đơn giản hoặc thử nghiệm với nhiều mẫu sáng tạo hơn.

Điều quan trọng nhất cần ghi nhớ khi chọn các từ để sử dụng trong các liên kết điều hướng chính của bạn là trước hết hãy suy nghĩ về các thuật ngữ mà khách hàng của bạn sẽ sử dụng để mô tả các trang đó. Sau đó, hãy nghĩ đến việc tối ưu hóa công cụ tìm kiếm.

Dựa trên đối tượng

Điều hướng dựa trên đối tượng được cho là sự tùy chọn rõ ràng nhất cho các website. Điều hướng dựa trên đối tượng sẽ đặt nội dung dưới các danh mục cụ thể (thường là danh từ). HubSpot.com là một ví dụ về điều hướng dựa trên đối tượng. Cũng như website của Đại học RMIT bên dưới. Loại sắp xếp này coi điều hướng như một mục lục và nhóm các trang vào chủ đề hoặc danh mục phù hợp nhất.

Hình 11: Website của Đại học RMIT có các mục được phân nhóm theo đối tượng

Ngoài ra, hãy lưu ý răng, các liên kết điều hướng ở bên phải nên thiên về việc dựa trên hành động nhiều hơn là dựa trên đối tượng. Hãy xác định điều này dưới đây.

Dựa trên hành động

Một số website có thể được phục vụ tốt hơn nhờ vào việc điều hướng theo hành động. Để biết khi nào điều này là thích hợp, hãy hỏi khách hàng của bạn xem họ chủ yếu đến website của bạn để tìm hiểu về điều gì đó hay để thực hiện một hành động cụ thể.

Trong ví dụ dưới đây từ Đại học Howard, khách truy cập đến website với một hành động rõ ràng trong đầu. Họ không truy cập để đọc trang “giới thiệu” mà họ đến để đăng ký, truy cập hoặc quyên góp.

Hình 12: Các mục trên website của Đại học Howard được phân nhóm theo hành động

Dựa trên đối tượng khách hàng

Đối với các công ty có đa dạng đối tượng khách hàng, thường sẽ có những dòng chữ rõ ràng, bạn có thể xem xét việc điều hướng dựa trên đối tượng khách hàng hoặc điều hướng phụ như trong ví dụ dưới đây.

Tuy nhiên, điều này chỉ hoạt động nếu khách truy cập có thể dễ dàng tự phân loại. Ví dụ như bạn sẽ không muốn sử dụng các dòng chữ như công ty vừa hay công ty nhỏ hoặc công ty tiếp thị hay agency quảng cáo, vì những dòng đó thường làm lu mờ và có thể khiến khách hàng của bạn bối rối không biết phải vào đâu trước.

Trong ví dụ dưới đây, Trường Cao đẳng Boston đã làm rất tốt trong việc sử dụng kết hợp cách tiếp cận dựa trên đối tượng khách hàng và điều hướng dựa trên đối tượng.

Hình 13: Menu điều hướng trên website của Trường Cao đẳng Boston

Tối ưu hóa công cụ tìm kiếm

Ngoài việc thiết kế menu điều hướng phù hợp với cách thức mà đối tượng khách hàng sắp xếp website của bạn theo bản năng của họ, thì bạn cũng sẽ nghĩ về việc làm thế nào để tối ưu hóa tốt nhất các danh mục điều hướng của mình cho việc tìm kiếm hiệu quả hơn. Trong một bài viết trên Distilled, chiến lược gia SEO – Kristina Kledzik khuyên mọi người nên sử dụng Google Analytics và công cụ Từ khóa của Google để xác định các cụm từ tìm kiếm phổ biến nhất có thể đưa mọi người đến website của bạn và sử dụng các liên kết của những từ đó làm hướng dẫn cho việc điều hướng website của bạn.

Những ví dụ về thanh điều hướng website

Như đã đề cập ở trên, không có bất kỳ cách nào là “đúng” để tạo nên thanh điều hướng website miễn là nó cho phép khách truy cập có thể tìm thấy thông tin mà họ đang tìm kiếm và khuyến khích họ thực hiện một hành động – như mua hàng, quyên góp, tạo tài khoản và những hành động tương tự như thế. Hãy xem các ví dụ đã làm được điều đó ở phần dưới đây.

Dior

Dior có một thanh điều hướng dạng ngang tối giản được thiết kế để bán hàng hoặc đưa khách hàng truy cập vào hai danh mục chính mà họ kinh doanh. Với menu điều hướng dạng ngang, theo hướng từ trái qua là các mục sản phẩm chính được Dior phân loại: “Fashion & Accessories” và “Fragrance & Beauty”, sau đó Logo của nó nằm ở giữa, phía bên phải có biểu tượng khung tìm kiếm. Quả là một thiết kế đơn giản nhưng lại dễ hướng khách hàng đến các sản phẩm của mình một cách nhanh chóng.

Hình 14: Website của Dior có menu điều hướng dạng ngang tối giản

NWP

NWP là một website thương mại điện tử khác có thanh điều hướng dạng ngang. Không giống như Dior, thanh điều hướng của NWP là một menu kết hợp. Khi tải trang, bạn chỉ có thể thấy các liên kết điều hướng chính. Tuy nhiên, nếu bạn di chuột qua mục “Mua sắm”, một menu thả xuống sẽ xuất hiện liệt kê các danh mục phụ khác nhau của các loại quần áo mà bạn có thể mua trên website.

Hình 15: Menu điều hướng trên website của NWP là menu kết hợp giữa menu điều hướng ngang và menu điều hướng Dropdown

Gala Center

Gala Center cũng sử dụng hai kiểu menu điều hướng. Ở đầu trang, bạn sẽ thấy các hình ảnh kèm theo các thông tin về danh mục. Hãy chú ý trên góc trái có chứa một nút tròn giống menu điều hướng dạng hamburger có tên là: “Menu”. Nếu bạn nhấp chuột vào nút này, một giao diện điều hướng phụ sẽ xuất hiện ở bên trái. Điều này hoạt động giống như một Lightbox Popup, ngăn chặn một số nội dung và làm mờ phần còn lại của phông nền, và chứa nhiều liên kết điều hướng hơn mà bạn có thể sử dụng để lướt xem website.

Hình 16: Website của Gala Center sử dụng kết hợp menu điều hướng dạng hamburger và menu điều hướng Vertical Sidebar

Ngân hàng MB Bank

Để phù hợp với các danh mục sản phẩm rộng lớn của mình, MB Bank đã triển khai một menu lớn trên trang web của mình. Khi người dùng di chuột qua mục “Sản phẩm” trong thanh điều hướng ngang, một danh sách liên kết khổng lồ sẽ xuất hiện cho phép bạn tìm thấy bất kỳ thứ gì mà bạn có thể muốn lướt xem. Lưu ý rằng các mục khác trong thanh điều hướng.

Hình 17: MBBank sử dụng một menu điều hướng lớn trên website của mình

Kiehl’s

Tương tự như Kiehl’s, điều hướng trang web trên kiehls.com cũng tập trung vào menu điều hướng ngang, tại đó hiển thị các tùy chọn điều hướng khác nhau tùy thuộc vào mục mà người dùng di chuột đến. Mục chính “Dưỡng da” (hình bên dưới) hiển thị một menu lớn với các liên kết trên toàn trang web, cùng với hình ảnh đại diện cho các bộ sưu tập về dưỡng da của nó.

Hình 18: Menu điều hướng ngang được sử dụng trên website của Kiehl's

Twitter

Twitter mô tả một trong những kiểu điều hướng tiêu chuẩn đó là menu điều hướng vertical sidebar – nhưng có một điều bất ngờ là thay vì chỉ có các mục điều hướng văn bản, nó còn bao gồm các biểu tượng ở bên cạnh mỗi mục. Hãy chú ý đến việc sử dụng màu sắc chiến lược. Trang chủ có màu xanh lam, vì đó là trang chúng ta đang truy cập. Màu sắc khác duy nhất trong thanh điều hướng đó là nút CTA.

Hình 19: Website của Twitter sử dụng menu điều hướng Vertical Sidebar

Olivier Gillaizeau

Website tổng hợp các dự án của Giám đốc sáng tạo Olivier Gillaizeau có một menu vertical sidebar khá bắt mắt, nó hiển thị các dự án của anh ấy theo các mốc thời gian. Khi bạn di chuột qua một trong các mục điều hướng, một bản xem trước video của dự án sẽ hiển thị. Nhấp vào mục điều hướng sẽ đưa bạn đến trang có nhiều thông tin và các hình ảnh của dự án hơn.

Hình 20: Website tổng hợp các dự án của Olivier Gillaizeau cũng có menu điều hướng vertical sidebar

Pipcorn

Cho đến giờ, chúng ta chủ yếu chỉ thảo luận về chức năng của menu điều hướng, nhưng bên cạnh đó thì việc điều chỉnh kiểu dáng cũng có thể tạo ra trải nghiệm người dùng thú vị. Lấy ví dụ từ trang web của Pipcorn – điều hướng ngang của nó cho thấy các mục thả xuống theo chiều dọc mở rộng trên nền một hình ảnh động tuyệt đẹp. Đó là một chi tiết hỗ trợ hoàn toàn cho việc xây dựng thương hiệu thủ công của trang web và khiến khách truy cập cảm thấy đắm chìm vào nó và gắn bó với nó nhiều hơn.

Hình 21: Menu điều hướng ngang của Pipcorn có các mục thả xuống theo chiều dọc

Các phương pháp điều hướng website tốt nhất

Không có kiểu thiết kế điều hướng website nào là đúng hay sai nhưng sẽ có những “quy tắc vàng” của điều hướng website. Chuyên gia tư vấn về khả năng sử dụng Steve Krug đã viết một cuốn sách dựa trên quan điểm này. Để cho phép người dùng có thể điều hướng website của bạn một cách dễ dàng mà không cảm thấy bị thất vọng, hãy tham khảo các phương pháp tốt nhất dưới đây.

1. Hãy nhất quán

Hãy nhất quán trong cách định dạng và thiết kế giao diện điều hướng của bạn. Việc nhất quán ý tưởng không phải vì mục đích của sự nhất quán mà nó hướng đến các hiểu biết hiện tại và sự kỳ vọng của khách truy cập.

Giả sử trên trang chủ của bạn, các liên kết sẽ có màu đen và gạch dưới xuất hiện khi người dùng di chuột qua chúng và đó nên là phong cách chung cho tất cả các liên kết điều hướng ở mọi trang trong website của bạn. Nếu không, khách truy cập sẽ không biết văn bản nào có đường dẫn hyperlink và văn bản nào không có trong menu điều hướng của bạn.

Hãy để ý rằng menu điều hướng chính và menu điều hướng phụ của Madewell đều có kiểu liên kết nhất quán. Các đề mục nhỏ hơn và không được in đậm trong menu điều hướng phụ chính là dấu hiệu trực quan cho thấy những liên kết này có tầm quan trọng thứ yếu.

Hình 22: Menu điều hướng trên website của Madewell

2. Thiết kế phù hợp cho mọi kích thước màn hình

Trong năm nay, với hơn một nửa số lượt truy cập công cụ tìm kiếm không phải trả phí là từ các mobile thì việc tối ưu hóa website cho mobile và các kích thước màn hình khác chưa bao giờ quan trọng hơn thế. Điều đó bao gồm cả các menu điều hướng của bạn.

Khi thiết kế điều hướng website, trước tiên hãy bắt đầu bằng việc nghĩ về mobile (thiết bị di động). Bằng cách bắt đầu với kích thước màn hình nhỏ nhất, bạn sẽ phải ưu tiên những liên kết nào là quan trọng nhất để đưa vào điều hướng chính của mình và sắp xếp chúng theo thứ tự nào. Bạn cũng sẽ phải quyết định những tính năng điều hướng nào là cần thiết trên mobile chẳng hạn như nút hamburger và làm thế nào để chúng có thể phù hợp với thiết kế laptop của bạn. Điều này sẽ giúp bạn có một ý tưởng rõ ràng về những trang web và tính năng điều hướng nào là quan trọng nhất khi chuyển sang thiết kế cho màn hình có kích thước lớn hơn.

3. Tăng khả năng truy cập cho thông tin quan trọng nhất

Bạn đã bao giờ nghe về quy tắc ba lần nhấp chuột chưa? Nó là một ý tưởng về việc mọi cấu trúc điều hướng website nên cho phép ai đó truy cập vào bất kỳ trang nào trên website và tìm thấy những gì họ cần chỉ trong vòng ba cú nhấp chuột.

Mặc dù ý tưởng này đã tồn tại rất lâu trong giới thiết kế web, nhưng nó bị nghi ngờ khá nhiều. Tuy nhiên, trên thực tế, một nghiên cứu cho thấy rằng người dùng không có khả năng thoát khỏi một task sau 3 lần nhấp chuột mà là sau 12 lần nhấp chuột. Biểu đồ dưới đây cho thấy rằng một số người dùng vẫn tiếp tục cố gắng tìm kiếm nội dung theo mong muốn của họ sau 25 lần nhấp chuột.

Hình 23: Biểu đồ thể hiện tỷ lệ người dùng hoàn thành task qua các lần nhấp chuột

Nền tảng của quy tắc này là khá tốt. Điều này, giúp bạn có thể giới hạn những nỗ lực cần thiết để khách truy cập có thể truy cập thông tin quan trọng hoặc hoàn thành một task trên website của bạn. Việc đếm số lần nhấp chuột chỉ là một số liệu bề ngoài. Thay vào đó, bạn nên tập trung vào việc tạo đường dẫn rõ ràng, giảm thời gian tải trang và loại bỏ các điểm khó khăn khác trong hành trình người dùng.

4. Bổ sung Breadcrumb

Để tìm hiểu về thanh điều hướng dạng breadcrumb, chúng ta sẽ tìm hiểu về câu chuyện cổ tích kể về Hansel và Gretel. Khi di chuyển trong rừng, hai đứa trẻ này đã dựa trên những vụn bánh mì mà chúng đánh rơi trên đất để có thể tìm thấy đường về nhà. Theo đó, thanh điều hướng dạng Breadcrumb cũng được thiết kế với mục đích tương tự: cho phép người dùng hình dung được họ đang ở đâu trong cấu trúc website và có thể truy xuất lại các bước đi của họ đến các trang cấp cao hơn.

Breadcrumb cũng không chiếm nhiều không gian hiển thị. Thanh điều hướng phụ này thường được tạo thành từ các liên kết văn bản được phân cách bằng ký hiệu “lớn hơn” (>) và được đặt bên dưới tiêu đề.

Trong ví dụ từ Best Buy dưới đây, bạn có thể đang lướt xem các máy tính xách tay PC và bạn chợt nhận ra rằng mình muốn có một chiếc máy tính bảng. Thay vì bắt đầu lại với một truy vấn mới trong hộp tìm kiếm, bạn chỉ cần nhấp vào liên kết “Máy tính & Máy tính bảng” trong menu breadcrumb.

Hình 24: Menu điều hướng Breadcrumb trên website của Best Buy

Thiết kế thanh điều hướng website phù hợp với bạn

Việc thiết kế thanh điều hướng website yêu cầu xem xét cẩn thận khách truy cập và mục tiêu website của bạn. Hãy đảm bảo rằng khách hàng và các search engine bots có thể tìm thấy nội dung hoặc chức năng mà họ đang tìm kiếm và hiểu được mối quan hệ giữa các trang. Như vậy, họ sẽ tiếp tục lướt xem và thực hiện các hành động như mong muốn trên trang web của bạn – như tạo tài khoản hoặc hoàn tất mua hàng – thay vì thất vọng và thoát ra ngoài.

Lời kết

Ở trên đây là một số thông tin liên quan đến thanh điều hướng website (Navigation Bar) và một số ví dụ cụ thể về các dạng điều hướng website phổ biến hiện nay. Hy vọng với những thông tin mà MangoAds mang lại sẽ phần nào giúp bạn có một cái nhìn tổng quan hơn về thanh điều hướng website và có thể định hướng phát triển trang web của mình thật hiệu quả.