Thuật ngữ UX/UI kỳ 2 - Các dạng Affordance trong UI (Phần 2)

Trong bài viết trước, chúng ta đã tìm hiểu về định nghĩa và nguồn gốc của thuật ngữ affordance trong thiết kế. Trong bài viết kỳ này, chúng ta sẽ tiếp tục đến phần 2 với chủ đề “Các dạng affordance trong UI”.


Các dạng affordance trong UI

Affordances trong UI có thể được phân loại theo hiệu suất và cách trình bày. Mục tiêu chính là đơn giản hóa các luồng tương tác của trải nghiệm người dùng.

1. Affordance hiển thị (obvious) và Affordance ẩn (hidden)

Dựa trên hiệu suất của chúng, chúng ta có thể tìm thấy các gợi ý hiển thị hoặc ẩn trong UI.

Affordance hiển thị dựa trên các lời nhắc, điển hình là hướng người dùng đến một hành động cụ thể. Ví dụ, khi bạn nhìn thấy một nút được thiết kế như một yếu tố có thể nhấp, hay tương tự như các nút trong thế giới vật lý, bạn hiểu rằng nó có thể nhấp hoặc nhấn vào để tương tác. Nếu nó được hỗ trợ bởi một văn bản hoặc icon, affordance càng trở nên rõ ràng hơn: nó thông báo cho bạn những gì sẽ là phản hồi từ hệ thống.

Trang web của The Gourmet : nút CTA rõ ràng là phần tử có thể nhấp và văn bản cho biết nút này cho phép người dùng thực hiện hành động.

Affordance ẩn thường không hiển thị rõ ràng. Chúng bị ẩn và chỉ hiển thị khi có hành động cụ thể của người dùng. Chúng có thể là các công cụ chú thích hoặc phần giải thích trên các thành phần của bố cục. Hoặc chúng có thể là các yếu tố điều hướng đa dạng như menu thả xuống hoặc button có thể mở rộng.

Button Hamburger trong header của trang web Slopes ẩn trình đơn mở rộng của trang web

2. Affordances đồ họa

Affordance đồ họa gồm các dạng hình ảnh được sử dụng cho giao diện và giúp người dùng quét chức năng của nó. Đồ họa thường được nhận thức nhanh hơn và ghi nhớ tốt hơn so với văn bản. Trong số đó, chúng ta có thể đề cập đến những yếu tố sau đây.

Ảnh

Chủ đề, hình ảnh, hình đại diện và hình ảnh tiêu đề được hiển thị nhằm hỗ trợ trực quan các thông tin mà người dùng thường thực hiện với ứng dụng hoặc trang web (mua, giao tiếp, hiển thị, xem, nghiên cứu, viết, v.v.) với các tính năng cụ thể. Giả sử, nếu một ứng dụng cho phép người dùng lưu và chia sẻ công thức nấu ăn, thật tuyệt khi sử dụng các ảnh thích hợp như trong ví dụ bên dưới.

Dấu hiệu xây dựng thương hiệu

Logo, ​​dấu hiệu công tymàu sắc được áp dụng cho trang web hoặc ứng dụng là sự kết nối giao diện người dùng với một thương hiệu cụ thể. Đây là những affordance giúp cho khách hàng ghi nhớ và ở lại với sản phẩm.

Logo trên màn hình splash và trong header của ứng dụng Thương mại điện tử trang sức 

Hình minh họa

Minh họa chủ đề và linh vật là những yếu tố mang lại dấu ân rõ ràng về thương hiệu cho người dùng. Ví dụ dưới đây, bạn có thể thấy một popup bật lên thông báo cho người dùng về sticker Halloween trong Toonie Alarm với hình ảnh trực quan – bí ngô Halloween.

Icon (Biểu tượng)

Icon trong giao diện có lẽ là nhóm đa dạng nhất về khả năng trực quan. Những chữ tượng hình này có tính biểu tượng cao và chủ yếu sử dụng các gợi ý được lấy từ thế giới thực để người dùng có thể hiểu chúng một cách nhanh chóng. Thậm chí, một số icon không liên quan đến các đối tượng vật lý vẫn thể hiện khả năng ghi nhớ tốt đối với người dùng, ví dụ icon ổ đĩa mềm được xem là biểu tượng của hành động “lưu”. Một trái tim hoặc một ngôi sao sẽ ngay lập tức khiến bạn liên tưởng tới mục yêu thích; một kính lúp sẽ biểu thị tìm kiếm và icon máy ảnh sẽ không mất nhiều thời gian để bạn hiểu rằng đó là chụp ảnh.

Các icon cũng được sử dụng để phân loại nội dung: các danh mục và khu vực sẽ đạt hiệu quả hơn khi được hỗ trợ đồ họa phù hợp.

Button (Nút)

