Đến nội dung chính
Thư viện GKNơi khơi nguồn tò mò
Tiếng Việt

Thiết kế cho thấy cách hành động: Affordance

Bạn đã bao giờ đứng trước một cánh cửa và phân vân nên kéo hay đẩy tay nắm chưa? Một tay nắm được thiết kế tốt sẽ chỉ cho bàn tay cách thao tác, như thể đang nói “hãy cầm như thế này” mà không cần lời nào. Trong ngành thiết kế, đặc tính của đồ vật gợi ý cho người dùng những hành động có thể thực hiện này được gọi là “khả năng hành động (Affordance)”.

Nói đơn giản, khả năng hành động là “mối quan hệ trong đó các đặc tính vật lý và tri giác của đối tượng khiến người dùng có thể hoặc được khuyến khích thực hiện một hành động nào đó”. Đó chính là cảm giác ngón tay tự nhiên hướng đến một nút hơi nhô lên, dù trên nút không ghi “hãy nhấn”.

Tài liệu này trình bày một cách dễ hiểu từ góc nhìn thiết kế, từ bối cảnh ra đời của khả năng hành động và khái niệm khả năng hành động được cảm nhận, đến mối quan hệ với dấu hiệu chỉ dẫn (Signifier) và ràng buộc, các ví dụ trong đời sống và môi trường số, cùng những điểm thiết kế cần kiểm tra trong thực tiễn.


Khái niệm và thiết kế khả năng hành động

Khả năng hành động là gì?

Khái niệm khả năng hành động

Thuật ngữ khả năng hành động được nhà tâm lý học sinh thái James J. Gibson đề xuất vào thập niên 1970. Đối với ông, khả năng hành động chính là “những khả năng thực hiện hành động mà môi trường cung cấp cho sinh vật”. Mặt đất bằng phẳng cho phép đi lại và ngồi, còn phần nhô ra có kích thước như tay nắm cho phép cầm nắm. Mối quan hệ này vốn đã tồn tại trong thế giới vật lý, bất kể lời quảng cáo.

Người phổ biến thuật ngữ này trong thực tiễn thiết kế là Donald A. Norman. Trong cuốn “Thiết kế và tâm lý con người”, ông nhấn mạnh rằng điều nhà thiết kế thực sự có thể tác động không chỉ là “khả năng thực tế”, mà còn là “cách người dùng nhận ra” khả năng đó. Vì vậy, về sau Norman đã phân biệt “khả năng hành động được cảm nhận (Perceived Affordance)” và “dấu hiệu chỉ dẫn (Signifier)” nhằm giảm hiểu lầm.

  • Khả năng hành động thực tế (Real Affordance): Là hành động mà đối tượng cho phép về mặt vật lý. Nút trên màn hình thực ra không thể được “nhấn” mà chỉ có thể chạm hoặc nhấp chuột.
  • Khả năng hành động được cảm nhận (Perceived Affordance): Là hành động mà người dùng nhìn thấy và cảm thấy “có vẻ có thể thực hiện”. Bóng đổ, cảm giác nổi khối và sự thay đổi của con trỏ tạo nên khả năng này.

Thiết kế tốt làm cho khả năng thực tế và khả năng được cảm nhận khớp nhau. Nếu một cánh cửa cần đẩy để mở lại chỉ có tay nắm gợi ý kéo, thực tế và cảm nhận sẽ lệch nhau, tạo nên một trường hợp thiết kế thất bại nổi tiếng như “cánh cửa Norman”.


Dấu hiệu chỉ dẫn và ràng buộc: hai trụ cột làm rõ khả năng hành động

Chỉ riêng khả năng hành động không thể khiến mọi hành động trở nên rõ ràng. Norman gọi những manh mối giúp người dùng tìm ra hành động đúng là “dấu hiệu chỉ dẫn (Signifier)”, và gọi những cơ chế ngăn chặn hoặc giới hạn hành động sai là “ràng buộc (Constraint)”.

(1) Dấu hiệu chỉ dẫn (Signifier)
Đây là những dấu hiệu chỉ ra “thao tác ở đây, theo cách này”, chẳng hạn chữ màu xanh có gạch chân, mũi tên “Tiếp theo” hay đường cong của rãnh tay nắm. Dấu hiệu chỉ dẫn không phải bản thân khả năng hành động, nhưng là tín hiệu làm tăng khả năng hành động được cảm nhận.

(2) Ràng buộc vật lý (Physical Constraint)
Ràng buộc này giới hạn về mặt vật lý phạm vi mà cơ thể và công cụ cho phép, như hình dạng đầu cắm USB-A chỉ vừa theo một chiều. Đó là thiết kế khiến đầu cắm không thể cắm vào nếu không đúng chiều.

(3) Ràng buộc logic và văn hóa
Các ví dụ thuộc nhóm này gồm quy ước theo hướng đọc rằng bên trái là “Trước”, bên phải là “Tiếp theo”, hay quy ước văn hóa rằng màu đỏ có nghĩa là nguy hiểm hoặc dừng lại. Nếu bỏ qua yếu tố văn hóa, dấu hiệu chỉ dẫn sẽ phản tác dụng.

(4) Chức năng cưỡng chế (Forcing Function)
Đây là ràng buộc mạnh khiến người dùng không thể bỏ qua hành động bắt buộc, như trình tự phải rút thẻ ra mới nhận được tiền mặt tại ATM. Cơ chế này thường được dùng để bảo đảm an toàn và ngăn ngừa lỗi.

