Có một thuật ngữ UX xuất hiện trong hầu như mọi hành động của mình hằng ngày, tuy nhiên phải đến gần đây, khi bắt đầu tìm hiểu sâu hơn về ngành này thì mình mới thực sự chú ý tới sự có mặt của nó và nhận ra rằng nó quan trọng như thế nào. Thuật ngữ mà mình nói đến ở đây chính là Affordance.

Affordance là gì?

Affordance có thể hiểu là việc 1 vật mà thông qua thiết kế của nó, người dùng có thể đoán được vật đó là gì, được dùng để làm gì, có chức năng gì, cũng như làm thế nào để tương tác với nó mà không cần tới hướng dẫn sử dụng. Affordance cũng có thể được dùng để ngầm ám chỉ rằng đâu là những tác vụ không thể thực hiện được với 1 vật. (Trường hợp này còn được gọi là Negative Affordances và là mục mình sẽ đề cập đến ở phần sau của bài viết).

Trên thực tế, có nhiều cách để gợi ý cho người dùng nên affordance có thể là bất cứ đặc điểm gì của 1 vật, miễn là đặc điểm đó cung cấp cho người dùng gợi ý về việc họ nên dùng hoặc tương tác với vật đó như thế nào. Affordance có thể thấy ở sản phẩm vật lý và sản phẩm kỹ thuật số.

Trình bày định nghĩa như thế đủ rồi đấy, cho tôi xem thử 1 ví dụ xem nào!

Có ngay đây!

Ví dụ, dựa vào hình dáng của tay nắm cửa (cần ngang hay tay nắm tròn), ta có thể biết được liệu mình nên xoay tay nắm hay đẩy tay nắm xuống dưới để mở cửa. Nên nói tóm lại thì Affordance liên quan đến những tương tác có thể xảy ra giữa người dùng và sản phẩm.

Vậy thì cũng đơn giản nhỉ?

​Không hẳn như vậy đâu bạn à! Lý do là bởi bản thân Affordance cũng có nhiều biến thể và Designer có thể áp dụng các loại affordance khác nhau trong các trường hợp khác nhau. Cùng mình tìm hiểu sâu hơn nhé!

Các loại Affordance trong UX

Affordance ẩn (hidden affordance): Người dùng chỉ nhận ra affordance ẩn khi họ đã bắt đầu thực hiện 1 tác vụ nhất định hoặc tương tác với một đối tượng. Chẳng hạn, thao tác rê chuột và sau đó menu được mở rộng ra hoặc xổ dọc xuống là một ví dụ mà chúng ta đã thấy rất nhiều khi lướt web. Tuy nhiên, vì affordance ẩn được giấu đi, đôi khi người dùng có thể không nhận ra sự có mặt của nó. Vậy nên chúng ta chỉ dùng nó với những thông tin không quan trọng nhằm giúp người dùng tập trung vào các tác vụ hoặc các thông tin chính.

Pattern affordances: Là affordance được xây dựng dựa trên những gì được coi là quy chuẩn từ trước, ví dụ như các đường link sẽ có phần gạch chân, hoặc tab menu sẽ được ẩn sau hamburger menu. Pattern affordance cũng là loại affordance phổ biến nhất. Là một designer, ta nên học cách áp dụng và nương theo những quy tắc này để thiết kế ra những sản phẩm mà người dùng có thể dễ dàng và nhanh chóng làm quen với việc sử dụng.

Metaphore affordance: Được tạo nên dựa trên hình ảnh của các vật ngoài đời => Loại affordance này thường được tìm thấy trong các sản phẩm digital, ví dụ như biểu tượng thùng rác để xoá file, biểu tượng đĩa mềm để lưu file, biểu tượng công tắc để tắt hoặc bật thông báo, …

False affordance: ví dụ về loại affordance này là khi người dùng nhìn vào sản phẩm, họ nghĩ rằng họ có thể thực hiện tác vụ A trong khi thực tế họ không thể thực hiện được điều đó mà chỉ có thể thực hiện tác vụ B. Và họ chỉ có thể khám phá ra điều đó khi đã thử thực hiện tác vụ A. False affordance thường là nguyên nhân gây ra những bối rối nhất định cho người dùng, từ đó đem lại cho họ trải nghiệm không tốt khi sử dụng sản phẩm. Vì vậy, trong hầu hết trường hợp, ta nên tránh để thiết kế của mình xuất hiện False affordance.

