Designing a good user experience for mobile users is not the same thing as designing desktop UX. Apart from the obvious screen size differences, there are several other things to keep in mind when designing for current mobile platforms.
This difference is important, since mobile use is only growing as people become busier and are more often on-the-go. It’s estimated that 63% of the total site visits in 2017 were made on a mobile device, compared to 57% in 2016.
That is a major indication that UX designers need to be more conscious than ever about the realities of designing for mobile interfaces. It’s not enough to just design for desktop and apply it to mobile, at least not for accurately responsive sites and applications.
Here are seven important things that every UX designer should take into account when designing for mobile.
1) There is no such thing as a hover-over state in mobile
There’s a lot of information that designers like to show in hover-over states, such as page summaries, titles, or effects such as a change in image or color. This hover-over function is an important behavior in desktop UX.
- Hover-overs let users know an item is clickable.
- They let you give more information to the user, without showing absolutely everything at the same time.
- They make the interface more interactive and engaging.
However, we can’t use hover-over on mobile interfaces since users navigate with their fingers and you can’t “hover” with your fingers. UX designers will have to change the way they present information on mobile. They also have to show clickable items differently.
2) Icons and buttons often need to be bigger on mobile devices
The reason for this point is fairly simple- fingers are bigger than cursors. There’s nothing more annoying than when you try to click something with your finger, but you open up everything except what you wanted. Basically, if it is clickable on mobile, you need to make it bigger and more obvious. People have a lot more control of where they click on desktops, so this isn’t as much of an issue.
3) Spacing between elements and sections needs to be adequate on mobile
This point is directly related to the above tip. If elements, especially clickable elements, are too close together, then it will be too hard to tap the right element.
Another thing to keep in mind is how mobile interfaces should be divided by screen sizes, as opposed to the pages you are used to on desktops. This means that all your information for each section should fit into the screen that is being viewed at the moment. Try to avoid making the user scroll too much for each individual section of the interface.
4) Avoid using too many “Load More” buttons on mobile
For loading time reasons, desktop interfaces usually include “Load More” buttons, especially in pages with lots of content, such as blog pages. When designing mobile UX, remember that longer, more continuous scrolls are usually better than interfaces that require the user to tap/click often.
5) Keep font size big enough for mobile users
The general rule is to keep font sizes 14px or bigger when presenting text on mobile interfaces. If font is too small, then users will have too hard of a time understanding it. If you are designing for older populations, then keep it 18px or bigger.
You absolutely need to make sure the text is big enough if you are including hyperlinks in text, otherwise, users will have a hard time tapping the exact link.
6) Avoid mobile pop-ups
Love them or hate them, but pop-ups are still pretty popular when designing desktop UX. However, mobile pop-ups usually end up being too small for people to be able to read. If you are going to create a mobile pop-up, make sure it is big enough to read and that the text boxes are big enough for people to tap and write in their info. Or avoid pop-ups all together and go for a more user-friendly notification experience.
7) Some functionalities work on desktop that don’t work on mobile
Let’s use the example of menus. With desktop, fixed menus are a great way to aid in user navigation. It’s easy for the user to always return to the menu and explore other parts of the page. However, fixed menus in mobile take up a lot of space that should be devoted to content.
Instead, consider using a long scroll and include the elements of the menu in the course of the scroll.
Your mobile and desktop interfaces should be close enough to be immediately identifiable and easily navigable. However, there are very important things to keep in mind in order to make sure your mobile user experience is on point.
If you are looking for a software partner who will work towards your own business goals and success, then Avantica is your solution. We offer dedicated teams, team augmentation, and individual projects to our clients, and are constantly looking for the best methodologies in order to give you the best results.
Let's start a project together