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

More great blog posts from Alessandro Loverde

  • Tighten Your CMS Security

    A small investment early in the deployment phase can go a long way to creating a secure environment. Fine tuning permissions Every CMS allows administrators to set permissions for different users or groups and, for the sake of better security, one should check that editors can only do what they...

  • Image Optimization: A Comprehensive Roundup - pt.1

    In the beginning, the World Wide Web was all about optimization. Standard speed was around 3 kb per second, and hosting space larger than 5 MB was expensive. Then broadband became available for everyone, and web designers grew less and less obsessed with image optimization. Nowadays, younger web...

  • Video Tutorial: Building a React App - pt5: Working with External Data

    In the previous part of this tutorial we explored components: the distinctive React feature. We did no magic because we wanted to focus on the basic structure of components, but now the time has come to explore the advantages of generating code employing external data. Replacing hard-coded with...

  • Five Quick Tips Before You Start Your Next SaaS Project

    There are many web apps around, some good, some bad, some are kind of life-changing while others lay almost forgotten, but making a SaaS app is something definitely bigger; a good programmer and a talented designer are not enough. The concept of Software as a Service looks far ahead and...

  • Strategies for a Multilingual Website

    Having a website just in English may be okay for most businesses. In fact, even if you occasionally need to reach foreign visitors, you can expect that whoever is interested in your services has enough knowledge of English to clearly understand what you are offering. But if you sell something...

  • HTTPS and SEO: How to Cover your Assets and Avoid Common Pitfalls

    Back in 2014, Google started to consider making the use of a secure connection (HTTPS) a parameter in their search algorithm. It began with just a 1% weight over all the other factors, but they pushed it further and further; and now, in 2018, every professional website must be served through a...

  • WordPress and SEO; Costly Missteps to Avoid

    WordPress is often a popular choice for a website builder and it is appreciated by many because it gives the users a lot of freedom regarding tools and plugins. Unfortunately, this approach is not good for your SEO because WordPress does not offer many SEO tools out of the box and, if you don't...

  • Video Tutorial: Building a React App - pt3: Code Components

    In the previous part of this tutorial we have converted an existing HTML page into a React app, but we have not seen much interactivity so far. In this new chapter we start exploring one of the most interesting React features, the components. Let's build something dynamic We are going to create...

  • Rising Stars and Falling Comets in the CSS Universe

    CSS is our friend; the relationship between it and web designers has been a bit turbulent over time, but near the end of the first decade of the new millennium, it settled down with mutual love and respect (in the meantime Internet Explorer has met its fate but nobody mourns the loss, right?)....

  • A Bit of SASS Magic: Automatic Text Color in CSS

    We already talked about SASS and how it can revolutionize your approach to writing CSS. We talked about variables and indenting; powerful features but easy to handle nevertheless. We mentioned that SASS has more advanced functions, and in this article we are going to explore a handy one. The SASS...

  • This Is How We Do It - The TROX Case Study

    TROX understands the art of handling air like no other company. It’s a dynamic firm and, through research and development, TROX became a global leader of innovation in ventilation systems. A business can be efficiently run only with efficient tools and TROX has chosen Scrivito to manage over 70...

  • How to Up Your UX Best Practices for Mobile Apps - pt2

    One central guideline for a designer is to have a clear understanding of the medium, the way users will interact with our design. It can be a television, a computer, a book, or any number of things: design is everywhere. A mobile phone is not just a small computer; it has its own unique features...

  • DOM Filtering with jQuery - What You Need to Know

    We have already given an introduction to the jQuery library, showing how useful it can be for web designers and developers: it simplifies the JavaScript syntax for lots of useful DOM-related tasks and it can dramatically speed up the routines to select DOM elements. Now it’s time to expand your...

  • How to Up Your UX Best Practices for Mobile Apps - pt1

    The concept of mobile apps has greatly evolved: with the first apps, developers tried to replicate the same experience of a desktop but, given the limited resources, the results were pretty different and, in some cases, disappointing. A more modern approach is to create mobile apps that offer the...

  • Video Tutorial: Building a React App - pt2: Installation

    In the first post of this video tutorial series, the basics of React.js were covered. Now it’s time to move a bit forward: we will install React.js and configure it. Eventually, the web page of the standard web application will show up in the browser. The installation process The very first step...

  • Obscure HTML 5 Features That May Make Your Day

    Stumbling into one of those popular, so called “cyber cafès” means that nowadays you will probably find tables occupied by hipster-like web designers, delighting themselves into glorifying the moment when they embraced SASS, React.js, jQuery, Node JS, Ember, Bootstrap, Angular and others. Well...

  • You Asked For It - Scrivito Features & Benefits

    The web is changing at a truly fast pace! New technologies break into the market more rapidly than before. The period of caution and skepticism grows shorter, as the IT world has finally understood the impact of being stuck for too long on technologies which are reliable but outdated. The time to...

  • Getting Sassy with SASS - Your First Steps

    CSS is great and there would be no web without it: if you have been involved enough to remember the state of the web in the late nineties, you will immediately get the point (probably, along with a couple of shivers). Unfortunately, CSS has its limitations and they are not easy ones; that’s why...

  • DOM Traversing with jQuery - What You Need to Know

    The Document Object Model (DOM) is an object-oriented representation of a web page which can be modified with a scripting language, like JavaScript: we can think of the DOM as a representation of an HTML page in a way JavaScript can understand. JQuery is a very popular JavaScript library that...

  • Tips & Guidelines for A Better Mobile UX - pt2

    Mobile websites are not just a trend; they meet the user’s demand for a better and more rational use of their time. If we are already out of the office and need to check if the product we want to buy is effectively in the store we are confidently heading to, it’s nice to be able to check this on...

  • Five Quick Tips to Learn JavaScript Faster

    JavaScript has been around quite a while now and we can almost consider it part of the ”old wide web”. But the JavaScript we use now has evolved immensely since its first days. We could better say that what really evolved were the projects that had JavaScript as their core and that made the web...

  • Video Tutorial: Building a React App - pt1: Introduction

    Anybody interested in Javascript development has likely stumbled on MVC frameworks, a term that is pretty much going strong recently and defines a library built according to the “model - view - controller” design pattern. React.js is a Javascript library that acts as the “view” part of an MVC...

  • Traditional, Headless or Decoupled: The New State of CMSs

    Headless CMS is a term that has been on everybody’s lips recently, along with Content as a Service and Decoupled CMS. Actually, these three concepts are very closely related; you can’t talk about any of them without citing the others as well but, for a better insight on the topic, talking about...