It’s mid-2016 and by now almost all clients know that if their site is not responsive, they’re losing money.
Most online services are now accessed through mobile devices. According to a 2015 Ofcom study smartphones have overtaken laptops as the most popular device for getting online.
Because of this when Dock9 are designing insurance applications, we always make sure it works well on a mobile device. This involves a lot more than merely fitting the design on a smaller screen, every step of the experience needs to be considered.
This is why we’ve put together our top five tips on how to improve your mobile experience, specifically for insurance application forms.
1 - Design for touch
As the name suggests, this is when the interactions can be performed with a finger. On our form context, radio buttons become thumb-sized and since we design mobile-first, that’s the design of the desktop version as well.
Droplists, depending on the amount of items, could become a group of buttons
For example, Aviva’s home insurance quote form has touch-optimised buttons instead of radio buttons for people on the go.
2 - Take advantage of pickers
Sometimes the user has a very long list of items to choose from. In this case it is a good idea to use native mobile pickers. This way the user will know instinctively how to use it and make less mistakes. For instance, if the user is only allowed to enter numbers, then this picker will only contain numbers. With a regular keyboard, the user could hit invalid characters more easily and then receive an irritating error alert.
3 - Make help easily available
This is an obvious one if you think about it. But when trying to keep the interface as minimal as possible, we could end up removing essential features like a contact number, live chat, FAQ. Calling a number or messaging is something most of us do every day on our mobile devices, that could be accomplished with just one tap on a form.
AXA has a sticky collapsed Help Hub on the bottom of the screen. Direct line has a number at the beginning of the form, so it’s the first thing the user sees. Esure also has a sticky widget, a hamburger icon with a number inside.
Of course, we want the design to be so easy that the users are self-sufficient. But if their case is more complicated, (or if they’re like my mother who just wants to talk to a human being), having assistance readily available is a UX quick win.
4 - Know your tech environment
Sadly, more sophisticated interactions that we see in native apps such as swiping are not user-friendly due to differences in OS, browser inconsistencies and performance. Don’t get too carried away when designing for gestures. Make sure it works the same way on different devices and browsers.
5 - Tooltip outside modals
It is very tempting to add the tooltip content inside a modal. However, like the hamburger icon, some people still feel confused about them. Better to have a speech bubble.
Is your mobile user experience fully touch-optimised? Contact us at firstname.lastname@example.org or 020 7977 9230 for a free review of your site from one of our UX-specialists.