Các toán tử mượt mà: một hướng dẫn để điều hướng trang web tuyệt vời

“Đằng sau mỗi thương hiệu tuyệt vời là một trang web được thiết kế tốt.” Ai đó quan trọng hẳn đã nói điều đó… đúng không? Điều quan trọng đối với thương hiệu của bạn là phải có một thiết kế dễ tiếp cận, dễ sử dụng và bước đầu tiên của việc đó là tạo điều hướng trang web hoàn hảo. Cho phép chúng tôi vạch ra điều hướng kỹ thuật số thành công, bao gồm các manh mối thiết kế yêu thích của chúng tôi để giữ cho thương hiệu của bạn đi đúng hướng.

Điều hướng, huh. Thích bản đồ và thuyền?

Theo một cách nào đó, có. Theo thuật ngữ thiết kế web, “điều hướng” đề cập đến cách thức mà người dùng thực hiện hành trình qua trang web của bạn. Nó bắt đầu bằng việc thiết lập hệ thống phân cấp thông tin, tạo menu hoàn hảo và đảm bảo người dùng dễ dàng đến nơi họ cần đến.

Thiết kế điều hướng trang web thông minh là một phần không thể thiếu cho sự thành công của một thương hiệu nói chung. Điều hướng giúp người dùng hiểu nội dung trang web của bạn và giữ chúng ở nơi bạn muốn — trên trang web của bạn chứ không phải của người khác. Hãy nhớ rằng: điều hướng không phải là một suy nghĩ sau. Khi nói đến toàn bộ quá trình thiết kế, điều hướng nên được suy nghĩ thông suốt ngay từ đầu.

Tầm quan trọng của điều hướng trang web
–

Giả sử một khách hàng tiềm năng đang mua sắm giày chạy bộ, vì vậy họ đến trang web thương mại điện tử bán quần áo và thiết bị thể thao. Bây giờ, khách hàng phải tìm đường từ trang đích đến lựa chọn giày chạy bộ và tùy thuộc vào menu điều hướng để chỉ họ đi đúng hướng. Lý tưởng nhất là quá trình này đơn giản và diễn ra nhanh chóng.

Điều hướng trang web được thiết kế tốt đưa người dùng đi từ điểm A đến điểm B một cách nhanh chóng, trực quan và đây là mục tiêu cuối cùng của bạn!

Nếu hành trình này không liền mạch, điều đó có nghĩa là điều hướng được thiết kế kém và trang web nói chung sẽ ngay lập tức cảm thấy lộn xộn và thiếu chuyên nghiệp. Điều xảy ra tiếp theo là khách hàng trở nên thất vọng và lấy thiết kế kém hiệu quả này để phản ánh chất lượng dịch vụ và / hoặc sản phẩm thực tế của thương hiệu quần áo thể thao. Cuối cùng, điều đó có thể có nghĩa là họ vượt lên trên một trong những đối thủ cạnh tranh của trang web và họ thua cuộc khi bán được hàng.

Hãy coi trang chủ là điểm A, sau đó nội dung trên mỗi trang đích tiếp theo là điểm B. Điều hướng trang web được thiết kế tốt đưa người dùng từ điểm A đến điểm B một cách nhanh chóng, trực quan và đây là mục tiêu cuối cùng của bạn!

Nguyên tắc cơ bản của điều hướng trang web
–

Hãy bắt đầu với một số nguyên tắc cơ bản để điều hướng trang web tốt: hệ thống phân cấp hợp lý, sự đơn giản và tính linh hoạt.

Hệ thống cấp bậc

Tạo một menu điều hướng được thiết kế tốt bắt đầu bằng việc liệt kê ra một hệ thống phân cấp thông tin cho các nhãn menu của bạn. Giả sử thương hiệu của bạn là một công ty luật. Menu điều hướng có thể phải làm nổi bật lĩnh vực luật mà bạn tập trung vào, đội ngũ luật sư của bạn, một số lời chứng thực của khách hàng và thông tin liên hệ của bạn. Liệt kê mọi thứ và cố gắng tạo các nhãn hợp lý, nhanh chóng, dễ hiểu cho mọi thứ trong menu của bạn. Ví dụ: “thông tin liên hệ của chúng tôi” nghe có vẻ hơi ngột ngạt, trong khi “liên hệ với chúng tôi” rất quyến rũ và thân thiện (nó cũng giúp bạn tiết kiệm một số ký tự, mang lại nhiều tự do hơn trong thiết kế).

