I’ll be doing a series on enhancing the user experience with JavaScript. Today I want to write about two simple methods that you can implement to enhance the user interface and save the end-user time by reducing the total mouse movements and key strokes to accomplish a task.
As a web developer I’ve written more point of sale and CRM phone order type applications then any developer should have too. My pain is your gain. My favorite use of the javascript focus and select methods is for product searches done via XHR ajax requests. This involves the user typing in a text box, pressing the return key, and product list being loaded via XHR ajax into a div element on the page.
You can enhance the user experience by immediately refocusing the text cursor to that search box and highlighting the text within that box. Here’s how…
MooTools example
1 2 | $('search').focus(); $('search').select(); |
JavaScript example
1 2 | document.getElementById('search').focus(); document.getElementById('search').select(); |
Should the user have typed in an incorrect search phrase or decided that the list of products returned is not what they are looking for, rather than having to backspace through the entire string, they can just start typing again. The use of focus and select will automatically delete what ever was in the search box. The focus and select methods are well known by most web developers, but are under used. This is an easy solution to implement and one that, when used correctly, will save the user a few seconds per operation. Hopefully the use of focus and select will make your next web application flow intuitively while enhancing the user interface and experience.
Related posts: