I am creating an educational web app for a desktop browser that looks similar to an iPhone app using the default web stack composed of HTML5, CSS3, and JavaScript.

I am wondering if it would be more user friendly to have awards like Apprentice/Expert or awards like Ruby/Diamond/Gold/Silver/Platinum based on the amount of practicing they have done ?

I also want iOS homescreen icons for these awards for display because they are displayed like the iPhone homescreen, so which would be more practical and would be easier to understand ? I just want to gather your opinions and use that as the basis for the awards page.

  • 4
    I wouldn't ask for opinions - primarily opinion based questions will be banned - but I think you can rephrase your question to ask for concrete things rather than opinions, also, I would try to be clearer and more specific, giving us more information about what you are designing and a clearer idea of your goals.
    – Toni Leigh
    Commented Nov 26, 2013 at 22:02
  • @ColinSharpe I am creating a web app for education and I am just wondering what names/icons would lead teens to be immersed in the app because I need a good source of motivation for them to actually try. I am just not sure which would make the user interface more apleasing/inspirational/motivational/simpler to understand progress at a glance as this is primarily aimed toward iPhones.
    – user38534
    Commented Nov 26, 2013 at 23:44

2 Answers 2


To make sure I'm answering the right question: you want to find the best approach to representing ranks, in iOS icon format, to a specific audience.

Short answer: use something appropriate to your audience that represents a numerical value.

Metals and their pitfalls

Firstly, if you go with those metals you suggested, you limit yourself to 3, perhaps 4 colors which can be clearly distinguishable ranks. Bronze (or copper, brown), silver (light gray) and gold (yellow). If you want to add platinum, it'd have to be white, which can be hard to distinguish from gray, but not impossible.

More importantly, color-blind people could have issues with this approach.

So I'd suggest maybe combining it with numbers. Stick a number on these colors, and it becomes a lot more clear. However, gold is often associated with number 1, so what does that make platinum?

Rankings in real life

Perhaps take a page from real life. There are plenty options there. Military or police ranks (Stripes, stars, the lot). School ranking systems (A, B, F?)

Stars ... or something similar

Perhaps instead of the above, go for a simple graphical representation of a number. Stars for example.

A single star for first rank. Two for rank two. Etc.

If you run out of space, introduce a border to the edge of the icon, and start with 1 star again. This could be a level 2, 1 star rank. Etc.

Theming the ranks

All that remains, if you go with that last option, is that you find some fun, simple representation of a number that fits your audience. Now, this is not the place to ask for a specific style-guide (try https://graphicdesign.stackexchange.com/) but here are a few ideas that might kick-start your brain;

  • Think school-board; white on a dark green background, drawn?
  • Possibly pen-drawn on a white blue-lined paper-ish background?
  • Perhaps something from the playground, like a number of marbles?

All of these depend on your audience, and I took kind of a childish approach, since that's the first thing I thought of when you mentioned "education". However, these examples can easily be swapped out with examples that fit a more grown-up audience. Best of luck.


AFAIK and from personal experience, iOS apps can't display awards, icons or graphics on the home screen unless it's a notification or on lock screen. I don't understand how there is anything User Experience related about that nomenclature of Apprentice/Expert or Ruby/Diamond/Gold/Silver/Platinum awards. This is simply a preference for how long each process is to attain each award.

  • I have created iOS homescreen duplicate in my web app with HTML + CSS. I am just wondering what terms/icons selection would make the user experience feel better and people more immersed into the app, since this is primarily targeted toward teens, who need a lot of motivation to not be texting/gaming/surfing the web, and I am a 12 year old myself.
    – user38534
    Commented Nov 26, 2013 at 23:46

Your Answer

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