Better design for web input elements
Better design means better user experience. So how do we deliver it to the users?
We minimize users interaction.
Unfortunately we still find today a lot of weird web forms. How often do you find these annoying date input fields, where you see a plain text box with a nice example text explaining you the correct format, e.g. dd-mm-yyyy or such?
What’s the problem you ask? There are several.
First, you have to type. And this increasing the negative user experience and time on the website. The game that you created is played from now on against you. Isn’t it shocking?
Next, the user has to type correctly! And in case that there’s some validation behind, the website will return your marked input yelling some “Error! Please correct your date” output. The game continues, and the user corrects the text. This stage can go on loop several more times.
Multiply this single experience by some 10 more elements some 10 more websites per day, and your frustration is guaranteed. This is what I experience daily. You might feel the same.
How this could be done better? The developer, can add an example or two. Instead of adding dd-mm-yyyy, 04-07-2012 could be added. Now the user can just copy and paste, or mouse-select and drag and drop this example to the textbox input and change it. A datepicker could be added, but hey, this is all old and primitive. We’re in the HTML5 era fast-forwarding to HTML10, aren’t we?
The best in my opinion, would be a completely new element in HTML5, but since there’s isn’t one, let me explain how to make it with Javascript.
The date field would consist of something resembling the old counter, with guessed date. If the date cannot be guessed, today’s date can be placed. But if we’re talking about some adult, and asking about his age, we could guess that his age is more than 20 years, and place the initial value, say, 15-06-1992. Now comes the interesting part. Clicking and dragging the numbers, should roll the number up or down. So if my birthday is actually on 28-09-1979 (dd-mm-yy remember?) then I’ll drag up a bit the number 15, then just a bit more the number 06, and finally the year. Why 15? Because it’s in the middle of any months. See the logic sneaking in here? So same with the 06.
Ok. Now what?
This element is kind of new. So how do we make someone feel comfortable with it? We tell the user nicely, “click and drag” and we make sure that dragging up is equivalent to dragging to the right, and down is equivalent to the left. Why? To ensure that user gets the feedback in any case even if he moved to the wrong direction.
Of course, the validation should go with AJAX or HTML5 or whatever, just don’t force the user to refresh the page! Add a simple button, and please don’t use the ugly word “Submit”. Call it “Save” or “Store” or “Update” instead. And once it’s clicked, change it to “Saved”, “Stored” or “Updated” disabled button state accordingly. Take one further step to make it even better - save automatically each few seconds, so there won’t be any need to submit anything to anyone.
Are you still reading? Good. Let’s allow the “Save” button to flow nicely to the next field which we’re editing. Do you remember how it’s troublesome, especially inside a long web form, to scroll up and down and trying to figure out where is that freaking button? No more.
Red light district. I really hate this thing. Every time a red-colored error appears before my eyes, it drives me crazy. It’s like I just created some wicked evil. Instead, I’d love to have some more nice colors, like green or blue sine-waiving calmly and driving my attention. Ok, you know what? You can add the STOP road sign of the country where the user came from. Just remember, it’s not the same in most of the countries, so please do act accordingly :)
Summary.
In this pattern, we’ve covered and corrected a pattern for date input field to make users experience more pleasant on your website, thus leaving them with a good mood. This won’t push them away and eventually will bring you more happy potential customers.