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.
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.
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:
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.
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.