I need some input about how to represent this Graphically

Posted on 2011-02-18
Last Modified: 2013-12-26

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.

Question by:keithflash
  • 4
  • 2
  • 2
LVL 12

Accepted Solution

satsumo earned 144 total points
ID: 34931317
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.
LVL 38

Assisted Solution

BillDL earned 214 total points
ID: 34931789
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.
LVL 38

Assisted Solution

BillDL earned 214 total points
ID: 34931806
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.
LVL 62

Assisted Solution

by:☠ MASQ ☠
☠ MASQ ☠ earned 142 total points
ID: 34932516
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.

How to improve team productivity

Quip adds documents, spreadsheets, and tasklists to your Slack experience
- Elevate ideas to Quip docs
- Share Quip docs in Slack
- Get notified of changes to your docs
- Available on iOS/Android/Desktop/Web
- Online/Offline

LVL 12

Assisted Solution

satsumo earned 144 total points
ID: 34932770
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.
LVL 38

Assisted Solution

BillDL earned 214 total points
ID: 34936670
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 ;-)

LVL 62

Assisted Solution

by:☠ MASQ ☠
☠ MASQ ☠ earned 142 total points
ID: 34936884
<now laughing so much it hurts! - thanks BillDl for the modification and my sympathy for your exposure to Ireland's next potential Eurovison entrants>
LVL 38

Expert Comment

ID: 35073234
Thank you Keith.

Featured Post

Threat Intelligence Starter Resources

Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

Join & Write a Comment

This article provides the solution to a question ( posed here at Experts Exchange. The asker of the question has many JPG images in many folders, and all of t…
Recently, an awarded photographer, Selina De Maeyer (, completed a photo shoot of a beautiful event ( in An…
The goal of the tutorial is to teach the user how to edit a basic portrait of someone. This tutorial shows how to edit two basic photographs, one of a car and one of a person.
The goal of the tutorial is to teach the user what exposure is and how to use the exposure slider. Analyze the photo that you want to edit, then adjust the exposure slider to your liking.

759 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

19 Experts available now in Live!

Get 1:1 Help Now