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.

Sign up for GitHub

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

Jump to bottom

UX issues related to search bar location #1860

Closed
zachallaun opened this issue Feb 6, 2024 · 6 comments
Closed

UX issues related to search bar location #1860

zachallaun opened this issue Feb 6, 2024 · 6 comments

Comments

@zachallaun
Copy link
Contributor

While I'm generally quite positive on the redesigned search bar, there are a handful of UX issues I've noticed that are a result of its new location at the top of the content portion of the page as opposed to the sidebar (which is sticky).

  1. Least important, but worth mentioning: It is less discoverable, especially if you navigate directly to an anchor link that is farther down the page.
  2. The / search focus keyboard shortcut instantly scrolls you to the top of the page, which is jarring and causes you to lose context. (I am often searching for something related to what I'm looking at.)
  3. Related to 2, the jump to page top causes a loss of scroll history. Consider: you're halfway down a page, press / to search, navigate to a search result, then press the back button. Previously, your browser would restore the scroll position of the page you were originally on, but that is no longer possible as the / caused a scroll to the top of the page.

The easiest way to experiment with this is using the Elixir docs:

This issue is related to #1835, which could be used as inspiration for a solution.
@josevalim
Copy link
Member

I think we could always make it show up on scroll up, regardless if on mobile/small screens. / would just bring it up immediately. WDYT?

@zachallaun
Copy link
Contributor Author

Sounds great to me!

@sodapopcan
Copy link
Contributor

Hello!

I personally find navbars peeking out on scroll up quite jarring. It makes perfect sense on mobile, but I really dislike it on desktop. Of course this is just my opinion and I would gracefully accept being veto'd, but I'm also more than happy to do the work to make it slide into view when hitting / (and ideally with super-k as well).

@zachallaun
Copy link
Contributor Author

@sodapopcan That would be perfectly acceptable to me.

@josevalim
Copy link
Member

Please do send a PR for / then! Feel free to add super k as well.

@sodapopcan
Copy link
Contributor

Will do! It's already in the works and I should have a PR soon.

@sodapopcan sodapopcan mentioned this issue Feb 21, 2024
Merged
sodapopcan added a commit to sodapopcan/ex_doc that referenced this issue Feb 24, 2024
@sodapopcan
Bring searchbar into view on desktop
2e3a558 
This commit changes how the searchbar is brought into view on desktop as
brought up in elixir-lang#1860: when using one of the keyboard shortcuts to focus
the input, the entire page jumps to the top making you lose your scroll
position.  On mobile, technically smaller screens, this is remedied by
causing the input to slide into view on scroll up, but I don't believe
this is a desirable solution for desktop.

The following changes are introduced:

  * Using one of the keyboard shortcuts will focus the search input
    causing it to stick to the top.
  * It will continue to stick to the top so long as it is focused
    allowing you to scroll with it open.
  * The slide-on-scroll effect has been changed to only fire on
    touch-enabled devices as opposed to just smaller screens.  This is
    allows us to make the hexdocs window very small and still use
    keyboard shortcuts--Useful on laptops.

Closes elixir-lang#1860
sodapopcan added a commit to sodapopcan/ex_doc that referenced this issue Feb 24, 2024
@sodapopcan
Bring search bar into view on desktop
a2b3914 
This commit changes how the search bar is brought into view on desktop as
brought up in elixir-lang#1860: when using one of the keyboard shortcuts to focus
the input, the entire page jumps to the top making you lose your scroll
position.  On mobile, technically smaller screens, this is remedied by
causing the input to slide into view on scroll up, but I don't believe
this is a desirable solution for desktop.

The following changes are introduced:

  * Using one of the keyboard shortcuts will focus the search input
    causing it to stick to the top.
  * It will continue to stick to the top so long as it is focused
    allowing you to scroll with it open.
  * The slide-on-scroll effect has been changed to only fire on
    touch-enabled devices as opposed to just smaller screens.  This is
    allows us to make the hexdocs window very small and still use
    keyboard shortcuts--Useful on laptops.

Closes elixir-lang#1860
sodapopcan added a commit to sodapopcan/ex_doc that referenced this issue Feb 24, 2024
@sodapopcan
Bring search bar into view on desktop
0cbbb62 
This commit changes how the search bar is brought into view on desktop as
brought up in elixir-lang#1860: when using one of the keyboard shortcuts to focus
the input, the entire page jumps to the top making you lose your scroll
position.  On mobile, technically smaller screens, this is remedied by
causing the input to slide into view on scroll up, but I don't believe
this is a desirable solution for desktop.

The following changes are introduced:

  * Using one of the keyboard shortcuts will focus the search input
    causing it to stick to the top.
  * It will continue to stick to the top so long as it is focused
    allowing you to scroll with it open.
  * The slide-on-scroll effect has been changed to only fire on
    touch-enabled devices as opposed to just smaller screens.  This is
    allows us to make the hexdocs window very small and still use
    keyboard shortcuts--Useful on laptops.

Closes elixir-lang#1860
sodapopcan added a commit to sodapopcan/ex_doc that referenced this issue Feb 24, 2024
@sodapopcan
Bring search bar into view on desktop
7e3f769 
This commit changes how the search bar is brought into view on desktop as
brought up in elixir-lang#1860: when using one of the keyboard shortcuts to focus
the input, the entire page jumps to the top making you lose your scroll
position.  On mobile, technically smaller screens, this is remedied by
causing the input to slide into view on scroll up, but I don't believe
this is a desirable solution for desktop.

The following changes are introduced:

  * Using one of the keyboard shortcuts will focus the search input
    causing it to stick to the top.
  * It will continue to stick to the top so long as it is focused
    allowing you to scroll with it open.
  * The slide-on-scroll effect has been changed to only fire on
    touch-enabled devices as opposed to just smaller screens.  This is
    allows us to make the hexdocs window very small and still use
    keyboard shortcuts--Useful on laptops.

Closes elixir-lang#1860
sodapopcan added a commit to sodapopcan/ex_doc that referenced this issue Feb 24, 2024
@sodapopcan
Bring search bar into view on desktop
e6bde59 
This commit changes how the search bar is brought into view on desktop as
brought up in elixir-lang#1860: when using one of the keyboard shortcuts to focus
the input, the entire page jumps to the top making you lose your scroll
position.  On mobile, technically smaller screens, this is remedied by
causing the input to slide into view on scroll up, but I don't believe
this is a desirable solution for desktop.

The following changes are introduced:

  * Using one of the keyboard shortcuts will focus the search input
    causing it to stick to the top.
  * It will continue to stick to the top so long as it is focused
    allowing you to scroll with it open.
  * The slide-on-scroll effect has been changed to only fire on
    touch-enabled devices as opposed to just smaller screens.  This is
    allows us to make the hexdocs window very small and still use
    keyboard shortcuts--Useful on laptops.

Closes elixir-lang#1860
sodapopcan added a commit to sodapopcan/ex_doc that referenced this issue Feb 24, 2024
@sodapopcan
Bring search bar into view on desktop
2f6464d 
This commit changes how the search bar is brought into view on desktop as
brought up in elixir-lang#1860: when using one of the keyboard shortcuts to focus
the input, the entire page jumps to the top making you lose your scroll
position.  On mobile, technically smaller screens, this is remedied by
causing the input to slide into view on scroll up, but I don't believe
this is a desirable solution for desktop.

The following changes are introduced:

  * Using one of the keyboard shortcuts will focus the search input
    causing it to stick to the top.
  * It will continue to stick to the top so long as it is focused
    allowing you to scroll with it open.
  * The slide-on-scroll effect has been changed to only fire on
    touch-enabled devices as opposed to just smaller screens.  This is
    allows us to make the hexdocs window very small and still use
    keyboard shortcuts--Useful on laptops.

Closes elixir-lang#1860
@sodapopcan sodapopcan mentioned this issue Feb 24, 2024
Merged
sodapopcan added a commit to sodapopcan/ex_doc that referenced this issue Mar 1, 2024
@sodapopcan
Bring search bar into view on desktop
67fe224 
This commit changes how the search bar is brought into view on desktop as
brought up in elixir-lang#1860: when using one of the keyboard shortcuts to focus
the input, the entire page jumps to the top making you lose your scroll
position.  On mobile, technically smaller screens, this is remedied by
causing the input to slide into view on scroll up, but I don't believe
this is a desirable solution for desktop.

The following changes are introduced:

  * Using one of the keyboard shortcuts will focus the search input
    causing it to stick to the top.
  * It will continue to stick to the top so long as it is focused
    allowing you to scroll with it open.
  * The slide-on-scroll effect has been changed to only fire on
    touch-enabled devices as opposed to just smaller screens.  This is
    allows us to make the hexdocs window very small and still use
    keyboard shortcuts--Useful on laptops.

Closes elixir-lang#1860
sodapopcan added a commit to sodapopcan/ex_doc that referenced this issue Mar 1, 2024
@sodapopcan
Bring search bar into view on desktop
930def0 
This commit changes how the search bar is brought into view on desktop as
brought up in elixir-lang#1860: when using one of the keyboard shortcuts to focus
the input, the entire page jumps to the top making you lose your scroll
position.  On mobile, technically smaller screens, this is remedied by
causing the input to slide into view on scroll up, but I don't believe
this is a desirable solution for desktop.

The following changes are introduced:

  * Using one of the keyboard shortcuts will focus the search input
    causing it to stick to the top.
  * It will continue to stick to the top so long as it is focused
    allowing you to scroll with it open.
  * The slide-on-scroll effect has been changed to only fire on
    touch-enabled devices as opposed to just smaller screens.  This is
    allows us to make the hexdocs window very small and still use
    keyboard shortcuts--Useful on laptops.

Closes elixir-lang#1860
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@josevalim @zachallaun @sodapopcan