Button là một trong những yếu tố tương tác cốt lõi trong giao diện. Trước thời đại của GUI (Graphical User Interface – Giao diện đồ họa người dùng), button được sử dụng trong nhiều sản phẩm vật lý, từ máy tính số đơn giản đến các trang dashboard phức tạp. Việc quan trọng mà các nhà thiết kế cần phải làm với một button là làm cho nó hiển thị rõ ràng trong UI. Hình dạng, độ tương phản, màu sắc và văn bản đều phải kết hợp một cách hợp lý để mang lại hiệu quả tốt nhất.

Field (Trường hiển thị)

Về cơ bản, field là các khoảng trống mà người dùng có thể nhập dữ liệu cần thiết. Để làm cho chúng có hiệu quả, các nhà thiết kế cần quan tâm đến yếu tố như: khu vực mà mọi người hiểu ngay lập tức họ có thể gõ văn bản vào bên trong.

Ví dụ: Giao diện Perfect Recipes App bên dưới: trường tìm kiếm là phần tử tương tác có hình dạng và độ tương phản rõ ràng; nó cũng được hỗ trợ bằng icon tìm kiếm và văn bản hướng dẫn.

Notification (Thông báo)

Có rất nhiều phương pháp để gợi ý cho người dùng rằng: có điều gì đó bị bỏ qua hoặc đáng chú ý bằng các thông báo. Nhìn vào icon giỏ hàng trong giao diện bên dưới: dấu chấm màu vàng trên icon thông báo bạn đã có sản phẩm trong giỏ hàng.

Thiết kế bởi Jens Nielsen 

3. Affordance văn bản (Ngôn ngữ)

Mặc dù người dùng cảm nhận hình ảnh nhanh hơn nhiều so với từ ngữ, nhưng không vì thế mà văn bản mất đi tầm ảnh hưởng của nó đến luồng tương tác. Bởi vì hình ảnh đôi khi cần phải được trợ giúp bởi văn bản để tránh hiểu lầm cho người dùng. Một điều quan trọng nữa là không phải tất cả mọi thứ đều được hiển thị trong hình ảnh. Cuối cùng, văn bản có tiềm năng cực kỳ đa dạng trong việc chuyển thông tin, mô tả hướng dẫn, kêu gọi hành động, giải thích chức năng và hỗ trợ hiệu quả với hệ thống phân cấp typographic. Tuy nhiên, văn bản nên có sự cân bằng hợp lý để không gây quá tải cho giao diện.

Tương tác với văn bản là hành động rất cơ bản đối với mọi người trong cuộc sống hàng ngày, sự tồn tại của nó lâu hơn nhiều so với đồ họa UI. Văn bản giúp người dùng hiểu những gì cần làm, những gì họ mong đợi hoặc thông tin cần lưu ý: chúng ta đọc nhiều thông tin từ dấu hiệu, quảng cáo và hướng dẫn cho đến báo chí, sách hướng dẫn và sách vở. Trong giao diện người dùng kỹ thuật số, nó cũng hoạt động tương tự như vậy. Từ ngữ chính là một cách đơn giản để giao tiếp với người dùng.

Ví dụ, màn hình của ứng dụng HealthCare cho thấy sự đa dạng về affordance văn bản: ngoại trừ thông tin chính về bệnh nhân, chúng ta có thể thấy văn bản hướng dẫn bên trong trường tìm kiếm, văn bản kêu gọi hành động trên nút và văn bản ở các trường trống của lịch hiển thị rằng người dùng có thể thêm cuộc hẹn trong ngày.


4. Affordance kiểu mẫu

Affordance kiểu mẫu dựa trên sức mạnh của thói quen. Lợi thế lớn nhất của chúng là tiết kiệm công sức của người dùng trong việc ghi nhớ nhiều thứ cùng một lúc. Theo những nghiên cứu cho biết, khả năng ghi nhớ ngắn hạn của con người rất hạn chế. Vì vậy, càng có nhiều kiểu mẫu, người dùng càng dễ tìm hiểu và điều hướng.

Có nhiều affordance điển hình của dạng này, ví dụ, logo ở header trang web đều có thể nhấp khi người dùng mở một trang web. Từ giao diện này sang giao diện khác, chúng ta biết rằng văn bản được gạch chân thường là liên kết có thể nhấp; thông tin về địa chỉ liên hệ và chính sách bảo mật của trang web thường được tìm thấy trong chân trang web và ba điểm dọc trong ứng dụng có nghĩa là «xem thêm» các chức năng. Việc sử dụng kiểu mẫu khiến người dùng cảm thấy thân thuộc với giao diện. Vì vậy, nếu muốn thay đổi kiểu mẫu, cần cân nhắc và kiểm tra mức độ dễ hiểu đối với người dùng.


5. Affordance hoạt ảnh

Hoạt ảnh được sử dụng trong giao diện người dùng tạo ra kết nối mạnh mẽ giữa thế giới thực và ảo. Trong hầu hết các trường hợp, nó bắt chước sự tương tác với những hành động thực tế: kéo, đẩy, vuốt, kéo, v.v. Vì vậy, hoạt ảnh của giao diện cả cơ bản và phức tạp đều thể hiện khả năng mạnh mẽ trong việc mang lại hiệu quả.

