UI tips and tricks Part II
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……


Latest posts by Maitreya Dwaipayan (see all)
- UI tips and tricks Part II - 19th August 2018
- SEO – 21 Tips and Tricks that will help a lot! Part II - 16th August 2018
- UI Tips and Tricks I - 13th August 2018
I do agree with all of the ideas you have presented in your post. They are really convincing and will certainly work. Still, the posts are too short for novices. Could you please extend them a little from next time? Thanks for the post.