How to show Stars?

Get Started
1

My website allows people to rate a Member’s Comment.

I am debating what is the best way to communicate this information.

Option #1: Text only


4.3 Stars

Option #2: Text + Image


4.3 *

Option #3: Image only


**** (1/3 star here)

Option #4: Other


???????

Which option do you like best and why??

To me, Option #3 might be the most visually appealing, BUT it also is the most work. (When I took a crash course in Inkscape this winter and tried to create a simple sprite to show a two-state Important/Not-Important condition, it took me over a week to figure out everything. YUCK!!)

It is also kind of dicey because, how crazy do you get with partial stars?! (:

Personally, I think Option #2 would be the best as far as visual appeal and ease of implementation, but that’s just me.

What do you think?

Sincerely,

Debbie

2

It’s probably not as complicated as it sounds, basically you need to do a few things:

  1. Keep a log of all rate values for each comment
  2. Total up all the values, then do a calculation to find the average score
  • for dealing with partials I’d suggest round up/down to the nearest 0.5, so 4.25 would equate to 4.5 but 4.24 would equate to 4.00
  1. Use some conditional logic in your HTML/PHP to output average score values, here’s a simplified example using a separate image for each score:
{if score == 5}
  <img src="star-five.png" alt="5 stars">
{if:elseif score == 4.5}
  <img src="star-four-half.png" alt="4.5 stars">
{if:elseif score == 4}
  <img src="star-four.png" alt="4 stars">
{if:elseif score == 3.5}
  <img src="star-three-half.png" alt="3.5 stars">
{if:elseif score == 3}
  <img src="star-three.png" alt="3 stars">
{if:elseif score == 2.5}
  <img src="star-two-half.png" alt="2.5 stars">
{if:elseif score == 2}
  <img src="star-two.png" alt="2 stars">
{if:elseif score == 1.5}
  <img src="star-one-half.png" alt="1.5 stars">
{if:elseif score == 1}
  <img src="star-one.png" alt="1 star">
{if:elseif score == 0.5}
  <img src="star-half.png" alt="0.5 stars">
{if:else}
  <img src="star-none.png" alt="0 stars">
{/if}

There are many ways to approach this sort of thing!

3

bluedreamer,

Thanks for the response, but you missed the essence of my OP.

First, I know how to calculate the value.

Second, my main question was which option would LOOK the best for a UI standpoint?

Finally, if I were to use images, I would use a sprite because they are superior to using separate images. (Problem is, I also find creating a sprite in Inkscape to be a major PITA with my limited graphic-design background!!)

Thanks,

Debbie

4

Personally I like the visual aspect of something like stars, or even dots. :slight_smile:

I hear you about creating a sprite for all the star variations, one trick is to create a grid in your image editor, where each cell is the size you want each start to occupy. Attached is a very quick example image, the grey grid lines are just for display, instead you’d use the image editors ruler or grid guidelines. You’d need space for 5 columns, then as many rows are you need for all star values.

5

I agree with you, BUT…

1.) Sprites are more work

2.) How do you represent 1/4 or 1/3 or 1/2 of any shape - let alone a star?! (:

If I say something is 4.3 * then you still have some of the visual aspect, but also the precision of a number.

What does everyone else think??

Sincerely,

Debbie

6

You’re making it too complicated, IMHO. Put a Like button on there or something. People either like it or they don’t. An /5 rating doesn’t mean a lot to me, as everyone has a different idea of what it means.

7

I just lost some respect for you after your FaceBook comment… :nono:

Debbie

8

haha - good one!

I agree with ralph.m when he says you’re making it too complicated.

  1. Once you’ve built your sprite image and applied your CSS to show it in various positions for each score it’s job done and you’ll not need to touch it again

  2. If you use the sprite method then you could create as many star patterns as you need for fractions. But there again I wouldn’t bother going to that much detail, just showing 1/2 values is more than enough IMHO. There again I’d say most people wouldn’t care about fractions, all they are interested in is whether something is 0,1,2,3,4 or 5 stars.

If you still can’t make your mind up and still wanted fractions then why not display the score as plain text 4.3/5 ?