1182341 - Search UI: Identify search field with a magnifying icon at start of field

Status: RESOLVED FIXED

(developer.mozilla.org Graveyard :: General, enhancement)

Description

[Holly Habstritt Gaal [:Habber]]

* recommendation based on user testing with Command & Query search prototype

Standard searching is still the primary intended use for the search field on MDN. Filtering manually or via quick-commands is secondary. 

When the down arrow is added to the search field, it can make the field appear primarily as a dropdown menu. To more clearly identify the primary purpose of this element (aka Search), add a magnifying glass icon to the field. 

Placement: within field, left aligned at start of field, before "Search the docs" text. 

Use awesome font icon (http://fortawesome.github.io/Font-Awesome/icon/search/) with same color used for down arrow in this field for consistency. 


Will provide mockup on request, but can also review coded mockup. A screenshot of something mocked up locally works too.

Comment 1

[Cindy]

Hi, 

Can I take on implementing this enhancement? 

Thanks,
Cindy

Comment 2

[Stephanie Hobson [:shobson]]

Sure Cindy! It'd be best to start by getting a copy of the site installed and running locally. Instructions are here: https://kuma.readthedocs.org/en/latest/installation.html I think these instructions are Mac only right now, let me know if you're not developing on a Mac.

The install docs have been recently re-written and there's still some gaps so don't be afraid to ask questions here or in our IRC channel https://developer.mozilla.org/en-US/docs/MDN/Community#Chat_in_IRC

You can also email me questions directly if you don't get a response on IRC it'll be a little slower but I promise to respond.

Something you should know is that there are two parts to this. There's the currently visible search bar and there's a new search feature that is toggled off by default. You can work on one or both of these but to mark the bug done both need to be finished. I can walk you through how to view the new search feature once you have a local development environment running :)

Comment 3

[Cindy]

Hi Stephanie, 

I've installed MDN locally, how can I view the new search feature? 

Thanks,
Cindy

Comment 4

[Holly Habstritt Gaal [:Habber]]

(In reply to Cindy from comment #3)
> Hi Stephanie, 
> 
> I've installed MDN locally, how can I view the new search feature? 
> 
> Thanks,
> Cindy

Hi Cindy, 
You can try the new search prototype at this URL https://developer.mozilla.org/?dwft_search_suggestions=1

Here's a quick blog post with an overview of some user testing that I did. http://hollyhabstritt.com/blog/2015/7/8/mdn-search-research-update I have a presentation as well that is more detailed that I can share if you end up wanting to take on more search related updates.

Comment 5

[Cindy]

Hi Holly, 

Very cool -- thanks for sharing both links with me. I'm assuming the other place the icon needs to be added would be on the homepage search bar and the search results page, is this correct?

Comment 6

[Holly Habstritt Gaal [:Habber]]

(In reply to Cindy from comment #5)
> Hi Holly, 
> 
> Very cool -- thanks for sharing both links with me. I'm assuming the other
> place the icon needs to be added would be on the homepage search bar and the
> search results page, is this correct?

Hi Cindy, 
You're correct. We will want to allow the same functionality on the homepage as we do on the search results page. None of this work has started yet, so the search on the search UI results page right now is a basic search field. You can add the icon to the search results page if you like, or wait until the feature is in a place where we feel comfortable transferring everything (which is when all items in the tracking bug are complete). 

Once you've made progress, would you mind sharing a screenshot?

Comment 7

[Stephanie Hobson [:shobson]]

To trigger the new search functionality on your local computer you need to go into the admin panel (https://developer-local.allizom.org/admin/ - you will need to be signed in as your superuser before going to the admin panel, the sign in box doesn't work) and create a feature toggle (http://kuma.readthedocs.org/en/latest/feature-toggles.html#waffle-features) called `search_suggestions`.

The icon needs to be added to the home page search box with the waffle either on or off.

Thanks!

Comment 8

[Stephanie Hobson [:shobson]]

Oh, I see there is a PR for this already. I'll look at that.

Comment 9

[Holly Habstritt Gaal [:Habber]]

Cindy implemented this quickly and received feedback on her PR from :shobson. Nice work!