Take the 2-minute tour ×
Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. It's 100% free, no registration required.

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.

share|improve this question

migrated from ux.stackexchange.com Sep 6 '11 at 9:31

This question came from our site for user experience researchers and experts.

    
A Google image search for "top tracks" or "top tunes" doesn't yield anything useful. –  ChrisF Sep 5 '11 at 12:06
1  
maybe migrate to design? Prob better asked in there... –  colmcq Sep 5 '11 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 '11 at 12:29
    
You could try a top 3 podium. Not sure how clear it would be given the limitations. –  Jamie Schembri Sep 5 '11 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 '11 at 18:44
add comment

3 Answers 3

up vote 3 down vote accepted

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.

share|improve this answer
    
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 '11 at 18:43
add comment

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.

share|improve this answer
    
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 '11 at 18:42
add comment

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

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

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.