Negative affordance: thường được sử dụng để thông báo cho người dùng rằng họ cung cấp chưa đủ thông tin và ngăn người dùng tiến đến bước tiếp theo. Ví dụ người dùng chưa điền số điện thoại thì không thể bấm nút nhận OTP được. Nút bấm này khi đó sẽ có màu xám

Vậy tóm lại cái affordance mà ông nói có tác dụng gì?

Cứ bình tĩnh bạn ơi, đọc tiếp phần sau sẽ rõ ngay!

Vai trò của Affordance trong thiết kế UX

Một sản phẩm cần phải dùng đến hướng dẫn sử dụng là một sản phẩm có thiết kế chưa tốt. Hay nói cách khác, một sản phẩm tốt sẽ là một sản phẩm mà chỉ cần dựa vào thiết kế của nó, người dùng có thể đoán ra được cách sử dụng – tức là sản phẩm có affordances tốt.

Ngược lại, một sản phẩm với affordances tệ hoặc thiếu đi affordances có thể đem đến những trải nghiệm không mấy dễ chịu cho người dùng. Người dùng khi đó sẽ phải thử nhiều cách khác nhau để tương tác với sản phẩm và do đó, họ có thể mắc lỗi và gặp những khó khăn nhất định trước khi khám phá ra cách dùng đúng. Điều này làm quá trình sử dụng sản phẩm của họ trở nên tốn thời gian và công sức hơn rất rất nhiều. Một hậu quả nữa có thể kể đến là cảm xúc tiêu cực của người dùng khi sử dụng sản phẩm. Họ có thể tức giận hay cảm thấy bản thân thật kém cỏi khi không tìm được cách sử dụng được sản phẩm. Là những designer, chúng ta nên cố gắng để loại bỏ những cảm xúc tiêu cực đó của người dùng, cốt là để họ có trải nghiệm vui vẻ nhất có thể khi sử dụng sản phẩm.

Khi được áp dụng đúng, affordances giúp giảm thiểu lỗi từ người dùng cũng như giúp người dùng không phải nghĩ quá nhiều khi sử dụng sản phẩm, từ đó tạo ra trải nghiệm sử dụng tốt hơn và làm tăng tỷ lệ chuyển đổi.

​Vì những lý do kể trên, các designer nên hướng đến việc thiết kế 1 sản phẩm mà nhìn vào đó người dùng có thể đoán ra được cách sử dụng ngay, mặc dù đó là lần đầu họ sử dụng.

​Nghe cũng thuyết phục hơn rồi đấy, thế còn gì mà tôi cần biết liên quan đến cái affordance này nữa không?

​Có đấy bạn ạ! Đọc tiếp phần sau nhé

Bonus (Signifier)

Ngoài ra còn có 1 khái niệm khác khá giống với affordance mà nhiều người bao gồm cả bản thân mình đôi khi cũng vẫn nhầm lẫn, đó chính là signifier. Khi nhìn vào 1 sản phẩm, affordance cho người dùng biết họ có thể thực hiện tương tác gì với sản phẩm, còn signifier cho họ biết rằng tương tác đó nên được thực hiện ở vị trí nào trên sản phẩm. Signifier có thể là tín hiệu đèn, âm thanh, ký hiệu hình học hay nhãn dán chỉ dẫn, … Mình biết cách giải thích này hơi khùng khoằm nhưng hy vọng là mọi người có thể hình dung ra đôi chút qua 1 ví dụ mà trước đây mình đã đọc được. Khi nhìn xuống đường, đặc điểm “1 mặt phẳng chắc chắn, cứng cáp với diện tích đủ lớn” là affordance cho ta biết rằng mình có thể đi bộ trên đó. Nhưng vạch kẻ đường cho người đi bộ là signifier. Vì nó cho người đi bộ biết đâu là vị trí mà họ nên đi để đảm bảo an toàn.

Trong thiết kế, chúng ta cần cả affordance và signifier để giúp người dùng nhanh chóng hiểu được cách tương tác với sản phẩm.

Đây là bài viết tóm tắt những gì mình biết và tìm hiểu được về Affordance - một trong những quy tắc cơ bản đối với các UX Designer. Hi vọng rằng hôm này bạn đã học được điều gì đó hữu ích từ những chia sẻ này của mình.