UI tips and tricks Part II

Posted on by

 

Continuing from Part I where we discussed two methods to improve UI (User Interface) of any weblication (web + application). Here we will discuss two more important and time-tested methods.

3) Auto Focus on input

When a user loads a form if the cursor is automatically focused on the input field it will save the time for the user who does not need to click on it. Such small things help improve the user experience a lot.

A simple way is to add the following to the body tag –

<body onLoad="document.forms.form_name.form_field.focus()">

with the form:

<form method="get" name="form_name" action="#">
<input type="text" name="form_field" size="20" />
<input type="submit" value="Go" />
<form>

If the user presses backspace for history s/he would be just deleting characters in the input field. To allow the user to use backspace for history when the input field is empty use the following code:

window.onload = function () {
// focus on the input field for easy access...
var input = document.getElementById ('focusme');
input.focus ();
// ...but if someone wishes to go back in their history, let them!
document.onkeydown = function (e) {
if (!e) {
var e = window.event;
}
if (e.keyCode === 8 && !input.value) {
history.back();
}
};
};

Using verbs for buttons like yes no cancel can help speed up process as we do not have to read the whole alert message to decide.

4) Using Verbs

Using verbs for buttons like yes no cancel can help speed up the process as we do not have to read the whole alert message to decide. Focusing on the primary actions helps more as the user performs it with a simple enter. It is very simple but also very effective. Buttons with ‘Choose your basket’ or ‘Get started now’ are more prone to be clicked than ‘Choose’ or ‘Start’.

 

Small things like usually make a difference between two applications providing the same functionality. Soon there will be a time where all applications will be at par functionality-wise and the winner will be the one better in UX (User Experience) hence in UI.

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)