Erik Soriano - Spotify Icon Intuitiveness Study Report

Testing the Icon Intuitiveness for: Study Report Author:

Erik Soriano

Date:

September 28, 2022

Introduction

Introduction The purpose of this experiment was to study the impact of icons in mobile applications, and to better understand users’ conceptual models and mind mapping to uncover any hidden opportunity for the icons of the popular music streaming application: Spotify.

For the purpose of this experiment, only 10 of their icons were selected for the study. The aim was to show all ten icons individually to each participant (in a randomized order), and out of the context of the app; to assess whether the participant’s conceptual models align with the intent of each icon.

The experiment was conducted over the course of one week, with each participant doing the test unmoderated, and without knowing which app the icons belonged to. Toward the end of the session, participants were then shown all 10 icons together (without labels) and were asked to share their opinions of the icon set as a whole, including asking them to rate the icons from least to most attractive using a Likert scale of 1-7 (with 7 being the most attractive). This was followed by the reveal of which apps the icons belonged to.

Most of the icons were easily recognized and matched participant’s conceptual model, but there were 2 icons that all participants agreed, were problematic and unclear (interestingly, these two icons are a pivotal part of Spotify’s UI). This reports outlines all data and findings.

3

Product Description Spotify is a digital music, podcast, and video service that gives you access to millions of songs and other content from creators all over the world. Basic functions such as playing music are totally free, but you can also choose to upgrade to Spotify Premium.

Spotify was founded in 2006 in Stockholm, Sweden, and has quickly become one of the leading music streaming platforms in the world. Most of their iconography uses universally-recognized icons such as ‘home’, ‘search’, ‘favorite’, etc. But they also have their own unique icons that are connected to the experience of listening to music.

For the purpose of this experiment, only 10 of their icons were selected for the study. Participants were introduced to each icon individually (in a randomized order) and out of the context of the app, to assess whether the participant’s conceptual models aligned with the intent of each icon.

4

Methods

Methods: Subjects 10 Participants Total

2/10

Participants were daily Spotify users 10/10 were all familiar with Spotify

7 Male 3 Female

Participants by Age Mean: Median: Mode: Minimum: Maximum: 70% of participants Use IOS (Apple) mobile Devices

30% of participants Use Android mobile devices

20% Female Users 50% Male Users

10% Female Users 20% Male Users

25.2 27 29 18 32

Avg. of Age

25.2

Standard Deviation:

5.0

6

Methods: Subjects Participants by Level of Technology(internet/mobile apps) Experience

Participants by Education Level

7

Methods: Apparatus • Upon opening the link, they received, participants were shown a welcome screen showing the purpose of the study and protocol to follow (figure 1a) • They filled out a short demographics survey (figure 1b) Then they started the study showing them one icon at a time (order was • randomized per participant) (figure 1c)

Figure 1a

Figure 1b

Figure 1c 8

Methods: Apparatus

Equipment

Icon set with intended meaning (labels)

MacBook Pro Laptop

Qualtrics Software

Excel

PowerPoint

Adobe Illustrator

Adobe Photoshop 9

Methods: Procedure § Participants opened the link to the study on Qualtrics, which included a welcome screen with a brief on the purpose of the study, and directions to proceed and get started. After reading the text, they were prompted to press the orange “next” button to start

§The first part was a short demographics questionnaire to understand the participants background and experience with technology, and mobile devices

§After the demographics questionnaire, the study began, and participants were shown one page per icon, showing them a photo of the icon, followed by questions regarding what they thought the icon meant, and a sus question to rate the appearance of the icon

§The order in which the participant saw each icon was randomized; it was important to understand if the order they saw each icon had an impact in their response

10

Methods: Procedure § After seeing the last individual icon, the participants were shown the entire icon set together, and were again asked to rate their appearance using a Likert scale of (1-7) with 1 being the least attractive, and 7 being the most attractive

§At this time, the participants still were not told the exact meaning of each icon, and which app they belonged to

§After answering a few other questions about their music listening habits, then it was disclosed to the participants that the icons belonged to Spotify

§The last questions were again, showing the icon set to the participants and asked them to share their thoughts after they found out the icons were for Spotify

