Affordance, Signifiers and Feedback

When speaking in relation to web development practises, the term “affordance” refers to the clues, hints, and other indications that a designer features in their product that guides the user on what they are capable of doing. Take for example a mug in the real world. It features a handle, can hold liquids and has a large opening on the top of it. The mugs affordances is that the user can lift the mug and also drink out of it. These aspects of the mug are what it is designed to do, and it is designed in a way the user, through familiarity and simplicity, knows immediately how to use it. This pattern the user obtains to deal with a repeated situation with a common solution, such as immediatly knowing how to use a mug,  is known as User Experience patterns.

mug

Referring to the example of the mug when speaking about affordance, let’s take that thinking onto the digital side of things. Affordance may seem a bit pointless and simple at first when using the concept in web design, but essentially it is about setting up a familiar and clear enviroment that the user can use effectively without hassle or confusion to its full capabily. For instance, your including a form on your website and featuring a “submit” button to it. It could just be designed without any features and be plain, boring text. As it does not have the apperance of a usual clickable submit button, the user of your sight may not be able to notice the submit option right away, or even question what it accually does, causing the user to think about the process beforehand. For affordances to work efficiently, it is intergrated with  another, similar aspects, know as signifiers.

In web design, signifiers are characteristics of a specific element are are used to highlight to the user of the product the affordance of that object. In reference to the mug example from earlier, if the mug is featured without a handle, users to not have the affordance of them being able to pick it up. On the other hand, if a handle is featured on the mug, users get an immediate and clear indication that the mug can be lifted. On the digital side of things, if the designer adds a blue container around the “submit” text and makes the text white in color, the user of the product knows right away what to select to submit their information. Having the cursor, or even a specific event, change when the user hovers over the submit button is another influencal way to signify an object is interactable.

Untitled

A dynamic method of testing the efficiency of the affordances and signifiers of a product is through the feedback given by the user. Commonly refered to as visabilty or usability feedback, this method allows designers to review what and how a specific items on a webpage is being interacted with and which of those elements require some kind of improvement. As the user is extremely unlikely to find a UX issue with your product, take a snapshot of it, and send you an email detailing the issue, using the right tools to provide the users visual feedback can save your users, your design and development team and yourself a lot of hassle. As everyone has access to the same information in real-time, there is no need to waste time sending information on issues and performance of the webpage to one another, causing conflicting data or “Chinese Whispers”, elimating issues like miscommunication,  and easily being able to resolve a bug and recognise where it originated to begin with.

These tools, such as Optimizely, work by comparing the statictics between two version of the webpage, one with the usabily correction and one without, and gives an account at how effective or ineffective the UX resolution made was by analysing the users’ interaction with the elements on the webpage. This process is known as A/B, or Split, testing.

 

References:

https://blog.teamtreehouse.com/affordances-web-design

https://www.codecademy.com/articles/ui-design-affordances-signifiers-clickability

https://mopinion.com/how-to-use-visual-feedback-for-web-design/

 

Advertisements

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s