Relocating the quick nav search icon to user nav position

[gabriel-ortiz]

Hey @kpettinga, @davekellam @Jessdwilson

Hope yall are doing well. We've been noticing some interesting user behavior. Our users are interpreting the box to the left of the search icon as the input field for the search icon. Multiple users have told us that they are trying to click into that box to start typing. So interestingly they are interpreting that quick-nav container as the search box input, when indeed it is intended to show name of each quick-nav section.

An easy solution to this would be to move this search icon to the user nav menu - potentially it could be the last item in that row. Doing this would disassociate the quick nav container from the search icon. Thoughts? Thanks!

[kpettinga]

@gabrielo-cuc I agree, moving that icon to the user nav menu would probably help to fix this situation. After moving it, we'll need to make sure everything still works okay across screen sizes as that whole header system of menus, search boxes, etc is pretty complex.

@gabrielo-cuc Is this something you want us to tackle or are you planning to address it?

[gabriel-ortiz]

@kpettinga Yea I thought it might be complex... If we move the search icon into the user-nav, then i imagine the user-nav would have to be sticky as well (that actually could be pretty cool). Would you mind taking a pass at that though?

I'm still working on some search.js stuff, and next they have some refinements for the database directory page. Maybe if you pick this up, then I can take a little off your plate by working on the librarian appointment module next.

Our soft launch is a week from tomorrow.... :-/ so we gotta bring the heat a little bit. LMK what you think about this plan.

[kpettinga]

@gabrielo-cuc after getting some feedback from our designers, we felt that it was best to keep the search icon in the quick nav because it's supposed to be a prominent feature. We could, however, dissuade users from thinking this was a search box by adjusting the visual design slightly. From our design team:

Since we want the search feature to be a prominent function, I recommend removing the lines between the special collections, the quick nav section, and the search icon. Currently, those elements make the quick nav section feel like an input field. We then should make the search icon slightly smaller. The subcategory nav section should then be the light grey we use throughout the site.

Here is a preview of the updated design. The changes have been pushed to the master branch as well.

[gabriel-ortiz]

@kpettinga This works. Now that we are into soft launch/UX testing, we will wait and see what feedback we get from users. But I do think it offers a noticeable improvement in disassociating these features. Thanks!