Death to the Modals.
Continuing in our updates to mobile web traffic for Tradesy.com, along with our navigation updates, we killed modals* for mobile visitors. Again, as many web sites often do, we used (& still do) modals a lot. Like A LOT. And, for desktop browsers, this isn’t the worst UI pattern in the world, nor is it the best. But for our mobile web visitors, it was just a very awkward, unpleasant experience.
High bounce and exit rates for mobile visitors told us this was partly to blame on the modal experience we were delivering to our visitors. Whenever a visitor would click on an item, or an action that required joining or logging in, we would show a modal with the typical semi-transparent background and a squished form inside of it. We also would jump the user to the top of the page due to an old iOS bug.
A popular pattern does not make a good pattern
Modals in theory are a good solution to a tough problem. But in practice, they almost always lead to a poor experience. This is especially true for mobile devices, and in our case, for our new visitors. The modal was unexpected, unstable, and it created a very jarring effect. Plus, if you were using a small device (pre- iPhone 6), or if you browsed in landscape mode, then the content would invariably overflow the viewport. You could still do what you needed to in these cases, but it was even more painful and arduous than our more typical portrait visitor. Scrolling inside a scroll; no thank you!
Moving away from the modal
To avoid, and ultimately solve for, this problem we designed a system to redirect visitors to a new low-bandwidth-using, stable-feeling page. This allowed us to prioritize the following for our visitors:
- speed: we optimize the signup & login flow to load quickly,
- context: we include item context in-canvas, if they came from an item action such as Loving an item, to make it clear what is happening,
- stability: we reduce FUD (fear, uncertainty, doubt) of what just happened and what they need to do next,
- choice: we support cancelling this action & getting back to their original departure point (i.e. if they didn’t want to do this, hitting the Back button takes them back to the exact spot on the previous page) by leveraging native browser Back functionality,
- usability: we deliver better, live inline form validation for a smoother signup/login process, and we also built in Show password support for less bad signup/login attempts
- predictability: we allow the visitor to toggle the signup/login form on the same page (but update URL via push state accordingly so if user reloads the page by accident it’s still the expected form), and if they’ve ever logged in before, we default to the login form,
- delight: we direct the visitor to their expected item (if they came from an item action, with their action completed), or to the same page they came from,
It’s the little things in life that make the big differences. Since removing our signup/login modals, our bounce and exit rate has gone down significantly for our mobile web visitors. This change has also led to an increase in mobile SEO traffic, which tells us that our changes we appreciated by Google as well.
This is the second part in a series of posts about redoing the mobile web experience for Tradesy.com. Up next, we’ll be looking at account management. In case you missed the first part, you can read about killing the 🍔 here.
*Note: we still have lots of modals for Tradesy.com for mobile web visitors; this post is specifically referring to visitors who are not logged-in, and the signup/login modals that used to exist.
