1025910 - UX, MDN Search field is anti-productive (small, slow, unpredictable)

Status: RESOLVED FIXED

(developer.mozilla.org Graveyard :: Search, defect)

Description

[Avi Halachmi (:avih)]

These are few complaints about the search field. You may want to split them into multiple bugs as you see fit.

Using the search field (top right of MDN pages, such as https://developer.mozilla.org/en-US/docs/Tools ) is unnatural and too slow for the following reasons:

1. Mouse over it shows a "hand" icon, indicating that it's a link, while users expect to get a text cursor, indicating that text should be entered at this field. After clicking it users don't expect to be able to immediately enter text, due to this hand cursor.

2. It takes much longer than I'd like to be able to start typing text into the field, because clicking it shows an animation where it expands into the search field and I can't know if I can type while it expands (especially because I don't see a text cursor).

3. If I used the search earlier and I then do another search, it keeps the old search term at the field (invisible until it expands), but does _not_ select it. The result is that entering new text is added to the old text rather than overwriting it by default like all other text fields behave.

4. The field is small, and on some screens unnecessarily so. I.e. on my screen there's enough space to keep it open and wider, such that it's easier to hit and doesn't need the slow animation before using it.


I'd suggest one or more of the following UX modifications:

1. Always keep it a text input field, even if narrower than while used.

2. Make hovering it show a text cursor such that it's clear it can be clicked and it would immediately accept keyboard input.

3. If prior text was entered and is about to be the default input for the next time a user enters text into it, show it and select it by default - before clicking the field, such that it's clear before starting to interact what would the result of this typing be.

4. If the screen dimensions allow, keep it open by default, ready to accept input.

Comment 1

[Stephanie Hobson [:shobson]]

Hi Avi, We're aware there's some problems with the search and are working to improve it. These are good suggestions, thank you :)

Depends on #1030629

Comment 3

[MDN Team (:mdn-dev)]

Commits pushed to master at https://github.com/mozilla/kuma

https://github.com/mozilla/kuma/commit/3226ce753f3b077d71eb7a5ae075164ec05c1383
BUG 1025910: Search improvements

- Change cursor to match cursor on input field
- Change desktop expand/collapse from JS to CSS so input can begin while CSS transform continues
- Decrease delay before search box is editable
- Automatically select text when search field is focused if there is existing user input

- Fixes for the alignment in RTL display

https://github.com/mozilla/kuma/commit/e6fcb166aa1e357949b9caed277e6648c7544b4e
Merge pull request #2923 from stephaniehobson/bug-1025910-search-improvements

BUG 1025910: Search improvements

Comment 4

[Stephanie Hobson [:shobson]]

I think we've done everything except suggestion #4 which was out of scope for technical reasons. 

The changes will take about a week to get from our staging to our dev environment but I'm going to mark this as resolved now, thanks for the suggestions Avi!