We're now displaying multiple "start" buttons on the new experience index pages, using the same basic button we were previously using when we only displayed one instance of the button. Given this new arrangement, the hand pointer icon feels unnecessarily repetitive and heavy. Some suggestions for updating this button (on the experience index pages only; the version on the experience instance pages can stay as is, at least for now):
Replace the icon with something more subtle. Maybe try fa-arrow-alt-circle-right. In the screenshot below, I'm using the solid version with the same color as we use for the More Info and Start Over button icons. (It might be worth trying the regular version of the same icon to be even less heavy but I couldn't get it to work locally for some reason.)
I used margin-left: 0.75em; on the new icon to get the horizontal spacing between the button label and the icon shown in the screenshot, but that's just an example.
Add some additional bottom margin to the buttons so they are spaced out just a bit more (try margin-bottom: 0.5em;).
Here's more or less what things would like after the updates above:
Optional: There's a lot of fiddly CSS and an extra HTML wrapper around this button that I used to get the original "Touch to begin" version to work with pulsing animation, etc. Since we're not using the animation here, and we're not showing the second line of the button label (the "20 items" part), both the extra HTML and the fiddly CSS for this button could probably be simplified quite a bit. 🤷♂️
We're now displaying multiple "start" buttons on the new experience index pages, using the same basic button we were previously using when we only displayed one instance of the button. Given this new arrangement, the hand pointer icon feels unnecessarily repetitive and heavy. Some suggestions for updating this button (on the experience index pages only; the version on the experience instance pages can stay as is, at least for now):
Replace the icon with something more subtle. Maybe try
fa-arrow-alt-circle-right. In the screenshot below, I'm using the solid version with the same color as we use for the More Info and Start Over button icons. (It might be worth trying theregularversion of the same icon to be even less heavy but I couldn't get it to work locally for some reason.)I used
margin-left: 0.75em;on the new icon to get the horizontal spacing between the button label and the icon shown in the screenshot, but that's just an example.Add some additional bottom margin to the buttons so they are spaced out just a bit more (try
margin-bottom: 0.5em;).Here's more or less what things would like after the updates above:
Optional: There's a lot of fiddly CSS and an extra HTML wrapper around this button that I used to get the original "Touch to begin" version to work with pulsing animation, etc. Since we're not using the animation here, and we're not showing the second line of the button label (the "20 items" part), both the extra HTML and the fiddly CSS for this button could probably be simplified quite a bit. 🤷♂️