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

Minor UI updates to the in-app tour #5597

Closed
4 of 7 tasks
amandacilek-zz opened this issue Apr 19, 2019 · 2 comments
Closed
4 of 7 tasks

Minor UI updates to the in-app tour #5597

amandacilek-zz opened this issue Apr 19, 2019 · 2 comments
Assignees
Labels
in-app tour in-app feature tours and user education Priority: 2 - Medium Normal priority Type: Improvement Make something better UI/UX Site design and usability improvements. Won’t fix: Not an issue Working as expected

Comments

@amandacilek-zz
Copy link

amandacilek-zz commented Apr 19, 2019

Relates to #5679, #5680, #5681, #5682. Full design spec: https://docs.google.com/document/d/1ErZ7eC-Cbrsgwu0uaIfGq9ZeLuhma1h5K0xvYeRv2KU/edit#

We would like to make some updates to the in-app tour experience starting with v 3.8. The updates include some minor UI improvements (this ticket) as well as a new updated script and updated table of contents page (separate ticket).

  • Ensure that the font is Noto Sans (currently displays as Helvetica in my browser)
  • The title text should be 16px bold. The body text can remain 14px for now but we should consider making this match our standard 16px at some point.
  • Remove the grey background from the title area and instead add a 1px grey line separating the title from the main text content. This line should be 40px from the top of the window.
  • There should be a 20px gap between the left edge of the text and the left edge of the pop-up window. This 20px buffer is also true for the buttons.
  • Remove the “End tour” text link and instead add a normal “x” to close icon in the upper right corner
  • Keep the "Previous" button in the lower left corner, but move the "Next" button to the far right corner
  • Style the "Next" button like our standard active blue buttons

Screen Shot 2019-04-19 at 1 53 46 PM

@michaelkohn
Copy link
Member

Until we implement #5681 (linking tours), I think this issue will still need to address what the buttons should look like for the first and last steps of a tour. Below I've included what it looks like today (in v3.7.0) for forms, and how I would suggest we handle it for Guided Tour steps until we start linking tours.

Here is how it works for forms

Form page   Bottom Left Button Bottom Right Button
First Not shown Blue "Next »"
Middle White "≪ Prev" Blue "Next »"
Last White "≪ Prev" Blue "Submit"

Here is how I suggest we do it for the Guided Tour

Tour step Bottom Left Button Bottom Right Button
First Don't show Blue "Next »"
Middle White "≪ Prev" Blue "Next »"
Last White "≪ Prev" Blue "Finish"

NOTE: If a button is shown, it should be active.

@ngaruko
Copy link
Contributor

ngaruko commented Apr 26, 2023

Guided tour removed.

@ngaruko ngaruko closed this as completed Apr 26, 2023
@garethbowen garethbowen added the Won’t fix: Not an issue Working as expected label Apr 26, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
in-app tour in-app feature tours and user education Priority: 2 - Medium Normal priority Type: Improvement Make something better UI/UX Site design and usability improvements. Won’t fix: Not an issue Working as expected
Projects
None yet
Development

No branches or pull requests

6 participants