You’ve been asked to build a jump box that will allow users to type into a box and search for a customer id. This is a really simple feature – so how do you build it?
The trick is to build the basic functionality, and then try it out. See what you’ve missed, then go back and make some tweaks. This isn’t so much about fixing a bug or two – it’s about building a feature that works really well.
The Basics
The jump box will contain a text field and a button. Clicking the button will take you to the relevant record.
Setting the Focus
When the page loads, is this field the one that will be typed into the most often? On a search page, the search field is the most important thing on the page. So why not put the cursor in that field when the page loads?
Keyboard Only
You may be thinking that it’s fine to type into the box and click the button. But what about if you hit the Enter key? This should perform the same function as clicking the button. By doing this you’ll allow users to use the jump box without reaching for the mouse.
Instant Response?
Similar to Google Instant, would it help if your jump box searched instantly? Or do you want to make the user hit Enter? What do you think they will expect to happen?
Emptiness
If the user didn’t type anything in, should you take them to an error page? Display a simple dialog telling them to type a value? Or display an inline message that alerts them of the problem without taking them out of the field?
No Records Found
If a search returns no results, what should happen? Alert the user and let them try again?
Invalid Characters
You may want to do something with special characters, such as some pre-processing or removing them completely. If the input field should only contain numbers, do you block any other characters from being typed into the box, strip them out when submitting, or reject the submission? If you block characters from being typed in, is it still possible to paste in invalid characters? If so, how do you handle them from that point onwards?
Recovering From An Error
So, if something goes wrong, would you put the focus back into the text field so the user can search for something else?
If This All Seems A Bit Basic…
Then perhaps you already know these tips. But are you thinking about them every time you build a new screen or a new feature? Do you actually try using your application before sending it to a tester or a client? Would using the application help to make it work really well, instead of working “just about OK”? Let us know your comments…
Photo by Robert S. Donovan
