# How to show Stars?

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

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!

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

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

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.

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

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.