In recent years, desktop Internet usage has fallen while mobile usage has increased. Last year, Google confirmed that “more Google searches take place on mobile devices than on computers in 10 countries including the US and Japan.” If you think the Internet is big, mobile is 10x bigger. Did you know that Google won’t show your website in mobile searches if it isn’t mobile-friendly? But, what does “mobile-friendly” actually mean. In this post, we’ll take a closer look at how to design for the best possible mobile user experience of your site
Unfortunately, the common approach to designing the mobile version of a site is to simply scale down the desktop site and make it responsive. This is a very poor strategy. Rather than simply scaling down your site, there are some key elements of the mobile user experience you should pay attention to. The key is to mobilize, not miniaturize
A good user experience is what separates the successful websites and apps from the unsuccessful ones. Here are some of the best practices to keep in mind when designing for mobile:
Stay Focused
When designing for mobile, minimalism rules. A mobile device can be used anytime, anywhere and mobile context is all about the environment and circumstances of its usage. People tend to use their devices in a purpose-driven or rushed state and don’t have time to search deep within your site for the information they are looking for. Each page should have a clear, central focus to help guide the user to where they want to go.
To reduce the learning curve for users and improve usability, stick to established conventions and patterns. Thanks to Apple, Google, and other manufacturers, users know exactly what they expect when they press a button or swipe on their screens. It might be tempting to develop custom interfaces that stray from the norm, but this will only serve to confuse your users and create significant obstacles that get in the way of engagement with your site. Instead of reworking the wheel, focus on styling your interface elements without altering the underlying functions.
Keep Navigation Simple
Unlike desktop websites that tend to display a prominent menu bar at the top of the page, mobile just doesn’t have the screen space. Turn your menu into a drop down and feature a clear icon on the top left or right of the mobile screen signifying a hidden menu. Avoid multi-level menus on mobile sites as best you can. On a mobile device, you want to keep everything accessible, or users might abandon your site in frustration while trying to reach the information they need. Present choices available in order of priority, based upon the user’s needs. Enable mobile users to navigate to the most important content and functionality of your site in as few taps as possible. Navigation optimized for mobile should be broad and shallow as opposed to deep. Three clicks, or taps, is usually a good number to keep in mind. Each additional tap means more time waiting for a page to load and more bandwidth consumed. Even today with our fast cellular networks and ubiquitous Wi-Fi, connection wanes. Keep your users happy by showing them how to get to the information they desire quickly. It’s also a good idea to provide navigational cues to let users know where they are on the site. Consider using standard conventions such as a home icon that can take the user back to the start of your site or mobile breadcrumbs.
Create Fluid Layouts
The most important thing about mobile design is flexibility. Many devices mean many different dimensions to design for. Flexibility gives your site the fluidity it needs to fit inside any container.
There is no universal set of breakpoints you should stick to, but you should use at least 4 breakpoints to ensure device flexibility. Build the mobile wireframe first. Designing with the mobile layout first will ehlp you to distinguish between the essential elements and the secondary ones. After the mobile design is created, designing for additional devices will be easier. Remember, the mobile-first approach is also a content-first approach. The heart of any site is its content!
Leverage all Mobile Inputs (More than just touch!)
On mobile devices, the primary mode of interaction is touch. Designing for touch is very different than designing for desktop, where we use a keyboard and mouse to interact with the technology. Instead of a small cursor, you’ll have to design for fingers and varying degrees of pressure on all kinds of screens. Forms, buttons and other elements should be large enough to avoid overlap with any nearby elements or navigation patterns.
Beyond touch, mobile devices combine a huge array of other sensors and communication channels. These include sound, movement, location, environmental factors, and intent. More than any other device, they are uniquely capable of capturing more of the “ambient” data involved in human-computer interaction. Use data in ways the user doesn’t expect to create surprising and memorable outcomes.
Minimize the Effort Required to Provide Data
With mobile, users are often engaged with simultaneous activities and are easily distracted. When it comes to mobile forms, keep it simple. Limit yourself to the minimum fields required and use shorter alternatives wherever possible, such as asking for a ZIP code instead of a city and state. You can also offer alternate input mechanisms, such as through the camera, geolocation, or voice. Wherever possible, display default values and consider offering auto-completion or spellcheck suggestions and prediction technology to further reduce the effort required on the part of the user. Use top-aligned labels to make it easier for users to scan fields. If you need to, you can keep a separate form for mobile users
Optimize Images, or Remove them Entirely
Size and speed are the two most important measures for evaluating performance of a mobile website. One of the biggest problems with bloated web pages and slow page loading on mobile are images. Use multimedia only when it serves to support the user’s tasks in the mobile context, adds value to the content or supports the goals of the website in some other important way. If can swing it, drop any extra images in the interest of keeping your site’s page times low.
Recently, data has shown that sites that improve performance experience a lift in conversion rates. An in-house Walmart.com study found that, for each second of load time improvement, they experienced as much as a 2% increase in conversions. For every 100 milliseconds of improvement, incremental revenues grew by up to 1%.
Generally, you want to pick speed over image quality, but if you’re willing to invest, you may be able to get both. Here are some techniques that you can use:
- Optimize images and media for the device. This means scaling images down for smaller devices and making sure they are sharp enough for the new iPad
- Shrink essential files using tools like WP Smush, Kraken and Tiny PNG.
- You can achieve some image styling effects such as gradients or shadows through CSS and your site design.
- Lazy loading can speed up the perceived page load time. This technique allows you to speed up loading without compromising image quality. The tricks is to delay loading offscreen images, or to use HTML sized placeholders to load the page and replace them with images. Facebook uses this technique to speed up its platform.
- There are four common ways of implementing the lazy load design pattern: lazy initiation, a virtual proxy, a ghost, and a value holder.
- Reduce your site’s dependence on image quality by using good interaction architecture. This includes doing things like using thumbnails with over-over or popup details.
- Adaptive Images is a small PHP script that detects screen size and automatically resizes and caches an image. The software can be further customized to set the quality of images and browser caching.
- Always give the user control over your multimedia content by not auto-starting video or sound. Allow the user to skip or stop multimedia content and stay mindful of the bandwidth that it takes up.
- Ultimately, testing is the best way to figure out how images are impacting your page performance. Over time, solutions will present themselves, but this requires effort on your part.
Further Speed Up Your Site through Compression
Compress your resources by using gzip to reduce the number of bytes a page sends across the network. This makes for easier navigation, faster load times, and increased efficiency of your web server resources. Reduce file sizes by removing any unnecessary line breaks and white space in the code.
Enable Users to Achieve their Goals with Tools and Features
Use task-based design when creating your mobile website. Mobile users seek to accomplish tasks. Every function of your app should be geared towards helping them complete that task. Almost everything else should be discarded. Short mobile sessions means that we also have to consider interruptions in the design. We really can’t afford to waste time or space when it comes to mobile. Remember the 80/20 rule here – 80% of your users will use just 20% of the functionality of your site. Cater to the way visitors are already using your site and make sure the most important 20% is visible and intuitive.
Use device features and capabilities to anticipate the user’s need for support based on the context of use. You can use mobile capabilities such as location to identify where the user is and display relevant content and offers. Leverage information that the user has provided, and respect their preferences and settings. On that note, though, don’t collect or use personal information (such as location or a contact list) from devices without the explicit permission by the user.
With mobile, you can offer alerts and notifications that can attract the user’s attention and display important information. Keep these messages brief and informative, and try not to interrupt anything the user is doing. Explain to the user what caused the alert or notification and offer useful choices to help the user complete his or her task.
Offer relevant, mobile-only functionality, such as barcode scanning or image recognition. Use the capabilities of mobile devices to your advantage and delight your users by prioritizing and presenting core features in a way that they can understand. When introducing any new or unique functionality, you can offer contextual help and tips to guide users for the first time or as a refresher for infrequent actions.
By following these guidelines, you’ll be on your way to having a lightning-fast mobile site that’s optimized for performance. Your users will be very pleased!
Contact Sanmita today to start a conversation about website accessibility and how to make your site more useful to more people.
Want more? Sign up to get our newsletter delivered to your inbox the first Thursday of every month. Receive links to the latest web-related articles, best practices, and thought-leadership commentary.