As I have been using my Dig Deep Fitness iPhone fitness application over the last few months, I have noticed a few things that need to be improved; one of the biggest points of friction is the fact that 98% of the text input in the application is numeric and yet, every time I click on an input field, I am presented with the iPhone's Alpha keyboard, which I then have switch over to the numeric keyboard. This adds like 50% more clicking than is unnecessary and the keyboard input is quite misaligned with the goal of the user experience. When I first started building this iPhone fitness software, I looked for a way to default the iPhone's keyboard to the numeric one, but I couldn't find anything. I did find information on the -wap-input-format CSS property, which allows you to restrict formatting of text input fields, but these seemed to be ignored by the iPhone!
I thought all was lost and that I would have to suffer with the default Alpha keyboard; but then, this weekend, I went to fandango.com, which redirected me to iphone.fandango.com - their iPhone optimized mobile site (which is extremely well done, by the way). When I went to enter my zip code location, I clicked on the input and was immediately presented with the iPhone's numeric keyboard!! I almost couldn't believe my eyes. I had to cancel out of the input and then click on the text box again, just to make sure that I wasn't imagining what I had just seen. And yep, sure enough, I was presented with the numeric keyboard again.
This morning, I was determined to figure out how this was happening. The first thing I did was switch my FireFox's User Agent to mimic the iPhone and checked out Fandango's iPhone site. Here is the HTML for their ZIP intake form:
<span class="font1">Enter ZIP code:</span> <form action="index.jsp" method="post"> <div class="bbox"> <table class="font1"> <tr> <td> ZIP Code: </td> <td> <input class="phone" type="text" size="10" name="zipl" value="" /> </td> </tr> <tr> <td colspan="2"> <input type="hidden" name="mk" value="null"/> <input type="image" src="/M/NS40P/btn_sub.gif"/> </td> </tr> </table> </div> </form>
I was expecting to see some cool CSS or META tags or even a Safari-proprietary tag attribute... but nothing. I checked the style sheet. Again, nothing. There didn't seem to be anything that would make the input default to the iPhone's numeric keypad. And so, I set off to Google for some answers. After a while, I found some information about input naming on the iPhone. Apparently, if you include "phone" or "zip" in the input field name, then the iPhone will default to the numeric keyboard. I didn't immediatly try this on Dig Deep Fitness since it's a fitness application and has nothing to do with phone numbers or zip codes and this would feel very misaligned with the goal of my software. However, after further Googling, it seems that this is the only available formatting option.
So, I went into Dig Deep Fitness and added "_zip" to my weight and reps input field. Luckily, my fitness software doesn't actually use the input field names (but rather their placement within the form) so the programming logic did not need to be updated. And, sure enough, the input fields now default to the iPhone's numeric keyboard! Aside from the fact that this is a really ganky fix, I am extremely pumped to have gotten to the bottom of this. I believe that this extremely small change in the user interface is going to have an extremely HUGE impact on the user experience.
I really don't like how the iPhone is handling this. Forcing the developer to include "phone" or "zip" in numeric input fields is going to lead to very poorly named form fields. Imagine having to write something like this:
$ <input type="text" name="price_zip" />
Here, I want a numeric value, since I am talking dollars, but I have to put "zip" in the field name?? As a programmer who tries to follow best practices and aims for easy maintainability, this makes me cringe. I hope that in the future, the iPhone Safari browser will follow the WAP formatting standards which can be included in external style sheets.
Want to use code from this post? Check out the license.