UI Tips and Tricks I

Posted on by

Developing any web application involves designing an interface(UI) for the user. The user is somebody who is going to use the application and everything depends on their verdict. The application should be designed with the audience in mind. As Steve Krug has said the user should not think. Interface design should be focused on user experience and accessibility, to make the application a hit. A very common and good method of getting to know the user’s mind is to conduct a survey. When that is not possible it is best to use some time-proven tips and tricks (Patterns). Here are some of the methods to improve user experience and should be kept in mind while designing any interface. After having read tons of articles and blogs on UI these are the few tips which make to my list.

1) Contrast=Focus

The user attention should be focused on the things we want them to focus. The user never reads s/he scans through the page so it would save a lot of time if we focus on the important part using contrast and colours.

For example, the heading of a post can be dark and bold while the date of a post can be lighter. Fading extra out is a great way to focus user’s attention on the important portions of the interface.

All in the same colour with no contrast.

Contrast used to focus on the title.

This method can be best used to highlight important changes which are something the user wants to notice first.

An example of contrast and emphasis on the primary actions like search icon and submit button.

2) Focusing on Primary action

While filling any form the user already knows the action (send, submit or save) s/he is going to take. Clicks on ‘Cancel’ are few and when the primary action and secondary action looks the same user has to concentrate more (which means thinking = Bad). The primary action and the secondary actions can be distinguished in two ways:

  1. i) Using different colours for the two buttons with the primary one vibrant and in contrast. The secondary one can be made dull with less contrast or faded.
  2. ii) Making the primary action button and the secondary action a link. But the secondary action link should be always underlined.

To be continued….

The following two tabs change content below.
My Twitter profileMy Facebook profileMy LinkedIn profile

Maitreya Dwaipayan

Maitreya is an experienced product manager with a deep interest in data analysis and process improvement. Starting his career as a Java developer, he moved through an interesting path as Automation engineer (Adobe Systems), QA lead (Amazon)  to finally Product manager  (AppLift). He holds a master's in International Business Management (Specializing in Digital Business Management & Leadership).
My Twitter profileMy Facebook profileMy LinkedIn profile

Latest posts by Maitreya Dwaipayan (see all)