3 Essential Elements for Great UX Design

You interact with various devices in your daily life, be it a smartphone, Laptop, or SmartWatch. With each device you interact with, you inevitably have an experience. This experience may be a delightful one or maybe a frustrating one. The smooth digital experience you get while interacting with a device is a result of the designer who considered the user experience and how they will interact with their product. 

Today we'll look at Affordances, Signifiers, and Feedback, which enable the designer to facilitate a good user experience in their product. We will also see how neglecting these elements can result in a frustrating user experience. 

1. Affordances:

As stated by Don Norman (Ux Researcher), "An affordance is a relationship between the properties of an object and the capabilities of the agent that determine just how the object could possibly be used."

In simple words, Affordance is a property or a feature of an object that directs the user to perform a certain action. For eg: A chair affords sitting, Keyboard affords typing, and a smartphone's screen affords tapping, swiping, etc. 

The best advantage of affordance is that the user can perform or detect an action just by looking at the object. You come across such affordances in your daily life, like plates are for pushing, Knobs for twisting, and slots for inserting things into. These affordances are divided into two types, The first one being Explicit Affordances (Obvious), and the second being Implicit Affordances (Hidden). 

Explicit Affordances (Obvious) are the ones that are based on widely known prompts. For eg, a button be it in a physical or a digital form always affords a click or a tap. 

Implicit Affordances (Hidden) are not that obvious. These may be revealed after a user performs or completes a particular flow. For eg, dropdown menus, hamburger menus, etc. 

Some implicit affordances when practised over a long time becomes obvious. The user tends to already know about their presence in the interface. Like, "Pinch zoom" feature on a web browser on a mobile/tablet.

Designing the right affordances ensures better usability and experience.

2. Signifiers:

Once your product is bestowed with affordances, You must ensure that subtle intuitive clues are provided that will signal the user to act in the desired way. Such clues are called signifiers. 

Signifiers can be in any form, They can be textual, graphical, sound, or even haptics in the case of digital devices. One good example of a signifier is the text on a button which signifies the outcome or next step after tapping or clicking on that button. 

To understand the difference between affordance and signifiers, Let's take an example of the image below. 
The button placed in the system is an affordance that prompts the user to click it, while the text "Save" signifies the outcome after clicking on the button.

Signifiers are also used to reveal implicit (hidden) affordances. Let's look at the image below:

In this image, An affordance of swiping these cards is present, which means that the user can view more cards as he scrolls horizontally on this particular section. But, That affordance is hidden and the user will completely miss out on this feature.

Now let's look at another image:

In this image, The designer has put arrows & dots (symbols) to signify the presence of an affordance. These symbols will now direct the user to act in the desired manner. 

The examples above gave you an idea about how the combination of affordances and signifiers can lead to a smooth & friendly user experience. 
However, in some cases, such combinations can lead to confusion. To understand this, Let's take a real-world example. 

When you walk into a shop, You see door handles on the door and a sign asking you to either "pull" or "push" the door. But, the act of entering into the shop is so quick that the users in most cases miss the sign and ends up getting confused, which result in an interruption in the act of entering the shop. 

The above picture is a demonstration of a bad design, Such a combination of affordance & signifier can generate friction in the user experience. 

To avoid such cases, eliminating signifier and relying on affordance alone can bring a significant improvement in the user experience.

In the above image, the signifier "Pull" and "Push" has been eliminated and the act of opening the door relies on the affordance of the object. The knob affords to turn, Handle affords to grab and pull and a flat surface on a door (opposite to the hinge) affords to push. This is a good example of a smooth user experience. 

As a designer, you have to make sure that you use the right combination of affordances and signifiers to facilitate a smooth user experience in your product. 

3. Feedback:

When a user completes a certain task or performs a certain action, He often gets immediate feedback on the completed task. Feedbacks are important for a good user experience. In a complex system, feedbacks should be provided to keep the user reassured that he is on the right track. 

The best real-world example of feedback is the sound that the engine makes when you start your car. Apart from the satisfaction it gives, It also marks the completion of the ignition process. This feedback is worrisome when the sound changes, but it actually tells you to keep trying or maybe there is something wrong with the engine. 

In Digital products feedbacks appear in the form of loading bars, error & success messages, The message you get when you type something wrong in the input field, vibration, sounds, The sound of "ka-ching" when you make a payment are all examples of how feedbacks are vital for an engaging user experience. 

Feedbacks provide reassurance that progress is being made. For example, when you download something from the internet, Chrome gives you download progress at the bottom. Which lets the user know how much download is completed. 

Feedback also provides us with the option to revert our actions before it's too late. For eg, When you send an email using Gmail, For few seconds you have the option to undo the task of sending the email. The same happens when you move an email to the trash. Since these actions are so important to the user, It becomes mandatory to provide such feedback.

Beyond helping us to avoid any mistake feedbacks also helps us get connected with the product. A good designer will always take care of feedbacks, as they engage the user and builds a sense of trust in the user towards the product. 

Also, the feedback should be spontaneous. There should not be any lag between the action performed and the feedback. A smooth feedback/response from the interface ensures the credibility and quality of the user experience of the product. 

Combining the concepts:

Now you know that these three concepts combined can result in a smooth and engaging user experience and how the presence of each concept is important. You also know that these concepts depend on each other and as a good designer you should always use the right combination of these three key elements. 

To summarize, Affordances enable a user to interact with an object, Signifiers teach them what the interaction is, and feedback is a great way of building trust and reassuring them that they are on the right track.