Redesign the UX of the upvote button

[barefoot-88]

Issue

The UX of BOLT🔩FUN's tipping/upvote button has a few issues that we should address in a redesign. Here are a few of the frustrations I have encountered as a user:

a). Style: The style of the button doesn't feel particularly natural. We should stick to a set of component states that make the user feel like the button is responsive and looks good when pressed. If it looks good, I'm going to want to click it!

• Q: Emoji vs Icon: We are starting to use emojis across the platform, which makes me wonder if we should use an emoji for the like and comment buttons?
• Q: Which icon/emoji to use, ⚡️ vs 🔩 vs 🔥?
• With this will also come the button colours and how the respond when clicked. If we look to support the lightning ecosystem with a bolt ⚡️, the primary colour could be yellow.

b). Interaction/Pattern: Holding down the button. whilst I think this is a fun idea, I don't think it's been executed well enough to warrant the UX that surrounds it. Some issues for me are a lack of control over the amount, can't control or predict the speed of the counter, the animation of the button filling and unfilling is strange.

Solutions

Some ideas for solutions to the issues above...

a). Clearly defined component states, colours, UXD and animations.

• 1. My thought would be to switch our fire 🔥 icon to a lightning bolt ⚡️, in order to show support for the lightning ecosystem.
• 2. Colours, styles, etc. Colour can match the icon used (e.g yellow for lightning), or we set the colours to match the primary purple colour used across the platform.
• 3. Ideas for component states: Fetching invoice = pulsating colour tones, Using a fading colour fill to show the button can/should be clicked again rather than binary on/off.
• 4. Getting rid of the shaking and the colour fill from left to right. Replacing it with a single colour tone (pressed component state) with an changing vote counter (like Medium's clap button)

b). For now, it might be easiest to look at a few different options.

• 1. First option, split functionality. A single click interaction: this allows users to click the button once and it changes the value by 1. An additional double click interaction: users can double click the button which prompts the payment widget to open, they can enter a custom amount of sats they wish to vote with, and click confirm. This gives users a precise control over the amount of votes they wish to give. The double click also acts as a slightly hidden feature (easter egg), with the standard pattern being a single click.
• 3. Second option, keep the Hold to vote functionality but clearly define the amount (invoice, speed, etc). Users should clearly see the invoice amount of the action (e.g Medium's "+33" vote counter, or having the counter reset to 1 for each new click). Secondly, if the user is to hold the button, the first 50 sats should be relatively slow, the second 50 could speed up, the next 50 a little faster, and so on. But the user should never feel like they "accidentally" tipped 1M sats...

[barefoot-88]

Some research on interactive buttons...

Multi-click

• https://dribbble.com/shots/12234916--Like-Button-for-Figma-Cool
• https://dribbble.com/shots/10222297-Beer-Like
• https://dribbble.com/shots/6017174-Like-button
• https://dribbble.com/shots/3818902-Like-Notifications-Animation
• https://dribbble.com/shots/6645965-Number-Counter
• https://dribbble.com/shots/5539678-Stepper-VI

Single-click

• https://dribbble.com/shots/8082836-Paw-Clap-Button
• https://dribbble.com/shots/6500093-Like-Button-Animation-Press-L
• https://dribbble.com/shots/12567603-Upvote

Bookmark animation

• https://dribbble.com/shots/13665300-Bookmark

[johnsBeharry]

• show tooltip "thank you" after payment is confirmed
• glow the entire post while the invoice is loading

[barefoot-88]

Some design ideas for a redesigned UXD of the button...

[barefoot-88]

I see there has been a bit of work done to the vote button recently @MTG2000

I know that we may not do an entire redesign of this button just yet, but for the time being it makes sense to implement some of your updates as the loading state seems to be very useful for users to know that an invoice is being fetched. However, I do have some thoughts on how this button could be slightly updated to fix a few issues.

MTG's updates

Loading state

• This is good for the time being, we can keep it. It's useful for people to know that something is happening in the background.

Success

• Success state is a good idea, not sure about the "Thanks" message though. Instead, it might make more sense to read something like "+100" (sats), showing the number of sats the user has just successfully tipped the maker. Would this be possible? If not, I think a simple flame emoji would even be better, with potentially some more flame emojis doing a one-time burst out of button to show that it's complete.

Rest (post success)

• This is one of the reasons I don't like the "filling" animation of the button (either horizontal or vertical). The button is often left partially filled and it looks really weird.
• Would it be possible to change the animation of the button so that if the user is clicking/holding it down, the whole button fills the same colour at once (not gradual filling).
• It should be a slightly lighter version of red, I believe the designs show Error / 50 as the fill colour, so it's a very light red/pink colour making it relatively subtle.

Shaking

• Is it possible to remove this shaking feature for the time being? Considering that there are lots of flame emojis + numbers that spew out of the button when the user holds it, I think they are aware that something is happening and so we can probably remove this shaking feature as it just adds a bit of chaos.

Full redesign

I would like to do a full redesign of this button, however I'm hoping the above issues are not overcomplicated fixes that could improve the button UX momentarily until we test the button and get feedback for a redesign.