Ví dụ dưới đây của ứng dụng Toonie Alarm. Khi nhấn chuyển đổi, hoạt ảnh sẽ thay đổi nhiều thông số cùng nhau: màu sắc của tab, màu sắc của button bật tắt và hoạt ảnh của mặt trời được hiện lên. Bằng cách này, nó ngay lập tức thông báo cho người dùng và tăng thêm sự hấp dẫn cho hành động này.

Thiết kế chuyển đổi cho Toonie Alarm

Ở ví dụ này, hoạt ảnh thông báo đến người dùng những hạn chế cụ thể, đồng thời thu hút người dùng vào những cảnh báo quan trọng.


6. Affordance phủ định

Bất cứ điều gì mới lạ đều có dấu hiệu, affordance phủ định cũng đóng một vai trò lớn để mang lại trải nghiệm tích cực cho người dùng: vì trong thực tế kết quả phủ định cũng là một kết quả.

Mục đích của một affordance phủ định là cung cấp cho người dùng lời nhắc rằng một số yếu tố không hoạt động hoặc không hoạt động tại thời điểm này. Ví dụ, giao diện của ứng dụng Homey dưới đây cho thấy button «Bedroom» đang hoạt động trong khi các button của các phòng khác không hoạt động – vì vậy chúng thể hiện affordance phủ định.

Dưới đây là một trường hợp khác: thanh tab hiển thị button đang hoạt động dưới dạng có màu; trong khi các tab khác hiển thị âm bản


7. Affordance sai

Trong quan điểm về affordance của UX, sai và phủ định không được xem là từ đồng nghĩa. Affordance sai là những gì nhà thiết kế nên tránh: đây là những lỗi sai đưa người dùng đến các hành động hoặc kết quả khác nhau. Đôi khi nó là do cố ý, nhưng trong nhiều trường hợp là do nhầm lẫn.

Ví dụ: Nếu chữ trong khối văn bản web đều được gạch dưới, người dùng tự động nghĩ rằng văn bản đó có thể nhấp được. Vì vậy, họ có thể thực sự khó chịu khi nghĩ nó không hoạt động – nó có nghĩa là người dùng đã bị gợi ý sai cách.


Bài viết trên hi vọng đã mang lại cho các bạn một kiến thức nhỏ về vai trò quan trọng của affordance đối với thiết kế trải nghiệm người dùng. Ở kỳ tiếp theo của chuỗi bài thuật ngữ UX/UI, chúng ta sẽ tiếp tục tìm hiểu về: “Thiết kế website và những thuật ngữ thông dụng”.

Biên tập: Thao Lee

Nguồn: tubikstudio

Cùng tác giả

#Tag

affordance thiết kế trải nghiệm người dùng thiết kế ux THUẬT NGỮ UX/UI tính dễ dùng trong UX ux ux/ui

iDesign Must-try

12 bài viết được yêu thích nhất tại iDesign năm 2022
12 bài viết được yêu thích nhất tại iDesign năm 2022
Trước khi kết thúc năm 2022 và bước sang năm 2023 đầy hứa hẹn, hãy cùng chúng mình điểm lại 12 bài viết được các độc giả yêu thích nhất…
Một giờ của bạn đáng giá bao nhiêu?
Một giờ của bạn đáng giá bao nhiêu?
Thời gian là một thứ vô cùng giá trị, điều này được nhắc nhiều và không cần phải bàn cãi thêm. Nhưng có vẻ như từ “giá trị” chưa đủ…
Seniors sẽ muốn ‘hack’ quy trình làm việc
Seniors sẽ muốn ‘hack’ quy trình làm việc
“Juniors want to Skip the process. Seniors want to Hack the process.” (Tạm dịch: Juniors muốn bỏ qua quy trình. Còn Seniors muốn hack quy trình.) Trong lần gần đây…
Tại sao khách hàng lại khó hài lòng đến như vậy?
Tại sao khách hàng lại khó hài lòng đến như vậy?
Có hàng nghìn meme, ảnh gif, video trên internet nói về việc thất vọng khi làm việc với Client (khách hàng). Đặc biệt hơn, nếu chúng đến từ những người…
The Visceral Emotional
The Visceral Emotional
Con người hình thành cảm xúc với một đối tượng ở ba cấp độ: visceral (nội tạng), behavioral (hành vi) và reflective (phản xạ). Visceral Emotional (Cảm xúc nội tạng)…
Để ngọn lửa bên trong luôn giữ cho bạn ấm áp
Để ngọn lửa bên trong luôn giữ cho bạn ấm áp
Làm thế nào để tiếp tục yêu và thiết kế với sự đam mê ban đầu? Hay nói cách khác “Làm thế nào để giữ ngọn lửa đam mê”, đây…