These user experience (UX) guidelines cover the look and feel that we require of mobile products that use Libspotify.
Libspotify can be used to enable Spotify functionality in different types of software outside of the Spotify native clients. This makes it possible to enable Spotify playback in more devices and new contexts, and to create new types of music experiences. Users will however expect solid and reliant Spotify functionality no matter what application they use it in. Therefore it is important that you take good care when designing your interface to make the Spotify integration as smooth and usable as possible. Following these design guidelines is a good start.
Libspotify supports iOS, Android (experimental), Windows, Linux and OS X. Spotify functionality can, in other words, be implemented in a wide variety of devices. Below we provide general guidelines for implementing Libspotify on mobile devices.
Using Libspotify you have the freedom to choose what parts of the Spotify functionality you want to support in your application. In some cases it’s not possible or appropriate to implement all of the functionality available in the native client. What features to support and in what ways will have to be judged on a case-by-case basis. However, here are some guidelines on what features are expected in most cases.
- Spotify login
- Now playing view
In most applications
- View/manage playlists
- Add track to playlist
- Artist & album views
In some applications
- Offline playing
- Play queue
Copy & Localization
The official Spotify application is localized to a handful of languages. As translations can be a tricky thing to get right, we would normally recommend sticking to the these official localizations. However, if your device has support for additional languages you may choose to provide support for these at your own responsibility. If so, please go out of your way to create high quality translations with the help of professionals.
Spotify is software, and software gets updated. Please take this into account and let us know how your device will be able to handle updates to keep the Spotify experience fresh and up to date. If Spotify for some reason no longer will be supported by you as a partner, we require that you gracefully handle this. Either the implementation is removed, or entry points/access to the service are denied in a way that is acceptable and understandable to the user.
3rd party licenses included
Spotify relies on the work of many others. Therefore, the device must be able to render a complete list of 3rd party licenses and copyrights included with libspotify. This list should be accessible under for example an About page. Also show the exact libspotify version here.
We ask that you prominently display the following statement in the help text or about text, in the acknowledgements in the documentation associated with your application and on any website associated with the application or other promotional material:
“This product uses Music by Spotify but is not endorsed, certified or otherwise approved in any way by Spotify. Spotify is the registered trademark of the Spotify Group.”
Since libspotify can be implemented in such a variety of devices and contexts of use, it’s not possible to give detailed interface guidelines for all types of implementations. Care has to be taken to tailor the user experience to fit the device that’s used. Below you’ll find some general UX guidelines that can help you create the stellar user experience we always strive for in Spotify applications.
User accounts and login
To access Spotify functionality, the user will need log in using Spotify or Facebook credentials. The logged in account needs to be a premium one. Note that the Spotify login flow can be shown when the user e.g. tries to play music, it doesn’t need to come when launching the software.
Spotify supplies a standard login screen that should be used. This makes sure that login will be handled in a correct way and that all the necessary info is displayed to the user.
Playback performance is arguably the most important part of a music application. It’s an area where the difference between 100ms, 500ms and 1000ms (a second) is huge.
As a general rule, 100ms to 150ms is experienced as instantaneous by human beings. After that, the interruption gets increasingly annoying, and if it gets large enough, users may abandon your application.
You should go out of your way to ensure that the playback performance remains in the lower spectrum of these response times. When starting a track for the first time, you may be forgiven by the user if it takes a little while, but after that they expect you to “have the engine running” so to speak, and skipping between tracks, or seeking within a track, should be snappy and responsive.
Avoid messages like “Connecting…”, “Buffering” or “Getting stream” and work hard to play the music instantly instead.
In most applications, it’s important for users to be able to get back to a view of the currently playing track. Ideally this should not demand complex navigation, now playing info should be available all of the time or instantly reachable.
For mobile devices, a good way of showing what’s playing is to use a Now Playing Bar (like in the native Spotify app). This can then be expanded to view the full now playing info.
When playlists are used in the application, the application has to provide full playlist management functionality. Partial functionality is usually not appropriate, except under some very specific circumstances.
Full playlist management functionality is defined as:
Ability to get an exhaustive view of user playlists, i. e. no playlists are hidden or exempt. Playlist type should also be visible (e.g. collaborative playlist).
Ability to add a new playlist, and to give that playlist a custom name.
Ability to delete playlists.
Ability to reorder playlists.
Since users have the ability to rearrange the order of their playlists in the native client, they are used to seeing their playlists in a certain order. Please respect this and display the playlists in the order they are delivered. Some users have arranged their playlists in folders. Please make sure to support a folder tree view of the playlists.
In some devices screen real estate can be scarce. However, please make sure that users are able to identify tracks and albums properly. Since many track, album and even artists names are not unique, oftentimes a combination of names is requires. A track name should be complemented with artist name, an album name should be accompanied by the artist name etc. What to display depends on the context of course. Preferably the primary name is displayed in more prominent type than the secondary. If the typeface needs to be the same all over, different names can be separated by for example bullets or hyphens.
Navigation & terminology
If applicable, try to use the same basic information architecture as the native Spotify clients for your application’s navigation (e.g. the same first-level navigation elements). This makes it easier for users to find their way. Also use the same terminology as in the native clients.
Please make it easy for users to keep exploring the content. While playing a track for example, it should be possible to navigate to the corresponding artist and album views.
Images and icons
We provide the standard Spotify interface icons for developers to use. We suggest using these in your UI. By using consistent icons users will find it easier to understand and navigate your application. See the branding resources section for icon files.
Please feel encouraged to use artwork for albums and artists. Bold cover art can really help make an application feel vivid and engaging. However, please respect the images. Do not alter the artwork in any way or obscure it with other graphical elements.
If you’re on a platform where a native Spotify client is available, your app is not allowed to register itself for opening Spotify URIs (any URI with the scheme “spotify”, e.g. spotify:artist:4LEiUm1SRbFMgfqnQTwUbQ).
Send to native client
In the case you’re building an application on a platform where a native Spotify client is available, it might sometimes be a good idea to give the user the option to go to the native Spotify client. For example, you might not support full Spotify functionality in your app. You can then simply add a link that lets the user “Open in Spotify”.
Most error messages that libspotify will return are not meant to be shown to the user. We expect the partner to gracefully handle errors and only show meaningful information to the user. The table below shows the error messages that can be relevant to a user, and what copy could be shown.
|libspotify Error Message||Explanation||Example Copy|
|The track specified for playing cannot be played.||This track can not be played in your region.|
|Login failed because of bad username and/or password.||Wrong username or password. Please try again. For help, visit Spotify.com|
|SP_ERROR_USER_BANNED||The specified username is banned.||This Spotify account has been blocked.
Please contact customer support on www.spotify.com
|Cannot connect to the Spotify backend system.||There was a problem connecting to Spotify. Please visit www.spotify.com/help for current service status.|
|Client is too old, library will need to be updated.||This Spotify version is no longer supported, please contact [manufacturer name] support for help.|
|The specified user needs a premium account.||Spotify Premium is required for this device. Please purchase a Premium subscription on www.spotify.com.|
|SP_ERROR_IS_LOADING||The resource is currently loading.||Loading... Only show this message if resource has taken more than 10 s to load!|
|PLAY_TOKEN_LOST||The account is used on a different device||Spotify has been paused because your account is used somewhere else.|
It’s important that it’s obvious to users that Spotify is powering the music in your application or device. This is why the Spotify brand needs to be carefully integrated into your application.
At first impression
It’s good that users know that they can use their Spotify account with your product. When introducing and presenting your application we therefore want you to include the Spotify brand and make it clear that the music is powered by Spotify.
Examples of contexts where this is relevant might be: splash screens, app store descriptions, product presentations on websites etc.
Also make it easy for users to find your application. In app stores, please make your app findable by searching for “Spotify”.
Whenever the user has the opportunity to play music from Spotify it needs to be apparent that the music is powered by Spotify. The Spotify brand needs to be visible during playback. If the user has not logged in to Spotify, the brand also needs to be visible before playback is started.
Artist and album artwork should not be obscured. This means that placing a Spotify logo on the artwork is not a good idea.
In addition to these design resources we provide Spotify logos, information about typefaces and colors, identity guidelines for partners, and contact addresses for brand approvals at our Partner Design Resource Hub.
If you have any questions, please contact us at email@example.com