Các bài viết liên quan:
Điều hướng tốt là một trong những tính năng quan trọng nhất của một trang web. Và chúng tôi không chỉ nói điều đó – có nghiên cứu để hỗ trợ nó.
Dễ hiểu tại sao điều hướng lại quan trọng đối với khách truy cập. Nó cho phép họ nhanh chóng và dễ dàng tìm thấy thông tin 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 biết là họ cần, như gói định giá, trang đăng ký email hoặc thông tin liên hệ.
Điều này làm cho điều hướng trở thành một phần thiết yếu của trải nghiệm người dùng và chiến lược trang web 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à duyệt web không chỉ có thể cải thiện cơ hội khách truy cập duyệt trang web của bạn lâu hơn – nó còn có thể cải thiện cơ hội họ thực hiện hành động trên trang web của bạn.
Để giúp bạn thiết kế hệ thống điều hướng đáp ứng nhu cầu của khách truy cập, chúng ta hãy xem xét kỹ hơn điều hướng trang web là gì và các cách khác nhau mà bạn có thể triển khai trên trang web của mình. Sau đó, chúng tôi sẽ xem các ví dụ từ các trang web thực và khám phá một số phương pháp hay nhất để thiết kế giao diện có thể điều hướng. Bắt đầu nào.
Các bài viết liên quan:
Chuyển hướng là gì?
Điều hướng trang web là một tập hợp các thành phầ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 trang web. Các thành phần này có dạng bản sao, văn bản liên kết và các nút, menu.
Mục cuối cùng đặc biệt có liên quan trong điều hướng, vì vậy hãy nhanh chóng xác định ý nghĩa thực sự của menu trong thiết kế web:
Là quá trình chuyển tiếp một URL đến một URL khác.
Chuyển hướng là một cách để đưa cả người dùng và công cụ tìm kiếm đến một URL khác với URL mà họ yêu cầu ban đầu. Ba chuyển hướng được sử dụng phổ biến nhất là 301, 302 và Meta Refresh.
Các loại chuyển hướng
- 301, “Moved Permanently” —được khuyến khích cho SEO
- 302, “Đã tìm thấy” hoặc “Đã chuyển tạm thời”
- Làm mới Meta
301 Đã di chuyển vĩnh viễn
Chuyển hướng 301 là chuyển vĩnh viễn chuyển toàn bộ liên kết (sức mạnh xếp hạng) đến trang được chuyển . 301 đề cập đến mã trạng thái HTTP cho loại chuyển này. Trong hầu hết các trường hợp, chuyển hướng 301 là phương pháp tốt nhất để triển khai chuyển hướng trên trang web.
302 Tìm thấy
Sử dụng chuyển hướng 302 khi URL của tài nguyên bị thay đổi tạm thời . Một số nhân viên của Google đã chỉ ra rằng có những trường hợp 301 và 302 có thể được xử lý tương tự, nhưng bằng chứng của chúng tôi cho thấy rằng cách an toàn nhất để đảm bảo các công cụ tìm kiếm và trình duyệt thuộc mọi loại tín dụng đầy đủ là sử dụng 301 khi chuyển vĩnh viễn các URL. Điều này là do trong khi về lý thuyết, cả 302 và 301 đều có thể vượt qua cùng một lượng giá trị liên kết, nhưng có những trường hợp 301 có thể chuyển tín hiệu chuẩn hóa mạnh hơn cho Google. Đối với các trường hợp chuyển hướng thực sự là tạm thời, 302 có thể là thích hợp nhất.
Đọc thêm Cách khắc phục lỗi trong Google Search Console
Chương 307 tạm thời chuyển đi
Chuyển hướng 307 là sự kế thừa HTTP 1.1 của chuyển hướng 302. Mặc dù các trình thu thập thông tin chính sẽ coi nó giống như 302 trong một số trường hợp, nhưng tốt nhất là sử dụng 301 cho hầu hết các trường hợp. Ngoại lệ cho điều này là khi nội dung thực sự chỉ được di chuyển tạm thời (chẳng hạn như trong quá trình bảo trì) VÀ máy chủ đã được các công cụ tìm kiếm xác định là tương thích 1.1. Vì về cơ bản không thể xác định được liệu các công cụ tìm kiếm có xác định một trang là tương thích hay không, nên thường tốt nhất là sử dụng chuyển hướng 302 cho nội dung đã được chuyển tạm thời.
Menu điều hướng là gì?
Trên một trang web, menu điều hướng là một danh sách có tổ chức các liên kết đến các trang web khác, thường là các trang nội bộ. Menu điều hướng xuất hiện phổ biến nhất trong tiêu đề trang hoặc thanh bên trên một trang web, cho phép khách truy cập nhanh chóng vào các trang hữu ích nhất.
Bây giờ, sẽ dễ dàng để nó ở đó và gọi nó là một ngày. Tuy nhiên, điều hướng không chỉ giúp chúng ta chuyển từ trang này sang trang khác – nó còn giúp chúng ta hiểu mối quan hệ giữa các trang riêng lẻ trên một trang web.
Đó là bởi vì điều hướng được coi là phần nổi của tảng băng trôi là kiến trúc thông tin của trang web (IA), theo nhà phân tích Nathaniel Davis của IA trong một bài báo cho UXmatters. Bên dưới mặt nước là các phần của tảng băng trôi mà khách truy cập giao diện người dùng không thể nhìn thấy: nghiên cứu, chiến lược, quản lý và tổ chức đã xây dựng IA của trang web. Phía trên bề mặt là giao diện điều hướng, thường được biểu diễn dưới dạng một chuỗi liên kết siêu văn bản và thanh tìm kiếm.
Nói cách khác, IA của trang web không hiển thị trong giao diện điều hướng, nhưng nó là nền tảng của giao diện đó. Điều này mang lại cho khách truy cập cảm giác rằng nội dung được kết nối và phân loại để đáp ứng nhu cầu và mong đợi của họ – mà không thực sự hiển thị tất cả các bảng tính và sơ đồ dùng để xác định và tổ chức các mối quan hệ đó giữa nội dung của bạn.
Dưới đây là một ví dụ về hệ thống phân cấp của một trang web. Thoạt nhìn hơi đáng sợ, phải không? Trong menu điều hướng chính, bạn có thể chỉ thấy ba tên phần từ cấp đầu tiên đó. Các trang con sẽ phải được lồng trong một menu điều hướng phụ. Hãy xác định thuật ngữ đó bên dưới.
Điều hướng phụ trên một trang web là gì?
Điều hướng phụ – còn được gọi là điều hướng cục bộ – là giao diện nơi khách truy cập có thể tìm thấy các danh mục cấp thấp hơn của IA của trang web. Đây thường là các danh mục phụ của các liên kết điều hướng chính.
Ví dụ: trên trang web 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 qua mục đó, menu điều hướng phụ sẽ xuất hiện cung cấp nhiều cách để hỗ trợ sở thú. Có các liên kết đến các trang quyên góp, sự nghiệp và tình nguyện, trong số những trang khác.
Các loại điều hướng trang web
Điều hướng là một trong những – nếu không phải – yếu tố thiết kế quan trọng nhất trên một trang web. Cuối cùng, nó ảnh hưởng đến việc khách truy cập có truy cập vào trang chủ của bạn và duyệt hay nhấp vào nút “Quay lại” hay không.
Cách bạn cấu trúc điều hướng trang web của mình phụ thuộc vào đối tượng mục tiêu của bạn và định dạng nào bạn nghĩ 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 trang web phổ biến nhất mà bạn có thể chọn.
Thanh điều hướng ngang
Thanh điều hướng ngang là loại menu điều hướng phổ biến nhất. Nó liệt kê các trang chính cạnh nhau và được đặt trong tiêu đề trang web. Nhiều trang web có các phần giống nhau, chẳng hạn như “Giới thiệu”, “Sản phẩm”, “Giá cả” và “Liên hệ” vì khách truy cập mong đợi xem chúng. Nhưng những phần này sẽ không nhất thiết phải hữu ích nhất đối với khách truy cập trên tất cả các trang web.
Lấy thanh điều hướng trên Blavity làm ví dụ. Các phần nổi bật bao gồm ba danh mục 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 gửi và trang đăng ký. Các trang này có nhiều khả năng giúp khách truy cập dễ dàng truy cập vào các trang họ đang tìm kiếm hơn là các trang Giới thiệu, Giá cả và Liên hệ thông thường.
Menu điều hướng thả xuống
Menu điều hướng thả xuống lý tưởng cho các trang web giàu nội dung với IA phức tạp. Nếu bạn muốn bao gồm nhiều liên kết đến các trang trong thanh điều hướng của mình, bạn không thể liệt kê tất cả chúng cạnh nhau – trông sẽ lộn xộn hoặc không thể khớp tất cả theo chiều ngang. Thay vào đó, hãy liệt kê các mục chung hoặc quan trọng nhất trong thanh điều hướng cấp cao nhất và đưa phần còn lại vào menu thả xuống.
Sephora là một ví dụ tuyệt vời vì nó cung cấp rất nhiều sản phẩm và dịch vụ. Trên trang web của nó, bạn có thể di chuột qua bất kỳ liên kết điều hướng chính nào và menu thả xuống chi tiết sẽ xuất hiện. Menu thả xuống sẽ chứa tất cả các danh mục cho phần cụ thể đó của trang web.
Menu điều hướng bánh hamburger
Menu hamburger thường thấy nhất trong thiết kế web di động. Với cách tiếp cận này, các mục điều hướng thường được liệt kê theo chiều ngang trên kích thước màn hình lớn hơn và thu gọn sau nút hamburger trên 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 dòng này, một cửa sổ bật ra dọc hoặc ngang sẽ xuất hiện với các liên kết điều hướng. Kiểu thiết kế này lý tưởng cho các ứng dụng di động hoặc các trang web có giới hạn về bất động sản.
Xem thực đơn bánh hamburger trên trang web dành cho thiết bị di động của Nettle Studio.
Menu điều hướng thanh bên dọc
Với loại menu này, các mục được xếp chồng lên nhau và được định vị trong thanh bên. Mặc dù ít phổ biến hơn điều hướng ngang, nhưng điều hướng dọc mang lại một số lợi ích. Vì bất động sản không có giới hạn, bạn có thể viết các liên kết điều hướng dài hơn và bao gồm nhiều tùy chọn cấp cao nhất. Nó cũng bắt mắt hơn, khiến phong cách này hoạt động tốt cho các cơ quan và các doanh nghiệp sáng tạo khác.
Hãy xem thanh bên dọc của Nhà hàng Arbor bên dưới.
Menu điều hướng chân trang
Menu chân trang thường được ghép nối với – và mở rộng theo – thanh điều hướng ngang. Nếu khách truy cập không tìm thấy liên kết mà họ đang tìm kiếm trong tiêu đề, họ có thể cuộn xuống cuối trang để có thêm tùy chọn.
New York Times có 19 liên kết điều hướng trong menu điều hướng ngang ở đầu trang. Menu chân trang của nó có hơn 50 liên kết, 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 phần phổ biến nhất của trang web.
Thiết kế thanh điều hướng trang web
Không có cách nào “đúng” để thiết kế điều hướng trang web của bạn. Bạn chỉ cần xem xét cách bạn có thể kích hoạt khách truy cập lần đầu và khách truy cập lặp lại để tận dụng tối đa trang web của mình.
Bằng cách tập trung quy trình thiết kế của bạn vào số lượng khách truy cập duy nhất, cấu trúc điều hướng của bạn có thể trông và hoạt động khác với cấu trúc điều hướng trên một trang web khác và đó là một điều tốt.
Lưu ý đến đối tượ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 trang web bên dưới.
Những gì nên được bao gồm trong thanh điều hướng trang web của bạn?
Với tất cả các trang trên trang web của bạn, thật khó để xác định trang nào đủ quan trọng để trở thành một phần của điều hướng chung. Vì lợi ích của SEO và trải nghiệm người dùng, Orbit Media khuyên bạn nên giữ điều hướng của bạn giới hạn tối đa bảy mục.
Vì vậy, làm thế nào để bạn bắt đầu thu hẹp lĩnh vực này? Các bên liên quan từ khắp 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ì không, nhưng cuối cùng bạn nên xem xét khách truy cập trang web của mình để giúp bạn xác định hướng đi tốt nhất.
Phân loại thẻ
Sắp xếp thẻ 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 tâm trí của khách truy cập trang web của mình và thiết kế điều hướng theo quan điểm của họ. Tin tốt là bạn không cần phải có bất kỳ kinh nghiệm UX nào để thực hiện bài tập này.
Mời mọi người từ bên ngoài tổ chức của bạn tham gia một bài tập 20 phút đơn giản. Đặt một chồng thẻ chỉ mục trên bảng, mỗi thẻ đại diện cho một trang chính trên trang web 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 họ thấy phù hợp. Tìm kiếm xu hướng về cách người tham gia nhóm các trang trên trang web của bạn và hỏi họ cách họ đặt tên cho từng danh mục. Tổ chức kết quả có thể giúp xây dựng xương sống của việc điều hướng trang web của bạn.
Báo cáo phân bổ
Nếu phần mềm phân tích tiếp thị 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 nội dung nào sẽ được đưa vào điều hướng chính của bạn. Báo cáo này phân bổ số lượng địa chỉ liên hệ mới được tạo cho các tương tác của họ 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 trang web của mình để chuyển đổi khách truy cập thành 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 kythuatseo.
Lấy ví dụ như trang web riêng của kythuatseo. Mặc dù một số nội dung của chúng tôi cung cấp nhiều lưu lượng truy cập, các trang phổ biến nhất mà những người đã mua phần mềm kythuatseo xem là trang sản phẩm, giá cả, nghiên cứu điển hình và đối tác. Nếu bạn xem trang chủ của chúng tôi, bạn sẽ thấy rằng điều hướng phản ánh phát hiện này và ưu tiên các trang quan trọng đó.
Luồng người dùng
Nếu không có báo cáo phân bổ, bạn vẫn có thể biết những trang nào quan trọng trên trang web của mình thông qua báo cáo Luồng người dùng trong Google Analytics. Mặc dù báo cáo này không phân biệt lưu lượng truy cập tiêu chuẩn với khách hàng, nhưng nó làm nổi bật cách mọi người dường như điều hướng trải nghiệm của họ trên trang web của bạn. Nói theo cách riêng của Google: “Báo cáo Luồng người dùng là bản trình bày đồ họa về các đường dẫn mà người dùng đã đi qua trang web của bạn, từ nguồn, qua các trang khác nhau và nơi dọc theo đường dẫn của họ mà họ đã thoát khỏi trang web của bạn.”
Bạn nên đặt hàng các mặt hàng điều hướng của mình như thế nào?
Thứ tự quan trọng trong điều hướng trang web. Các nghiên cứu nhận thức cung cấp bằng chứng cho thấy người xem trang web có xu hướng ghi nhớ các liên kết ở hai đầu của điều hướng một cách sống động nhất. Thường được gọi là hiệu ứng ban đầu và hiệu ứng gần đây, chúng nói về những 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 có xu hướng thu hút nhiều sự chú ý của người xem hơn. Vì vậy, đối với trang web của bạn, bạn sẽ muốn có chủ ý về những mục bạn đặt ở những vị trí này. Suy nghĩ về điều gì là quan trọng nhất đối với khách truy cập thông thườ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: “Đặt các mục quan trọng nhất của bạn ở đầu điều hướng và các mục ít quan trọng nhất ở giữa. ‘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 trong điều hướng ngang cấp cao nhất, một vị trí tiêu chuẩn. “
Bạn nên cụm từ các tùy chọn điều hướng của mình như thế nào?
Cách bạn diễn đạt các tùy chọn điều hướng của mình tùy thuộc vào loại hình doanh nghiệp hoặc tổ chức của bạn. Bạn có thể chọn chuyển tiếp 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 là suy nghĩ trước 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
Có thể cho rằng tùy chọn rõ ràng nhất cho các trang web là điều hướng dựa trên đối tượng. Đ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ừ). kythuatseo.com là một ví dụ về điều hướng dựa trên đối tượng, cũng như trang web của Đại học Emerson bên dưới. Loại tổ chức này coi điều hướng như một mục lục và nhóm các trang thành các chủ đề hoặc danh mục phù hợp nhất.
Lưu ý rằng các liên kết điều hướng ở bên phải 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 bên dưới.
Dựa trên hành động
Một số trang web có thể được phục vụ tốt hơn bởi điều hướng theo hướng hành động. Để biết khi nào điều này là phù hợp, hãy hỏi khán giả của bạn xem họ chủ yếu đến trang web 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 rõ ràng đang đến với một hành động trong tâm trí. Họ không truy cập để đọc trang “giới thiệu” – họ đến để đăng ký, truy cập hoặc quyên góp.
Ví dụ về Điều hướng Trang web
Như đã đề cập ở trên, không có cách nào “đúng” để tạo thanh điều hướng trang web miễn là nó cho phép khách truy cập của bạn tìm thấy thông tin họ đang tìm kiếm và khuyến khích họ hành động – cho dù bằng cách mua hàng, quyên góp, tạo tài khoản , và như thế. Hãy xem các ví dụ dưới đây thực hiện chính xác điều đó.
Propa Beauty
Propa Beauty có một thanh điều hướng ngang tối giản được thiết kế để tạo doanh số 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 ở bên trái. Tại trung tâm là một liên kết đến trang lưu trữ sản phẩm của nó. Ở 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 hộp tìm kiếm, liên kết đến trang đăng nhập thành viên và liên kết đến giỏ hàng.
NWP
NWP là một trang web thương mại điện tử khác có thanh điều hướng ngang. Tuy nhiên, không giống như Propa Beauty, thanh điều hướng của NWP là một menu kết hợp. Khi trang tải, 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 “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 quần áo mà bạn có thể mua trên trang web.
Twitter có một trong những kiểu điều hướng tiêu chuẩn – menu thanh bên dọc – nhưng có một chút xoắn. Thay vì chỉ có các mục điều hướng văn bản, nó bao gồm các biểu tượng bên cạnh mỗi mục. 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 tôi đang truy cập. Màu sắc duy nhất khác trong thanh điều hướng là nút CTA.
Thực hành tốt nhất về SEO
Khi làm điều này, điều quan trọng là phải tuân thủ các phương pháp hay nhất để duy trì giá trị SEO.
Công cụ tìm kiếm giải thích điều này có nghĩa là không chỉ trang đã thay đổi vị trí mà còn có thể tìm thấy nội dung — hoặc phiên bản cập nhật của trang — tại URL mới. Các công cụ sẽ mang bất kỳ trọng số liên kết nào từ trang gốc đến URL mới, như bên dưới:
Hãy lưu ý rằng khi di chuyển một trang từ URL này sang URL khác, các công cụ tìm kiếm sẽ mất một khoảng thời gian để phát hiện ra 301, nhận ra nó và ghi nhận trang mới với thứ hạng và độ tin cậy của trang trước đó. Quá trình này có thể kéo dài hơn nếu trình thu thập thông tin công cụ tìm kiếm hiếm khi truy cập vào trang web nhất định hoặc nếu URL mới không phân giải đúng cách.
Đọc thêm Từ khóa LSI: Hướng dẫn cơ bản để xếp hạng cho nhiều từ khóa
Các tùy chọn khác để chuyển hướng, như làm mới meta, có thể thay thế kém, vì chúng có thể không vượt qua thứ hạng và giá trị của công cụ tìm kiếm một cách đáng tin cậy như chuyển hướng 301.
Do sự lạm dụng của những kẻ gửi thư rác và sự nghi ngờ của các công cụ tìm kiếm, các 301 giữa các miền đôi khi đòi hỏi nhiều thời gian hơn để được kiểm tra và tính đúng cách. Để biết thêm về việc di chuyển các trang web, hãy xem Đạt được Di chuyển Tên miền Thân thiện với SEO: Đồ họa thông tin .
Xem thêm Cách liên kết với nhau các bài đăng trên blog
Cách thực hiện
Ngày nay, hầu hết các nền tảng CMS hiện đại đều cung cấp các giải pháp và / hoặc plugin để dễ dàng xử lý các chuyển hướng 301 và 302. Ví dụ: RankMath là một plugin WordPress miễn phí cung cấp chuyển như một tính năng cơ bản. Nhiều nền tảng lưu trữ và CDN cũng cung cấp khả năng quản lý chuyển dễ dàng từ bảng quản trị của họ.
Chuyển hướng 301 trong .htaccess
Một cách phổ biến để thực hiện chuyển là thông qua tệp . Dưới đây, chúng tôi đã liệt kê một số chỉ thị .htaccess phổ biến để chuyển .
Sử dụng Apache mod_rewrite
RewriteEngine bật
RewriteBase /
rewritecond% {http_host} ^ domain.com [nc]
viết lại ^ (. *) $ http://www.domain.com/$1 [r = 301, nc]
Đối với các trường hợp .htaccess khác, những người tại Linchpin SEO đã tổng hợp lại một tài nguyên tốt .
Đọc thêm Công cụ Xây dựng Liên kết Tốt nhất
Chuyển hướng PHP
<? php
header (“Vị trí: https://www.example.com/”, true, 301);
lối ra();
?>
Chuyển hướng JavaScript
Mặc dù về mặt kỹ thuật, bạn có thể triển khai chuyển bằng JavaScript, nhưng đó không phải là phương pháp được khuyến nghị cho mục đích SEO. Mặc dù thử nghiệm đã chỉ ra rằng Google có thể hiểu chuyển hướng JavaScript là 301, nhưng nó không phải là một. Vì JavaScript được thực thi phía máy khách chứ không phải phía máy chủ nên không có gì đảm bảo Google sẽ lập chỉ mục chuyển đúng cách. Và cuối cùng, không có cách nào để khai báo mã trạng thái HTTP khi sử dụng JavaScript để chuyển .
Mặc dù không được khuyến nghị, nhưng sau đây là ví dụ về cách bạn có thể triển khai chuyển trong JavaScript:
Xem thêm Hướng dẫn đầy đủ về nghiên cứu từ khóa cho SEO
Những điều cần lưu ý khi chuyển hướng
Quy tắc vàng của điều hướng trang web? Đừng bắt 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 cả một cuốn sách về tình cảm này. Để cho phép người dùng điều hướng trang web của bạn một cách dễ dàng mà không cảm thấy bị mất hoặc thất vọng, hãy làm theo các phương pháp hay nhất sau.
1. Hãy nhất quán.
Nhất quán trong cách bạn định dạng và thiết kế giao diện điều hướng của mình. Ý tưởng không nhất quán vì lợi ích của sự nhất quán. Đó là về việc phù hợp với kiến thức hiện tại và 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 của bạn có màu đen và gạch dưới xuất hiện khi người dùng di chuột qua chúng. Sau đó, đó phải là phong cách của tất cả các liên kết điều hướng của bạn trên mọi trang của trang web 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 siêu liên kết và văn bản nào không có trong menu điều hướng của bạn.
Lưu ý rằng menu điều hướng chính và phụ của Madewell có kiểu liên kết nhất quán. Văn bản nhỏ hơn một chút và không được in đậm trong menu điều hướng phụ, đây 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.
2. Thiết kế cho mọi kích thước màn hình.
Với thiết bị di động chiếm hơn một nửa số lượt truy cập vào công cụ tìm kiếm không phải trả tiền trong năm nay, việc tối ưu hóa trang web của bạn cho thiết bị di động và các kích thước màn hình khác chưa bao giờ quan trọng hơn. Điều đó bao gồm các menu điều hướng của bạn.
Khi thiết kế điều hướng trang web của bạn, hãy bắt đầu bằng cách nghĩ đến thiết bị di động trước. 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 quan trọng nhất để đưa vào điều hướng chính của mình và theo thứ tự. Bạn cũng sẽ phải quyết định những tính năng điều hướng nào – như nút bánh hamburger – là cần thiết trên thiết bị di động và chúng sẽ phù hợp với thiết kế máy tính để bàn của bạn như thế nào. Điều này sẽ giúp bạn chuyển sang thiết kế cho kích thước màn hình lớn hơn với ý 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.
3. Làm cho thông tin quan trọng nhất có thể truy cập được.
Bạn đã bao giờ nghe nói về quy tắc ba lần nhấp chuột chưa? Ý tưởng rằng mọi cấu trúc điều hướng trang web sẽ cho phép ai đó truy cập vào bất kỳ trang nào trên trang web và tìm thấy những gì họ cần trong vòng ba lần nhấp chuột.
Mặc dù ý tưởng này đã trở nên sâu sắc trong thế giới thiết kế web, nhưng phần lớn nó đã bị mất uy tín. Trên thực tế, một nghiên cứu cho thấy rằng người dùng không có nhiều khả năng bỏ công việc sau ba lần nhấp hơn là sau 12 lần nhấp. Biểu đồ dưới đây cho thấy một số người dùng tiếp tục cố gắng tìm thấy nội dung mong muốn của họ sau 25 lần nhấp chuột.
Tuy nhiên, cơ sở của quy tắc là tốt. Bạn muốn giới hạn số lượng nỗ lực cần thiết để khách truy cập truy cập thông tin quan trọng hoặc hoàn thành một nhiệm vụ trên trang web của bạn. Việc đếm số lần nhấp chuột chỉ là một số liệu quá hời hợt. Thay vào đó, bạn nên tập trung vào việc tạo ra các đườ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 của người dùng.
4. Thêm vụn bánh mì.
Để hiểu điều hướng breadcrumb, hãy nghĩ đến câu chuyện cổ tích trong Hansel và Gretel. Khi đi vào rừng, hai đứa trẻ đánh rơi vụn bánh mì để chúng có thể tìm đường về nhà. Điều hướng đường dẫn được thiết kế cho cùng một mục đích: cho phép người dùng hình dung vị trí của họ trong cấu trúc của trang web và có thể truy xuất lại các bước của họ đến các trang cấp cao hơn.
Nó cũng không chiếm nhiều bất động sản. 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 tá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 duyệt máy tính xách tay PC và nhận ra 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 có thể chỉ cần nhấp vào liên kết “Máy tính & Máy tính bảng” trong menu breadcrumb.
Thiết kế điều hướng trang web của bạn
Thiết kế điều hướng trang web của bạn yêu cầu xem xét cẩn thận khách truy cập và mục tiêu trang web của bạn. Bạn muốn đảm bảo con người và bot công cụ tìm kiếm 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 mối quan hệ giữa các trang của bạn. Bằng cách đó, họ sẽ tiếp tục duyệt và thực hiện các hành động mong muốn trên trang web của bạn – chẳng hạn như tạo tài khoản hoặc hoàn tất mua hàng – thay vì thất vọng thoát ra.