When we talk about the best practices for mobile sites UI/UX, we have to consider from the smallest thing like a “tap to call” button to the entire architecture of a website. Let’s see what they are, one by one.
Miniaturization v/s Mobilization
The first step is to understand the difference between miniaturization and mobilization. Miniaturization means just making the components of the website smaller, which is not a very good practice because it takes mobile usability and user experience to back seat. The understanding of miniaturization and mobilization decides where our website ranks on user experience.
Mobilization means using the latest technologies (XHTML, HTML5, CSS3) and following the best practices for mobile UX to build mobile platforms. With the regular changes in user habits, we just can’t make our website mobile or tablet friendly, it needs to be built for mobile or tablet. The first step towards mobilization is choosing between a responsive website, adaptive website or mobile app.
Never Ignore Platform UX
It is very important to build a user-friendly interface. We should keep our interface simple so that users are not forced to learn new ways to navigate. A unique mobile UX building means keeping the basics intact and experimenting with the rest of the features.
Navigation of the mobile websites should always be clear, intuitive and easy to use. Here are a few things to consider:
- When users land on our webpage, they start searching for the menu. The menu should be clearly visible and should be replaced by a button that opens vertically.
- The levels of navigation and the number of categories should be prioritized and reduced.
- Use navigation buttons that are clear and consistent.
- The footer should connect to the home page and other important pages.
- Add easily visible social sharing buttons.
- When optimizing for e-commerce websites, keep search and shopping cart easily accessible on each page.
We should use fluid layouts for our webpages rather than fixed layouts as fluid layouts are more user-friendly. Fluid layouts use relative units instead of fixed units. The fluid layout will often fill out the width of the page, no matter what the width of the browser might be.
It has drawbacks when it comes to very large or very small browser widths. For a very large browser width, elements can get stretched and for very small browser width, content can look cluttered. But, these cases are not very common.
Understanding the Technical Limitations
It is very important to understand the technical limitations, and developing mobile websites keeping in consideration the most basic mobile device users. Building websites that have advanced hardware requirements will limit the reach. So, the best thing to do is to know our limitations and keep testing on a wide variety of devices to see how our website performs on them.
Considerations for Small Screen
As we know that mobile devices have a very small screen, we are left with very limited space to showcase our product and services. So, it’s all about prioritizing and limiting the content that is being displayed. No one wants to wait for a lengthy page to get loaded with lengthy details.
So, we should only place our main content and place relevant CTA buttons strategically. The ideal position of CTA buttons is at a thumb’s reach. The CTA should be placed in such a way that users can operate their phone with a single hand even when they are moving.
Finger (Tap) Friendly Mobile Design
Now, let’s see what are the important aspects of mobile UI for buttons other than CTA. Even the smallest button on our webpage is a touch target. It requires more attention and effort, slows down user navigation and sometimes leads to errors.
The best practices for mobile websites UI suggests that a target button should be approximately about 45-57 pixels wide allowing users to comfortably fit their finger. This will allow users not just to press the button but also see where they are clicking. Such small visual feedbacks can be of great impact.
Guide the First Time Users
Never assume that first time users know how to use our mobile website because it looks different from our desktop version. We can guide our first-time users through our mobile website.
Clear and Focused Content
Many people use mobile on the go or in a hurried way. So, it is important for us to keep our content clear and exactly focused on what we are actually trying to say. We should always keep in mind that mobile users are always in a hurry compared to desktop users. We can play with fonts to highlight our main services and products to mobile users.
Leverage Mobile Specific Features
Mobile devices have many features that we can use for our benefit. One of them is “tap to call”. We can also use GPS to offer location-based information, like for urgent cares, we can show the distance from where a user is present to the urgent care clinic.
Tap to Call
Tap to call button should be present in the mobile version as it makes it easier for users to get in contact with the website with just a simple tap. Ideally, tap to call button should be present on all the pages of the website but, if that is not feasible, it is suggested to have tap to call option on the homepage, contact page and on the services pages.
Forms are the best way to capture user information and lead to conversion. Generally, we use long forms on websites to capture more information. But, this is not a good practice when it comes to mobile websites. We should keep forms to minimal. Below are some best practices for mobile form design:
- Single input fields should be used wherever possible: Keep the input fields minimum because switching between different fields require the use of keyboard again and again and it becomes frustrating for the user as the keyboard covers almost half of the screen. For e.g.: instead of using two sections ‘First Name’ and ‘Last Name’ we should use a single section ‘Full Name’.
- Create conversational flow: Keep in mind that forms are ‘conversation’ not ‘interrogation’. The flow should have a conversational feel. Allow two-way communication by using words like ‘Get in Touch’ or ‘Get Started’, etc.
- Prefill values in fields automatically: Doing this will help users a lot. There are various fields that we can prefill like we can use GPS and prefill information like user location, pin code, country code, etc.
- Make forms accessible for all: Create high contrast user interface designs to make forms more visible and add place holders. Add support for voice inputs and text-to-speech capabilities for visually impaired users.
- Break up lengthy forms: If it is mandatory to keep all the fields in a form and the form becomes long, break the form into stages.
- Ask the essential questions: Mobile users show a high abandonment rate for forms compared to desktop users. We should keep fewer and the only important fields as mandatory. We can avoid questions like ‘How did you hear about us?’, ‘Would you recommend us to your friends?’, etc.
- Mobile-friendly error messages: Error messages should always be clear, concise, and explanatory, whether on mobile devices or on the desktop. Use real-time error messages so that the user can make the correction then and there only. The error message should be clearly visible and it should be placed at close proximity with the field in error.
- Avoid drop-down menus and lists: Drop-downs and lists are problematic for mobile forms as they make users scroll through long pages. For e.g.: Rather than giving a drop-down for location (state, city or country) in the forms, we can give the option for entering the text and suggest location names.
Track and Analyze User Behavior
We all know that tracking and analyzing is always important, be it for any device. For tracking users on our mobile websites, we have to keep an eye on the following parameters:
- Total sessions
- Overall bounce rate and exit rate
- Browsers and devices used
- Total number of pages browsed
- Returning visits
- Bounce rate of every page for various devices and browsers
- Exit rate of every page for various devices and browsers
Do you think we have missed anything? Please drop your suggestions in the comment box below!
Ankesh is a professional having more than 5 years of experience in digital marketing. As an Account Manager at DigiNekt and Project Manager at GMR Web Team, he is responsible for managing projects from strategy development to implementation. He is handling a digital marketing team and helping them achieve the set goals defined by clients.