Affordance Là Gì

An affordance is what a user can vì with an object based on the user’s capabilities.

Bạn đang xem: Affordance là gì

As such, an affordance is not a “property” of an object (lượt thích a physical object or a User Interface). Instead, an affordance is defined in the relation between the user and the object: A door affords opening if you can reach the handle. For a toddler, the door does not afford opening if she cannot reach the handle.

An affordance is, in essence, an action possibility in the relation between user and an object.

Sounds complex? Good news, we made a few videos for you with some examples to lớn make it easy for you lớn understvà.

Learn what affordances are through examples & see why affordances are key to lớn users’ desired actions.

“When affordances are taken advantage of, the user knows what to bởi just by looking: no picture, label, or instruction needed.” — Don Norman, Grvà Old Man of User Experience

Affordances are Everywhere

Psychologist James Gibson coined “affordance” in 1977, referring khổng lồ all action possibilities with an object based on users’ physical capabilities. For instance, a chair affords sitting on, standing on, throwing, etc.

Don Norman later (1988) introduced the term khổng lồ the design community modified the meaning slightly to make it more appropriate for use by designers. For example, Don Norman defined affordances as perceivable action possibilities – i.e., only actions which users consider possible. So, designers must create objects’ affordances khổng lồ conkhung to users’ needs based on these users’ physical & perceptual capabilities, goals and past experiences. Clear affordances are vital lớn usability. Users will map the possibilities of what an object does according to lớn their conceptual model of what that object should vày (e.g., inserting fingers inkhổng lồ scissor holes lớn cut things).

Signifiers & affordances

Don Norman also introduced the term “signifier”, which is elaborated greatly in his 2013 edition of The Design of Everyday Things.

Learn about signifiers and the critical role they play in kiến thiết.

A "signifier" is some sort of perceivable cue about the affordance. Don Norman introduced the term lớn make a clear distinction between the signal an affordance might provide khổng lồ a person, which is entirely in the perceptible part of an affordance, và the actual affordance itself. Signifiers can exist on their own. Just as affordances can exist without any signifier - the signifier part of an affordance may be invisible (or misleading).

Explore how you can make invisible affordances visible.

The reason Don Norman introduced the term “signifier” was that many people were misusing the concept of affordance after it had been introduced to the thiết kế community in the 1988 edition of The Design of Everyday Things. By introducing the distinction between signifier & affordance inkhổng lồ two more distinct components, it became clear that much of thiết kế has nothing lớn vày with affordances, but with signifiers.

Learn more about the differences between affordances, perceived affordances and signifiers.

Xem thêm: " Đồng Hồ Rolex Nữ Giá Rẻ Tại Tp, Đồng Hồ Rolex Giá Rẻ Tại Tp

For example, a painted zebra stripe in the side of a road is a signifier, a signal about where to walk. It is telling you where it is safe lớn walk. However, you can walk anywhere on the road - there are no affordances stopping you. A fence by the side of the road would stop you since it has a physical affordance. Unless you are able khổng lồ climb over the fence, of course.

More elaborations on affordances & signifiers

In 1991, William Gaver, another notable designer, defined three types of affordances:

Perceptible – Perceptual characteristics of the object itself indicate what action possibilities are available and desired – e.g., a door handle. These obvious properties prompt users khổng lồ use the affordance in an intended way.

Hidden – In user interfaces without obvious affordances, users often must rely on experience and/or trial and error to determine possible actions – e.g., they hover/cliông xã on suspected drop-down menus.

False – An object’s characteristics suggest users can do something they can’t – e.g., underlined text that isn’t a link.

In 2001, Human-computer interaction (HCI) expert Rex Hartson defined four additional types:

Physical – The perceptual characteristics show users what khổng lồ bởi vì – e.g., a large, highly visible “Add lớn cart” button. (Whenever text appears on affordances such as buttons, they’re called explicit affordances.)

Cognitive sầu –Design features that help users notice or know about things – e.g., clearly labelled text to lớn announce what will happen if users press a certain key.

Sensory – Design features that help users sense something – e.g., clear “pinging” feedbachồng to lớn indicate an available update.

Functional – Design features that help users achieve sầu goals – e.g., an item appears in a shopping cart after a user clicks “Add lớn cart”.

In user interface (UI) design, other main affordances include:

Pattern – You follow conventions lớn prompt users khổng lồ take actions – e.g., hamburger icons indicate menus.

Negative – You bloông xã users from proceeding towards a goal when they must provide more data – e.g., a greyed-out “Create account” button remains until users complete the khung.

*

The Interaction Design Foundation homepage is loaded with affordances – e.g., the shadows và the shape make the blue rectangles stvà out as buttons.

How to lớn Design the Best Affordances

You want khổng lồ minimize or prevent user errors và cognitive sầu friction. User errors occur when users fail lớn bản đồ between the actions they perceive sầu they can take with an object và the actions it allows. Cognitive sầu friction results from unexpected system actions after a user attempts a task. So, correct clues & immediate, effective feedbaông xã are essential. You should:

Use signifiers to lớn direct users lớn affordances – Wherever you can’t make affordances obvious due to color constraints, etc., mark the affordance (e.g., highlight, shadow) or write text on or near it khổng lồ guide users as to what they should do.

Follow conventions so users recognize affordances – E.g., “Search” in search boxes.

If designing for augmented reality or virtual reality, you have the advantage of reflecting real-world behaviors & physics in your affordances. In any case, the fine details—including a thoughtful application of color theory—can help give users the conceptual Model và hints they need. When users know what to vì without having to lớn explore your sản phẩm, they’ll get tasks done faster và make far fewer mistakes.

Learn More about Affordances

Take our course exploring affordances: https://www.interaction-thiết kế.org/courses/affordances-designing-intuitive-user-interfaces

Here’s a piece featuring in-depth insights and examples of affordances: https://www.smashingmagazine.com/2014/06/affordance-most-underrated-word-in-web-design/

See additional considerations about affordances here: https://uxplanet.org/ux-design-glossary-how-to-use-affordances-in-user-interfaces-393c8e9686e4