3

I'm designing an online music player application, and in top bar of the application, we need a "Top Tracks" button. The application is skinned with a Mac OSX theme as of now, so ideally it should be monochrome.

I've been unable to think of an icon that would properly portray the top Tracks button to the user. I've been looking around for inspiration, and I thought either :

  • Radio/Jukebox to represent popular tracks
  • Bang Icon (Big asterisk)

The icon size would be around 32x32 px

As of now, we're using "Top Tracks" as a filler text.

Improve this question
5
  • A Google image search for "top tracks" or "top tunes" doesn't yield anything useful.
    – ChrisF
    Sep 5, 2011 at 12:06
  • 1
    maybe migrate to design? Prob better asked in there...
    – colmcq
    Sep 5, 2011 at 12:09
  • A little button with the text Top 10? In gold with sparkles. 4sqnl.nevs.nl/wp-content/uploads/2011/01/top-101.jpg
    – CodingBarfield
    Sep 5, 2011 at 12:29
  • You could try a top 3 podium. Not sure how clear it would be given the limitations.
    – Jamie Schembri
    Sep 5, 2011 at 17:26
  • @ChrisF: I tried google images as well, with lots of other variations. And most of the other players (even desktop ones) handle it as a text usually (Most Played, Most Liked etc)
    – Capt.Nemo
    Sep 5, 2011 at 18:44

3 Answers 3

Reset to default
3

A common convention is to put flames around the icon of anything popular. You see this on forums and message boards quite often, in particular. If it's appropriate for your demographic, stylized flames can be both attractive and meaningful.

Improve this answer
1
  • I like this idea, I could probably try something with a monochrome icon which colorizes on hover, with a tooltip. Thanks!
    – Capt.Nemo
    Sep 5, 2011 at 18:43
3

I tried merging a musical note symbol and stars - but I'm not sure it's obvious enough though: enter image description here

Improve this answer
2
  • 1
    That's a really cool idea! Looks great, but I agree its meaning is probably not entirely evident.
    – Philip Seyfi
    Sep 6, 2011 at 18:01
  • Can you put some flames on it? And lasers?
    – horatio
    Sep 6, 2011 at 19:49
0

Because you specified monochrome, it rules out something like a 'trophy' or 'star' layered on a coloured background e.g. green. I use green as an example as this colour to me represents a correct choice.

Alternatively instead of an symbol visual, how about just the text graphic like 'Top' or '1st' similar to LinkedIn connections paradigm?

This is what I was thinking when using a text-led graphic.

I've included the hover option, styled in orange taking into account a flame related colour, next to the monochrome version. I used Silkscreen a font created by Jason Kottle. There are others like Nano sans and Mini mono, sorry I can't post links, I don't have a reputation yet! I think these would work in your situation if space is a concern.

Improve this answer
1
  • Our first attempts were with text-based graphics, but we found that the standard icons for 'shuffle', 'repeat' made much more sense than writing shuffle/repeat which took way too much space.
    – Capt.Nemo
    Sep 5, 2011 at 18:42

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy