- Menu ngữ cảnh giúp giảm nhiễu thị giác và hạ thấp chi phí tương tác, nhưng đi kèm đánh đổi là information scent thấp và khả năng được phát hiện kém
- Phù hợp để gom và cung cấp các hành động phụ, bổ sung gắn với một đối tượng cụ thể như bài đăng, ảnh, sự kiện lịch; các biểu tượng kebab (⋮)·meatball (⋯) thường được hiểu là “xem thêm/thao tác bổ sung”
- Nếu kích thước, độ tương phản hoặc vị trí biểu tượng không tốt, người dùng thường không nhìn thấy chính biểu tượng đó hoặc hiểu sai ý nghĩa của nó; nếu ẩn các hành động quan trọng thì chúng sẽ trở thành tính năng cốt lõi khó tìm, làm xấu đi trải nghiệm người dùng
- Để dùng hiệu quả, cần có các quy tắc nhất quán như chỉ đưa hành động thứ cấp vào, đặt gần nội dung liên quan, không chỉ ẩn một hoặc hai hành động, phân biệt vai trò với hamburger, bảo đảm khả năng truy cập
- Menu ngữ cảnh được thiết kế tốt có thể trở thành công cụ đơn giản hóa bố cục và tăng khả năng tập trung, nhưng nếu lạm dụng hoặc dùng sai, nó có thể làm tăng sự bối rối, số lần nhấp thêm và gánh nặng học cách dùng, nên cần sử dụng thận trọng
Tổng quan về menu ngữ cảnh
- Menu ngữ cảnh là menu tập hợp các hành động liên quan được gắn với một phần tử UI cụ thể, một vùng màn hình, một mẩu dữ liệu hoặc một khung nhìn của ứng dụng
- Với bài đăng có thể gồm Edit, Pin, Delete; với ảnh có thể gồm Share, Download, Set as Background; với sự kiện lịch có thể gồm Delete, Reschedule, Duplicate, Invite
- Loại menu này thường được dùng để đặt các chức năng thứ cấp thỉnh thoảng mới cần nhưng không nhất thiết phải luôn hiển thị ở vị trí thuận tay
- Trên desktop, nó thường được kích hoạt bằng nhấp chuột phải·nhấp trackpad bằng hai ngón, trong môi trường cảm ứng là nhấn giữ, và ngày càng thường xuyên hơn bằng các biểu tượng kebab (⋮)·meatball (⋯)
Cách nhận diện và giới hạn của biểu tượng kebab·meatball
- Những người tham gia nghiên cứu nhìn chung nhận diện biểu tượng kebab (⋮)·meatball (⋯) với ý nghĩa “có thêm tùy chọn/hành động khác đang được ẩn ở phía sau”
- Cách hiểu này được duy trì trên cả mobile lẫn desktop, và được hiểu nhất quán hơn khi tuân thủ tốt các guideline
- Biểu tượng này được tiếp nhận như một “công tắc mở ra một tập hợp hàm/biểu tượng đang tạm ẩn”
- Đồng thời, các biểu tượng này cũng có information scent thấp, nên người dùng gần như không biết cụ thể đằng sau đó có những tùy chọn gì trước khi nhấp
- Khi biểu tượng được thiết kế quá xa nội dung, quá nhỏ hoặc có độ tương phản thấp, cũng đã quan sát thấy các trường hợp người dùng hoàn toàn không nhận ra chính menu ngữ cảnh
Ưu điểm và đánh đổi của menu ngữ cảnh
- Về mặt ưu điểm, menu ngữ cảnh là cấu trúc giúp giảm nhiễu thị giác, đơn giản hóa bố cục và duy trì sự tập trung
- Nhưng mặt khác, nó đi kèm các vấn đề về usability như sau
- Khó tìm hơn (giảm findability): nếu biểu tượng nhỏ, mờ hoặc ở xa vùng tập trung thao tác, nó sẽ trở thành một yếu tố rất dễ bị bỏ sót hoàn toàn
- Thiếu Information Scent: khó đoán trong menu có gì, khiến người dùng khó đánh giá liệu có đáng để bấm thử hay không
- Dễ bị hiểu sai: nếu cách bố trí hay cách dùng không tốt, người dùng có thể nhầm nó với progress indicator hoặc control của carousel
- Vì vậy, quyết định có dùng menu ngữ cảnh hay không cần được cân nhắc trong thế cân bằng với ràng buộc bố cục, kỳ vọng của người dùng và mức độ ưu tiên của tác vụ
1. Chỉ đưa các hành động thứ cấp, không cốt lõi vào menu ngữ cảnh
- Menu ngữ cảnh không phải chỗ dành cho các hành động cốt lõi được dùng thường xuyên, mà là chỗ dành cho các hành động bổ sung, ưu tiên thấp hơn
- Khuyến nghị là chọn lọc để ẩn những chức năng không thuộc luồng cốt lõi nhưng vẫn được dùng tương đối thường xuyên, dựa trên đánh giá dựa trên nghiên cứu
- Điều quan trọng là không ẩn các hành động thiết yếu, được dùng thường xuyên, phía sau menu ngữ cảnh
- Ví dụ, trong giao diện chat của AT&T, việc đặt End Chat bên trong menu ngữ cảnh là một ví dụ tệ về việc ẩn hành động kết thúc cốt lõi
- Khi ẩn tác vụ quan trọng phía sau menu, người dùng sẽ không tìm thấy tính năng hoặc liên tục gặp bất tiện khi thực hiện các tác vụ thường xuyên
2. Đặt menu ngữ cảnh gần nội dung mà nó tác động tới
- Người dùng diễn giải quan hệ giữa các phần tử thông qua sự gần gũi về không gian, vì vậy vị trí của biểu tượng menu ngữ cảnh phải thể hiện rõ nó thuộc về hành động của đối tượng nào
- Nếu menu chỉ áp dụng cho một phần tử cụ thể, biểu tượng đó nên được đặt bên trong hoặc ngay cạnh phần tử đó
- Nếu hành động áp dụng cho toàn bộ trường thông tin hoặc toàn bộ giao dịch, cần đặt nó gần khu vực tập hợp thông tin liên quan
- Cần tránh đặt biểu tượng ở vị trí ngẫu nhiên hoặc một vị trí lạc lõng không gắn với bất kỳ phần tử nào
- Như trường hợp của Ramp.com, khi biểu tượng kebab nhỏ, tương phản thấp bị đặt tách xuống góc dưới bên phải màn hình, rất khó biết nó dành cho phần tử nào, trở thành ví dụ làm giảm cả khả năng phát hiện lẫn tính liên quan
3. Bảo đảm khả năng nhìn thấy bằng kích thước và độ tương phản đủ lớn
- Biểu tượng menu ngữ cảnh thường bị xử lý quá tinh tế đến mức gần như không nhìn thấy trong các màn hình dày đặc hoặc ứng dụng phức tạp
- Biểu tượng cần có kích thước và độ tương phản đủ lớn, và nếu có thể thì nên luôn hiển thị ngay cả khi không hover
- Nên làm theo các guideline thiết kế thị giác đã được kiểm chứng, sử dụng độ tương phản màu rõ ràng cùng viền và nền dễ nhận biết
- Việc chỉ cho hiển thị ở trạng thái hover hoặc làm nó quá nhạt vì chủ nghĩa tối giản sẽ làm giảm khả năng được phát hiện
- Như ví dụ Ramp, biểu tượng kebab nhỏ, tương phản thấp và ở xa rất dễ bị bỏ sót,
- Ngược lại, như ứng dụng mobile của Rippling, trường hợp được bao bởi khung viền và kết hợp chấm đen với nền trắng để tăng tương phản là ví dụ tích cực giúp tăng khả năng được chạm và information scent
4. Chỉ nhóm các hành động có liên quan trong menu ngữ cảnh
- Các tùy chọn trong menu ngữ cảnh phải được nhóm thành những hành động thuộc về cùng một đối tượng/phần tử/tầng một cách logic
- Ví dụ, nếu là tệp thì chỉ nên chứa các hành động liên quan đến tệp như Duplicate, Share, Delete
- Nếu có thể, cũng nên hiển thị trực tiếp một vài hành động cạnh biểu tượng menu để bổ sung information scent, qua đó gợi ý “còn có những hành động cùng nhóm nào khác đang được ẩn”
- Cần tránh trộn lẫn hành động toàn cục và hành động của phần tử cụ thể trong cùng một menu, hoặc nhét vào các hành động không liên quan với nhau
- Kiểu trộn lẫn này đều bất lợi về độ rõ ràng, khả năng tìm thấy, trí nhớ không gian và tải nhận thức
- Như ứng dụng desktop của Slack, cấu trúc chỉ ẩn các hành động liên quan tới tin nhắn trong menu gắn với tin nhắn, còn các hành động xử lý cả thread được đặt ở vị trí riêng là một ví dụ tốt
5. Giữ biểu tượng và hành vi nhất quán trên toàn bộ giao diện
- Biểu tượng menu ngữ cảnh phải giữ cùng chức năng, hành vi và hình thức trên toàn bộ sản phẩm
- Nếu đã quyết định dùng biểu tượng meatball hoặc kebab cho menu ngữ cảnh, thì cần không tái sử dụng cho mục đích khác mà chỉ dùng với đúng ý nghĩa đó
- Cần tránh tái sử dụng cùng một biểu tượng theo kiểu: chỗ này thì mở rộng nội dung bị ẩn, chỗ khác thì gọi popup, chỗ khác nữa thì mở side panel
- Cách dùng như vậy sẽ làm hại mental model và niềm tin của người dùng, đồng thời làm giảm khả năng học và ghi nhớ
- Trong kết quả tìm kiếm Google, có thể thấy biểu tượng kebab ở kết quả được tài trợ mở modal My Ad Center, còn kebab ở kết quả thường lại mở panel bên phải, tức là hành vi và vị trí không đồng nhất
- Kết quả là các hành động hữu ích như Like/Block/Report/Share/Save bị ẩn và khó được phát hiện, đồng thời người dùng khó dự đoán chuyện gì sẽ xảy ra khi nhấp vào cùng một biểu tượng
6. Nếu biểu tượng mơ hồ, hãy bổ sung ý nghĩa bằng tooltip·label
- Biểu tượng kebab·meatball là biểu tượng trừu tượng có ý nghĩa nội tại yếu, nên chỉ một gợi ý chữ nhỏ cũng có thể cải thiện usability đáng kể
- Nếu có thể, nên gắn label hiển thị hoặc tooltip khi hover để cho biết cụ thể menu chứa loại hành động nào
- Ví dụ, dùng cách diễn đạt rõ ràng có kèm phần tử mục tiêu như Post Actions, Message Options
- Cần tránh các cách diễn đạt mơ hồ như Options, hoặc những label chỉ mô tả hình dạng biểu tượng như Ellipses
- Như ví dụ của Patagonia, trường hợp ánh xạ hành động phóng to ảnh vào biểu tượng meatball và hiển thị label khi hover là Ellipses là ví dụ thất bại trong việc truyền đạt ý nghĩa
- Ngược lại, như ứng dụng desktop của Notion, tooltip khi hover kiểu “Style, Export, and more…” gợi ý cụ thể nhóm hành động có trong menu là một pattern tích cực giúp tăng information scent đáng kể
- Tooltip này hoạt động theo cách thay đổi theo ngữ cảnh dựa trên nội dung menu
7. Chỉ dùng biểu tượng menu ngữ cảnh để biểu thị hành động, không dùng để mở rộng nội dung
- Vì biểu tượng meatball·kebab được hiểu là tín hiệu mở thêm hành động/tùy chọn, nên không nên dùng nó để mở rộng văn bản hay hình ảnh
- Với trường hợp mở rộng văn bản rút gọn hoặc phóng to hình ảnh, nên dùng label chữ tường minh như Read more, Expand
- Như ví dụ phần review trên Etsy, pattern dùng biểu tượng meatball bên dưới review để mở toàn bộ văn bản là ví dụ tệ do thiếu information scent
- Cùng chức năng đó trong Google Reviews lại được cung cấp bằng liên kết chữ More, đây là cách biểu đạt phù hợp hơn cho hành động mở rộng nội dung theo ngữ cảnh
- Biểu tượng kebab ở đầu Google Reviews chỉ cung cấp một hành động Report cũng là trường hợp vi phạm guideline “không chỉ ẩn một hoặc hai hành động” được nói ở phần sau
8. Không dùng menu ngữ cảnh chỉ cho một hoặc hai hành động
- Khi có thể, trong những tình huống chỉ có một hoặc vài hành động, tốt hơn hết là hiển thị trực tiếp hành động đó trên giao diện
- Nếu cố tình ẩn chỉ một hoặc hai tùy chọn phía sau menu, không gian tiết kiệm được gần như không đáng kể, trong khi số lần nhấp và chi phí về khả năng phát hiện lại tăng lên
- Đặc biệt khi đã có các biểu tượng chuẩn quen thuộc như “x”·thùng rác·cờ báo cáo, thì việc tiếp tục ẩn chúng dưới meatball/kebab là hành động không mang lại lợi ích
- Trong ví dụ của Weather.com, khi nhấp vào biểu tượng kebab thì nó đổi thành một nút màu đen chỉ chứa duy nhất nút Delete,
- Trong trường hợp này, nếu ngay từ đầu hiển thị trực tiếp Delete thì lượng không gian màn hình dùng gần như tương đương, nên không có lý do để phải ẩn
- Ngược lại, trong ví dụ Pinterest, khi đưa chuột lên pin thì các hành động quan trọng như Save (nút góc trên phải) và Share (biểu tượng góc dưới phải) được hiển thị trực tiếp
- Cách này là pattern tích cực vì không ẩn hành động cốt lõi trong menu ngữ cảnh và cho phép dùng ngay khi cần
9. Không dùng biểu tượng hamburger làm trigger cho menu ngữ cảnh
- Biểu tượng hamburger (☰) được nhận diện rộng rãi là ký hiệu cho điều hướng toàn cục/chính,
- trong khi biểu tượng kebab·meatball (⋮·⋯) đã trở thành pattern mang nghĩa các hành động ngữ cảnh gắn với một phần tử/mục cụ thể
- Khuyến nghị là chỉ dùng biểu tượng hamburger cho điều hướng toàn cục của site/app, còn với hành động ngữ cảnh thì dùng kebab·meatball
- Cần tránh việc đặt hamburger gần nội dung để chứa hành động ngữ cảnh, hoặc ngược lại, nhét các hành động toàn cục như cài đặt tài khoản hay tùy chọn toàn site vào kebab·meatball
- Kiểu dùng lẫn lộn này làm mờ ý nghĩa của cả hai pattern và phá vỡ mental model của người dùng, gây do dự và bỏ sót
- Trong ví dụ chat của Banana Republic, khi bấm biểu tượng hamburger ở góc dưới bên trái cửa sổ chat thì chỉ hiện ra một hành động ngữ cảnh duy nhất là Save Transcript
- Đây không chỉ là trường hợp dùng hamburger làm menu ngữ cảnh thay vì điều hướng toàn cục, mà còn đồng thời vi phạm guideline số 8 khi chỉ ẩn một hành động
10. Bắt buộc bảo đảm khả năng truy cập bằng bàn phím·screen reader
- Menu ngữ cảnh phải có thể được sử dụng không chỉ bởi người dùng chuột hoặc cảm ứng, mà còn cần có cấu trúc mở và điều hướng được bằng bàn phím và screen reader
- Menu cần có thể được mở và di chuyển bằng Tab·Enter·phím mũi tên, và các mục trong menu cũng phải được screen reader đọc, nhận focus và có thể kích hoạt
- Cần tránh các menu chỉ truy cập được bằng click·tap, hoặc các tương tác tùy biến phá vỡ pattern khả năng truy cập tiêu chuẩn
- Thiết kế ưu tiên accessibility không chỉ mang lại hiệu quả cho người dùng khuyết tật mà còn cho cả power user, đồng thời góp phần tuân thủ các tiêu chuẩn thiết kế bao trùm
Kết luận
- Menu ngữ cảnh là công cụ mạnh mẽ giúp giữ giao diện đơn giản nhưng vẫn cung cấp được các hành động bổ sung khi cần
- Nó đặc biệt hữu ích như một pattern dọn gọn bố cục và chỉ mở thêm tùy chọn khi người dùng đang tập trung vào tác vụ cần đến chúng
- Tuy nhiên, vì đây là cấu trúc có giới hạn về khả năng được phát hiện và độ rõ ràng, nên việc sử dụng luôn cần thận trọng
- Chỉ nên dùng cho các hành động thật sự thứ cấp, với thiết kế có tính đến vị trí, tính nhất quán, information scent và accessibility
- Thông điệp cốt lõi là phải cân bằng giữa chủ nghĩa tối giản về mặt thị giác và usability thực tế,
- Menu ngữ cảnh phát huy hiệu quả lớn nhất khi được dùng như công cụ sắp xếp giao diện mà không che giấu luồng thao tác cốt lõi
1 bình luận
Thỉnh thoảng tôi có chỉnh sửa frontend chạy trên intranet nội bộ của công ty, và từng bị mắng vì đưa mấy biểu tượng như ☰ ⋮ ⋯ + vào dashboard mà ban lãnh đạo xem. Họ hỏi chức năng nọ kia biến đâu mất rồi, tôi bảo là bấm nút này là được, thì họ lại nói là không nhìn thấy, cứ viết thẳng bằng văn bản đi, rồi phàn nàn đủ thứ... Cuối cùng có lần tôi phải đưa nó quay lại giao diện kiểu những năm 2000 như trước. Có lẽ chuyện gì cũng vậy, nhưng frontend đúng là khó thật.