The Essentials of Great Mobile Website Design

Posted by BSG Team on Dec 30, 2015 1:16:01 PM

Mobile_Optimization_Essential_Web_Design.jpgWe live in a mobile-dominant world.  Smaller screen sizes and searching on the go mean consumers are coming to a website with a clear plan of action. If the site they visit can’t give them what they need quickly, they’ll find one that can.

To stay relevant in a mobile world keep these principles of mobile web design in mind.

Menus need to be simple and concise

The ideal menu should have no more than 5 or 6 items, giving users just enough information to guide their search. There should also be no more than two sub-menus within the main menu, if they are necessary at all.

It’s important that menus contain a high-level overview of the products and services you offer to allow visitors to narrow down what they’re looking for. From there, they can click to a specific category or utilize the search feature to filter their results further.

Keep forms short and sweet

Users are not interested in filling out field after field of information on their mobile devices. You should only ask for information that is absolutely necessary to accomplish the task. Be sensitive of the user’s time, especially as mobile traffic increases.

For example, if your contact form is to sign up for a newsletter, just ask the user for a name and email address. Even for payment forms, try to keep the number of form fields to a minimum. Consumers understand that more information is necessary to make a purchase.

Test to determine the right number of form fields. Try changing or removing one field at a time to assess the impact on completion rates. For example, people are more likely to fill out a form if you don’t require their phone number, so try testing your form with and without that field or compare it as a required vs. optional field to see how it performs. Then compare these results to the actual ROI earned through each method to determine whether or not you should include it.

Simplify form fields

The types of questions you ask in a form shouldn’t require too much input from users. It’s important that you utilize different field types in your form, such as dropdowns, checkboxes, and calendars. These are especially useful when typing in payment or shipping information, as well as booking travel.

Provide as much clarity as possible in your form; make it obvious which pieces of information are required and which are not. Use auto fill for returning customers to speed up the purchasing process, and offer guest checkout to new customers who don’t want to make an account.

CTA_Button.jpgEye-catching CTA’s

Just like in any web design, Calls-to-action play a vital role in mobile design. Typically mobile users have a specific idea of what they’re looking for when they come to your site, make it easy to find with CTAs placed in the most valuable real estate.

Ideally, CTA’s should be located above the fold, use contrasting colors or fonts to make them stand out. Clearly state what the offer is for and keep the following steps simple and clear so you don’t leave visitors wondering what they need to do next.

Know what your users want

Mobile users have no patience for vague menus or page after page of products. Your search results should provide exactly what the visitor is looking for on the first page. Once a user completes a search, provide filter options so that they can sort the results as it best pertains to them (e.g. price, relevance, top sellers, etc.).

You should feature an image, price, and short description with each item so that the results pages aren’t bogged down with text. Make the images clickable and expand them within the same window to help visitors get a better view of the product without having to go to a different page.

Make contact easy

The ability to quickly contact a company is crucial to consumers. For mobile users, this means having a prominent click-to-call feature on the website. This, along with a contact form or email address, will give visitors options depending on their preferences and the urgency of their need.

Have a FAQs page to give users the ability to seek answers to questions they have without requiring them to actually contact you. Most consumers would agree that if they can figure it out on their own, they would rather do so.

Thumbs-Up.jpgIt’s all about the thumbs

The most common complaint users have about non mobile-friendly sites are that the buttons are too small to click on and text is hard to read. When designing web pages, make sure that each button is large enough to be clicked on, and that they’re not spaced so close together that you might accidentally click on something you didn’t want to.

And don’t require visitors to pinch the screen to make text legible, just to have to zoom back out to click on another link or page. The minimum tap area to accommodate a user’s thumbs should be 44px by 44px. It might be hard to adapt to every smartphone’s screen size, but it’s generally advised that you try to design your site with a few older models in mind, since older phones tend to have smaller screens. That way you can ensure that your content is easily visible across platforms.

Keep load time fast

Consumers value speed, especially mobile users. Since many are accessing your website on the go, it’s important that you don’t leave them waiting around for pages to load. Your site should be able to accommodate both WiFi and non-WiFi connections equally. The ideal loading time for a page is less than four seconds.

Over half of mobile users expect a site to load in four seconds or less, and 80% are unhappy with the current browsing speed on smartphones. That’s a lot of potential customers bouncing from your website due to something that is almost entirely controllable (barring poor cell reception). Some goals to keep in mind for mobile web designers are to keep the entire site’s size under 1MB and use images and videos wisely. The more visual content you have, the slower your website will likely be.

Say “No” to popups

For the most part, users dislike pop-up ads or surveys, especially on mobile devices. Time is of the essence for mobile users, so using pop-ups simply gets in the way.

It can be tempting to include a pop-up to encourage people to sign up for email alerts or a newsletter, but the reality is that most mobile users aren’t looking for that. If they want to sign up for something, they probably already know that they want to and will take the necessary steps on your website to find that form.

How does your web design measure up?

Mobile use is on the rise and it is not going away. If you’ve decided to redo your website, you should prioritize compatibility across all devices through responsive design or a separate mobile site. Marketers must maintain a mobile-first mentality, or risk losing customers. Contact us if you need help optimizing your website.


Topics: Best Practices for Businesses

Want more genius and craftiness? Subscribe to Musings!

Recent Posts