Khi người dùng không biết phải bấm vào đâu
Bạn đã bao giờ sử dụng một website hoặc ứng dụng có giao diện rất đẹp, bố cục gọn gàng, màu sắc hài hòa nhưng lại không biết phải bấm vào đâu để thực hiện thao tác mình muốn?
Một dòng chữ trông giống văn bản thông thường nhưng thực chất lại là đường dẫn. Một chiếc card chứa đầy đủ thông tin nhưng không có bất kỳ dấu hiệu nào cho thấy nó có thể được nhấp vào. Hay một danh sách có hỗ trợ kéo thả, nhưng người dùng chỉ phát hiện ra tính năng đó sau khi vô tình di chuyển một phần tử.
Những tình huống này không nhất thiết xuất phát từ việc thiếu chức năng. Vấn đề nằm ở chỗ giao diện không truyền đạt rõ ràng những gì người dùng có thể thực hiện.
Trong thiết kế UI/UX, chúng ta thường dành nhiều sự quan tâm cho bố cục, màu sắc, typography và tính thẩm mỹ. Tuy nhiên, một giao diện đẹp không đồng nghĩa với một giao diện dễ sử dụng.
Người dùng không nên phải thử bấm vào từng thành phần để tìm hiểu chức năng của chúng. Lý tưởng nhất, chỉ cần quan sát giao diện, họ đã có thể nhận biết đâu là nơi có thể tương tác và phần nào chỉ dùng để hiển thị thông tin.
Đây chính là lúc hai khái niệm Affordance và Signifiers phát huy vai trò của mình.
Affordance & Signifiers là gì?
Affordance và Signifiers là hai khái niệm quan trọng trong thiết kế tương tác, được Don Norman đề cập trong cuốn sách The Design of Everyday Things.
Mặc dù thường xuất hiện cùng nhau, chúng không mang ý nghĩa giống nhau.
Affordance - Khả năng tương tác
Affordance đề cập đến những hành động có thể thực hiện được dựa trên mối quan hệ giữa đặc tính của một đối tượng và khả năng của người sử dụng.
Trong đời sống, một chiếc ghế cho phép chúng ta ngồi, một tay nắm cửa cho phép chúng ta cầm và kéo, còn một công tắc cho phép chúng ta bật hoặc tắt thiết bị.
Trong môi trường kỹ thuật số, một button có thể hỗ trợ thao tác nhấn, một vùng nhập liệu cho phép nhập văn bản và một danh sách có thể được thiết kế để sắp xếp lại bằng thao tác kéo thả.
Tuy nhiên, việc một đối tượng hỗ trợ hành động nào đó không đồng nghĩa với việc người dùng sẽ tự động nhận biết được hành động ấy.
Signifiers - Dấu hiệu nhận biết tương tác
Signifiers là những tín hiệu giúp người dùng nhận biết vị trí, cách thức hoặc khả năng thực hiện một hành động.
Ví dụ:
Một button có hình dạng, màu nền hoặc đường viền khác biệt so với nội dung xung quanh.
Một đường link được gạch chân để thể hiện rằng người dùng có thể nhấp vào.
Một biểu tượng sáu chấm xuất hiện bên cạnh phần tử để gợi ý chức năng kéo thả.
Một mũi tên nằm cuối card để gợi ý rằng card có thể dẫn đến trang chi tiết.
Nếu Affordance liên quan đến những gì người dùng có thể làm, thì Signifiers giúp họ nhận biết nên tương tác ở đâu và bằng cách nào.
Feedback - Phản hồi sau tương tác
Bên cạnh Affordance và Signifiers, Feedback cũng đóng vai trò quan trọng trong việc hoàn thiện trải nghiệm.
Khi người dùng nhấn một button, giao diện có thể thay đổi trạng thái, hiển thị loading hoặc thông báo kết quả để xác nhận rằng hành động đã được ghi nhận.
Điểm khác biệt nằm ở thời điểm: Signifier giúp người dùng nhận diện hành động trước khi thực hiện, còn Feedback giúp họ hiểu điều gì đang hoặc đã xảy ra sau hành động.
Một giao diện tốt cần kết hợp cả ba yếu tố, thay vì chỉ tập trung vào việc khiến thành phần trông có thể tương tác.
Vì sao Signifiers quan trọng trong UI/UX?
Signifiers không đơn thuần là yếu tố trang trí. Chúng có thể ảnh hưởng trực tiếp đến cách người dùng khám phá, hiểu và sử dụng giao diện.
Discoverability - Khả năng khám phá
Discoverability thể hiện mức độ dễ dàng để người dùng nhận ra những chức năng hoặc hành động có sẵn.
Hãy tưởng tượng một card sản phẩm có thể mở trang chi tiết khi được nhấp vào. Tuy nhiên, card không có CTA, biểu tượng điều hướng hay bất kỳ dấu hiệu trực quan nào để phân biệt với những khối nội dung tĩnh.
Về mặt kỹ thuật, chức năng vẫn hoạt động bình thường. Nhưng nếu người dùng không nhận ra khả năng tương tác, chức năng đó có thể bị bỏ qua.
Signifier phù hợp giúp thu hẹp khoảng cách giữa việc chức năng tồn tại và việc người dùng khám phá được chức năng.
Predictability - Khả năng dự đoán
Một thành phần có thể bấm chưa đủ. Người dùng còn cần hiểu điều gì có khả năng xảy ra khi họ bấm vào đó.
Ví dụ, một button có nhãn "Xem chi tiết" giúp người dùng dự đoán rằng họ sẽ được chuyển đến nội dung đầy đủ hơn.
Ngược lại, một icon không rõ nghĩa hoặc một thành phần thiếu nhãn có thể khiến họ do dự vì không biết hành động tiếp theo sẽ dẫn đến đâu.
Khả năng dự đoán càng rõ ràng, trải nghiệm càng trở nên tự nhiên và đáng tin cậy.
Cognitive Load - Giảm tải nhận thức
Mỗi lần người dùng phải dừng lại để suy nghĩ "Chỗ này có bấm được không?" hoặc "Biểu tượng này dùng để làm gì?", họ đang tiêu tốn thêm nguồn lực nhận thức.
Những sự do dự nhỏ có thể không gây ra vấn đề lớn nếu chỉ xuất hiện một lần. Tuy nhiên, khi chúng lặp lại xuyên suốt hành trình sử dụng, trải nghiệm sẽ trở nên thiếu liền mạch.
Signifiers rõ ràng và nhất quán giúp giảm nhu cầu thử sai, ghi nhớ hoặc suy đoán.
Mục tiêu không phải là khiến người dùng chú ý đến mọi thành phần, mà là giúp họ dễ dàng nhận ra hành động cần thiết vào đúng thời điểm.
Những Signifiers dễ bị bỏ qua trong thiết kế giao diện
Trong thực tế, không phải lúc nào designer cũng bỏ quên signifier. Đôi khi, chúng bị loại bỏ có chủ đích để giao diện trông sạch sẽ và tối giản hơn.
Tuy nhiên, sự tối giản không phù hợp có thể làm mất đi những tín hiệu mà người dùng cần để hiểu cách tương tác.
Dưới đây là năm trường hợp thường gặp.
Button - Khi nút bấm không giống nút bấm
Button là một trong những thành phần tương tác phổ biến nhất của giao diện.
Thông thường, button có thể được nhận biết thông qua hình dạng, màu sắc, đường viền, khoảng đệm hoặc sự khác biệt trực quan với những thành phần xung quanh.
Tuy nhiên, xu hướng thiết kế phẳng khiến một số button được giản lược đến mức chỉ còn lại một dòng chữ.
Điều này không phải lúc nào cũng sai. Text Button là một pattern hợp lệ trong nhiều design system, đặc biệt đối với các hành động ít quan trọng hoặc được đặt trong ngữ cảnh rõ ràng.
Vấn đề xuất hiện khi người dùng không thể phân biệt text button với văn bản thông thường.
Ví dụ Before/After:
Before: Hành động "Lưu thay đổi" được thể hiện bằng một dòng chữ có kiểu dáng gần như giống label.
After: Hành động được đặt trong button có mức độ nổi bật phù hợp, khoảng đệm rõ ràng và trạng thái tương tác nhất quán.
Khi thiết kế button, designer cần cân nhắc mức độ quan trọng của hành động, sự khác biệt với nội dung tĩnh và khả năng nhận diện trong ngữ cảnh sử dụng.
Không phải button nào cũng cần màu nền nổi bật, nhưng mọi button đều cần đủ rõ ràng để người dùng nhận biết chức năng của nó.
Link - Khi đường dẫn hòa vào văn bản
Link thường xuất hiện trong bài viết, trang thông tin, biểu mẫu hoặc những thành phần điều hướng.
Một vấn đề phổ biến là link được thiết kế quá giống văn bản xung quanh, đặc biệt khi toàn bộ nội dung sử dụng cùng một màu sắc và kiểu chữ.
Khi đó, người dùng có thể đọc lướt qua mà không nhận ra sự tồn tại của đường dẫn.
Gạch chân là một signifier quen thuộc giúp người dùng nhận biết hyperlink, nhất là trong các đoạn văn bản dài.
Màu sắc cũng có thể hỗ trợ việc phân biệt, nhưng không nên là dấu hiệu duy nhất, vì khả năng nhận diện màu sắc khác nhau giữa các người dùng và điều kiện hiển thị.
Ví dụ Before/After:
Before: Cụm từ "Điều khoản sử dụng" nằm giữa đoạn văn và có hình thức giống hoàn toàn với nội dung xung quanh.
After: Cụm từ được thể hiện bằng màu link kết hợp gạch chân, giúp người dùng nhận diện khả năng điều hướng.
Một đường link được thiết kế tốt không chỉ cần dễ nhìn thấy, mà còn phải truyền đạt rõ nội dung hoặc đích đến của nó.
Clickable Card - Có thể bấm nhưng không ai biết
Card là một thành phần phổ biến trong dashboard, trang sản phẩm, danh sách bài viết hoặc giao diện quản lý.
Tuy nhiên, không phải card nào cũng có chức năng giống nhau.
Một số card chỉ dùng để hiển thị thông tin, trong khi những card khác cho phép người dùng nhấp vào toàn bộ vùng để mở trang chi tiết.
Nếu hai loại card này được thiết kế gần như giống hệt nhau, người dùng có thể gặp khó khăn trong việc phân biệt.
Một số signifier thường được sử dụng cho clickable card bao gồm mũi tên điều hướng, CTA, sự thay đổi trạng thái khi tương tác hoặc cách thể hiện nội dung gợi ý rõ ràng về hành động.
Ví dụ Before/After:
Before: Card hiển thị tên dự án, mô tả và trạng thái, nhưng không có tín hiệu nào cho thấy card có thể mở trang chi tiết.
After: Card được bổ sung nhãn "Xem chi tiết" hoặc biểu tượng điều hướng phù hợp, đồng thời có trạng thái focus và hover nhất quán.
Tuy nhiên, không nhất thiết phải thêm button hay icon vào mọi clickable card. Trong nhiều trường hợp, sự nhất quán của toàn bộ hệ thống và ngữ cảnh hiển thị đã đủ để người dùng hiểu cách tương tác.
Một lưu ý quan trọng khác là khi card chứa nhiều hành động, chẳng hạn vừa mở chi tiết vừa có menu tùy chọn, designer cần làm rõ từng vùng tương tác để hạn chế nhấn nhầm.
Drag Handle - Chức năng kéo thả bị ẩn
Drag & Drop là một kiểu tương tác thường gặp trong Kanban Board, danh sách công việc, trình sắp xếp thứ tự hoặc các công cụ quản lý nội dung.
Mặc dù khá trực quan khi đã biết cách sử dụng, chức năng kéo thả lại không phải lúc nào cũng dễ được khám phá.
Nếu một danh sách không có bất kỳ dấu hiệu nào, người dùng có thể mặc định rằng các phần tử chỉ có thể xem hoặc nhấp vào.
Drag Handle, thường được thể hiện qua biểu tượng nhiều chấm hoặc đường ngang, đóng vai trò là một signifier giúp người dùng nhận biết vị trí có thể kéo.
Ví dụ Before/After:
Before: Danh sách hiển thị các mục công việc nhưng không có dấu hiệu cho thấy thứ tự có thể thay đổi.
After: Mỗi mục có biểu tượng drag handle rõ ràng, đồng thời cung cấp phản hồi khi người dùng bắt đầu và kết thúc thao tác kéo.
Trên desktop, cursor và trạng thái hover có thể giúp tăng khả năng nhận diện. Tuy nhiên, chúng không thay thế hoàn toàn cho dấu hiệu hiển thị mặc định.
Đối với mobile, nơi không có hover tương đương, vị trí và hình thức của drag handle càng cần được cân nhắc.
Ngoài ra, chức năng sắp xếp lại nội dung nên có phương án hỗ trợ người dùng bàn phím hoặc những người gặp khó khăn khi thực hiện thao tác kéo thả.
Icon-only Button - Khi icon không đủ để giải thích
Icon giúp tiết kiệm không gian và tạo ra giao diện gọn gàng. Tuy nhiên, không phải icon nào cũng dễ hiểu đối với tất cả người dùng.
Một số biểu tượng quen thuộc như kính lúp để tìm kiếm hoặc dấu X để đóng thường có mức độ nhận diện cao.
Ngược lại, những biểu tượng ít phổ biến hoặc mang nhiều ý nghĩa có thể khiến người dùng phải suy đoán.
Ví dụ, một icon hình ngôi sao có thể đại diện cho đánh dấu yêu thích, lưu nội dung hoặc đánh giá, tùy theo ngữ cảnh.
Ví dụ Before/After:
Before: Một thanh công cụ chỉ chứa các icon không có nhãn và một số biểu tượng khó phân biệt về chức năng.
After: Những hành động quan trọng hoặc ít quen thuộc được bổ sung text label; các icon còn lại có tooltip khi phù hợp và tên truy cập dành cho công nghệ hỗ trợ.
Tooltip có thể hữu ích để giải thích thêm chức năng trên desktop, nhưng không nên là cách duy nhất để người dùng khám phá một hành động quan trọng.
Đặc biệt, với các hành động có rủi ro cao như xóa dữ liệu, việc sử dụng nhãn rõ nghĩa và cơ chế xác nhận phù hợp quan trọng hơn việc chỉ dựa vào một icon.
Minimalism: Khi tối giản vô tình che giấu tương tác
Minimalism là một xu hướng có ảnh hưởng lớn trong thiết kế giao diện hiện đại.
Bằng cách giảm bớt các yếu tố trang trí, designer có thể tạo ra sản phẩm có bố cục sạch sẽ, dễ tập trung và có tính thẩm mỹ cao.
Tuy nhiên, có một ranh giới cần được cân nhắc giữa tối giản yếu tố không cần thiết và loại bỏ những dấu hiệu giúp người dùng hiểu cách sử dụng.
Một button mất đi màu nền và đường viền có thể trông tinh tế hơn, nhưng cũng có thể trở nên khó nhận diện.
Một hyperlink bỏ gạch chân có thể giúp đoạn văn trông đồng nhất hơn, nhưng lại làm giảm khả năng khám phá đường dẫn.
Một card được loại bỏ toàn bộ tín hiệu điều hướng có thể khiến giao diện gọn gàng hơn, nhưng đồng thời làm mờ đi khả năng tương tác của nó.
Điều đó không có nghĩa Minimalism là một phương pháp thiết kế kém hiệu quả. Ngược lại, tối giản đúng cách có thể cải thiện đáng kể trải nghiệm.
Vấn đề nằm ở cách designer xác định đâu là chi tiết trang trí có thể loại bỏ và đâu là tín hiệu chức năng cần được giữ lại.
Một giao diện tối giản hiệu quả không nhất thiết phải có nhiều border, shadow hoặc button nổi bật. Thay vào đó, nó cần sử dụng những dấu hiệu trực quan một cách có chủ đích và nhất quán.
Tối giản không phải là làm mọi thứ trở nên vô hình, mà là loại bỏ sự dư thừa trong khi vẫn giữ được sự rõ ràng.
Làm thế nào để thiết kế Signifiers hiệu quả?
Không tồn tại một công thức duy nhất phù hợp với mọi giao diện. Tuy nhiên, designer có thể dựa trên một số nguyên tắc để cải thiện khả năng nhận diện tương tác.
Clarity - Rõ ràng
Một thành phần tương tác cần có dấu hiệu đủ rõ để người dùng nhận biết chức năng của nó.
Hãy tự hỏi: Nếu người dùng chỉ nhìn vào giao diện mà chưa từng sử dụng sản phẩm, họ có hiểu thành phần này dùng để làm gì không?
Consistency - Nhất quán
Những thành phần có chức năng tương tự nên sử dụng ngôn ngữ thiết kế nhất quán.
Nếu clickable card ở màn hình này có mũi tên điều hướng, trong khi card tương tự ở màn hình khác hoàn toàn không có dấu hiệu, người dùng sẽ khó hình thành kỳ vọng ổn định.
Một design system nhất quán giúp người dùng tận dụng những gì đã học từ các màn hình trước đó.
Visual Hierarchy - Phân cấp thị giác
Không phải tất cả hành động đều cần mức độ nổi bật ngang nhau.
Primary Action nên được ưu tiên nhận diện, trong khi Secondary hoặc Tertiary Action có thể được thể hiện nhẹ nhàng hơn.
Mục tiêu là giúp người dùng dễ dàng xác định hành động quan trọng, tránh tình trạng quá nhiều thành phần cùng cạnh tranh sự chú ý.
Feedback & Interaction States - Trạng thái tương tác
Một thành phần cần thể hiện trạng thái phù hợp trong quá trình sử dụng.
Các trạng thái như hover, focus, pressed, disabled hoặc loading giúp người dùng hiểu diễn biến của tương tác và trạng thái hiện tại của hệ thống.
Tuy nhiên, các trạng thái này không thay thế cho signifier ban đầu. Một chức năng chỉ trở nên dễ nhận biết sau khi người dùng vô tình rê chuột hoặc nhấn vào vẫn có thể gặp vấn đề về discoverability.
Accessibility - Khả năng tiếp cận
Signifier cần được xem xét trong nhiều điều kiện sử dụng khác nhau.
Một thành phần chỉ thay đổi khi hover có thể khó khám phá trên thiết bị cảm ứng. Một đường link chỉ được phân biệt bằng màu sắc có thể gây khó khăn cho một số người dùng. Một button chỉ có icon nhưng không có tên truy cập có thể không truyền đạt đúng chức năng cho người sử dụng trình đọc màn hình.
Vì vậy, cần kết hợp dấu hiệu trực quan với cấu trúc tương tác phù hợp, hỗ trợ bàn phím, nhãn truy cập và vùng tương tác đủ dễ sử dụng.
Thiết kế tốt không chỉ giúp giao diện dễ hiểu với phần lớn người dùng, mà còn cần cân nhắc những cách thức tương tác khác nhau.
Kết luận - Thiết kế tốt không bắt người dùng phải đoán
Affordance và Signifiers nhắc chúng ta rằng thiết kế giao diện không chỉ dừng lại ở việc tạo ra những thành phần có chức năng.
Bởi cuối cùng, giá trị của một giao diện không chỉ nằm ở những gì nó cho phép người dùng thực hiện, mà còn ở việc người dùng có dễ dàng hiểu được những khả năng ấy hay không.
