search

processing / p5.js-website

New p5.js website!
http://p5js.org
MIT License
13 stars 70 forks source link

Reintroduce search field suggestions dropdown #459

Open meezwhite opened 2 months ago

meezwhite commented 2 months ago

Increasing Access

Unsure

Most appropriate sub-area of p5.js?

Reference

Feature request details

On the old site, I found it extremely useful to have a suggestions dropdown when searching for the reference page of a specific object or function.

Currently, when I type in the search field, I don't get suggestions for the function I'm looking for. I have to enter my search keyword, press Enter, and then check if the function I'm looking for even exists. (Currently, it's additionally hard to find the exact reference page using the search field, since not all expected results are shown, as mentioned in #458)

Qianqianye commented 2 months ago

Thanks @meezwhite for the suggestion.

There are two ways you can 'search' for Reference entries, one is the top Global search bar as you mentioned in this issue, another is ‘Filter by keyword’. When you type in the ‘Filter by keyword’ field, the reference entries will be automatically filtered without pressing 'enter', as shown in the screenshots below. image image

The reason we do not include a drop-down for Global Search is to minimize page load size for accessibility concerns. If you find the 'Filter by keyword' field on 'Reference' page hard to locate, we can explore different design options. Please let us know what you think. Thanks!

meezwhite commented 1 month ago

Thank you @Qianqianye, for pointing me towards the "Filter by Keyword" field. The field definitely makes things easier!

I've tested the interactions needed to find specific functions or variables on both the old versus the new site. Here are my findings.

Use Case Old Reference Page New Reference Page
Find "loadPixels"
  1. Click "Search reference" input field (or Press "Tab" 2x)
  2. Type "loadp" + press ArrowDown twice (7 keystrokes)
  3. Press Enter
  1. Click "Filter by Keyword" input field (or Press "Tab" 4x)
  2. Type "loadp" (loadPixels() is now visible in viewport) (5 keystrokes)
  3. Click "loadPixels()"
Find "loadJSON"
  1. Click "Search reference" input field (or Press "Tab" 2x)
  2. Type "loadj" + press ArrowDown once (6 keystrokes)
  3. Press Enter
  1. Click "Filter by Keyword" input field (or Press "Tab" 4x)
  2. Type "loadj" (loadJSON() is now visible in viewport) (5 keystrokes)
  3. Click "loadJSON()"
Find "frameCount"
  1. Click "Search reference" input field (or Press "Tab" 2x)
  2. Type "framec" + press ArrowDown once (4 keystrokes)
  3. Press Enter
  1. Click "Filter by Keyword" input field (or Press "Tab" 4x)
  2. Type "framec" (frameCount is now clearly visible at the top of results in viewport) (6 keystrokes)
  3. Click "frameCount"
Find "noLoop"
  1. Click "Search reference" input field (or Press "Tab" 2x)
  2. Type "nol" + press ArrowDown once (4 keystrokes)
  3. Press Enter
  1. Click "Filter by Keyword" input field (or Press "Tab" 4x)
  2. Type "noloop" (results are shown in categories, so noLoop() is not at the top) (6 keystrokes)
  3. Scroll to find "noLoop()"
  4. Click "noLoop()"

Observations:

  1. Fewer interactions are needed to find specific functions on the old reference page.
  2. Neither the old reference page nor the new reference page provide functionality to navigate using solely the keyboard (e.g. using the "Tab" key).
  3. In some cases, the function one is looking for might not be displayed at the top of the results list due to how the results are categorized, requiring additional scrolling.
  4. An advantage of the new site is, that it allows users to see a short description of the function they're looking for after typing in the "Filter by Keyword" field.

The reason we do not include a drop-down for Global Search is to minimize page load size for accessibility concerns.

I don't see page load as an issue on the reference page, because the function names are already delivered to make the "Filter by Keyword" field functionality possible. If we were to add a dropdown, I would suggestion only adding it for the reference page.

Some suggestions for solving the issue, where the function one is looking for might not be displayed at the top of the results list (Observation 3):

  1. Show results more compactly: Instead of showing category (e.g. "Image"), then subcategory (e.g. "Pixels" or "p5.Image"), and just then the function (e.g. "filter"), display results as "Pixels → filter()" or "p5.Image → filter()".
  2. Show results ordered by popularity: This might be difficult to establish without making the parameter prone to manipulation, but it could improve usability.

In any case, allowing users to navigate the site using the "Tab" key, which would make finding a function a lot easier. (This could be a separate feature request.)

I still see some benefits with the dropdown from the old reference page, but it isn't the only way to improve quicker find-ability of functions on the new reference page.