Kunal Mhatre's Blog

UX fundamentals that I adore

February 17, 2019

I personally enjoy learning about UX and Product design. I am not an expert, but I have gone through many resources and this blog post aggregates all of the amazing things I learned about UX. As far as I remember, Google’s Udacity courses related to UX helped me a lot to get good insights about users and product in general. I have tried my best to explain things by using a Pizza shop as an example. Let’s get started,

1. Save time

I am sure most of the people who are reading this might have ordered Pizza at least once in their Lifetime. If not Pizza, some kind of food which you love. The question is, do you like to wait for your food to arrive in front of you? Few minutes is fine, but what if it takes an hour or two when you are extremely hungry? Would you prefer to eat anything which takes too much time when you are starving? - if you are like me, then a big NO would be the answer.

In the world of UX, we should always give the user what they want as quickly as possible. If a user arrives at your site or product, you must make sure that the user does not have to spend too much time to understand the product or to be a part it. Think of your user like a guy who is starving and waiting for the food to get served.

Let me emphasize what I meant by the user should not spend too much time in understanding the product or to be a part of it.

Understanding the product

Suppose you open a Pizza shop, you got a well-furnished place, good ambient lighting and invested too much of effort in coming up with your secret Pizza recipe. Awesome. Now, the next thing you need to do is put up a board at the entrance of your store, which will have the name of your restaurant and an attractive tag line.

Here is the catch, everything inside the restaurant you have done is of NO importance to the passer-by unless he enters your restaurant. So, what’s going to bring that passer-by inside your restaurant? - you guessed it right. Your tiny little board which is on the top of your store. For designers and developers, it’s the landing or welcome page.

NEVER EVER confuse any visitor on the landing page. Your landing page should clearly deliver the goal or mission of your product in a matter of seconds. If it takes more than that, then there is a higher chance of visitors moving on. It’s always better when a visitor understands your product and moves on, as compared to a visitor moving on without even understanding the product. If in case a visitor becomes a user of your product after understanding it, then you must pat yourself on the back - because you did everything right on the landing page.

How to make visitors understand your product?

There are many ways to do this, but I am going to list a couple of things that I feel are worth mentioning.

Headlines

Headlines play a major role in making visitors understand your product. You need to keep it short or one-liner, but it must reflect the goal of your product or the problem which you are trying to solve.

Examples:

Twitter

Twitter's headline

EdX

EdX's headline

Facebook

Facebook's headline

Once you come up with your headline, test it with your friends or random people and ask them what they understand from your headline. If everyone understands your product’s goal from your headline then it’s a good one, if not, you may need to iterate it further.

Taglines

A tagline represents the vision of your company or product in general. Taglines are shorter than headlines and they are constant throughout the Life of the company’s vision, and only change when the vision of the company changes. Think of tagline as your brand, it’s important to make it memorable along with the vision it stands for. Your company may not require a tagline initially, but once you plan to build a brand then you can considering making one.

Examples:

Walmart

Walmart's tagline

General Electric

General Electric's tagline

Description

In case your headline does not work, a short description of your product is one last attempt to make visitors understand your product. This can be longer than the headline, but not too long. Make sure to keep this one simple as well.

Examples:

Postman

Postman's description

Cloudflare

Cloudflare's description

Call-to-action (CTA)

In marketing, a call to action (CTA) is an instruction to the audience designed to provoke an immediate response, usually using an imperative verb such as “call now”, “find out more” or “visit a store today”. -Wikipedia

After a visitor understands your product or service well enough, it is more likely that the visitor will search for an appropriate CTA. For example, if it’s an online Pizza ordering service then people will search for CTAs like Buy or Order. Hence it is always recommended to put CTA(s) on your landing or any critical pages and they should be attractive enough to gain the attention of the visitor.

Example:

Amazon’s Prime Video

Amazon's Prime Video

For more examples check the websites listed above like Twitter, EdX, and Postman - they have placed appropriate CTAs too.

Things to remember while making a CTA

  • Avoid disturbing colors.
  • Choose appropriate size for the CTAs - Not too big, not too small.
  • Action name should be simple to comprehend, I meant they should be simple to understand. *wink-wink*

Alright, we have delivered our mission and placed appropriate CTA on the landing page, now comes the best and important part in saving user’s time.

Making user part of your service

Once you are done with making visitors understand your product, now it’s time to make them part of it or to put it technically, to convert them from your visitors to your users. Now, this has to be done quickly too - Why?, let me continue the Pizza analogy.

Suppose you have ordered the most delicious Pizza, you know how it is going to taste, you know all the toppings it will come up with. You know every damn thing about it or let’s assume that you have fallen love with the display picture of it - this whole situation resembles understanding the product and getting excited to be a part of it.

Now comes the Pizza you have ordered, but here is the twist, it came with a very complex packaging, i.e., you open one box - the other is waiting for you, you open another, you are greeted with some more packaging material. Imagine if that happens, wherein you have the delicious Pizza in your hands but it takes an eternity to unbox and taste it. Would you love such experience?

The exact same thing happens with complex registration forms. Avoid making your registration forms too lengthy or complex, rather make it short and sweet and deliver your product quickly to the user.

The S3 rule

Make your forms smart, short and simple.

Smart: Make use of autofill, autocomplete and everything available to make your forms smart. In short, help the user to fill up the form.

Short: Ask for the only details which are required in order to make the account, because rest of the details can be asked later according to the needs.

Simple: Make your forms intuitive and simple to understand because we all hate complex forms, don’t we?

The perfect form is no form

A wonderful video on forms by Luke Wroblewski - Product Director, Google

Hence, the best way seems to be the services like Google Sign-In which can help us to achieve the goal of increasing conversion rate without much of a hassle and at the same time make forms short, smart, simple and secure.

This might not be the solution for everyone, like services which provide privacy products, because that may kill the entire USP. It is recommended to perform proper research on whether integrating such services affects your goal or mission of the product.

2. Avoid re-inventing the user experience

Back to our Pizza shop, let’s suppose you are expanding your business and decide on putting a new shop and for some reason, you plan to change everything in your shop in order to deliver new user experience. Let’s say in your new shop,

Change 1: The waiter greets and gets the order from the customer outside the shop and only let them go once the Pizza is on the table.

Because you think: Why to let user wait on the table, why not they can have the Pizza right after they enter the shop.

Change 2: The Pizza is not cut in triangular shape, rather you are using random shapes.

Because you think: People might have got bored with the triangle, let’s use other shapes.

I am not sure about you guys, but I am never visiting that shop which is treating customers as lab rats and continuously surprising with random unnecessary changes. So, what’s the takeaway from that shop? *pun intended*

We all have a specific goal while doing a certain task, let’s say you want to book a flight or order something online. Between your initiation and completion of the task, there is a set of actions which you need to perform to complete the task. For example, to book a flight you will have to open the website, then you will have to search for appropriate CTA, and then some forms and finally - flight booked!

Good and well established UX patterns are those which helps the user to complete a task quickly and new or experimental UX patterns are those which degrade the user experience and increases the time taken to complete a task.

To better experience this, I would recommend you guys to do a particular task (like ordering food) from two different service providers and once you complete the task you can analyze which took longer. It would be very likely that the one which took lesser time was rocking a good UX.

Why to use good and well established UX patterns?

Your goal must be clear when it comes to delivering something. If your business is to sell Pizza, you must do just that and nothing else which will stop you from selling Pizza. In the Pizza example above, most of the changes are disturbing the customer’s common behavior which they are adapted for ages. For example, we all are adapted to the pattern of visiting a restaurant and waiting for the food to arrive on the table, but making people wait outside of the restaurant, for immediately having food once they are on the table is a bad idea - again, just because an established pattern is disturbed which indeed disturbs the user. Also, we all are used to see Pizza cut in triangular shapes, but all in sudden if we get a Pizza cut in random shapes, I am not sure about you guys but I am going to freak out.

Although those were just made-up examples, the fact is to avoid re-inventing user experience, because adapting to particular UX pattern takes time. Before adding a new UX pattern of your own, think twice if your users will get adapted to the new pattern. The best option is to follow well established UX patterns and those are commonly introduced by giants like Google. The reason to follow such companies is that they have a tremendously large user base which is continuously engaging with their products and hence the insights they share can be considered very valuable.

3. Pick colors wisely

A quick question: Which colors appear in your mind when you think of a Pizza? Red or Green or Mix of them with few other colors? Basically, it’s hard to think of only one color when it comes to Pizza because Pizza represents various colors due to the way it is made. Imagine painting your Pizza shop all white or black? Do you think your shop would be attractive in that case? Maybe not, because in no way that represents Pizza, but the shop would be more welcoming and attractive if you use red, green and couple of other colors which are similar to the toppings made on the Pizza.

Colorful Pizza shop

Why so?

The colors you choose represent your product and also deliver a certain meaning to it. For example, if your product is solving a very serious problem like security or privacy, you might not want to scare users by making entire product red and black, because those colors indicate danger, it’s like adding fuel to the fire. Instead, for such products choose colors which can deliver trust and integrity with the product (blue is my favorite in this case) or colors which can calm the user while using the product. And if your product is targeted for kids, then a mix of vibrant colors delivers the meaning of fun with the product. In short, a thumb rule is to analyze your product well before making the palette and to make sure that colors do not disturb users in any way while they are using it.

4. Ask your users

This is my personal favorite fundamental when it comes to implementing good UX. If you are making a product for users, then it’s very important to make it according to their needs and not anyone else’s.

It’s more like adding a new Pizza in the menu which you think everyone will end up liking, but in reality, no one orders it. In that case, your efforts of coming up with new Pizza and then printing it to the menu goes wasted. On the other hand, if you had simply asked the customers their likes and dislikes then it would’ve surely yielded some good results.

Customer satisfaction

User feedback

Involving your target users or clients while building your product is very crucial to the product’s success. Take as much feedback as you can from users regarding anything related to the product. After all, we are making a product for them and everything they mention should be considered as a valuable contribution to your product.

Deploying new feature or product? - Invite a few users for Usability testing and give them certain tasks to accomplish. Observe the way they complete the task and take feedback about the difficulties they faced.

Thinking about redesigning UI? - Ask your users what problems they were facing with the current design, and take feedback on what changes they would like to have in the new UI.

Planning for a new feature? - Take surveys or feedback from your current users on what they would like to see in the new release.

The list goes on, but if you observe, the only thing I am emphasizing on is to take your users seriously. They are the one who determines the quality of your product. If you can keep them happy, then your product will always progress in terms of quality and business value.

That’s pretty much it, thank you for reading and have a wonderful day.

Free UX related courses by Udacity

  • UX Design for Mobile Developers - Although it is for mobile development, the insights about users are very helpful. I feel in some way it will give you guys a brief idea about the way users interact with the product.
  • Product Design - Well, I am still on it, but I must say, this is a truly amazing course on product designing.

Some references

Credits


Kunal Mhatre

Hi, I am a web developer and my interests revolve around UI, UX, and Product. I like to write about random stuff, even though I suck at writing. Here's my LinkedIn.