Mobile Site Design Tips for Good UX & Conversions

Google reports that 29 percent of smartphone users will leave a website and go to a different one if it fails to satisfy their immediate needs.

Feb 20, 2018 Web Design

Mobile Site Design Tip: Entertaining Your Users and Driving Conversion

It is no secret that the majority of today’s consumers use their smartphones to gain knowledge about a variety of things and to make purchases. In 2017 and beyond, if you, as a business, do not have a mobile presence, then you are at risk of falling behind in this world.

However, at the same time, you can’t just have a mobile website. The site needs to offer your visitors a good experience. Google reports that 29 percent of smartphone users will leave a website and go to a different one if it fails to satisfy their immediate needs.

Mobile users tend to be goal-oriented, so they expect that they will find what they want and need from a responsive mobile website easily and instantly. So, in order to boost your conversion rates, you need to design your mobile website with your audience’s needs and intent in mind.

#1 – The Homepage and Site Navigation

Your homepage essentially serves as both a welcome page as well as a promotional space; however, it also needs to provide your visitors with the content that they’re looking for. If your homepage is focused on converting your visitors into customers, then it needs to focus on these elements: homepage shortcuts, concise CTAs, and minimal promotions/selling points.

It is very easy for key elements to be missed as users navigate your homepage on a smaller screen. It is for that reason that it is recommended that your CTAs are placed where they can be easily seen by your users, such as above the fold or the bottom half of the screen.

Your CTA signifies the final tipping point between the conversion of your visitor and a potential bounce. In order to design CTAs that will convert, you need to optimize your website design and copy – choice of color, words, fonts, size, etc.

You know how you are in a big mall and you can get turned around? Well, the same can occur when visitors are on a mobile website. Conversion can drastically be damaged due to the lack of location bars and navigation menus. Mobile users expect to be able to return to the homepage by simply tapping on your logo or using the navigation menu. The best thing to do is for your homepage shortcut to be your logo.

All too frequently, promotions and advertisements take over a page and visitors are turned away. In order to interest visitors and drive conversion, promotional banners and advertisements need to be kept to a minimum and placed where they won’t negatively impact the overall user experience.

If you want advertisements on the homepage of your website, you must think like a visitor. What are they attempting to accomplish? Where will their primary attention be? How can you maintain a clean and uncluttered page? By answering these types of questions, you will be able to successfully place ads on your homepage and won’t have to worry about creating a negative user experience.

#2 – Commerce and Reviews

With digitization continuing to increase, users expect mobile experiences that are smooth when they are searching for, reviewing, and buying products. So, with that being said, how exactly can businesses and markets ensure that visitors have a good mobile experience while also increasing their conversion rates?

It all comes down to simply letting site visitors convert on their own terms.

For ecommerce stores, one of the biggest turn offs is asking for your visitors to sign up early on in their journey. More often than not, they will simply leave your website, which leads to low conversion rates. Usually, the only time that they won’t abandon the site is if it is a high authoritative brand.

To increase your results, you should ensure that your visitors are able to explore your website prior to asking for registration and allow them to buy your products as a guest. For mobile commerce websites, the primary focus should be quick and easy when it comes to the design of the overall checkout process.

For mobile commerce, one best practice is offering multiple payments options. These payment options may include PayPal, Apple Pay and Android Pay, which will help improve conversion rates and decrease stress among your users since they won’t have to input their credit card information into your website. For users who have previously shopped on your site, data fields – like shipping information – should be able to be loaded and pre-filled for convenience.

Research shows that just over 90 percent of consumers will read various online reviews prior to doing business with a particular company or buying a product. This means that reviews are an integral part of a customer’s decision-making process; therefore, it is imperative that you include them on your site and permit filters to apply to those reviews. The specific filters that you should utilize include “most positive reviews,” “most recent reviews,” and “lowest ratings”.

#3 – Usability of the Site

Every single detail is important as far as the site design of your mobile website goes. When it comes to conversion, details like expandable images, zooming and transparency regarding how the data of your visitors is used will all affect your rates.

Research shows that visitors have found it far easier to maneuver through a mobile website that has been properly optimized rather than a desktop version of a site on a smartphone. To guarantee consistency, though, it is imperative that each page on your site is optimized for mobile devices, and this includes images, forms, and everything in between.

The top of your homepage should consist of the search bar, which ensures that your users are able to easily and quickly search for any specific products that they may be looking for. Make sure that the first search results are your best products. You also want to ensure that you are using filters on your search results, as this will help to narrow down the intent of your user on the mobile site.

Remember that you want to make sure that your link to your desktop site is not labeled as the full site because this could easily confuse some of your visitors that your mobile site is not thoroughly featured. If this happens, it could result in them clicking on the full site. So, label your desktop site link as “Desktop Site” (plain and simple!) and your mobile site link as “Mobile Site” (again, plain and simple!).

While you are optimizing your mobile site, don’t forget to disable the pinch to zoom on all of your images as this could impact the overall site experience, not to mention the fact that your visitors could miss some of your CTAs and that some of your messages could become covered up. Overall, you should focus on uploading images that are properly sized and will render flawlessly on multiple devices.

Because of the way that mobile devices are, conversion can be negatively impacted by lengthy forms when attempting to obtain leads. So, when it comes to multiple page forms or surveys, you should consider incorporating a progress bar at the bottom or top that will show users how far along they have made it and how much further they have until the end of the survey or form.

To further satisfy and/or aid your customers, you should consider adding auto-fill on your forms for certain fields, such as name, phone number and zip code. For fields like date and time, you can incorporate a visual calendar that users can use right on your site instead of needing to leave your page in order to use their calendar application.

There are many resources for forms that can be utilized, including Form Hub, Google forms, as well as Xamarin Forms.

#4 – Technicalities

You have the ability to drive up your conversion rates with a solid design, but you also need to focus on the foundation of your site. Here are a few different technicalities that you should implement and then audit on a monthly basis:

  • Incorporate analytics and track your conversion rates on both desktop and mobile
  • Test your website as if you are a visitor and then load content based on their intent
  • Optimize and test the mobile site on multiple devices/browsers in order to ensure maximum performance
  • Ensure that your mobile advertisements are being redirected to your mobile site rather than the desktop site
  • Check the site for speed using the speed tool offered by Google
  • Check for Flash elements and remove them since they will not work on iOS and they are slow on Android
  • Submit your XML sitemap from your mobile site to Google

Last, but not least, send your mobile site through the Mobile-Friendly Test offered by Google to ensure that it is up to par.

If you need any further or advice or would simply like to hand the mobile site designing process of to a professional, contact us at WebDetail and we’ll be happy to help. 

Do you have some insight? Do you have questions or comments? We’d love to hear from you! Share it with us on Twitter or Facebook.

Let’s Start Increasing Your Bottom Line