Hướng dẫn chi tiết về thanh điều hướng Website

Hướng dẫn chi tiết về thanh điều hướng Website

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. Lý do rất dễ hiểu là 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.

Tải xuống Bộ thử nghiệm & Nghiên cứu UX miễn phí

Để đả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, 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ế. Hãy cùng tìm hiểu với chúng tôi 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 khách 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. Đó là bởi vì việc điều hướng đượ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 IA của website. Còn phía trên của mặt nước là giao diện điều hướng, 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.

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

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, 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 là nội dung được kết nối, phân loại để đáp ứng nhu cầu và mong muốn 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? Trong menu điều hướng chính, bạn có thể chỉ nhìn thấy tên của ba mục từ cấp đầu tiên. Các trang phụ sẽ phải được lồng vào trong một menu điều hướng phụ. Hãy mô tả các thuật ngữ đó qua sơ đồ dưới đây.

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

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 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 phi lợi nhuận của Vườn thú Nashville , menu điều hướng chính chứa mục điều hướng “Hỗ trợ”. Khi bạn di chuột đến mục đó, menu điều hướng phụ sẽ xuất hiện và đưa ra nhiều cách để bạn có thể hỗ trợ sở thú. Có các liên kết đến các trang quyên góp, trang nghề nghiệp và tình nguyện, trong số những trang khác.

Giao diện điều hướng trên website phi lợi nhuận của Vườn thú Nashville

Hình 3: Giao diện điều hướng trên website phi lợi nhuận của Vườn thú Nashville

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 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 bạn thiết lập cấu trúc điều hướng website của mình sẽ phụ thuộc vào đối tượng mục tiêu của bạn và định dạng nào mà bạn nghĩ là sẽ trực quan và dễ tiếp cận nhất đối với họ. Hãy xem xét một số kiểu điều hướng website phổ biến nhất mà bạn có thể lựa chọn.

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. Nhưng những mục này không nhất thiết phải là điều hữu ích nhất đối với khách truy cập trên tất cả các website.

Lấy thanh điều hướng trên Blavity làm ví dụ. Các phần nổi bật của nó bao gồm ba loại nội dung – “Tin tức”, “Op-Eds” và “Phong cách sống” – cũng như các liên kết đến trang khai báo và trang đăng ký của họ. Các trang này giúp khách truy cập có nhiều cơ hội dễ dàng truy cập vào các trang mà họ đang tìm kiếm hơn là các trang tiêu chuẩn như Giới thiệu, Giá cả và Liên hệ.

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

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

Menu điều hướng Dropdown

Menu điều hướng Dropdown là mô hình lý tưởng cho các website giàu nội dung với một IA phức hợp. Nếu bạn muốn 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ó vừa trông lộn xộn vừa không thể điều chỉnh tất cả chúng 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 bởi vì nó cung cấp rất nhiều sản phẩm và dịch vụ. Trên website của Sephora, bạn có thể di chuột đến bất kỳ liên kết điều hướng chính nào và một menu chi tiết dạng thả xuống sẽ xuất hiện. Menu Dropdown sẽ chứa tất cả các phân loại danh mục cụ thể của website.

Menu điều hướng Dropdown trên website của Sephora

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 di động. Với dạng này, các mục điều hướng thường được liệt kê theo chiều ngang trên các kích thước 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 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 mobile của Nettle Studio.

Menu điều hướng dạng hamburger trên website của Nettle Studio

Hình 6: Menu điều hướng dạng hamburger trên website của Nettle Studio

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ù í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. Vì bề mặt hiển thị không bị giới hạn, nên bạn có thể viết các liên kết điều hướng dài hơn và đư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 Nhà hàng Arbor bên dưới.

Menu điều hướng Vertical Sidebar của Nhà hàng Arbor

Hình 7: Menu điều hướng Vertical Sidebar của Nhà hàng Arbor

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.

Menu điều hướng Footer của tờ New York Times

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 nào “đúng” để thiết kế điều hướng website của bạn, cũng như không có cách nào đúng để thiết kế phần Footer của một website. 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 lần đầu và lặp lại điều đó nhằm giúp tận dụng tối đa website của bạn.

Bằng cách tập trung quy trình thiết kế 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 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.

Lưu ý đến khách hàng mục tiêu của bạn, hãy cùng xem qua các giai đoạn của quy trình thiết kế thanh điều hướng website dưới đây.

Thanh điều hướng website của bạn 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ì vậy, làm thế nào để bạn bắt đầu thu hẹp phạm vi này? Các bên liên quan ở khắp nơi trong công ty của bạn có thể có nhiều ý kiến ​​khác nhau về điều gì là xứng đáng và điều gì là không, nhưng cuối cùng thì bạn nên lưu ý đến khách truy cập website của mình để có thể xác định được hướng đi tốt nhất.

 

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.

Card Sorting 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

Hình 9: Card Sorting 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 phân bổ của HubSpot.

 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

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

Lấy website riêng của HubSpot làm ví dụ. Mặc dù một số nội dung của chúng ta cung cấp nhiều lượng truy cập, nhưng các trang phổ biến nhất mà những người đã mua phần mềm HubSpot xem là trang sản phẩm, giá cả, nghiên cứu thực tế và đối tác. Nếu bạn xem trang chủ của chúng ta, bạn sẽ thấy rằng điều hướng phản hồi kết quả này và ưu tiên các trang quan trọng đó.

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ù 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à mọi người cho là điều hướng 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, qua các trang khác nhau và nơi theo đường dẫn mà họ đã thoát ra khỏi website của bạn.”

Bạn nên sắp xếp thứ tự các mục điều hướng của mình như thế nào?

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 điều hướng một cách 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, bạn nên lên kế hoạch về những mục mà bạn đặt ở những vị trí này. 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 gia 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. 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.”

Bạn nên diễn đạt các tùy chọn điều hướng của mình 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 nhãn 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 đặt nội dung dưới các danh mục cụ thể (thường là chỉ 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 Emerson 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.

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

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

Lưu ý rằng các liên kết điều hướng ở bên phải 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.

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

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 với các 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.

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

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 phù hợp với cách thức đối tượng khách hàng sắp xếp website của bạn theo bản năng, thì bạn cũng sẽ muốn 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. 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 biến thể của những từ đó làm hướng dẫn cho việc điều hướng website của bạn.

Các 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.

Propa Beauty

Propa Beauty 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 chuyển đổi khách truy cập thành thành viên. Logo của nó nằm phía bên trái, ở giữa là một liên kết đến trang lưu trữ sản phẩm. Phía bên phải có ba biểu tượng, mỗi biểu tượng tương ứng đại diện cho một khung tìm kiếm, một liên kết đến trang đăng nhập thành viên và một liên kết đến giỏ hàng.

Website của Propa Beauty có menu điều hướng dạng ngang tối giản

Hình 14: Website của Propa Beauty 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ư Propa Beauty, 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.

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

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

The Shade room

The Shade Room cũng sử dụng hai kiểu menu điều hướng. Ở đầu trang, bạn sẽ thấy một tiêu đề nằm ngang tiêu chuẩn. Hãy chú ý là trên tiêu đề này có chứa một nút hamburger phía bên phải. 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 phả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.

Website của The Shade Room sử dụng kết hợp menu điều hướng dạng hamburger và menu điều hướng ngang

Hình 16: Website của The Shade Room sử dụng kết hợp menu điều hướng dạng hamburger và menu điều hướng ngang

Patagonia

Để phù hợp với các danh mục sản phẩm rộng lớn của mình, Patagonia đã 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 “Shop” 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, cụ thể là mục “Activism” và “Stories” thì sẽ không kích hoạt menu lớn khi bạn di chuột qua.

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

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

Briogeo

Tương tự như Patagonia, điều hướng trang web trên Briogeo.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à bạn di chuột đến. Mục chính “shop all” (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 của nó. Ngược lại, tùy chọn “our difference” sử dụng nhiều hình ảnh hơn để tạo ra một kết nối cảm xúc mạnh mẽ hơn với khách truy cập.

Menu điều hướng ngang được sử dụng trên website của Briogeo

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

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.

Website của Twitter sử dụng menu điều hướng vertical sidebar

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.

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

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.

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

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

Quy tắc vàng của điều hướng website? Không để mọi người phải suy nghĩ. 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 đến website của bạn một cách dễ dàng mà không cảm thấy bị mất mác hoặc thất vọng, hãy theo dõi 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 hyperlinked 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.

Menu điều hướng trên website của Madewell

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

2. Thiết kế 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. 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 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ạo 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 sâu sắc trong giới thiết kế web, nhưng nó bị nghi ngờ khá nhiều. 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.

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

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

Tuy nhiên, nền tảng của quy tắc này là khá tốt. 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 Breadcrum.

Để 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.

Breadcrum 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.

Menu điều hướng Breadcrumb trên website của Best Buy

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 của 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. Bằng cách đó, 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.

Như vậy, trên đây là một số thông tin liên quan đến thanh điều hướng website 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à phát triển trang web của mình thật hiệu quả.

Về tác giả

Hạnh Trần