Sự đơn giản

Càng đơn giản càng đẹp. Bằng cách giới hạn các tùy chọn menu của bạn và giữ mọi thứ đơn giản, thông điệp của bạn được truyền tải rõ ràng mà không có tiếng ồn không cần thiết. Bạn không cần 20 tùy chọn hiển thị trên menu điều hướng của mình. Hãy suy nghĩ về việc sắp xếp thứ tự ưu tiên thông tin, sau đó đánh dấu nó một cách cụ thể mà không cần quá rườm rà. Hãy nhớ rằng: sự đơn giản phải là một yếu tố trong tất cả các kế hoạch của bạn, ngay từ đầu.

Tính linh hoạt

Thiết kế web đáp ứng là khái niệm đảm bảo rằng một trang web cung cấp cùng một trải nghiệm người dùng bất kể nó được xem trên nền tảng nào (máy tính, iPad, điện thoại, v.v.). Điều hướng trang web tốt nhất là linh hoạt và thiết kế đáp ứng hỗ trợ tính linh hoạt. Bất kể người dùng truy cập menu điều hướng của bạn bằng cách nào, trải nghiệm phải giống nhau. Hãy nghĩ về tần suất chúng ta sử dụng điện thoại để truy cập một trang web thay vì sử dụng máy tính xách tay. Khi một trang web không hoạt động tốt trên điện thoại, điều đó vô cùng khó chịu và bất lợi về trải nghiệm người dùng và nhận thức về thương hiệu.

Các loại điều hướng trang web
–

Một khía cạnh quan trọng khác khi xem xét tính linh hoạt là phong cách trực quan của chính menu điều hướng. Hãy xem xét 3 tùy chọn phổ biến: hamburger, dropdown và điều hướng chân trang.

Thực đơn bánh hamburger

Mới đây, thực đơn hamburger đã trở nên phổ biến. Kỹ thuật này thoạt nhìn sẽ ẩn menu điều hướng, sau đó cho phép người dùng mở rộng menu bằng cách chọn biểu tượng bánh hamburger. Thiết kế trang web của 345 Systems là một ví dụ rõ ràng về cách menu bánh hamburger có thể làm cho trang web trông ít lộn xộn hơn và điều hướng trực quan hơn.

Menu thả xuống

Trang web Puma (và hầu hết các trang thương mại điện tử lớn, cho vấn đề đó) sử dụng điều hướng thả xuống Phong cách. Vẻ đẹp của điều hướng thả xuống là bạn có thể chia sẻ nhiều thông tin trong một không gian cô đọng. Với phong cách này, hãy giữ nó ngắn gọn và chú ý không có tùy chọn menu nào dài hơn hai từ.

Điều hướng chân trang

Và cuối cùng nhưng không kém phần quan trọng, có điều hướng chân trang, như đã thấy trên trang web Blue Fountain Media. Chân trang là một phần không thể thiếu của trải nghiệm điều hướng và không nên bỏ qua nó, mặc dù nó có thể không đứng đầu về thứ bậc. Các cách tiếp cận khác nhau có thể được thực hiện khi nói đến footer. Nó có thể có tất cả các nhãn điều hướng của bạn hoặc có thể chỉ là một vài điểm nổi bật quan trọng.

Dù bằng cách nào, phần cuối của trang web phải luôn bao gồm thông tin quan trọng, hữu ích, như cách khách hàng có thể liên hệ với bạn nếu họ có câu hỏi. Chắc chắn, về mặt hình ảnh nó có vẻ ít quan trọng hơn hamburger hoặc menu thả xuống, nhưng đừng bán ngắn: footer là cơ hội cuối cùng để bạn tạo ấn tượng tuyệt vời.

