Here is a really simple way to improve usability for those on mobile devices. It is far less noticeable when done correctly and highly annoying when not done!

If you are working on a large web application, often the first step for users is a log in form. Short of any interaction users may have with homepage content logging in will be their first interaction with the page. If they are on a mobile device there are a few common annoyances that are very easy to fix. These are auto-capitalization and auto-correct (spell-check), both of which are enabled by default for a standard text input field.

Bad

Users will see the following when typing their username when a text input is at it’s default:

Better

These attributes can prevent the mobile browser from doing this:

Best

Here is how we can easily correct this is to use the following attributes in the code for the input field:


This works great for input fields however we can shorten this even more by just using the HTML5 type attribute set to email. I like this because it is another good idea to allow users to input both a username and email to login. Not necessary but can be useful if there is no reason to explicitly need a username to login. Also the type set to email does not require an email and the @ symbol will be added to a mobile keyboard for further ease of input. Highlighted in red we can see that there is now no auto-correction or auto-capitalization. The @ symbol is now also available if a user would like to use their email.

There are many new and old attributes that can be used to make forms easier to use and customized: http://www.w3schools.com/html5/tag_input.asp

A few to note are:

  • autofocus (allows the field with autofocus defined to have an active cursor)
  • place holder (text to be displayed while a field is empty)
  • required (denotes a required field for form submission- supported browsers will catch this)
  • type (many new types such as email, password, url, etc.)