npm / npm/documentation

"Search npm Docs" is virtually impossible to distinguish from links in the header bar

Open
#1,832 2 comments 1 reaction 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
MDX
Stars
712
Forks
4.2k
Avg merge
4d 16h
Merged PRs (30d)
3

Description

See this screenshot:

Image

The search box has zero distinguishing visual features to help people find it. It is so hard to notice this text that I almost concluded (with great irritation) that you simply could not search the npm docs. The problem is that I expected a normal search box control and so when I was visually skimming the header bar, I skipped over the "Search npm Docs" text completely. I'm not going to actually read all of the links in the header bar; I'm going to look specifically for the control that I expect to be there, that looks a particular way in every other website or app.

This problem is made worse by the fact that the links in the header bar don't look very distinctive to begin with: they're not blue, and they're not even underlined. They look like completely normal text and the only clue that they might be clickable is that they're in the header bar. This is not very good UX, and it further serves to make the search box indistinguishable.

Putting a box around the search bar would help. Putting a magnifying glass icon next to the text would also help.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Use the screenshot and issue description as the starting point, then locate the documentation header and its search control implementation. Compare the search control with surrounding header links; done means the search is visually recognizable as a search box, with a distinct boundary or icon, without relying on reading every link.

Written by the indexing model from the issue text.

Assessment

Domain
design
Issue type
Feature
Difficulty
3/5
Estimated time
1-2 days
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
58/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.