Five Common Mishaps when it comes to Mobile Web

Blog / 14 Oct 2015

Tags: CRO / Mobile Marketing / Website

With everyone from fashion retail brands to corporate banks now choosing to push their digital strategy further on mobile, it is becoming increasingly important to make sure that your user experience and user interfaces are consistent and optimised for the mobile market. However, with sites still adapting to the responsive revolution from desktop to mobile, there are still common mistakes being made in the process. We’ve picked the top five most common pitfalls to prevent you getting caught out!

1. Not being optimised for mobile

Responsive design is now best practice for most websites, with experiences now becoming consistent across all devices and with Google forcing brands to bring their website in-line with the mobile market. But some brands are yet to catch up with the responsive revolution, for example HSBC – which you can see below. For a normal webpage, zooming in can be frustrating, but in this form the frustration is ten fold.

User expectations have changed with the responsive nature of sites; users now expect to scroll through sites, not pinch or zoom in to interact with content. A well-designed mobile experience should be seamless across channels, with no need to pinch or zoom. If corrected, it can improve your user experience and increase conversion, but it can also boost your SEO.

2. Touch targets that are far too small

Mobile web now demands a lot more from brands when utilising responsive design. If elements are left untouched, it can cause the user massive issues, such as elements that are too small for the user to tap (touch target). When designing mobile interfaces, it is important to make the targets big and clear so that they are easy for users to tap.

An example of a small touch target can be found within Amazon’s mobile site, shown below. With many options in small vicinity, users would find it extremely hard to hit their target accurately. To prevent this, increased type sizes and line heights would give the user a larger touch target to interact with.

3. Long forms that are tedious for the user

Enhanced mobile user experience isn’t just about building incredible experiences; it’s about increasing revenue and growing your business. Long forms are difficult and frustrating for users and if you’re using them for any sort of transaction, it’s likely it will affect conversions.

When users are faced with a long form, for example Best Western’s joining page below, they try to avoid filling it out at all costs. To prevent this, you can build short and simple forms which don’t ask as much of the user and include the default form auto-fill, both will help increase efficiency for your users when completing a form.

4. Visual distractions that discourage users

Once a user has entered the site, the sole focus should be to deliver content to entice them to make a purchase with you. But on the Expedia mobile site for example, a lot of information has been pushed in front of the user, causing confusion as to how to proceed to the next step. Not only that, but there is no content hierarchy, losing the price total and key product information.

With yellow live notifications filling up the bottom of the screen, they are a distraction for the user, and they decrease the visibility of the primary call to action – ‘Book’ on the page. To prevent this, establishing information hierarchy on the site will help readability and prevent any distractions. By changing the style of the live notifications will help make the ‘Book’ button more prominent on the page, eliminating any confusion. Keeping it simple is key.

5. Don't leave your users feeling trapped

Maps taking up the entirety of the screen is becoming increasingly worrying for mobile shoppers wanting to find the nearest branch of some of their favourite high street brands. A clear example of this is The Perfume Shop, their branch locator map view highlights the worry users face, which you can see below.

Once the user has chosen to view the branches near to them, they would open a ‘map view’ tab showing these branches. Within the tab sits an interactive map which when scrolled to the bottom of the page becomes the length of the screen.

A major usability problem with this is that the user will become stuck within the interactivity of the map and therefore is forced to abandon the site. Unless the user has very small fingertips and is able to navigate back to the top via the thin padding either side of the map, it is unlikely that the user will be able to navigate away from this element. The only use of the ‘chat’ option would be to call for help on this occasion!

To improve this, an idea would be to decrease the vertical height of the map dramatically, allowing the user access to the top and bottom of the page with the full map in view. Another option could be to allow the map to open up in a native third-party app to further help finding stores.

With millions of us now shopping and browsing on mobile around the world, it is becoming increasingly more important to make sure that your website is mobile friendly, through optimising and designing a consistent, responsive experience for all mobile devices. Avoiding these 5 common problems will not only improve your conversion rates, but will ensure an easy and enjoyable experience for your customers.