How did I do Spotify's web usability test?

Editor's note: The user experience designer Lin Wang, who lives in San Francisco, was not working for Spotify, but as a heavy user of the software, she started a series of usability tests for the famous music software's web version app, and put forward her own ideas and suggestions. The content of the article is not surprising, but the test methods and ideas are quite practical and worth learning.

As an indie music enthusiast, Spotify is the music resource I use every day to app,spotify my heart. But as with many great products, good Spotify still has room for improvement. With a set of usability tests, we find that users still encounter some key issues when using Spotify's features.

Test purpose

Identify the problems and pain points of the Spotify web App in the "Find Music", "Organize music" and "Share Music" features.

This is the current Spotify Web page app landing page interface (May 24, 2014)

Test object: Spotify Web version APP

Tester: Eight regular users who log in to Spotify every day (they are not just using Spotify)

Test location: San Francisco

Set up participants

I created a new virtual character, Nick, and set him up as an iOS developer and loved music.

Test tasks

Create a personal playlist

Add music to play List

Edit the playlist and share it

Subscribe to (focus on) music people

This test system is based on the basic requirements of online streaming music service. The character's division is based on an open scenario, avoiding the test participants to complete the project in a predetermined way.

Testing process

In this process, I use QuickTime to record eight usability tests. After I complete the record, I take notes based on the records and prioritize the usability test issues.

I will record the pain points based on the feedback from the test user.

Collect "pain points" based on user actions

As you can see, although this one obviously has a lot of problems, I still don't intend to record them together. Instead, I prefer to focus on issues that are more focused and more likely to improve Spotify's user experience.

Question 1: Search results filtering

Users want to be able to customize their search results for themselves:

User feedback: "I don't want to use Spotify because it's hard for me to find what I want through its search." ”

The following picture shows that the user wants to find a song about the "travel" theme, but after the user enters "tourist" to the search box, the search results are not filtered and filtered, and more importantly, the form of the search results itself is not so understandable. In short, users cannot find the songs they expect.

So, let's not try this approach: Allow users to sort and filter on artists, albums, and even dates, and make more meaningful search results appear in the list.

Go to the next link

The famous designer Daniel Burka once kindly pointed out: "... What users really want is not a better sort, but to filter out the results ...

In the selection system of Spotify, users can already sort by album, artist, details, playlist, and music (as we discussed earlier), but the problem with this filtering mechanism is that it is visually confusing to the user, not the function itself. They look too similar. In the figure below, the label icon and content look very similar, which is what the user really wants? The user does not know.

You might try this scenario: by using small icons to distinguish between the contents of different attributes, such as the image below, a small record is added to the icon behind the album to visually differentiate it from others, using the Avatar icon to identify the user, and to use case-sensitive words to enhance the visual identity of the word. It is believed that the adjustment of these details is enough to change the situation.

Problem 2: Confusing tool tip information

Users expect "+" to mean "add" rather than "save" or "focus".

User feedback: "Click the ' + ' button I thought I would add music to the playlist, but the question is, which list did I add to?"

And the user said: "I wipe what this is a function???"

Each time you click the "+" button, the first song is added to their playlist. Even if a typical user has realized that this feature may be problematic, click it. In different pages, the same "+" button exists, but its meaning in this context is not added, but "attention" or other. This inconsistency makes users confused.

When the mouse is moved to the "+" button, the "Save" hint is displayed, but the user has no idea what it means and where the music is saved.

The "+" button here means "attention", and the reason the user is puzzled is that the previous hint is "save".

The strange thing is that on the playlist page, the same button simply doesn't have any hints.

So let's do the following: we give the "+" button the meaning of "add" and let the user choose which list they want to save the music to.

Question 3: Why "pay attention"?

The Follow button confuses the user.

In fact, all the users in the test were confused about the "attention" button. Each tester thinks that the artist's name can be seen in the list below the "Attention" button on the left after "paying attention" to an artist, not really.

The user asks doubtfully: "I go, where are the artists I'm interested in?"

There are also users who wonder: "What is the concern of the left panel?"

A user wit said: "Since I know this button is useless, every time I will personally search for a specific artist, and then find songs." ”

Users almost agree that the "attention" panel will have artists of their concern, which are not, in fact, the only three features of the panel:

Let's try this feature: Add a "Focus Artist" section under the "Attention" Panel to explicitly display updated information, tour dates, and so on, like the design of the following figure:

Go to the next link

There is no doubt that the current Spotify design is very concise, but the information it presents to the user is complete? Replacing icons with text messages can convey more accurate information, but will it destroy the user experience of the entire interface?

Designer Daniel Burka says: "Hovering over the icons is compact, but you can't deny that the UI is really bad." ”

The problem with this information is that we don't delve into it, but the problem with the information organization in the navigation panel is the core of what we should focus on.

The original Spotify navigation panel

Whether for touch-screen devices or traditional desktop devices, large button design is more in line with user needs. So I suggest more information on the interface, as shown in the following illustration:

I make the entire panel wider than before, can host more content, make the search box more visible, and the icons and text match each other, clearly and naturally, you can click on the level two menu to accommodate more information and options, add scroll bars for easy operation, and clearer personal information presentation.

Next

Verifying My design Recommendations

Do more testing

Product iterations

The purpose of user research is to understand the needs of users and winter, so that we can develop the user's real favorite products, more excellent products. We need to integrate the user's needs and motivations into the product, promote the development, improve the design process of each step.