We stand with Ukraine and our team members from Ukraine.

The Community Of Over 578,000

Home ›› Product design ›› Affordance in Good Product Design

Affordance in Good Product Design

by Wicar Akhtar
Share this post on
Tweet
Share
Post
Share
Email
Print

Save

Affordance in Good Product Design

Knowing what affordances are in any design creates a relation between the user and an object, which maps users’ mental models to a product is the key to a good design.

Designers aim to create products that are evocative of their guidelines at first glance to their customers. To do so, they first need to fathom a significant principle of affordances — the definition and the purpose. We are hemmed in with affordances but knowing how they impact user experience design is necessary for producing high-quality, user-friendly products.

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

Psychologist James Gibson created the “Affordance” in 1977, which refers to the possibilities of all action with an object based on the physical capabilities of the consumer. For example, the chair has facilities such as sitting, standing, throwing, etc. The ensuing epoch carried the term to the design community and slightly modified the meaning to make it more convenient for designers to use by Don Norman in 1988.

Affordances and Signifiers

Dan Norman also introduced “Signifier”, a term widely used in his 2013 The Design of Everyday Things edition. “Signifier” is a kind of natural gesture about eligibility, set forth to indicate a vivid distinction between the context in which it was presented and the way it signals an affordance it might provide to a person; design has no bond with affordances but with signifiers. 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).

1. What is Affordance?

Affordances are deciphered as perceivable action possibilities — actions which users deem possible. It is used as a compelling indicator of how an object works and how it conceives both its perceived and actual function.

2. Types of Affordance?

Before diving into the general principles of affordances for UX design, here are the six most celebrated types:

Obvious Affordance

Obvious affordances are the perceptual properties of an object, giving you an idea of ​​how it will be used.

Hidden Affordance

Hidden affordances are inherent properties of an object. Evidence indicating the performance of an item may not be obvious and may not even appear until action is taken. A simple example of a hidden affordance is the drop-down menu or other clickable features in the UI that only appears when the user hovers over it.

Pattern Affordance

Affordance models are based on already set up conferences that represent a function. These are widely used or agreed upon protocols on how things work. Take the camera for example. For the most part, all cameras have a shutter button in the upper right. Another example is underline, italic or contrasting text, which refers to the hyperlink in the text body.

Metaphorical Affordance

Illustration affordances are based on images of real or original objects used to convey intent. For example a shopping cart icon to indicate your online purchases, a microphone image showing the option to envelop or record to send an email or message.

Wrong Affordance

False affordance occurs when an attribute of an object indicates that the object is not actually working. An example of this is the unlinked underline text by clicking the button or a TV remote that turns on your lights but not the TV. False affordances are often unintentional or because of a lack of effective design techniques.

Negative Affordance

Negative affordance is used when expressing a lack of work or interactivity. This type of expense is usually used when you need more information from the customer and you want to prevent them from going to the next step.

Affordance in Good Product Design. Press when full - a button.
Photo by Brands&People on Unsplash

3. How are affordances used in UX design?

Affordance is a relationship between a person and a physical or digital object. In user interface (UI) designs affordances are very apparent. Based on users’ current expectations and previous experiences, the users observe through available options or actions in the UI and decide which actions are possible.

Now that we have covered the major types of affordances, we will delve a little deeper into how to use additives in UI design.

Buttons
Buttons are one of the key elements used to indicate interactions in the interface. Size, color, shading, contrast, and related copies play a huge role in creating a clear and effective button.

Animations
Animated expressions often mimic actions or movements in the real world (swiping, pushing, pulling, pulling, etc.) and range from simple to very complex. Toggle buttons are simple animated displays that show any change in appearance or color when the user drags the toggle.

Notifications
Notifications can be used to draw the attention of any user or to indicate a change. For example, suppose the user has not finished setting up their profile, a red dot may appear next to the profile icon in the menu bar. Another good example is the number that appears next to the shopping cart icon when you add something to your cart.

Input fields
Input fields indicate where user data can be entered. These are often indicated by the difference between the size and area of ​​the field and its background.

Icons
Icons often rely on a pattern or metaphor capable of navigating through a user interface. Traditional designs use the ability to use the heart or star symbol to indicate the “Favorites” page, while the floppy disk icon is metaphorically served as a “save” button.

Photos
Like icons, photos, or using images are quick visual codes that help consumers understand what they can do with the product.

4. How to design for the best affordance?

Designing any interface, information, or system with good affordance is about minimizing customer errors and friction. Your design should not mislead or surprise your customer due to lack of action or unwanted results.

Follow the meanings
Users expect specific visual cues when it comes to using any digital interface. For example, the “Search” option on the left side of the desktop or the magnifying glass, or the brand logo that can be clicked on the search bar.

Follow the design principles

