Great user experience is not just about localizing numbers using , instead of . for decimals. It's also knowing whether your users wants to use kilometers or miles. Metric or imperial. Days, hours or minutes? And that's not an easy thing to do.

User experience for number inputs using ASP.NET MVC

There is one thing I really hate when it comes to user experience on the Web: A dumb textbox for a very specific input. I'll explain.

Let's say you have a currency input. The default approach with ASP NET MVC 3 would be the following:

[Currency]
public decimal Money { get; set; }

We would get a plain textbox. If we're lucky, we get an HTML 5 <input type="number"/> but still, there's a long way to go to make it user friendly. From a usability standpoint:

  • Can I write a dollar sign in the box, please?
  • I don't know what the intended format is... Can't the website just try and understand what I'm trying to input?

And it's always a hassle in ASP.NET MVC. Don't get me wrong, the model binding infrastructure is great (it really is surprisingly good.) But it's limited in the fact that it uses strict parsing, and let's face it: The framework cannot do all of the work for us, developers. There are two ways (as far as I know) to go and offer a great experience to users when it comes to textbox containing non-text input:

A godlike parser for your model binder

Give freedom to your users and let them enter what they think is a valid input. But then, you have to go a long, long way to understand what is it they are trying to tell you. What culture is it in? en-US? or is it fr-CA? or is it fr-FR? We have to write a custom model binder for decimals. Hell, the framework is extensible and that's what it's for. But I'm not going to do this here. There is plenty of documentation on how to do this properly.

And it's a little painful. First, you have to deal with Model Metadata. Is it a currency input? Or is it a regular decimal? Is it something else? Kilometers, miles, inches? The problem is rather simple: All of these guys are going to get squished in our fabulous DecimalModelBinder and then bound to decimal (and decimal? too.)

JavaScript to the rescue

Use JavaScript to sanitize and standardize the user's input onfocus and onblur. For our currency input, there are libraries that can do that for you effortlessly. Remove the dollar sign when the input receives focus and prettify the input when the focus leaves the input. Good. But now you have two problems (don't worry, we're not using regular expressions here.)

See, now our model binder receives this value when binding it to the currency field: "$2,100.99". Or this: "2 100,99 $". Or this: "2.100,99 €". Man, see what there decimal and thousand separators are trying to do to us... But it's not as bad as it seems. decimal.Parse will go a long way to understand that amount, so all we have to do is remove the dollar sign, and the Euro sign, and so on. Or simply use NumberStyles.Any. But still, now you have to deal with JavaScript and a custom ModelBinder

Now users have to following advantages:

  • JavaScript gives them immediate feedback on how their input was interpreted
  • Their input is properly formatted when they leave the input. The field represents money and it's good to know that we've entered $12.99, not 12.999 km.

What about us, developers?

It's a whole lot of fun to wire JavaScript and custom parsing in our model binder each and every time a new kind of number comes along (not.) And it's not only for numbers. TimeSpans are painful too. If the user wants to say "25 hours", "25:00" is acceptable, right? It sure is. But TimeSpan.Parse expects "1.01:00". And it is supposed to make sens to users, apparently. Enough ranting about TimeSpans (I could go on for a while.)

The point is, it's insanely difficult to provide a great user experience to our users when it comes to numbers. And the next time you have to think about introducing a field for a distance, you probably won't want to deal with "25,5 km" and "20.1 miles" and "153 meters". It's probably going to be:

Distance (in km): [       8km ]   "8km" is not a valid number

But your users deserve better. Great user experience is not just about localizing numbers using , instead of . for decimals. It's also knowing whether your users wants to use kilometers or miles. Metric or imperial. Days, hours or minutes? And that's not an easy thing to do. But it's totally worth it.

c#asp-net-mvcuser-experience
Posted by: Bryan Menard
Last revised: 26 Oct, 2011 03:37 PM History

Comments

No comments yet. Be the first!

No new comments are allowed on this post.