These day, you know, it’s all about “liking this” and “twitting that” so that other kinds of rating system may seem so passé.
Though, I still enjoy a nice piece of design such this bliss-o-meter.
Honestly, I think that Last.fm is one of the best web portal ever done, on the design side I mean. My appreciation comes partly from some little clever intuitions (e.g. the avatar-button), partly because of its graphic consistency, which never slips into visual bore.
Now I’m wondering if the new Facebook like button, which is spreading webwide pretty fast, will replace the “native “rating” system or if Last.fm’s guys will stuck to the orginal design.
Clear and minimal, this pic taken from Asylum (now a section of The Huffington Post) provides a nice example of comment listing with rating buttons and reply indent.
Psdtemplate is a really handy blog, full of resources for webdesigners and rich in tutorials and tips (and obviously it’s in our favs list).
We loved the rather fully equipped rating system displayed in the comments listing, by which you can add/remove score to a comment and even submitting it to admin’s attention (exclamation mark).
Affordance is a visual clue to the function of an object.
The term, that was firstly brought out in the 70s by perceptual psychologist J. J. Gibson and originally meant “the actionable properties between the world and an actor (a person or animal)”, was introduced with the aforesaid significance by Don Norman‘s besteller The Psychology of Everyday Things (a.k.a POET) and immediately adopted by the design community.
Put in a down-to-earth way, we could say that Threadless scoring system’s affordance is very high since the big squared buttons function is easily and readily understood: the graphic elements stand out, clearly asserting their scope, as if they were screaming out ”hit me!”.
A curiosity: Norman’s book was translated into Italian as The masochist’s percolator, which I know has almost nothing to do with the orginal title, but I think it’s ten thousand times funnier.
Nameourababy è un servizio che permette di proporre e votare i nomi per bambini: il sistema di rating (in questo caso delle bambine) è ben fatto e anche il form per aggiungere nomi (in questo caso dei bambini) è pulito e chiaro.
Una referenza indispensabile per tutte le mumbloggers.
The peculiarity of the rating system in Colectiva’s blog, a creative agency based in Guatemala, is that as you move the mouse over the heart icons to vote, they read FRESH. It’s a simple idea that diversifies the design of a component otherwise pretty similar to others.
Reading this Japanese blog that linked us using Google Translate is quite a surreal experience;: apparently Web & patterns matches the description “lead to heart to be the same design, web design collection.” Actually, I wanted to understand what it s the use of the button with their hands applauding. I couldn’t find it.
Nevertheless the clapping hands seem to me an interesting idea for a rating button: if the thumbs-up corresponds to the “I-like-it”, the applause could stand for a extra-strong “I-like-it”.
Mojizu, an online community dedicated to characters design, has a very funny rating system: the site’s logo, designed as a ninja, runs above the numbers following the mouse pointer.
Even the details of the vote have been carefully designed: the logo frozen or burning represent the highest or lowest point of the scale.
I’m not pretending to discover anything new, but the thumb icon in Digg has to be in our collection of rating systems.
I think that Dailyrt listing, a Twitter-based application, is an intersting example.
In particular, I like:
- the block made by the rating and the tweet-this button;
- mouse over effect on the list;
- the numbering on the right.
The voting system implemented in Behance is simply a thumb up.
If you click on it in the description page, it gives a textual feedback (thank you!) , while in other sections (e.g home page, category listings) indicates also the total score.