Altai-man / docs.raku.org

Source code of a beta version of the updated docs.raku.org website
Artistic License 2.0
11 stars 6 forks source link

A wish: Search bar readily accessible #50

Open Veraellyunjie opened 2 years ago

Veraellyunjie commented 2 years ago

(My personal wish, YMMV)

How any search engine (like duckduckgo) offers a search bar to the user: you open their webpage, and the search field is right before you, and it is focused straight away and webpage is ready to accept your keyboard input, you start typing immediately without any additional movements.

This is the right way (IMHO).

With https://docs.raku.org/ you fireup the page, the search bar is there waiting for input but it is not focused. Darn it! Excessive mouse movements and a click or 2 tab presses are needed to focus.

Now take your temporary http://164.90.207.89:10010/ With wide enough screen, the search bar is there, but not focused, you need excessive mouse movements and a click or 8! tab presses. With narrow screen, the search bar isn't even displayed, so you need to move that mouse into the corner, then click and, guess what? You get the search bar in the opposite corner of the pane! Your cursor loves to be moved across the screen forth and back! :smile:

Please note that with the window size as in the screenshot, there is enough space for the search bar.

search bar not displayed Search bar not displayed (Also please note vertically misaligned Learn more button under Language Reference & Tutorials) search bar in the opposite corner Search bar in the opposite corner

A keypress like / for triggering search might mitigate the issue, yet why hide that poor search bar in the first place?

Search bar animation. Why? I come for docs, and want them promptly. With animations I get distracted and they make me wait while animation finishes.

Github search bar like on this page is also expandable, but it is not that bad as it expands left-to-right, and the input cursor stays in place. With your temporary http://164.90.207.89:10010/ the bar expands right-to-left, and the cursor flies away from the spot where it was which distracts and makes me seek that cursor again.

Recap:

Altai-man commented 2 years ago

Hi!

Let's see.

(Also please note vertically misaligned Learn more button under Language Reference & Tutorials)

I agree it looks arguably weird, thanks for reporting.

Now on the search bar.

How any search engine (like duckduckgo) offers a search bar to the user: This is the right way (IMHO).

Yes, but... The docs website is not a search engine like duckduckgo. The main function is to work (primarily read) with docs, not search up things.

Search engines are "jump to" pages, you don't need to focus on the content there and the immediate thing you want to do is to jump to the results ASAP. With docs it's a completely different thing: you look something up in the search, which takes like 5 seconds even with 2 excessive clicks, and then read the docs for X minutes (~95% of the time you use the website).

That's why especially on small screens you want to see the content you'll read for 95% of the time, not the search bar useless except for mere 5% of the time, obstructing reading the content. No amount of capslock can change this.

Search bar animation. Why? I come for docs, and want them promptly. With animations I get distracted and they make me wait while animation finishes.

To save the space for the menu and have a wide enough search being true. An animation is used to avoid the transition being felt as abrupt and indeed losing the cursor.

Veraellyunjie commented 2 years ago

The docs website ... The main function is to work (primarily read) with docs, not search up things.

you want to see the content you'll read for 95% of the time, not the search bar useless except for mere 5% of the time

Me disagrees.

There are different modes of reading docs. The one you mentioned does exist, but is not the only one.

When you start to get to know a topic or a sub-topic, you mostly read indeed. When you already know how things hang together, you may need to make lots of small look-ups for details, like using a cheatsheet.

I often find myself jumping from one topic to another: Let's look up snippets for <thing 1>, done, next let's brush up on <thing 2>, done, now brush up on <thing 3>, it mentions <thing 4>, jump to <thing 4>, <thing 4> is best accompanied by <thing 5>, jump to <thing 5>, <thing 5> needs <thing 6>, go for it...

I switch from page to page so frequently, that no-quick-search websites feel hampering.

IMHO, docs websites are best described as Search-Read-Repeat-Loop.

Not a search engine good (IMHO) examples: https://openports.se/ and https://pkgsrc.se/ or a modern-looking: https://en.bab.la/sentences/english/documentation Search bar is non-obstructive and it is focused. You can scroll or PageDown to read the main content, and then immediately, without re-scrolling, start typing to the search bar as it is still focused.

Search may not be the main function for a docs website, yet it is a critical and cornerstone function.


An animation is used to avoid the transition being felt as abrupt and indeed losing the cursor.

May the animation be as brief as a blink of an eye, just linking bar's short and long states, and not obstructing workflow by being long enough to be watchable? I call for a difference in animation timing in presentational stunning-looking awe-inspiring websites vs. ones used for real work.

Altai-man commented 2 years ago

I think the constructive solution for this would be to have a layout where in the mobile mode the search bar moves to between the logo and the hamburger rather than being hidden in the menu, volunteering to get it done faster is welcome.

Veraellyunjie commented 2 years ago

volunteering to get it done faster is welcome

If you hint at me, given my technical level, with me participating you will have to fix more than without me participating, so I would better refrain from offering my antihelp. Sorry