Understanding UX Design Principles with examples

A few months back I have attended a workshop on UX Design organized by Growthschool. In this two-day kick-starter workshop I got to know an overview of UX design. The instructor provided us exposure to various areas of designing starting from some of the very interesting laws/principles in UX-Design. This article is focused on understanding some of the laws and how these laws are used in UX Design in a NON-TEXTBOOK APPROACH as taught in the workshop.

Fitts’ Law

The time to acquire a target is a function of the distance to and size of the target

Let us understand how fitts’ law can be used in UX design by discussing some of the questions.

1. Have you ever thought that why are menu options in many of the applications like the Amazon shopping app, LinkedIn, Instagram, etc. are at the bottom of the screen?
2. Why “ADD TO CART” button in most shopping apps which is the most important action, kept at the bottom of the screen?
3. Why is the GPAY app “New Payment” button is at the bottom of the screen and why does this button have a very prominent/noticeable size?

For instance, the “New Payment” button in Gpay app and the “Add to Cart” button in most of the shopping apps are kept nearer to the fingers, also the size of the button is significant enough to make it easier for the fingers to tap on.

Similarly, the menu options are the ones that are used regularly while interacting with an app, so they are kept at the bottom, close to your fingers.

Take Away’s from the above scenario,

1. The important action buttons must be kept big and bold so that it is easy to find & tap.
2. Should be kept nearer to the finger for ease of the user.

The fitts’ law in UX design says that whatever be the interacting elements(button, icon, etc..) the nearer they are to whatever you are interacting the app with(in this case it is finger) & the bigger they are, makes it easy to use for the user.

Hick’s Law definition:

The time it takes to make a decision increases with the number & complexity of choices.

1. Why there are top 10 recommendations always shown in Netflix app?
2. Why does Swiggy(food ordering app) shows you recommended options when you choose a restaurant when you can see the full menu of that restaurant?

Because in Netflix if you have a lot of options then it will take time for you to make a decision or select what to watch. That is why swiggy also has recommended option list on top & the rest of the items at the bottom to make selection fast.

Take Away’s from the above scenario,

1. Lesser the number of options the easier it is to decide.
2. The easier the representation of options, the easier it is to understand them.

Doherty Threshold

Productivity soars/rise high when a computer and its users interact at a pace(<400ms) that ensures that neither has to wait on the other.Observing some more scenarios

1. Why do multiple apps show some skeleton-like boxes before loading the actual content? In simple terms the animations which reflect that the content is loading?

Before the actual content loads in some apps like Facebook etc., they show those grey color boxes or animations because the moment you enter the app it takes time to load the content because of server, internet speed, etc. Now if there are no animations, then you will get frustrated. That is why apps are trying to tell you that “Hey! wait for some time, something is happening.

Similarly, when you book a ride at uber have you ever observed after booking the ride uber is also showing some animations/progression?

Yes, because sometimes there are a lot of things happening in the backend which takes time, and uber tries to tell you that “Hey!! Be connected😊 we are at your service and your request is in progress.

Take Away’s from the above scenario,

1. If the reaction of interacting with something(feedback) does not come within the expected time, users might end up doing mis-clicks.
2. User’s do not really like waiting a long time for any results to start appearing.

Adding animations, progress bars, loading spin, or anything which shows that the app is responding, is a great way to engage with users.

Zeigarnik Effect

People remember uncompleted or interrupted tasks better than completed tasks.

1. Why do LinkedIn or some other apps try to always show how much your profile is completed?
2. Why do apps like BookMyShow always show you to complete a number of booking to earn an XYZ badge?

It always motivates people to complete a task that is incomplete. For eg, LinkedIn shows what all fields need to be filled to strengthen your profile. So it is actually motivating you to complete the profile details in order to achieve a good profile quality. Also, it is the human mentality that we want to complete/finish a certain task and want to be on top of everything. Apps/products utilize this fact and try to engage users in a better manner.

Take Away’s from the above scenario,

1. Seeing an incomplete action motivates people to complete it to enjoy the benefits after completion.
2. People always tend to have everything in a finished state.

So using this principle you can engage your user in a better way. Try to show what is incomplete and interrupted so that the user gets motivated to actually finish those tasks and use your product in a more engaging way.

Jakob’s Law

User spend most of their time on the other sites. This means that users prefer your site to work the same ways all the other sites they already know.

1. Why does the “stories” feature in multiple apps works in the same way? If we see any new app then also there are features that are similar to the apps already available.

Interactions that are very familiar in multiple apps do not really require a tutorial to understand them.

Take Away’s from the above scenario,

1. By using consistent and known visual cues, users do not have to think a lot to use the product.
2. Focus on problem-solving & creating values instead of on those things which already exist.

These summarize my learnings of UX principles by attending the 2 days workshop. There were a lot of things taught so stay tuned for more content😁