Gatsby: Starter library - github stars confusion

[shannonbux]

Description

The yellow stars in the starter library confused some users in interviews. They thought they were rating stars (as in Amazon stars) instead of github stars.

Steps to reproduce

When people arrive at /starters/, many of them glance at the yellow stars and think they are rating stars when they are actually supposed to represent github stars.

Expected result

When people arrive on the /starters/ page, they want to be able to choose a high quality starter. We need to make sure the information about each starters helps people know which one they want to try.

Actual result

When people arrive at /starters/, many of them glance at the yellow stars and think "why do all of these starters only have a one star rating?"

Environment

Browser window

Suggested solution

We could make the stars black so they mimic the github look and feel for stars. We could also mimic the design more fully from GitHub:

[LekoArts]

I'm really surprised that people actually think that. On Amazon you have a scale from 1-5 that immediately can be seen:

The Gatsby site doesn't have such a scale, and while there are starters with 1 star there are also others with 688. What scale would that be?! 😆

If changes are necessary, I could quickly incorporate them here: https://github.com/gatsbyjs/gatsby/pull/10258

[amberleyromo]

@LekoArts that would be great. I think the easiest thing to do here would be to set it to the same dark gray as the surrounding text. As Shannon suggested, perhaps that will more resemble GitHub, and not being a "yellow star" will take away the rating impression.

[LekoArts]

Dark:

Same Color:

[amberleyromo]

@LekoArts asking for preferences? personally i like it the same color, rather than darker (second screenshot).

[LekoArts]

I wasn't sure what you meant exactly so I did both :whynotboth:
I second the second one (duh)

[shannonbux]

Yeah, same color looks fine to me!

I think the confusion just comes from the automatic impression people get
from yellow stars, even though once they look at it closer, they realize
the stars are not like Amazon :)

On Tue, Dec 4, 2018 at 12:13 PM Amberley [e-mail] wrote:

@LekoArts https://github.com/LekoArts asking for preferences?
personally i like it the same color, rather than darker (second screenshot).

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
https://github.com/gatsbyjs/gatsby/issues/10285#issuecomment-444241434,
or mute the thread
https://github.com/notifications/unsubscribe-auth/Ae9o2iqccz5Xg8XEApZRIlbZc76Ea_tOks5u1td4gaJpZM4ZBVV4
.

[LekoArts]

Pushed the "light" version up the PR

[amberleyromo]

Closing with #10258.

[LekoArts]

https://github.com/gatsbyjs/gatsby/pull/10258 was merged

[shannonbux]

Wohoo! Thanks @lekoarts!

On Wed, Dec 5, 2018 at 1:40 PM Lennart [e-mail] wrote:

10258 https://github.com/gatsbyjs/gatsby/pull/10258 was merged

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
https://github.com/gatsbyjs/gatsby/issues/10285#issuecomment-444659733,
or mute the thread
https://github.com/notifications/unsubscribe-auth/Ae9o2jt3bE3ymooWZCgZBjpk0rjjwVfyks5u2D0vgaJpZM4ZBVV4
.