Category Archives: Ratings

Rating systems in web design: a great showcase of rating icons, thumbs, scoring systems, voting in websites, rating scales and many other visual ranking systems at Web & Patterns, collecting inspirational solutions for very inspired web designers.

Last.fm rating button


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.

Psdtemplate ratings and comments listing

psdtemplate-ratings-and-inspirational-blog-comments

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 in Threadless’ inspirational scoring system

threadless-inspirational-scoring-system

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.

Name Our Baby rating

Il sistema di rating in nameourbaby

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.

Colectiva rating

Il sistema di rating nel blog di Colectiva, una agenzia creativa sudamericana

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.

Digitalmemo

digitalmemo

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”.