No explicit search button
MaggieAppleton opened this issue · 3 comments
We used to have a visible "search" button to execute a search, but I lobbied for its removal in a previous round of design work (#637).
The previous rationale for removing the search button was that we had numerous bright blue buttons in our navbar that all looked equally important: "browse', "search," and our main CTA.
Previous navbar:
In order to make the main CTA stand out more, we made "browse" into a secondary style button and removed the explicit "search" button. Users would then execute a search by pressing return on the keyboard.
A learner wrote in pointing out that they were unable to search while using egghead on a television display that only allowed mouse controls.
We then added the ability to perform a search by clicking the microscope icon to the left of the search query. This is still slightly out of line with industry conventions. Many other websites use the search icon as a "search" button, but place it on the right hand side of the search box:
Twitch:
YouTube:
To make our search bar more accessible and standardised, we should turn the search icon into a square button and align it to the right of the bar:
When a user hovers over the search button, the background colour should darken two shades. Eg. from bg-grey-100 to bg-gray-300. Dark mode colours should lighten two shades – from bg-grey-800 to bg-grey-600.
The user is still able to execute a search by hitting return on the keyboard. This just
gives them the additional option of clicking a button.
It sounds 100% reasonable to me
closed via #777