2

I'm creating a music player for a web site. All of the songs have words and music (i.e. you can pull up lyrics or sheet music for a song), but some of the recordings are only the music.

How can I indicate which songs in the list have vocal recordings, and which ones are only the instrumental minus tracks? Is there an icon that would indicate it well?

I'm attaching an image of what I have currently. It's still pretty rough, but it may help for context.

enter image description here

Improve this question
3
  • Icon of a person for the vocal ones and icon of an instrument for the instrumental Ines ?
    – PhillipW
    Commented Feb 5, 2017 at 7:42
  • In that format, there's nowhere near enough pixels for any kind of symbol or icon with easily determinable meaning. So you might need a column for vocals that you put a tick mark in.
    – Confused
    Commented Feb 5, 2017 at 21:58
  • That's an interesting idea, to add a column. I hadn't considered that.
    – Samuel Bradshaw
    Commented Feb 6, 2017 at 14:31

3 Answers 3

Reset to default
1

I think using icons for vocal and instrumental will become convulated for the user. It will also result in visual clutter along with potentially creating accessibility issues.

I would rather recommend grouping instrumental and vocals under separate headings. Like so: (Heading colors are just an indication for separation. You can use any other visual style)

enter image description here

Improve this answer
2
  • I like the look of this. In my use case I have another limitation that I should have mentioned in the question – the songs are in a specific numerical order that can't be changed, and grouping them would require me to reorder them. Another limitation with this approach is that when a person is listening all the way through the list, they hear all of the vocal songs, then all of the instrumental songs, which may not be desirable. I might be able to address that by adding a Shuffle feature for playback...
    – Samuel Bradshaw
    Commented Feb 6, 2017 at 14:29
  • Ok. So, we have some constraints. One of the interesting patterns that I've noticed on Spotify and iTunes is that for vocals they mention the artist name against the songs. For instrumental, nothing is mentioned. Check this screenshot - imgur.com/VoSZ8DC Though this is not very intuitive, it's a pattern that is familiar to music lovers. Another option is what Renaud has mentioned in his answer. But that might disturb the visual balance. I'll ponder more on it. Maybe we can have a new pattern here! :)
    – Adit Gupta
    Commented Feb 6, 2017 at 14:47
1

Agree with Dipak about the lack of clarity of icons

So i would suggest simply to add (instrumental) after the title. Furthermore, the instrumental and vocal version of the same song will be associated in the list, which is convinient.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

Improve this answer
1
  • This might get cluttered depending on how many instrumental songs there are, which varies by collection/album. It is very clear, though, which is good. I wonder if there would be other good ways to signify the difference with the text itself, instead of using icons? Maybe italics, color, or adding an asterisk with an explanation below? Further adding to the confusion, as you can see on the screenshot that there are some songs that are grayed out, meaning I don't have any recordings for those – vocal or instrumental. So we'd have to deal with three levels: no audio, instrumental, and vocal.
    – Samuel Bradshaw
    Commented Feb 6, 2017 at 14:38
-1

you can try something like this for the songs with lyricslyrics

and for the instrumental onesinstrumental

Improve this answer
1
  • icons are intuitive but I think in small size it wont be properly visible.
    – Dhiraj Pandagre
    Commented Feb 6, 2017 at 6:52

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.