Design principles are embedded in technologies that help create intuitive and easy-to-use designs. From designers to sociologists to psychologists, many professionals have come up with simple principles that you can follow to reduce confusion in your clients. The laws of UX provide you with a comprehensive set of laws and principles that you must abide by, Or you can create formulas to suit your company and product.

Affordance in Good Product Design. Figma page on the screen.

Use effective copy

If you cannot create something low affordance using visual design due to color limitations, software limitations, budget, etc. then adding content with useful text will help keep your customers or users on track.

Sometimes making this copy is in the hands of UX writers, but no matter who writes it, there are many practical ways to hone your skills in UX writing.

Google’s Material Design is an Android-based design language that optimizes the user’s on-screen touch experience with intuitive yet innovative features. Material design uses the physical world and its textures, meaningful motion, and deliberate graphics to help you create high-quality, user-friendly interfaces.

Understand your customers

Do meaningful UX research and find out what your customers want to see when they interact with your product in context.

Final thought

Affordance is an effective concept in UX design. Quality customer testing is the best method to discern whether your designs have good potential. When your customers are able to complete their tasks quickly with minimal amounts of clutter and errors with the right interactions as intended, you know you are moving in the right direction.

Using good spending can reduce the time your customers think and explore so they can achieve their goals faster and easier. This is an important factor in any universal and comprehensive design.

post authorWicar Akhtar

Wicar Akhtar,

Product & services development and design experience. Product management & Design strategist, applications Architect who loves solving complex analytical problems, designing highly usable and equally delightful user experiences.

Tweet
Share
Post
Share
Email
Print
Ideas In Brief
  • Knowing how affordance impact user experience design is necessary for producing high-quality, user-friendly products.
  • The article covers:
    • The definitions of affordances and signifiers
    • Types of affordances
    • How affordances can be used in UX design
    • How to design for the best affordance
  • Using affordances well can reduce the time your customers think and explore so they can achieve their goals faster and easier.

Related Articles

The overview of current challenges and opportunities design faces and how BBC team can help designers out to enhance digital experience and understanding of the world.

The Evolution of Experience Design
  • Dan Ramadan, Creative Director for UX Architecture & Content Design at BBC, tells about the current challenges and opportunities design faces by describing 3 stages of ‘the web’:
    • Challenges of the past (document retrieval)
    • Challenges of the present (control and contribution)
    • Challenges of the future (pervasive and ubiquitous)
  • Technology is as capable of solving problems as it is of creating them.
  • The team at BBC can explore how digital experience can enhance our understanding of the world, develop empathy for others, instill pride and commitment to the importance of the individual and the inherent value of shared values and cooperative society.
Share:The Evolution of Experience Design
5 min read
Evolution-of-design-article-image.png

As organizations grow in their conversational maturity, there’s an increasing demand for conversation designers. Explore 7 skills to learn for conversation designers in 2022.

 

7 new skills to learn for conversation designers in 2022
  • Conversational design requires far more than having got all your convo design courses nailed, completed all the challenges on VUI-challenge and finished re-reading Pearl, Evanhoe & Deibel and Cohen, Giangola & Balogh for the umptieth time.
  • There is a number of new skills that can up your career as a conversation designer:
    • NLU
    • Entities
    • Entities on steroids: ontologies and graphs
    • Building conversational teams
    • Open source movement
    • Mastering conversational AI platforms
  • It’s time for conversation designers to develop t-shaped profile: specialize in one or two particular conversation design skills and systems , and mastering skills that allow us to connect with people from neighbouring disciplines.
Share:7 new skills to learn for conversation designers in 2022
7 min read
7 new skills to learn for conversation designers in 2022

There are different ways participatory design can influence young people with cognitive disability. Read reflections on co-design methodology and ways it can help.

Reflections: Co-Designing with Young People with Cognitive Disability
  • In this article, Jax Wechsler, Principal Designer at Sticky Design Studio, shares:
    • Facts about Young People with a cognitive disability that may be useful when working with this group
    • Discussion and reflections about her methodological choices
  • Things to know about Young People with cognitive disabilities:
    • Ability levels can be very nuanced, every Young Person is different
    • Life Tasting not Life Wasting!
    • The level of advocacy of parents impacts experiences and opportunities for Young People with Cognitive Disabilities
    • Social inclusion and relationships are keys to wellbeing
  • Reflections on Co-Design Methodology:
    • Recruitment is hard!
    • Using referrals and ‘snowball sampling’
    • It’s important to build rapport
    • Understanding ability and research design
    • Cultural probes/diary studies are gold
    • Parents mediating participation
    • Flexibility is key
    • Value in participation
Share:Reflections: Co-Designing with Young People with Cognitive Disability
10 min read
Reflections : Co-Designing with Young People with Cognitive Disability

This website uses cookies to ensure you get the best experience on our website. Check our privacy policy and