Simple User Interface Tips To Enhance Customer Retention

Aakriti Chugh
UX Planet
Published in
3 min readJul 7, 2018

--

Faced with the fact that your users are whizzing by, there are some important things you can do to make sure they see and understand only as much as they want to and what you want them to know.

Use predefined conventions

One of the best ways to make anything easier to grasp in a hurry is to follow the existing convention, i.e the widely used or standardized design patterns. These conventions include a distinctive shape, color or style. In the past years, many conventions for web pages have evolved. As users, we have come to have a lot of expectations about

Where things will be located on a page

For example, users expect the logo identifying the site to be in the top-left corner (at least in countries where reading is left-to-right) and the primary navigation to be across the top or down the left side.

How things work

For example, almost all the sites that sell products use the metaphor of a shopping cart and very similar series of forms for specifying things like your method of payment, your shipping address and so on.

How things look

Many elements have a standardized appearance, like the icon that tells you it’s a link to a video, the search icon, and the social networking sharing options.

These conventions didn’t just come out of thin air, they all started life as somebody’s bright idea. If an idea works well enough, other sites imitate it and eventually, enough people have seen it in enough places that it needs no explanation. When applied well, web conventions make life easier for users because they don’t have to constantly figure out how things are. If you are going to innovate, you have to understand the value of what you are replacing and it’s easy to underestimate just how much value conventions provide.

If you are not going to use existing web conventions, you need to be sure that what you are replacing it with is either

  • So clear and self-explanatory that there is no learning curve involved
  • It adds so much value that it’s worth a small learning curve

The rule of thumb is that you can and you should be as creative and innovative as you want, and add as much aesthetic appeal as you can, as long as you make sure it’s still usable.

Create Effective visual hierarchies

Another important way to make pages easy to grasp in a hurry is to make sure that the appearance of the things on the page accurately portray the relationship between the things on the page.

Which things are most important, which things are similar and which things are part of other things. In other words, each page should have a clear visual hierarchy.

These are the following traits to create a clear visual hierarchy

The more Important something is the more prominent it is

The most important elements are either larger, bolder, in a distinctive color, set off by more white space or nearer the top of the page or some combination of the above.

Things that are related logically are related visually

For instance, you can show that things are similar by grouping them together under a heading, displaying them in the same visual style or putting them all in a clearly defined area.

A good visual hierarchy saves us work by preprocessing the page for us, organizing and prioritizing its contents in a way that we can grasp almost instantly.

Make it Obvious what’s Clickable

Since a large part of what people are doing on the web is looking for the next thing to click, its important to make it easy to tell what’s clickable. As we scan a page we are looking for a variety of visual cues that identify things as clickable, things like shape (buttons, tabs etc), location (in a menu bar) and formatting (color and underlining)

People also rely on the fact that the cursor in the web browser changes from an arrow to hand when you point it at a link, but this requires deliberately moving the cursor around, a relatively slow process.

In general, you will be fine if you just stick to one color for all text links or make sure that their shape and location identifying them as clickable. Just don’t make silly mistakes like using the same color for links and non-clickable headings.

--

--