Stop with the unhelpful loading spinners


I get a train to work every day and have recently renewed my season ticket for a new e-ticket directly on my phone. I no longer have to carry around a ticket wallet, I just flash my phone when needed. Very convenient. However, when the ticket man comes by I load up the TPExpress app, go to my tickets and BOOM, get hit with a loading spinner as the ticket man looms over me impatiently waiting. It usually loads for ~5 seconds - but why? What is it doing? The ticket can be used offline, what on earth is it checking for? And why does it take so long?

The problem here isn’t so much the wait. It’s the lack of feedback to the user of what’s going on. I see it a lot in apps and on websites that just hang on loading screens when you open them or when you perform some kind of action such as on a form or checkout process.

What I like to do is actually inform the user of what’s going on and avoid unhelpful loading spinners at all costs. This is especially handy for multi-step processes such as payment forms where you might have to:

  1. reserve the items
  2. create a user
  3. create a new card
  4. create a payment token with stripe
  5. and finally send the payment request to the backend to handle

Each of these steps are an API call that take time to complete. If you simply show the same “loading” indicator for all of these steps, it just looks like your platform is extremely slow. The user isn’t aware of that multi step process. If these APIs are somewhat slow, a slightly impatient user might even exit out or refresh because they think it’s broken.

It something in that process fails, it’s also less indicative of /where/ it failed. You’ll thank yourself when you’re sent screenshots from QA/users with the specific text of the step it’s hanging on.

I’m not saying you have to tell the exactly what’s user what’s happening at each step, but give some kind of indication to the user of why things are taking so long to load and that something is actually happening. Your process will feel a lot more responsive and users (me) will be a lot happier.

Related Posts

New package - Nuxt Lighthouse Module

Implementing automated Lighthouse audits on each deploy of your Nuxt.js application.

New package - Storybook Directories

A simple module for generating your storybook story structure based on your directory structure.

Gitprefix - Automatically formatting commit messages

Git precommit hook for appending branch and emoji prefixes

Automated Pull Request Checks on Github

Using Probot to create automated checks on Github Pull Requests

Netsells 💙 Vue (+ Vue.js London)

Why we at Netsells love the Vue.js framework and where you can find us later this week

Maximising Productivity with Slack

Staying productive with your favourite workplace chat app

Responsive Blocks and Vertical Alignment

How to create responsive cross-browser blocks with vertically aligned content

Development Goals for 2018

New Year Promise.resolve()

Progressively Infiltrating Google

Attending the Google Academy for a course on Progressive Web Apps

Laravel Certification Prelude

The Laravel Certification exam is here and I'm taking it.