Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add tooltip and button glow to the toggle switch on unbounded.lantern.io #194

Closed
Derekf5 opened this issue Oct 16, 2023 · 1 comment
Closed
Assignees

Comments

@Derekf5
Copy link

Derekf5 commented Oct 16, 2023

We have received some feedback both internally and from informal test subjects that the toggle CTA is a bit ambiguous.

@noahlevenson and I discussed this, and we both still believe that the toggle is the correct UI element for the task. This is primarily because it gives users a sense of control, unlike a regular button, which is typically not intended for communicating or controlling system states.

The challenge with the toggle as a CTA is that in its default disabled state, it lacks a color that draws the eye and does not have any actionable text as part of the element. The proposed solution is to add a pulsing glow to the toggle and dismissable onboarding tooltip, which will only appear on the user's first visit to unbounded.lantern.io.

Screen Shot 2023-10-16 at 9 43 56 AM

Implementation notes:

Figma page
Figma prototype for toggle glow animation

  • Tooltip should be in the same location for mobile breakpoints
  • Tooltip and glow should only be present on user's first visit
  • This should only be implemented on the browsers.lantern.io
  • Glow should stop if the user closes the tooltip
  • Animation specs
animation-delay: 200ms;
animation-timing-function: ease-out;
animation-duration: 800ms;
@Derekf5 Derekf5 changed the title Add tooltip and button glow for the toggle switch on unbounded.lantern.io Add tooltip and button glow to the toggle switch on unbounded.lantern.io Oct 16, 2023
@woodybury
Copy link
Contributor

done

#196

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants