Beyond basic setup and configuration, a great mobile user experience has three parts:layout, content, and speed.
The best way to engage and keep your users is to make sure all three legs of this tripod are sturdy.
Layout design
- Be touch-friendly. For the human finger, 48 dp (density-independent pixels) is the minimum recommended touch target, with at least 8 dp between targets. Too-small targets, and the click mistakes that result, are a fast way to turn off a mobile user.
- Pick the right font. Your minimum font size should be 12 pixels; anything smaller and users will be squinting. Be sure to choose a typeface that is clean and easy to read. If possible, avoid use of image-based text.
- Set the right width. Most web users are used to scrolling vertically up and down a page, but being forced to scroll sideways makes for a bad user experience. Your users will think your site wasn't built to help them on the smaller screen.
- Avoid mouse-overs. On a desktop screen, the mouse-over is a great way to uncover hidden content. But mouseovers require a mouse. On touch screens like tablets or smartphones, users' fingers can't hover like a mouse. So avoid the mouse-overs. Instead, use buttons that users can tap to display deeper menus.
- Don't use pop-ups. They're irritating on desktop sites, and they're just as irritating on mobile sites. And instead of using interstitials to drive app downloads, embed the prompt into your site.
- Do use descriptive buttons. Don't make customers guess where a click will take them. Label your buttons clearly, then use bread crumbs and clear category names (such as "Step 2: Payment") to help them as they navigate.
Content:
- Don't overload users. On mobile, more isn't necessarily better. Avoid the urge to squeeze in every last bit of your desktop page, only smaller. But"_
- Customise, don't cut. Mobile and tablet users expect the same core functionality you offer desktop users, whether that means being able to watch videos or buy office supplies. Instead of cutting core content, restructure it to fit the mobile screen.
- Don't hide key actions. Be sure to give users quick access to all the key functions they'll expect on your site. If you're a retailer, that means things like product search and the shopping cart (and mobile-friendly tools like a store locator) should be front and centre. Include a link to your full site for mobile users who simply prefer that experience.
- Double-check media files. Flash video, for instance, won't play on many mobile devices. Make sure that the media files on your multi-screen sites will really work on the screens they're meant for.
- Simplify checkout. It's hard to fill out lengthy forms on mobile, thumb-typing full addresses and other data over multiple steps. To increase your conversion rates, simplify the payment process however you can.
Speed:
There's really one thing to say here: speed it up. Optimising your site speed is a sure way to improve user experience — especially on mobile, where users are on the go and data networks can be slow. Speed typically boosts visitor engagement, retention and conversions. Not only is it a ranking signal for Google Search, but many businesses who invested in page speed improvements saw a positive effect directly on their bottom line.
Here are three common mistakes to avoid:
- Too many HTTP requests. While mobile users may try to do the same things as desktop users, their processing power is limited. Their bandwidth may be unreliable. To help them go faster, cut down the on-page elements that drive extra HTTP requests.
- Image overload. As smartphone displays get better, it's tempting to serve the largest possible image and let the device downsize it to fit. Bad choice! This wastes time and processing power. Serve the right image sizes to each device.
- File overload. Consider if the JavaScript snippets and CSS styles are helpful for mobile users. Too much JavaScript or CSS may cause the page to slow down. Minify / compress your code where possible and consider reorganising your CSS altogether. Make sure assets are being cached by the browser so that the visitors don't have to re-fetch them on every page load.