4

I am upgrading my website to adopt HTML5 standard. I have a field that only accepts integers from 0-99. Originally it has the following code:

<input name='age' type='text' size=2 maxlength=2>

Using HTML5, I can eliminate some client-side checking:

<input name='age' type='number' min=0 max=99>

However, because size and maxlength are unrestricted, user experience suffers on multiple fronts:

  • User is not prevented from entering any length of input
  • User cannot visually tell what is the restriction on the input
  • User can still enter non-digits or decimals although he couldn't submit.

I have seen some people suggesting using type='tel' instead. But that means I still need javascript to eliminate the non-digits. Is there a better option?

UPDATE

I realise that the problem I described above is now restricted to Firefox browser. Google Chrome automatically calculates the size and maxlength for number input based on the min max value, providing the much needed visual clue.

See this JsFiddle

Improve this question
4
  • Can you say something about the context? Eg. what kind of value this is.
    – Jørn E. Angeltveit
    Commented Jul 18, 2014 at 8:18
  • Take a look at "Range". That will give you a slider (if precision is not important). Eg. "Rate this from 1-100"
    – Jørn E. Angeltveit
    Commented Jul 18, 2014 at 8:19
  • @JørnE.Angeltveit, example age, weight, or some integer values that needs to be precise.
    – Question Overflow
    Commented Jul 18, 2014 at 8:43
  • OK. You could also consider "Select". While this would normally give you a drop-down list, some mobile devices (at least iOS and Android iirc) will give you a spinner at the bottom of the screen.
    – Jørn E. Angeltveit
    Commented Jul 18, 2014 at 8:56

4 Answers 4

Reset to default
7

Ceefin's answer makes a very good point. By focusing too much on the details you can overlook what actually matters about UX, which is what the user experiences. And there's no more frustrating experience than a form that asks a simple question, then doesn't let you answer it. This kind of over-validation is horribly common with postal addresses-- I've occasionally had no choice but to give up on a transaction because I wasn't allowed to enter the correct address for my credit card.

So, you may not have a lot of centenarian users, but why would you make a special effort to exclude them? In fact, why even try to validate age, given that there's no way you can really do so? If the user can't or won't answer correctly, then you're not going to get that information out of them.

Similarly, the best way to label a field, in most cases, is to put a label next to it (and use the HTML <label> tag). People have been filling in forms like that for generations; sometimes innovation serves the designer's ego more than the user.

Improve this answer
2
  • Client-side validation is part of the user experience. Imagine the frustration when user submits a form, waits for server to respond and then get rejected. Furthermore, integer validation is not something as complicated as an email address. I believe HTML5 is part of improving the user experience more than serving the designer's ego. It just happens that there are some kinks in implementation by some browsers during this development stage that needs ironing out. Yes, I think the focus should be on UX and maybe I am moving too far ahead and should stick to the old text type input.
    – Question Overflow
    Commented Jul 19, 2014 at 1:50
  • 1
    I didn't mean to imply that using an HTML5 field is showboating. It's just that if you focus too much on technical means of validating input, you can sometimes forget that your code must adapt to the user's idea of valid input, not the other way round. Of course, this applies just as much to your server-side code and database schema. If someone says they're 102, but your DB only has 2 chars to store age, it's not the user who's made a mistake...
    – bobtato
    Commented Jul 19, 2014 at 2:09
2

A clearly defined label stating what input is required by the user should prevent the problem of max length of the input field. There may well be people over the age of 99 using the internet now, so perhaps max length should be 3

Improve this answer
2
  • 1
    The oldest living person in the world right now is 116. I suppose you could set max to 116 and increment it every year; it will always be an upper bound assuming no time travel. 8)
    – Jason C
    Commented Jul 18, 2014 at 14:48
  • Don't get distracted by the age issue, this is just an example. My question is more on how to make the number input more user friendly. If "Age" is the label for the input, how much clearer should the label be?
    – Question Overflow
    Commented Jul 19, 2014 at 1:39
1

I feel that the best solution would be to use a watermark (gray text in an input when it's empty) with the text 0-99.

This clearly states that:

  1. Input has to be a number
  2. The range is from 0 to 99

There are even ready-made solutions for this, like jquery-watermark.

Improve this answer
4
  • You've not really said why you'd recommend that from a UX point of view. Really, they're not especially good as far as UX goes (at a glance it makes the fields look like they've already been filled in, coupled with the fact that as soon as you've started typing in it then the watermark disappears so it's no longer there as a reference)
    – JonW ♦
    Commented Jul 18, 2014 at 10:38
  • @JonW I actually find watermarks to be generally helpful, informative, and unobtrusive, although admittedly secondary to e.g. a light colored description above/below/next to the input. But the answer does need some explanation regardless, and the issue you identify with it disappearing does sometimes come into play when e.g a form is auto-filled before you had a chance to read / recall what the watermark said (and it's always a plus to reduce user working memory usage in any case, in my opinion).
    – Jason C
    Commented Jul 18, 2014 at 14:42
  • 1
    the correct term for "watermark" is a placeholder.
    – Anindya Basu
    Commented Jul 18, 2014 at 15:57
  • One caveat is that the input box must be wide enough to display the placeholder text.
    – Question Overflow
    Commented Jul 19, 2014 at 1:55
0

Make sure that the user can use any kind of input; mouse or keyboard (or touch for that matter). And through visual hints like:

  • The width of the input field
  • A representative-icon on the left side of the input field
  • A placeholdertext/icon
  • Possible (i)-icon on the right with hover-info
  • Visually wrapping input boxes in a container

You should be able to help the user a lot by providing both visual and textual hints. However your problem with browsercompatibility seems only fixable using javascript. Anyways as mentioned above, the best way to prevent problems is to help the user not make that problem in the first place :) hope this helps!

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.