§After the survey ended, a ‘thank you’ screen popped up to thank each participant for their time

11

Results

Icon Set (Summary)

13

Results: Individual Icons

Intended Meaning: Repeat Song

Icon 1: Repeat Song When asked about what the icon meant to them: 10/10 incorrectly responded: “Refresh”

When asked about what would happen when the icon is clicked:

10/10 incorrectly responded: “Refresh the page” When asked to rate the icon for attractiveness in a scale of 1-7 (with 7 being the MOST attractive):

Suggestion:

The look could be improved to adapt to user’s mental models of a repeat button; usually the icon is circular (like this one) but has an integer in the middle indicating how many times the song can repeat, etc.

4.7

Avg. rating across participants was 14

Results: Individual Icons

Intended Meaning: Microphone

Icon 2: Microphone

When asked about what the icon meant to them: 5/10 correctly responded: “Microphone” or “mic” 5/10 incorrectly responded: “Siri” “Voice” or “Mute”

When asked about what would happen when the icon is clicked: 10/10 agreed about the microphone being for voice inputs or auditory stimulus When asked to rate the icon for attractiveness in a scale of 1-7 (with 7 being the MOST attractive):

Suggestion:

The microphone is a standard convention across most apps, there was no issue or mismatch for participant’s conceptual models and the intended use, therefore, no suggestions are given.

5

Avg. rating across participants was 15

Results: Individual Icons

Intended Meaning: Download

Icon 3: Download When asked about what the icon meant to them: 8/10 correctly responded: “Download” or “Download something” 2/10 incorrectly responded: “Press the icon to blow up something”, “Go down” or “drop down menu”

When asked about what would happen when the icon is clicked: 9/10 correctly responded: “Download something” 1/10 incorrectly responded: “I don’t want to click that”

Suggestion:

Most participants agreed on the intended meaning of this icon, therefore, no suggestions or changes are needed. However, one participant mentioned that in their country, this icon DOES NOT mean download – in fact, it has a negative meaning of “emergency situation”, meaning there is an opportunity to redesign it more universally for all cultures.

When asked to rate the icon for attractiveness in a scale of 1-7 (with 7 being the MOST attractive):

4.3

Avg. rating across participants was 16

Results: Individual Icons

Intended Meaning: Search

Icon 4: Search

When asked about what the icon meant to them: 9/10 correctly responded: “Search” 1/10 incorrectly responded: “Magnification”

When asked about what would happen when the icon is clicked: 9/10 correctly responded: “Search something” 1/10 incorrectly responded: “Use magnifying glass”

Suggestion:

Most participants agreed on the intended meaning of this icon, therefore, no suggestions or changes are needed. The search icon is universally understood, and while one participant had a different mental model, for reasons unknown, the icon’s intended meaning is consisted with the output action.

When asked to rate the icon for attractiveness in a scale of 1-7 (with 7 being the MOST attractive):

4.9

Avg. rating across participants was 17

Results: Individual Icons

Intended Meaning: Home

Icon 5: Home

When asked about what the icon meant to them: 10/10 correctly responded: “Home”

When asked about what would happen when the icon is clicked: 10/10 correctly responded: “Will take me to the home page” When asked to rate the icon for attractiveness in a scale of 1-7 (with 7 being the MOST attractive):

Suggestion:

Most participants agreed on the intended meaning of this icon, therefore, no suggestions or changes are needed. The home icon is universally understood, and all participants’ conceptual models were consistent with this icon.

5

Avg. rating across participants was 18

Results: Individual Icons

Intended Meaning: Shuffle

Icon 6: Shuffle

When asked about what the icon meant to them:

6/10 correctly responded: “Shuffle” 4/10 incorrectly responded: “Random”, “Next”, “Merge” or “Process”

When asked about what would happen when the icon is clicked: 6/10 correctly responded: “Shuffle Music” 4/10 incorrectly responded: “Would send me to another page”, “No idea; but on Spotify it is for shuffle” or “Process Something”

Suggestion:

Participants who were familiar with music streaming apps, knew what this icon was for, however, everyone had agreed that this icon represented “next” or “move to something else”, while the shuffle icon is universally accepted and adapted, no suggestions will be made, since this icon is almost exclusive to the music industry.

When asked to rate the icon for attractiveness in a scale of 1-7 (with 7 being the MOST attractive):

4.3

Avg. rating across participants was 19

Results: Individual Icons

Intended Meaning: Edit

Icon 7: Edit

When asked about what the icon meant to them: 6/10 correctly responded: “Edit” or “write” 4/10 incorrectly responded: “Pencil” or “draw”

When asked about what would happen when the icon is clicked:

9/10 correctly responded: “Will allow me to edit/write something” 1/10 incorrectly responded: “Allow me to draw”

Suggestion:

Most participants agreed on the intended meaning of this icon, therefore, no suggestions or changes are needed. The Edit icon is universally understood for allowing a participant to edit their profile, photo, or other data on the screen.

When asked to rate the icon for attractiveness in a scale of 1-7 (with 7 being the MOST attractive):

4.3

Avg. rating across participants was 20

Results: Individual Icons

Intended Meaning: Volume

Icon 8: Volume

When asked about what the icon meant to them: 10/10 correctly responded: “Volume”

When asked about what would happen when the icon is clicked: 7/10 correctly responded: “Adjust volume or sound” 3/10 incorrectly responded: “Mute”

Suggestion:

Most participants agreed on the intended meaning of this icon, therefore, no suggestions or changes are needed. The volume icon is universally understood for changing the volume of an interface. No suggestion is required.

When asked to rate the icon for attractiveness in a scale of 1-7 (with 7 being the MOST attractive):

4.9

Avg. rating across participants was 21

Results: Individual Icons

Intended Meaning: Add Song to Playlist

Icon 9: Add Song to Playlist

When asked about what the icon meant to them: 10/10 correctly responded: “Add Music” or “Music”

When asked about what would happen when the icon is clicked: 7/10 correctly responded: “Allow you to add new music” 3/10 incorrectly responded: “Something will happen”, “Download a song” or “I thought it would produce a song”

Suggestion:

All participants agreed that this icon is music-related, and while most of them understand what would happen when clicking this icon (adding a new song to playlist), a few participants expected ”something else to happen”, such as downloading a song, or playing a song

When asked to rate the icon for attractiveness in a scale of 1-7 (with 7 being the MOST attractive):

4

Avg. rating across participants was 22

Results: Individual Icons

Intended Meaning: Music Library

Icon 10: Music Library

When asked about what the icon meant to them: 10/10 incorrectly responded: “No idea”, “Library or books”, “Pause” or “Maybe volume”

When asked about what would happen when the icon is clicked: 10/10 incorrectly responded: “No idea what would happen”, “The application will pause” or “Provide information”

Suggestion:

This icon is one of Spotify’s main icons, since it is the music library of ”liked songs”. The fact that no one seemed to recognize that it is a music library is problematic, because it is one of the most important icons in Spotify. Not even users of the app remembered or noticed what it was for, indicating there is an opportunity for improvement or redesign. The idea is to communicate that once a user clicks this, a list of songs will appear.

When asked to rate the icon for attractiveness in a scale of 1-7 (with 7 being the MOST attractive):

2.3

Avg. rating across participants was 23

Results: Icon Set Rated (LEAST) Attractive: Music Library Icon (icon 4)

7/10 responded: “Music Library Icon” 1/10 responded: “Edit Icon” 1/10 responded: “Add Song to Playlist Icon” 1/10 responded: “Shuffle Icon”

Rated (MOST) Attractive: Microphone (icon 5); Home (icon8) 4/10 responded: “Add Song to Playlist Icon” 3/10 responded: “Home Icon” 1/10 responded: “Download Icon” 2/10 responded: “Shuffle Icon”

When participant were asked about the icon set after being told they belonged to Spotify:

“I use them and won’t realize” “Makes sense” “Some icons are confusing like the shuffle; edit is boring, but the rest are practical and clean” “Delete 4” “What is icon 4? Is it for a music gallery? They need to change it”

Suggestion:

