Noticing UI: Shazam's loading screen

Shazam’s loading screen

I was pleasantly surprised by Shazam’s iPhone app loading screen, and I took a look into what makes it stand out.

Here’s what it looked like:

This felt different, and it made me look at the experience of opening apps. I started by spending a bus ride home from work opening and closing apps to get a feel for why this wasn’t like other apps.

Loading…

A loading screen tells a user that the app or other result is not ready yet. This is good. The user can’t try to interact with anything before it’s ready. There are no non-working buttons or menus to click and get frustrated with. It means that there is a pause in between asking for the app and being able to use it, which means a delay in the user’s experience.

Companies often use this in-between view to show the company’s logo (just in case the user forgot what app they opened). Some companies use this as a chance to help the user connect the company to their logo (just in case the logo has no words or markings about which company it is). I saw this for Uber, Audible, and YNAB.

You can open five different apps from your phone/tablet and see how they chose to handle the in between time. My experience was that most of them were a simple separate view featuring the company’s logo and name.

“A++ WOULD OPEN AGAIN”

One thing that I enjoyed about Shazam’s take is that the overall structure between the loading page and the ready app is the same. There are no jumps to different views or new screens. Instead, the app feels like it comes alive under your thumb. The faded S logo lights up with the animated S and transforms into a button. The shifted gradient makes the circle pop more like the optical illusion of background color changing an object’s color, and the changing circle size gives further depth.

Part of the reason this works best for Shazam is that pressing the button has been designed as the main functionality of the app. The button allows Shazam to listen to and find a match for your audio, and pressing that button is likely the user’s goal when opening the app. Not only has the app loaded when the button comes alive, but you’re now able to go directly to what you’re looking for. The My Shazam and Discover sections are secondary and accessible after the button has been presented. I like this. The extra clicks add up.

This doesn’t deviate from normal app behavior. It’s still showing the logo while loading, and it’s still reinforcing the connection between the company and the slanted S (or is that a slanted “u” and an “n” on top of each other? No, I opened Shazam, probably an S). The additional transition to the button, an extension of the logo, allows the user to pass easily from the usual loading view to the ready app.

This connection would not be as clear for a different app. For a notetaking app, the importance of reviewing notes may match starting a new note. If you tried to connect the app’s logo loading screen with one button, which would you pick? For something like Facebook, how would you connect the loading screen to the timeline?

One similar example that I noticed was Instagram’s app, which loads with the header (with logo), a blank viewport for the content, and the footer area (without menu options). This also builds continuity between the structure of the loading screen and the structure of the ready app.

Keep It Simple Shazam

Shazam is able to build a simple loading user experience with a smooth animation that connects their logo to the app’s purpose. It’s not for every case, but for the right case, it’s a good move.