Khả năng hành động, dấu hiệu chỉ dẫn và ràng buộc không thay thế cho nhau. Việc kiểm tra thiết kế sẽ dễ dàng hơn nếu hiểu chúng như một cấu trúc tam giác: khả năng hành động đặt nền tảng cho “có thể làm gì”, dấu hiệu chỉ dẫn làm rõ “ở đâu và bằng cách nào”, còn ràng buộc chặn “những hướng không được thực hiện”.


Hiểu khả năng hành động qua những ví dụ đơn giản

Khái niệm trừu tượng trở nên rõ ràng ngay khi ta chạm tay vào. Các trường hợp thường gặp trong đời sống và trên màn hình được chia thành ba nhóm.

[Ví dụ 1] Cửa và tay nắm

Cánh cửa chỉ có một tấm kim loại phẳng gợi ý mạnh mẽ hành động “đẩy”, còn tay nắm dạng vòng gợi ý hành động “kéo”. Vấn đề xuất hiện khi tay nắm dạng vòng được gắn lên cánh cửa cần đẩy. Khi khả năng hành động được cảm nhận xung đột với thao tác thực tế, người dùng sẽ khựng lại mỗi lần sử dụng.

[Ví dụ 2] Nắp chai và công tắc

Nắp có ren lộ rõ cho thấy cách “vặn”, còn phần nhô ra của công tắc gạt lớn cho thấy cách “gạt”. Ngược lại, công tắc đèn chỉ có một bảng cảm ứng nhẵn dù thực tế có thể chạm để thao tác, nhưng khả năng hành động lại không rõ với người mới sử dụng, khiến họ phải dựa vào nhãn dán chỉ dẫn.

[Ví dụ 3] Nút ứng dụng và giao diện dạng thẻ

Bóng đổ tạo cảm giác hơi nổi lên, hiệu ứng khi nhấn và sự tương phản màu sắc giữa trạng thái hoạt động và vô hiệu hóa là những khả năng hành động được cảm nhận trên màn hình số. Khi danh sách dạng thẻ trông như bị cắt bớt một chút ở hai bên, nó gợi ý rằng “có thể vuốt”; còn khi mép cắt khớp vừa vặn, khả năng cuộn lại khó nhận ra.

Điểm chung của các ví dụ này là “hình dạng và phản hồi” hướng dẫn hành động thay cho sách hướng dẫn. Khả năng hành động phát huy vai trò khi người dùng có thể đoán được thao tác tiếp theo mà không phải thử rồi sai.


Cách kiểm tra khả năng hành động trong thực tiễn

Nếu thu hẹp khả năng hành động thành những “nút nổi đẹp mắt”, thiết kế sẽ trở nên nghèo nàn. Khi xây dựng giao diện cho sản phẩm, dịch vụ và nội dung, nên tạo thói quen kiểm tra những điểm dưới đây.

(1) Thực hiện bài kiểm tra 5 giây đầu tiên
Cho người dùng xem màn hình hoặc mẫu thử mà không giải thích, rồi chỉ hỏi: “Bạn nghĩ mình có thể làm gì lúc này?” Nếu câu trả lời lệch với hành động mong đợi, khả năng hành động được cảm nhận hoặc dấu hiệu chỉ dẫn còn thiếu.

(2) Ghi thực tế và cảm nhận cạnh nhau
Ghi “hành động có thể thực hiện” và “hành động người dùng phỏng đoán” thành hai cột để so sánh. Nếu thấy khoảng trống hoặc xung đột, hãy bổ sung dấu hiệu chỉ dẫn bằng hình dạng, chuyển động hoặc câu chữ.

(3) Không chỉ dựa vào dấu hiệu chỉ dẫn
Giao diện chỉ có thể vận hành nhờ dòng chữ “Hãy nhấp vào đây” là dấu hiệu cho thấy chỉ dẫn quá nhiều nhưng khả năng hành động lại thiếu. Hãy dùng hình dạng, vị trí và phản hồi để làm rõ cách hành động trước, rồi để câu chữ đóng vai trò hỗ trợ.

(4) Đồng thời xem xét khả năng tiếp cận
Các nút chỉ được phân biệt bằng màu sắc hay cách thao tác chỉ cho phép cử chỉ cần chuyển động tay lớn sẽ khiến một số người dùng không thể tiếp cận khả năng hành động. Khả năng hành động bao trùm là bảo đảm mọi người có thể thực hiện cùng một hành động thông qua kích thước, độ tương phản, bàn phím và cả trình đọc màn hình.

Tuy nhiên, cảm giác nổi khối cường điệu và hiệu ứng chuyển động quá mức có thể trở thành nhiễu thị giác, che khuất chính hành động quan trọng. Sau khi thiết kế phẳng xuất hiện, khả năng hành động vẫn không biến mất mà chỉ chuyển sang những tín hiệu tiết chế hơn như bóng đổ, khoảng trống, chuyển động và thay đổi trạng thái. Tiêu chí cần xét là “người dùng có đoán được hành động tiếp theo hay không”, thay vì phong cách đang thịnh hành.

Một thiết kế mà bàn tay đã biết cách thao tác dù không cần lời nói. Dùng hình dạng và phản hồi để làm rõ những hành động có thể thực hiện, đồng thời lựa chọn cách giảm dần những phỏng đoán sai lệch: đó chính là bước khởi đầu của khả năng hành động.