Ví dụ về điều hướng trang web
–

Bây giờ chúng ta đã xem xét một số nguyên tắc cơ bản của điều hướng tốt và biết những loại điều hướng hiện có, chúng ta hãy đi sâu vào một số ví dụ cụ thể.

Trang web 1000 Challenge hiển thị công dụng tuyệt vời của thiết kế đáp ứng; cho dù truy cập trên máy tính để bàn hay trên thiết bị di động, nội dung của trang web vẫn dễ hiểu. Lưu ý cách menu điều hướng thay đổi dựa trên thiết bị được sử dụng. Trong giao diện máy tính để bàn, có một menu điều hướng đơn giản và ngắn gọn ở trên cùng. Trên thiết bị di động, menu này được cô đọng thành biểu tượng bánh hamburger, giúp thông tin hiển thị trên màn hình nhỏ dễ dàng hơn. Mặc dù một vài thay đổi về đồ họa tùy thuộc vào cách trang web được xem, nhưng thông điệp và trải nghiệm tổng thể gần như giống hệt nhau. Điều này khiến người dùng hài lòng và tạo ấn tượng tích cực cho thương hiệu nói chung.

Bố cục của điều hướng trên trang web IWA dễ dàng cho người dùng hiểu. Tất cả các dịch vụ đã được liệt kê trong năm nhóm chính, sau đó người dùng có thể truy cập từng nhóm để xem thêm các tùy chọn. Thanh tìm kiếm và cổng đăng nhập được đặt ở vị trí thuận tiện ngay bên cạnh menu điều hướng (hãy nhớ: chúng không cần phải tìm kiếm trên thanh tìm kiếm).

Menu tổng hợp các điểm chính mà IWA cần chia sẻ, sau đó khi người dùng cuộn xuống, họ có thể tiếp tục khám phá thêm về thương hiệu nói chung. Thông tin tối thiểu nằm ở trên cùng, nhưng khi họ di chuyển qua trang web, họ có thể học hỏi, trải nghiệm và hiểu rõ. Trang web này sử dụng một thanh trượt trên trang đích của nó; điều này có nghĩa là người dùng khám phá trong cài đặt trình chiếu, điều này rất tốt để tiết kiệm dung lượng và giúp giữ cho người dùng tương tác.

Menu điều hướng trên trang web Figgy Plum chứng minh rằng sự đơn giản vẫn có thể thú vị và hấp dẫn. Với năm mục menu cụ thể, rõ ràng, người dùng có thể dễ dàng hiểu nơi tiếp theo. Hình tròn kiểu bàn phấn tạo thêm nét quyến rũ bất ngờ cho trải nghiệm người dùng.

Các tiêu đề ngắn, đậm, đơn giản tiếp tục xuyên suốt thiết kế trang đích, mang lại sự gắn kết với menu điều hướng. Sự đơn giản này tương phản với hình ảnh rất chi tiết chạy khắp trang web và tạo ra một nhịp điệu tốt đẹp cho người dùng.

Và sau đó chúng tôi có điều hướng hoàn toàn khác biệt theo cách tốt nhất có thể. Arc phát minh lại cách người dùng có thể đi qua một trang web, tạo ra sự kết hợp ấn tượng giữa hình ảnh, văn bản và hoạt ảnh. Chỉ cần đảm bảo rằng nó không gây nhầm lẫn cho người dùng của bạn khi bạn đang thử một thứ gì đó sáng tạo hơn với điều hướng của mình.

Bây giờ là thời điểm mà chúng ta đang thấy điều hướng thành công nghiêng về các phương pháp phi truyền thống, với môi trường web đa hướng và điều hướng trung tâm xuất hiện trong xu hướng thương mại điện tử cho năm 2021.

Để có được điều hướng phi truyền thống hoàn hảo cho trang web của bạn, hãy nhớ dừng suy nghĩ về nội dung của bạn chỉ đơn giản như vậy. Nó không chỉ là thông tin – nó là một hành trình trực quan; đó là một trải nghiệm đáng nhớ.

