Designer's tips on making your mobile UX design as good as the desktop one

2. Accessibility, reachability, and predictability

Now, once we’ve agreed (haven’t we?) that the less content the better, let’s dive a little bit deeper and think about accessibility, reachability, and predictability. To create a good mobile experience, we can’t just copy-paste desktop elements – we definitely should follow the visual style of buttons or controls, but they can’t be reused in the same form for the mobile. We have to remember that mobile devices are much smaller than desktops as well as they’re used in different ways, with hands and fingers instead of mouses.

In general, everything should be bigger on mobile web apps. Any paragraph smaller than 16 pixels is challenging to read on any screen. Speaking of typography, besides the font size, the important things are also font family and font weight. Users prefer a clear, easy to read font and they want to see what they’re reading, so it’s safer to get rid of ultra light fonts, even if they seem appealing. It’s also nice when there’s a typographic hierarchy so that titles and headers are easy to spot.

Another thing is the contrast, which is relevant for every single element of the user interface. We need to assume that conditions under which people look at their mobile devices are rather far from being ideal and high contrast can make the elements more visible even when the bright sun hits the screen. Other than that, a light text colour against a light background colour is always hard to read.

As I’ve mentioned before, designing for the mobile is designing for fingers, not cursors, so we have to make sure that clickable elements like buttons, dropdowns, or any other triggers are reachable for the user. Finger-friendly controls that are easy to tap measure at least 40 pixels (10-12 mm), however it’s not only the size that is important, but also the right amount of space between targets. If we have, for example, two buttons and one says ‘Continue’ while the other says ‘Cancel’ and they are too close to each other, they can be tapped by mistake, which can actually frustrate the user or even make them leave the website.

What’s also worth considering is the thumb zone. The bigger the display, the more of the screen is less accessible, while most of the users hold mobile devices with only one hand. What we’re taking from that is the good practice of putting the majority of interactive content, especially call-to-actions, in the so-called safe zone (see the illustration below) – the area that can be easily accessed with the thumb, while others require some inconvenient finger stretching.

And finally, we move on to predictability, which is of key importance for mobile devices. Unlike the desktop, where users can hover elements to get some help or understand whether something is interactive or not (which should always be clear at a glance by the way…), on the mobile, users can only tap and proceed further immediately. That’s why, for instance, call-to-actions should look like call-to-actions and their labels should be understandable so it’s obvious what they do or where they link to as well. When things work in the way users predict, they feel a stronger sense of control.

You might be also interested in the case study:

case study

Designer's tips on making your mobile UX design as good as the desktop one

3. Forms and inputs

While good patterns for inputs and filling the data are another long story to tell, let’s just focus on treating them on the mobile. As we all know, typing on a small mobile screen isn’t the most comfortable experience, but there are a few solutions that make it easier and faster.

As the importance of the size is described above in more detail, I’ll just mention that it also applies to the inputs, which everyone wants to fill in the end. Other than that, the layout, especially of long forms, matters and it’s really a great convenience when fields come one below the other instead of being placed next to each other. Also, another great improvement is simplifying the forms by removing unnecessary fields, like merging two fields – ‘First Name’ and ‘Last Name’ in one ‘Full Name’ field.

What’s more, to make the process of filling forms smoother, we should specify the type of the inputs as well and customize the keyboard for the type of query. This way, for the email address field we can display a keyboard with @ symbol, for the field with phone number – numeric keyboard only, and for the date field – provide an easy-to-use date picker. Another good practice is prefilling the data in some cases instead of asking the user to type the same data twice.

4. Process visualization

If there’s a process within your app and it contains a lot of actions required from the user, it’s good to divide it into smaller steps. This principle is extremely important in mobile design because we don’t want to create too much complexity for the user at once – on one screen. It’s useful especially for e-commerce purchasing paths, registrations, or applying for anything.

Once the process is splitted, we need to show it properly. The users should have control over every step, which means they should know at a single glance where they are in the flow, what needs to be done there, what’s next, and how many steps are left to finish the process. We can achieve that by using a stepper at the top of the screen.

You might be also interested in the article:

Digital Product

6 business insights you should demand from a code and UX audit

However, displaying steppers on the mobile is quite challenging due to the limited horizontal space. Applying the same linear stepper design from the desktop to the mobile may cause visibility and readability issues as it’s rather impossible to force all step titles to fit a tight space. To avoid visual noise and make it easier for the users to track the progress, the recommended solution for mobile web apps is using a radial stepper. It gives enough room for long step titles as it displays only the current step at a time, indicates the next one, and represents the flow progress in a visual way. Because of that, it takes only a couple of eye fixations to scan the radial stepper.

5. Accessible and easy-to-use tables

If you think there are no tables within your app, you’re probably wrong. We can see them, for example, on applications with admin panels (users list), e-commerce sites (cart or last orders list), or any financial apps. So now, how can we fit a wide table from the desktop to the narrow and vertically-oriented mobile screen without losing its purpose and readability?

There are several quite good ways of approaching that. The first one is to simplify the table by reducing unnecessary columns so it fits and still remains a classic table, but of course, there might be cases when the user context doesn’t allow us to drop any data. Then we can think about making the table fully responsive, where the data is visible without vertical scrolling.

How to achieve that? A good idea is to use swipe gestures to scroll the content, making the primary (legend) column fixed in one place at the same time, so that we don’t lose the context. A table in this form is handy and nice to use, but might be problematic if there are a lot of columns. That’s why a common, bulletproof practice for a huge amount of data is to transform the original table by putting the table rows into separate cards, placed one below the other with a possibility of collapsing them. All in all, depending on the needs, there are many ways to present your data correctly and attractively!