Web Navigation là gì? Phân loại các Web Navigation phổ biến hiện nay

Web Navigation là gì? Phân loại các Web Navigation phổ biến hiện nay

Mục lục

Bạn đang làm việc liên quan đến thiết kế, xây dựng web và quan tâm đến vấn đề trải nghiệm người dùng trên website? Bạn nghe đến thuật ngữ Navigation nhưng không hiểu Navigation là gì. Vậy trong bài viết này hãy cùng Unica đi tìm hiểu chi tiết khái niệm của Navigation, các loại Navigation phổ biến và cách để tạo ra một website Navigation chuẩn mẫu nhé!

Web Navigation là gì?

navigation là gì 1

Khái niệm website Navigation

Navigation, hay đầy đủ hơn là web Navigation là một thuật  ngữ xuất hiện nhiều trong lĩnh vực thiết kế website, có nghĩa là điều hướng người dùng hay chuyển hướng người dùng theo ý định của người thiết kế web. Hoặc để hiểu đơn giản hơn Navigation là gì thì bạn có thể coi đó là thanh điều hướng trong website của bạn, tức thanh menu.

Ví dụ như bạn muốn điều hướng người dùng đến chuyên trang "Góc chia sẻ" từ trang Unica.vn chính, người dùng sẽ cần phải rê chuột đến chuyên mục "Góc chia sẻ" và click vào chuyên mục đó. Như vậy là bạn đã điều hướng được người dùng đến với chuyên trang blog - Góc chia sẻ của Unica rồi.

Đối với thiết kế website nói riêng và các lĩnh vực tập trung vào hành vi của người dùng nói chung, việc xác định và xây dựng Navigation là một điều rất cần thiết, không chỉ giúp người dùng biết mình cần thực hiện như thế nào để đến được "địa điểm" trên trang web mà còn giúp các nhà thiết kế cũng như nhà phát triển website tối ưu được website của mình sao cho thân thiện với người dùng nhất, cũng như đơn giản hóa nhất các thao tác hướng đến người dùng. 

Do đó để thiết kế được một website Navigation, nhà thiết kế và nhà phát triển website cần phải nắm rất rõ những công cụ giúp thiết kế website hoàn chỉnh, mà còn phải có hiểu biết về các kiến thức tổ chức thông tin, tư duy thiết kế, bố cục cũng như phải hiểu được hành vi người dùng để có thể tạo nên một website hoàn chỉnh nhất. 

Phân loại các web navigation phổ biến hiện nay

Navigation là gì 2

Các loại web Navigation phổ biến hiện nay

Khi bạn đã hiểu website Navigation là gì thì việc thiết kế một website Navigation là công việc tiếp theo cần phải thực hiện, tuy nhiên còn có một vấn đề nữa mà rất nhiều nhà thiết kế bỏ qua, đó là mỗi một loại website khác nhau thì sẽ có lĩnh vực, mục đích và định hướng khác nhau, dẫn đến các website Navigation  cũng có sự khác nhau rõ rệt. Đó còn chưa kể bạn còn phải quan tâm đến giá trị thương hiệu mà website mang theo, văn hóa khu vực, quốc gia, sở thích của người thiết kế (hoặc chủ web),... 

Hiện nay tại Việt Nam các website Navigation phổ biến gồm có:

Breadcrumb Navigation

Breadcrumb Navigation là một công cụ tập hợp các liên kết của một trang web giúp xác định vị trí hiện tại của người dùng (User) dùng để điều hướng trang web cho người dùng. Với hình thức website Breadcrumb Navigation này, nó sẽ phát huy được tác dụng của minh trong các website có cấu trúc phức tạp, phân tầng nhiều. Có 3 dạng Breadcrumb Navigation chính là:

Breadcrumb theo vị trí (location-based breadcrumb): ví dụ như thế này. Điều này có nghĩa bạn đang ở tầng thứ 4. 

Navigation là gì 3

Breadcrumb theo vị trí (location-based breadcrumb)

Breadcrumb theo thuộc tính (Attribute-based breadcrumb): với loại này bạn sẽ biết mình ở vị trí nào dựa trên các thuộc tính, các "yêu cầu chọn lọc" của bạn mong muốn đối với website. Và thường chúng xuất hiện nhiều trong các website bán hàng, website thương mại điện tử.

Navigation là gì 4

Breadcrumb theo thuộc tính (Attribute-based breadcrumb)

Breadcrumb theo đường dẫn (path-based): giống như hướng dẫn cho người dùng cụ thể để người dùng đến địa chỉ mà mình muốn.

Navigation là gì 5

Breadcrumb theo đường dẫn (path-based)

Navigation bar (Thanh điều hướng)

Với Navigation bar, chúng thường xuất hiện ở đầu hoặc sau header website, hiển thị ở những vị trí ngay lập tức gây ấn tượng với người dùng. Chúng được coi là một  trong những định dạng website phổ biến nhất hiện nay.

Ba kiểu thiết kế Navigation bar đó là:

 - Vertical Navigation – Thanh điều hướng dọc

Navigation là gì 6

Thanh điều hướng dọc

- Horizontal Navigation – Thanh điều hướng ngang

- Bottom Navigation – Thanh điều hướng chân (xuất hiện nhiều nhất trong các nền tảng di động)

Navigation là gì 7

Bottom Navigation – Thanh điều hướng chân

Dropdown menu

Dropdown menu hay còn là menu trỏ xuống. Ví dụ bạn đưa chuột đến vị trí của một chuyên mục nào đó, chúng sẽ tự động trỏ xuống cho bạn những tùy chọn tiếp theo.

Navigation là gì 8

Dropdown menu trong Web Navigation

Mega Menu

Mega Menu trong Web Navigation là gì? Nó có phần tương đương như Dropdown menu, tuy nhiên chúng sẽ đưa đến cho người dùng nhiều lựa chọn hơn, nhiều danh mục và nhiều sản phẩm hơn. Cái  này rất hay thấy ở các website bán hàng lớn, website thương mại điện tử ...

Navigation là gì 9

Mega Menu

Thanh điều hướng dạng lưới

Dạng điều hướng này hay xuất hiện trong các website bán hàng, website chuyên trang (gần giống landingpage)

Navigation là gì 10 

Thanh điều hướng dạng lưới

Thanh điều hướng dạng cuộn ngang

Navigation là gì 11

Thanh điều hướng dạng cuộn ngang

Thay vì cuộn xuống, thì thanh điều hướng cuộn ngang sẽ giống như bạn đang kéo một quyển sách, mở rộng hơn sản phẩm cũng như tăng thêm sức hấp dẫn cho website.

Hamburger navigation menu

Bạn biết bánh Hamburger chứ? Chúng xếp tầng lên nhau và trình bày bởi 3 đường ngang nhu từng tầng bánh. Đây cũng là một kiểu thiết kế thanh điều hướng rất được ưa chuộng và phổ biến trên thế giới. 

navigation là gì 12

Hamburger navigation menu

Như vậy chúng tôi đã giới thiệu cho bạn thông tin chi tiết về khái niệm Navigation là gì cũng như 7 loại Navigation phổ biến hiện nay. Hi vọng với những thông tin này bạn đã có cho mình những gợi ý thanh menu tốt nhất để có thể thiết kế một website hoàn chỉnh và ấn tượng.

Xin cảm ơn và chúc bạn thành công!

Đánh giá :

Tags: Thiết kế Web Lập Trình Web