Mobile users are not the future. Mobile users are the present. This is why it is more important than ever to ensure that users on mobile devices are getting an experience that is comparable, if not better, than desktop users when they are accessing an online application or site. User experience (UX) can be affected by many factors, but the following are two examples of easily rectified issues with mobile user interfaces (UI) that I find the most often, both as a user and as a developer.
The result is a significantly easier to use interface and a significantly happier user. When entering phone numbers on a mobile device such as a phone, the dedicated keypad layout is far more familiar and provides an improved user experience. It is especially important to consider forms. UX issues such as form abandonment are far more prevalent on mobile devices. Anything that can make it easier for a user to fill out your form and complete submission is extremely valuable, especially in cases such as shopping carts. A full list of the available type attributes can be found over on the w3schools page.
Considering that the use of the Internet on mobile devices will surpass conventional desktop use in 2014 (or in fact, has already occurred in some parts of the world), it is now more important than ever to consider user experience on mobile devices and make sure proper testing takes place. Gone are the days where we must consider desktop users as the majority, so when creating any design start by thinking mobile first.
These two issues are the ones that I seem to find the most frequently, but I will return to write about more.
Are there any areas of mobile UX you would like to know more about? Share your thoughts with me on Twitter.
1. The relevant “type” attribute is missing on input fields.
This is one issue that is likely quicker and easier to fix than any other, yet it seems to be one I experience or find on an almost daily basis. With the introduction of HTML5, there are now a number new type attributes that can be used on input elements (which will acceptably default to the standard “text” in non-HTML5 browsers). One of the major benefits of these is letting a browser know what input to expect in this field and assisting users accordingly. One of the most common and useful, but often most forgotten, is the “tel” type. Let’s take a look at a very basic form that leverages the benefits of a few extra characters in your code. If you want to try an example yourself, w3schools provides a “try it” page.
<!DOCTYPE html>
<html>
<body>
<form acti
<label for=”form-phone”> Please enter your phone number:</label>
<input type="tel" size="20" name="phone" id=”form-phone”>
<input type="submit">
The use of “tel” in the type attribute lets browsers know that this field expects the entry of a phone number. On mobile devices, no matter whether it is through browser delivery or a dedicated app utilizing HTML, this allows the device to present the user with a specific keyboard, or in this case, keypad. The same form, with and without the “tel” type set is shown below.<html>
<body>
<form acti
<label for=”form-phone”> Please enter your phone number:</label>
<input type="tel" size="20" name="phone" id=”form-phone”>
<input type="submit">
</form>
</body>
</html> |  |
| When using the 'text' type | When using the 'tel' type |
The result is a significantly easier to use interface and a significantly happier user. When entering phone numbers on a mobile device such as a phone, the dedicated keypad layout is far more familiar and provides an improved user experience. It is especially important to consider forms. UX issues such as form abandonment are far more prevalent on mobile devices. Anything that can make it easier for a user to fill out your form and complete submission is extremely valuable, especially in cases such as shopping carts. A full list of the available type attributes can be found over on the w3schools page.
2. There were no mobile considerations in the initial design.
Perhaps this post should be named “My single most common issue with mobile UIs” because this is one that should really go without saying. However, it can be quite staggering to find that there are still many new or popular sites that when accessed on a mobile device do not present a “mobile friendly” version. In some other cases, the mobile version of the site does not seem well thought out or is difficult to use. This often stems from the fact that the initial designs were not drawn up with mobile users in mind. The result is a mobile version of a site that was developed as an afterthought, often with small bugs or usability issues (such as the telephone example above) not taken into consideration.Considering that the use of the Internet on mobile devices will surpass conventional desktop use in 2014 (or in fact, has already occurred in some parts of the world), it is now more important than ever to consider user experience on mobile devices and make sure proper testing takes place. Gone are the days where we must consider desktop users as the majority, so when creating any design start by thinking mobile first.
These two issues are the ones that I seem to find the most frequently, but I will return to write about more.
Are there any areas of mobile UX you would like to know more about? Share your thoughts with me on Twitter.
Matt Bearup, in addition to being a consultant at eBlueprint Pty. Ltd. AU, is proud to be an IBM Redbooks Thought Leader.
