I need some input about how to represent this Graphically


I'm developing a music game program.   I need ideas on how to graphically represent the following 5 music breakdows,    I need an icon to put on buttons for these categories:

1.  Musical Genre
2.  Song Category
3.  Song Decade or Era
4.  Song Snippet
5.  Artist Category

[PLEASE UNDERSTAND THIS] :  I only need Icons that represent the above 5 breakdowns.  I'm going to list some examples of the categories that would fit under the above 5 breakdowns just to help you understand what these 5 breakdowns are.  I don't need graphics for the examples.....just the category that they fit into.

1.  Musical Genre   (ex:   Rock, Country, Pop)
2.  Song Category  (ex: One-hit wonders, Love Songs, Breakup Songs)
3.  Song Decade or Era (ex: 90's, 80's 70's.....)
4.  Song Snippet (ex:  Guitar riffs, Distinctive Drums, Saxaphones, Cowbell)
5.  Artist Category (ex: Hair Band, Dynamic Duos, American Idol Contestants)

Thanks in advance for your input.

Who is Participating?

Improve company productivity with a Business Account.Sign Up

satsumoConnect With a Mentor Software DeveloperCommented:
I don't think this is possible, the concepts are too involved for an icon.  You even had to explain it twice in the question, just to make sure.  The decade one could be a calender, the snippet once could be a pie chart like thing, or a bar with a section removed, thats all I can think of.  I think I would use text.
BillDLConnect With a Mentor Commented:
I kind of agree with satsumo on this one.

Take the example of the free image viewing and editing application named PhotoScape. The default layout of the application's "home" is the first screenshot:
although I have a strong feeling that it does not show the text descriptions next to the "wheel" of icons, but if it does then just imagine for the sake of my example what it would appear like to a first time user without the text tips next to the icons.

The intent is obviously to present the user with a modern looking interface that resembles, in a general kind of way, how you select applications from the more modern mobile phones.  A kind of minimal layout without extraneous clutter of text or menus.  When shown without the text tips, the icons still show the description on mouseover, so the user isn't completely lost, but in a way I think that kind of defeats the intention of just having a circle of icons that hopefully provide a clear enough representation of that option's functionality.

Obviously with use this type of layout becomes very familiar and quick to use.  I believe that PhotoScape does work in this respect, but I don't think it is particulary intuitive for a new user of the software.

I think that PhotoScape is a good compromise between minimalist and intuition because the icons have been well chosen for the functions and are large enough to contain enough detail to do this.

With regard to your implementation though, I really think you are going to have a hard job coming up with icons that accurately give a user an immediate sense of what they do.  They are very generic categories, but satsumo has suggested what I would probably have considered for two of them.  Graphic Artists who make a living from creating company logos and marketing material have this dilemma all the time.

I'm going to think about this and will return if I get any flashes of brilliance that might help you.
BillDLConnect With a Mentor Commented:
One very important question I have to ask, and that is what pixel size your icons are going to be.  You said it was a music "program", from which I would assume that you are writing it as an installable application and will be using small "icon" sized Bitmap images or *.ICO files.  The size and format of your "icons" IS important to your question, because a very small icon of limited colour depth in a dialog would make it very difficult to convey enough information to the user.
The 14th Annual Expert Award Winners

The results are in! Meet the top members of our 2017 Expert Awards. Congratulations to all who qualified!

☠ MASQ ☠Connect With a Mentor Commented:
Depends on what you really want - I guess you have an idea in your head but it doesn't come across that well.

You could for example cover this with a screen list that pulls from a limited number of icons for each category

eg as displayed below: Track  - then icons for Rock, Number One's, 1960's, Listen, Band.

satsumoConnect With a Mentor Software DeveloperCommented:
Masqueraid's comment shows that the icons for items within the category are clear enough.  If the category icon is big enough maybe you could combine a few of the item images.  That would transmit the idea of the category in a very literal way.
BillDLConnect With a Mentor Commented:
Masqueraid has made an excellent suggestion.  It could be implemented as a set of separate composite images containing separate images, and the one that you need being shown as a "Sprite".

Example of using "Image Sprites" in CSS for Web-based applications:

Different programming languages will have different methods, but if you are programming your own application you probably know how to do this already.

Suggestions for representative "icons", but again this depends entirely on the pixel size and colour depth you need:

Musical Genre (Rock, Country, Pop):

Image containing a Marshall Amplifier Stack, A Stetson Hat on the headstock of an acoustic guitar, and a modern looking silhouette of people dancing.

Song Category  (One-hit wonders, Love Songs, Breakup Songs):

An image containing text-based "#1/1", a heart symbol, and a heart symbol with an axe through it or just ripped down the middle.

Song Decade or Era (90's, 80's 70's, etc):

Apart from the excellent text-based idea by Masqueraid, perhaps just an image containing 3 calendar pages spread out to show 1970, 1989, 1990 at the top of each "page".

Song Snippet (Guitar riffs, Distinctive Drums, Saxophones, Cowbell):

An image containing pair of scissors or perhaps a tape reel being spliced (to demonstrate it is a "snippet") which is overlaid onto 3 distinctive instrument outlines (guitar, drums, keyboard), which themselves are overlaid slightly across each other.

Artist Category (Hair Band, Dynamic Duos, American Idol Contestants):

An image containing a silhouette of any long-haired freak that is obviously male (probably quite easy to do from an old photo of "Metallica"), a silhouette of "Jedward" (google them if you haven't had the misfortune), and something immediately reminiscent of (but not quite in breach of copyright) the American Idol or X-Factor logo, and simply saying "Pop Idols" or similar in glowing blue and gold text.

If you would like me to try and demonstrate what I mean with a couple of example images, then I could try and create some.

I would think that one generation of people will interpret icons in a different way from others, so it would be important to show the icons to  people from several different generations and get their immediate response.  Kind of like a Psychiatrist's "ink patch" tests.

I have attached a modified example of Masqueraid's suggestion in a way that I believe a 20 year old would expect to see icons after choosing that particular song ;-)

☠ MASQ ☠Connect With a Mentor Commented:
<now laughing so much it hurts! - thanks BillDl for the modification and my sympathy for your exposure to Ireland's next potential Eurovison entrants>
Thank you Keith.
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.