Lên kế hoạch và thiết kế các dạng menu trong web

Nguồn: Kayla Knight, Smashing Magazine

Thanh menu  đơn giản hay phức tạp tùy thuộc vào nội dung trang web nhiều hay ít; các phần logged-in, logged-out,… Tùy theo cách định vị khác nhau ở từng trang web, nên vẫn chưa có một tiêu chuẩn làm thế nào để phân loại từng dạng menu.

Mỗi menu  đều có những yếu tố nghệ thuật kèm theo nó, nhà thiết kế sẽ am hiểu nhiều hơn khi tìm hiểu sâu về các dạng thanh menu. Đó là tất cả những yếu tố cấu trúc thông tin :” Nghệ thuật mà thể hiện những mô hình hay những khái niệm thông tin là những hoạt động đòi hỏi tính chi tiết rõ ràng trong một hệ thống phức tạp.”

1. Các dạng cấu trúc các menu 

Một phần khó nhất trong thiết kế menu là định hướng có tổ chức và thiết kế. Chúng ta sẽ xem qua một vài trang web thiết kế menu có định hướng tốt.

1.1 Phần chính và phần phụ trong menu 

Hầu hết các website, đặc biệt là các trang web chứa nhiều nội dung hoặc chức năng rất cần menu. Một khi trang web có nhiều nội dung phức tạp, việc hướng dẫn người sử dụng tìm đến nội dung, chức năng không phải là công việc mà chỉ duy nhất một menu có thể thực thi được. Chính vì thế có rất nhiều trang web dùng 2 menu: menu chính và menu phụ.

http://speckyboy.com/

Bạn có thể sẽ nghĩ rằng menu chính và menu phụ sẽ phá hỏng thiết kế bên trên nhưng tôi tin rằng với thiết kế này thì không.

  • Menu chính: bao gồm nội dung mà hầu hết người dùng quan tâm. Nhưng tầm quan trọng chỉ mang tính chất tương đối. Các loại nội dung được link từ menu chính có thể xuất hiện ở menu phụ (ví dụ thông tin tổng quát về công ty).
  • Menu phụ: bao gồm nội dụng phụ mà người dùng quan tâm. Nhiều blog, những menu phụ dùng nhũng từ link như “about us” “contribute”, ”advertise”. Ở một vài website khác, những từ link có thể là  “FAQ”, hoặc “trang trợ giúp”

Công việc đầu tiên trong việc tổ chức sắp xếp thông tin định hướng là thiết lập nội dung. Chỉ khi nội dung được sắp xếp lại thì bạn có thể quyết định nội dung chính và nội dung phụ, sau đó bạn thiết kế vị trí và cấu trúc. Nội dung chính hoặc phụ có thể được thiết kế ở bất kỳ vị trí nào trong trang web, chúng phụ thuộc vào cách thiết kế (miễn sao giúp người dùng có thể định vị tốt).

1.2 Cách tổ chức nội dung có thể dùng card sorting(phần này nói về cách nhóm những phần có nôi dung tương tự).

2. Tổ chức, sắp xếp nội dụng menu thông qua các nhóm người sử dụng web.

Các trang web nơi menu thay đổi dựa vào việc người dùng đăng nhập hay không đăng nhập. Một vài trang web có ít nhóm khách hàng, nhưng một số trang web có rất nhiều nhóm khách hàng với nhiều đặc tính khác nhau. Khi tham gia tương tác, vai trò từng nhóm người dùng và nội dung có thể khác nhau. Vì thế khi thiết kế ở mỗi loại nhóm đối tượng chúng ta cần làm nổi bật và làm chúng khác biệt.

Dưới đây là một vài cách giúp nhóm các nội dung thông qua nhóm người dùng:

  1. Nhóm người sử dụng là ai? nhóm có chuyên môn hay không có chuyên môn; nhóm admin, nhóm thành viên hay nhóm không là thành viên. 
  2. Kiểu thiết kế nào cho từng nhóm người sử dụng? Nội dụng của các phần đăng xuất, đăng nhập như thế nào? Nên dùng cấu trúc gì cho các nội dung đăng nhập, đăng xuất? có sự khác biệt gì giữa các admin và các thành viên web? Đây là tài khoản miễn phí hay phải trả tiền?
  3. Nội dung nên dùng cho mỗi nhóm người sử dụng là gì? Những nhóm người đến thăm trang web họ chỉ thấy cộng đồng trang web và các dịch vụ. Nhóm thành viên cho phép đăng nhập, một số nội dung chính dành cho nhóm thành viên. Liệu có nội dung nào đặc biệt cho nhóm thành viên phải trả tiền tài khoản? Phần này nên hightlight hay ẩn đi? Có trang nào dành riêng cho các admin không? Hay tất cả đều dùng chung một giao diện khi đăng nhập?

Cách phân loại từng nhóm người được thực hiện bằng phương pháp định hướng chính và định hướng phụ. Card sorting có thể giúp chúng ta phân loại từng nhóm người sử dụng. Khi thiết kế nên cân nhắc nhóm định hướng chính bao gồm những mục gì, nhóm định hướng phụ bao gồm những mục gì, cấp độ thông tin như thế nào, bằng mỗi phần mục được đặt tên như thế nào?

Những nhóm thành viên cần làm gì, điều gì họ cần  đạt được ?

Lấy ví dụ từ facaebook. Nội dung trên Facebook của từng người dùng là khác. Bằng cách nào để tổ chức và định hướng những thông tin này? Facebook được thiết kế theo môi trường xung quanh nó. Tức là nó được tổ chức và thiết kế bởi cách mà người dùng sử dụng  những chức năng có sẵn trong Face. Feeds, tin nhắn, sự kiện, bạn bè là phần định hướng chính, trong khi đó những mục định hướng phụ là các ứng dụng riêng biệt, các yêu cầu, friend’s friends,… Những phần định hướng còn lại dựa vào cách mà người dùng tương tác và tự thiết kế riêng cho họ.

Một số ví dụ:

Trang mailchimp, vị trí nhóm định vị của phần đăng xuất và đăng nhập là như nhau, nhưng nội dung trên menu lại khác nhau. Đối với các nhóm không phải là thành viên trang web, phần định vị của MailChimp hướng dẫn họ đăng nhập miễn phí và tạo cảm hứng khi đăng nhập bằng cách cung cấp một số tính năng và giá cả. Đối với nhóm thành viên, thanh định vị trở thành control panel. Liệu thanh định vị nên thay đổi nhiều yếu tố trong từng trường hợp không? Câu trả lời là không phải tất cả. Có một số tùy chọn dùng cho cả hai nhóm đói tượng, một số tùy chọn thì không.

http://mailchimp.com/

Freelancer Mingle

Trong trang web này, mục định vị thứ cấp là mục đăng xuất và đăng nhập, phần menu bên trên dùng cho các thành viên đăng nhập và đăng xuất. Nhiều khu vực ở website có thể đăng nhập và đăng xuất được, việc này giúp cho việc định hướng dễ dàng. Phần hiển thị cho người dùng cũng dễ nhìn thấy, trong khi giới hạn một số chức năng, nó cũng giúp nhóm người mới tiếp cận trang web có cái nhìn tổng quát về nội dung trang web. Nếu người dùng đăng nhập, họ sẽ tìm kiếm được nhiều thông tin hơn.

http://freelancemingle.com/social/

Menu navigation with main and sub menu.

Trang này gồm menu chính và menu phu. Tuy nhiên sự nhóm menu phụ chưa tương tác được với người dùng. Phần đường dẫn text bên dưới chưa hiệu quả, vì không thấy sự tương phản giữa các text => dư. 

 

 

Trang này thiết kế menu tương tự như ở trang trên gồm menu chính và menu phụ. tuy nhiên sự nhóm các menu vẫn chưa hiệu quả, chưa rõ ràng.

3. Những điều cần lưu ý

Thiết kế menu là nghiên cứu về khả năng dễ tìm và dễ sử dụng. Chúng ta hãy tham khảo một số thanh định vị sau và xem xét những lợi ích mà chúng mang lại.

3.1 Menu hướng ngang và dọc.

Việc quyết định hướng định vị ngang và dọc tùy thuộc vào mục đích và bố cục thiết kế web. Một trang web nhỏ thường có xu hướng đặt menu theo chiều ngang ngay phần đầu trang web. Trong khi những trang web chứa nhiều nội dung thường đặt menu ở cả phần ngang và dọc trang web (và thường dùng menu drop-down). Blog có nhiều có nhiều loại: những phần menu chính (các phân mục, các trang) thường được thiết kế theo chiều ngang, trong khi những menu khác thì thiết kế theo chiều dọc. Một số trang web thì bao gồm cả hai kiểu thiết kế ngang và dọc, và không có một khuynh hướng rõ rệt cho menu.

Một số yếu tố ảnh hưởng đến việc thiết kế menu theo chiều ngang và chiều dọc bao gồm yếu tố thiết kế, cách dễ sử dụng, nội dung web. Một số thiết kế thêm các icon, một số thiết kế lại thêm yếu tố hình ảnh trực quan xung quanh thanh menu giúp chúng nổi bật hơn. Một số dùng dạng typography,… Chính vì menu trở thành một phần quan trọng trong thiết kế web, vì thế cần có một số giải pháp đặc biệt giúp chúng thống nhất và dễ phân biệt.

Trang amazon có mục list of department quá dài ở thanh menu hướng ngang. Nhưng thay vào đó, ta có thanh search bar, đây là một dạng tự định hướng. Nhiều khách hành không biết chính xác họ đang tìm kiếm cái gì. Vì thế họ sẽ đăng nhập nội dung vào thanh search bar này. Amazon đặt menu department phía bên trái. Bởi vì danh mục này rất dài và gồm nhiều loại khác nhau và mục đích chính của các danh mục này là đọc lướt qua. Vì thế menu chiều dọc thích hợp cho việc lướt nội dung. Sub-menu cũng thường đặt theo chiều dọc, giúp người dùng dễ lọc thông tin.

Một điểm cần lưu ý là ngôn ngữ chính của 1 website và liệu nội dung đó có phải chuyển đổi sang một dạng ngôn ngữ nào khác không? Tiếng Anh thường ngắn hơn tiếng Đức hoặc tiếng Pháp. Vì thế nhữnng phần trống nằm ngang nên được xem xét kỹ khi thiết kế theo dạng ngang. Nếu khi dịch ra ngôn ngữ khác mà nội dung quá dài thì phần thiết kế menu theo chiều dọc hiệu quả hơn.

Bên dưới là một số thiết kế menu chính theo chiều dọc. Tuy nhiên, những thiết kế này đều có nội dung và menu đơn giản. Website chứa nhiều nội dung thường được thiết kế theo chiều dọc. Good/crops là một ví dụ về cách mà nhiều thông tin được thiết kế trong trong một không gian nhỏ gọn, tối giản. Cách thụt đầu dòng giúp cho người xem có một cái nhìn về một hệ thống phân cấp rõ ràng.

http://www.goodcorps.com/

(còn tiếp)

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: