THATBlog

The website user experience often becomes a mess on mobile devices. Why is this? You may design with mobile in mind, but maybe you should be designing mobile first. Are you contextualizing your site's visual elements? Are you not hooking a customer with informative text quickly enough? Mobile web design is very specific since you don't have a lot of space to convey information. How you deliver that information is paramount.

1. Design for Mobile First

Design for mobile before you design for desktop. This may seem very different than how you've approached site design before. Yet mobile devices are far more capable than they ever have been before, and mobile-accessible networks are far more widespread than they were even a few years ago. People also feel safer browsing, entering information, and making purchases on mobile.

It's much easier to start designing for the small screen and then expand where necessary for desktops and laptops. It's easier to add elements or upscale them since negative space makes the elements that are there pop out that much more.

When you downscale elements from desktop to phone, you're trying to squish elements that have space on a larger screen into a small screen. This can make your mobile web design seem over-busy and messy.

2. Test Load Speeds on Mobile

A site that loads quickly on desktop may not load as quickly on mobile. Different elements of your site may act differently on different devices and even on different browsers. Test your site on all common combinations of device and browser that you can. Doing so will alert you to any elements of your pages that are slow to load.

You don't want to end up doing this on the fly, because it can mean re-optimizing the entire site as it's being used, and re-designing elements later that you already rely upon. Usually, the size of an image or streaming content are the biggest hang-ups.

3. Text, Image, or Video?

Remember that the first thing visitors see and that hooks their attention is text. Your images and other visual content serve to reinforce that visitors should read that text. The text is the primary feature, and other visual content encourages engagement with the text.

You don't have to have images with incredibly high resolutions when you're looking at an itty-bitty screen. As mentioned, they can slow down the site loading, and a high-quality image doesn't look any different from an ultra-quality image on a phone. To be readable, your text needs that space more.

Video is important. Do you lead with it or no? If it's educational or informative about your brand, product, or site, and it's enthusiastic, engaging, and honest, feel confident in leading with it.

If it's leaning toward the content angle and it's more specific than the full breadth of what that page is about, then the video may need context. Either it's brief and leads into the text quickly, or the text comes first to give you a context for why they should watch the video.

You'll notice many news sites feature a brief introductory paragraph, offer the video, and then give more detailed information below the video. This is an easy way to understand contextualizing the video before playing it, and then offering more detail if a reader would like it.

4. Navigate with Ease

Your website user experience should be easy for any customer to navigate. You don't want them to get lost in too many branches or looping page links. Offer clear menus, concise language, and limit your website hierarchy to 3 or 4 levels. It's more difficult to go back and forward on a phone, so it's very easy to lose a page you wanted.

If your website offers many products, offer your search tool on every page. Always have a way to go directly to the product. Many customers will simply want to drop in, make a purchase and leave. Some customers will want to browse around, and then will suddenly decide to make a purchase. Both groups need to be able to do this quickly and easily from any page on your site.

5. Limit Form Use

Forms almost never look good on mobile. Make information collection quick and simple. Forms should be simplified as much as possible. Drop-down menus for common answers should be readily available anyplace where you're asking for customer input.

Try to also be aware of where your customers' limits may be. Plenty of customers will be fine with providing basic information, but when it becomes more specific, customers will become wary. Remember that many customers are incredibly protective of their information. It's sensible for them to be this way, so respect it.

Collect what you need, and don't push too far. The customer will never purchase anything from you if they think your site is acting like it's scamming, selling their information, or even just violating their sense of privacy.

A seamless, intuitive, fully capable mobile website user experience is a must today. Ask the team at THAT Agency how to build a site that works as hard, and as smart, for you as possible.