Tips & Guidelines for A Better Mobile UX - pt1
When the iPhone came out it started the mobile web revolution: for the first time, we could browse web pages on a mobile phone in a decent and usable way. As soon as people had started to do that, the limits of the resizing technology used became evident, accompanied by a high demand for a browsing experience designed with mobile in mind. So mobile viewports, media queries and various frameworks hit the the market. Nevertheless we are still surrounded by lots of websites that offer a mobile browsing experience often far from optimal. Here are a few tips for mobile UX we have found helpful.
Setting the Focus
We stopped caring about the vertical size of our viewport long ago; putting the essential pieces of information near to the header and assuming that the users would scroll for the rest of the content. This approach is, obviously, valid on mobile as well, but can we be sure that the essential information always stays above the fold? This may not be the case.
In a typical mobile layout, there is a header, a claim, a footer and a “call to action” button. The claim is the same we have on the much larger desktop version and should be big enough to catch the viewer’s attention; if the call to action follows the claim, it must obviously stay in the first screen, so it should fit the viewport. The tricky part is that we, too often, forget that we have many viewport sizes and, though they do not differ so much in width, they might do significantly with respect to the height. The iPhone 5’s viewport is often considered the benchmark for mobile testing but that does not mean that phones with a smaller viewport are a negligible part of the market share: if our essential “call to action” is relatively positioned below the claim, it could be fine on an iPhone 5 but relentlessly cropped on an iPhone 4 or many entry-level Android terminals. Also remember that a lot of people still use smartphones mainly for calls, and that they appreciate smaller and handier phones.
Our landing page on a typical desktop resolution
Testing on an iPhone 5 says everything is ok
On an iPhone 4 our important button falls below the fold
Don’t Be Annoying
Modal windows and pop-ups have been extensively used and are still a common practice for boosting registrations or newsletter subscriptions; they are often not exactly the most pleasant part of the browsing experience, but on mobile they can turn into a nightmare. Let’s say first that, when browsing from a mobile device, we have much less patience. We aren’t comfortably seated in our office chair (where we are paid even if we're surfing) but we could be standing, waiting for the bus, grumbling while the page loads (in the meanwhile our network cycles through 4G, 3G and Edge) and when it is finally ready, the first thing we see is an overlay that covers the entire screen asking us to register for a shining and sparkling newsletter: not that neat, right? To make things worse, most modal windows have tiny closing buttons (too tiny for an average finger) and dismissing can be a painful process.
Bad Registration Forms = Lost Opportunities
Registering is another necessary evil; nobody likes to fill out many input fields with merciless data validation; UX mistakes are really common, and bounce rates can be dramatically high in registration processes. When switching to mobile, not only the probability of errors being thrown is much higher, but these errors are usually more tough and drastic, often preventing users from completing the registration process. Some common examples:
- Input fields are the most unpredictable HTML elements. Many developers are comfortable with ruling them with fixed dimensions but, if proper cross-browser checks aren’t performed, some essential control may overlap within smaller viewports, making them unclickable.
- Validation errors may not have enough space to show up and their containing layer can overlap the input field itself, preventing users from correcting their inputs.
- Custom drop-down menus that are too long and extend past the end of the viewport must not cover the entire viewport width, otherwise the user cannot scroll to reveal the last menu options.
- Setting the type of the input to tel or number can bring up the mobile’s numeric pad and, luckily, it’s a best practice: entering numbers with the standard mobile keyboard can be a nightmare.
Aside from these technical tips, as a professional UX Designer consider that filling forms on mobile takes up twice the time needed on desktop, so pretty extensive registration forms, though acceptable on desktop, can scare mobile users away.
Use Whitespace to Give Importance
The most important challenge when designing a mobile layout is to leverage the scarce amount of space of the mobile viewport. A reasonable way to accomplish that is to get rid of some of the cosmetic elements we use to catch the visitor’s attention better and to focus on the core features. Once we have stripped our interface down to the essential parts, one idea to make one of these part stand out is to give it additional white-space: this technique, traditionally utilized with various media, is even more effective on mobile phones.
User Experience Design is not just designing an enticing, modern interface for a website; it’s a journey inside the human mind. It means taking people by the hand and guiding them as they learn to interact with the machine. Every gesture, every glance, every habit matters, that’s why the UX Designer needs to be a good observer first, reflect a lot even on their own gestures (we are still users, after all) and take note of whatever solves a problem, brilliantly, of course, if possible. We are still working on mobile interfaces and, although we achieved remarkable results, there is still a lot to improve and it will surely be an exciting task.
We hope that this article has been a pleasant and useful reading – we at Infopark enjoyed writing it – we had so many ideas and more tips to share, that we have a second part of this article coming out soon. So, stay tuned and check back again soon for more UX tips.
JustRelate ist Ihr Partner fĂĽr Digitalisierung
Seit über 30 Jahren helfen wir B2B-Unternehmen und dem öffentlichen Sektor bei der digitalen Transformation. Dafür bieten wir zum Beispiel CRM- und CMS-Lösungen sowie maßgeschneiderte Digital-Experience-Plattformen (DXP). Unsere Kunden profitieren von unserer hochmodernen, integrierten Software-Suite, auf deren Basis wir ihre digitalen Kundenbeziehungen neu erfinden.
