Hot button issue
Call to action buttons are so easy to get right, yet often websites get them so wrong!
Mobile users are usually on the go, and want a straight forward user experience to go with it. This being said, online businesses need to ensure their CTA buttons match up to the UX we expect, for example; a checkout process or sign-up form.
Mobile buttons have a habit of maximising frustration of not giving a user necessary feedback during a transaction process, unlike a desktop app. This is why everyone should adopt these do’s and don’ts of mobile buttons.
The ripple effect
All mobile buttons should adopt the animated ‘ripple effect’ due to the surface area being smaller on a mobile screen, and this gives a user visual feedback that they’ve clicked correctly. This works a lot better than a ‘hover’ as you don’t get the same feedback on mobile as on desktop, and a user may then try to click the button again, which can enforce action errors. This could be anything from re-submitting a form or even something as frustrating as accidentally ordering / paying for something twice. A ripple effect eliminates this by clearly letting the user know they have clicked where they should.
The ripple effect also ties into ensuring buttons have a loading state when an operation / application takes longer than two seconds to process…
Show a button loading state
Some applications / operations take longer than usual and if there is more than a two-second loading time, the buttons should show a loading state to ensure the user is aware that an action is progressing and eliminate action errors on their behalf.
I recently had a good experience of this when navigating through the booking process of a travel website. There were a few extra steps that I had to complete during the booking, which I hadn’t experienced before.
An example of some information I had to upload was proof of ID (uploading two photos). This operation took longer to convert than if I was ordinarily just typing in my details. In all honesty, it did take a while, but I didn’t click off the page and try again or aggressively refresh…why? Because of the button loading state. A simple design / development feature put me at ease, visually showing me my details were being processed, during what can sometimes be a stressful booking process.
Ensure the submit button appears to be ‘disabled’ during the loading process, until it is completed or takes the user automatically to the next step, as this further eliminates any chance of resubmitting what you’ve already done.
Transparent or grey?
This is a common argument in the UX world, should a disabled button be grey or transparent? There is a general consensus at Square Owl HQ that these should be transparent… but does either way work? Here are our pros and cons for both.
A greyed-out button could be off putting to a user, especially if it suddenly changes into a block colour when it’s activated, as it is more of an unexpected design change. However, most users understand that a grey button isn’t active, so it is less likely to be miss-clicked.
On the other hand, transparent buttons give the user better feedback that there is further step and if this has an opacity of at least 40% on it, is easier to spot that this will ‘become’ active, once a step has been completed.
These are just a few tips and tricks to get your mobile design up to scratch, and may even be the influence in driving sales or traffic to your site via a mobile device.
For any other advice on how we can help improve your UX or CRO, or any other aspect of digital hit up our contact page, we’d love to chat!