Trải nghiệm trang web và người dùng cuối
–

Hãy nói về trải nghiệm người dùng. Đó là tất cả về cảm giác của một người khi họ ở trên trang web của bạn và cách họ phản ứng với thông tin đã được trình bày trước mắt họ. Hãy nghĩ về nó theo cách này: đó là sự hiểu biết nhiều sắc thái về sự tiếp xúc của con người trong môi trường kỹ thuật số.

Điều hướng là xương sống của trải nghiệm người dùng trên một trang web.

Điều hướng là xương sống của trải nghiệm người dùng trên một trang web. Bằng cách đến thành công nơi họ cần đến, người dùng hài lòng và tương tác. Ngược lại, nếu trải nghiệm người dùng kém diễn ra, người dùng có thể trở nên khó chịu hoặc hoàn toàn không quan tâm. Nhận thức này từ người dùng ảnh hưởng đến định vị thương hiệu của bạn nói chung. Đây là cơ hội để bạn giữ khách hàng ở nơi bạn muốn: tương tác với bạn.

Đi sâu hơn vào trải nghiệm của khách hàng, điều quan trọng là tuân theo các nguyên tắc thiết kế UX trong tất cả các khía cạnh của trang web của bạn, từ thiết kế và nội dung đến khả năng sử dụng và khả năng truy cập.

Và hãy nhớ rằng trải nghiệm của khách hàng vượt ra ngoài trang web của chính bạn. Đó là nơi phát huy tác dụng của việc xây dựng thương hiệu, tiếp thị và tối ưu hóa công cụ tìm kiếm (SEO).

Giả sử thương hiệu của bạn là một khách sạn boutique ở Bahamas. Bây giờ, hãy đặt mình vào vị trí của khách hàng mà bạn muốn thu hút vào trang web của mình. Bằng cách tiếp thị trang web của bạn phù hợp, xây dựng thương hiệu trang web của bạn một cách nhất quán và kết hợp các cụm từ thân thiện với SEO vào trang web của bạn nói chung, bạn sẽ thu hút được khách hàng tiềm năng. Sau đó, ngay khi họ truy cập trang web của bạn, điều hướng tốt, bản sao rõ ràng và hành trình hấp dẫn của người dùng sẽ đảm bảo rằng họ dễ dàng tìm thấy những gì họ đang tìm kiếm.

Ồ, và đừng quên kết hợp hồ bơi tuyệt đẹp đó vào hình ảnh trang đích của bạn (lấy cảm hứng từ việc tổng hợp các ý tưởng thiết kế trang đích hàng đầu của chúng tôi).

Phần kết luận
–

Cho dù bạn đang xây dựng thương hiệu từ đầu hay đang tìm cách thúc đẩy hoạt động kinh doanh hiện tại của mình, điều hướng trang web rõ ràng, dễ hiểu sẽ là một phần không thể thiếu trong thành công của bạn. Chúng tôi hiểu được điều đó: thiết kế web có thể phức tạp và quá sức và đôi khi bạn không biết bắt đầu từ đâu. Nhưng đó chỉ là nó: một trang web được tạo tốt bắt đầu với khả năng điều hướng tuyệt vời.

Nghe có vẻ lịch sự, “cuộc sống là một cuộc hành trình, không phải là một điểm đến.” Trong khi một số người gán câu trích dẫn này cho Ralph Waldo Emerson và những người khác nhấn mạnh rằng Steven Tyler nhận được một số tín dụng trong vấn đề này (này, tại sao không?), Câu thần chú này đúng với điều hướng trang web. Ngay cả khi người dùng không chắc chắn lắm về điểm đến của họ, cấu trúc của điều hướng sẽ đưa họ vào một hành trình hấp dẫn, có mục đích. Và nếu thực tế họ biết điểm B của mình và chỉ cần khởi hành từ điểm A, điều hướng được thiết kế tốt sẽ hoàn thành công việc.