The most salient opportunity for improvement is with the music library icon, as most people had no idea what it was, including the users who use Spotify often. This is an interesting observation given that Spotify recently underwent an icon set redesign (including all of these).

This information will be used to inform redesign suggestions.

24

Results: Icon Set - Opportunities While it fit most participants’ mental models, a few additions could made to communicate the “download” “incoming data” concept

Rated the most confusing-looking and least attractive to participants

While not rated badly for its appearance, this one did not match any of the participants conceptual models

25

Redesign

Before

After

27

Redesigned Icons: Music Library, Download, and Repeat Song

28

Redesigned Icons: Within the Context of the App

29

Discussion

Discussion Key Observations: § The fact that each icon was randomized when being shown to the participant, had no effect on how they perceived it § For the icons that are based on physical analogies such as, the Home icon, search icon, and volume icon, it is easier for participants to understand the intended use (even without the context of the app) because this is learned behavior; from their previous experience they know that home can only mean home, a magnifying glass means someone is “searching” something like a detective, or a volume icon that has the waves of sound are related to volume and sound. Real world examples translated into digital conventions help users accept or ‘learn” the icons better (Mackenzie, 2012) § After telling each participant that the icons belonged to the music streaming app Spotify, their opinions did not change (except for the two users of the app, who noted that even though they use the app often, they have never paid attention to, nor recognized the Music Library icon § 80% of the icons were consistent with the conceptual model that participants had of them, and also with their assumption of what would happen if they would click on them; while the other 20% were either completely guessed badly, or the participant did not know what the intended use was § The music library icon is an opportunity to redesign, since, for most people who are not Spotify users, the icon does not describe its intended meaning, this observation was seen across all participants § Another opportunity for redesign, is the “repeat song” icon, since most users agreed that it was a “refresh the page” icon, but in the context of the music app, this icon is intended to allow users to repeat a song once, or multiple times, depending on the mode of the icon.

Normally an icon like this has an integer in the middle indicating how many times a song can be repeated § The fact that participants viewed the repeat icon out of context, and without an integer in the middle, may have affected their perception of it, possibly noting a similarity between the concept of “refreshing”, “doing something again”, which are similar concepts of “repeating” something, in this case, a song 31

Conclusion

Conclusion After performing a study about icon intuitiveness with 10 participants of varied technology and educational levels, it was concluded that for icons that are directly connected with their real-world physical analogies, users can make sense of their intended use and affordance more easily, based on their previous experience. For this experiment, 10 icons from the music streaming application, Spotify, were selected. None of the participants were told which app these icons belonged to, until the end of the study, and each icon was randomly presented to each participant out of context.

The responses received were consistent with the original predictions and main intent of the icons, even without knowing what app it was, 80% of the icons were matched correctly with their intended use, meaning that Spotify has done a good job with the iconography. There are a couple of opportunities for improvement though, particularly with the music library icon, as well as the “repeat song” icon, since participants had trouble identifying the intended use of these two. After analyzing the results and data, some redesign suggestions were generated, directly informed by the findings, and taking into consideration all participants comments.

The takeaway from this experiment, is to always use icons that are clear to understand, or even if they are brand new digital analogies, make sure the design informs the user so they can learn quickly, as that is how conceptual models work; one thing becomes the standard because most people accepted it, and learned it as such.

If this experiment was recreated in the future, ideally, the focus would be on app-exclusive icons, and not so much on general digital conventions that are universal across most apps and websites.

33

References Mackenzie, I. Scott, (December 31, 2012). Human Computer Interaction: An Empirical Research Perspective. Morgan Kaufmann Publishers Inc. https://learning.oreilly.com/library/view/human-computer-interaction/9780124058651/

34

Appendix

Appendix – Excel Sheet with Data from study

Link to complete Excel datasheet below: https://miamiedu-my.sharepoint.com/:x:/g/personal/egs841_miami_edu/Eey4iodl2h1Lo4sKhjrTHp4BMC8ghGSPvb24WPQe-cxwHQ?e=bmjhmG 36

Testing the Icon Intuitiveness for Spotify Lab Report by

Erik Soriano

Thank You