Improve usability of search bar icons
|Assignee:||Jesús García Crespo||% Done:|
|Category:||Usability||Estimated time:||1.00 hour|
|Target version:||Release 2.0.0|
|Google Code Legacy ID:||Tested version:|
Currently the icon in use for the button on the search bar is a gear. Traditionally in contemporary web design, the gear is associated with settings and/or administration. For increased usability, this should be changed to the more common search signifier, a magnifying glass.
#2 Updated by Jesús García Crespo over 5 years ago
- Target version changed from Release 2.0 - interim 1 to Release 2.0.0
The thing is that the magnifying glass makes the user think that the form will be submitted when it's clicked. But in this case, the user is forwarded to the advanced search. There's no submit button, you just get there pressing enter and the simple search will be used. This is the approach used in github.com with a bunch of UX experts behind. They use a gear icon.
Going to bump this to 2.0, we can discuss later. Trying to get interim-1 done for AC.
#4 Updated by Dan Gillean over 5 years ago
ok - actually i misunderstood the function of this, and thought it was a submit button at first. Agree now that I see how it works that it should not be a magnifying glass, because users will think it is a submit button and will be confused.
some factors - on github, it is not a button directly attached to the search bar - so i don't think that anyone would push it and expect it to perform a search. i feel like as long as we attach it directly to the search bar, people will think that it is a submit button. and remember, this will also be used on mobile devices, where people expect buttons as inputs (though of course they can hit return on their virtual keyboards as well).
I would propose that we change the icon - either
a) back to the gear
b) to icon-asterisk
c) to icon-bullseye
AND if possible, separate this from the search bar. ie, give the icon a transparancy of about 80% and set it slightly to the right of the search bar. ideally, it could have a hover tooltip - or at least a label that will say "Advanced search" when a user hovers. note that this is closer to the github approach - clearly related to the search bar by proximity, but not attached to it in a way that makes it look like a submit button.
It's a small change, but cognitively it makes a big difference. I didn't understand its intention immediately, and i think many of our users will think it's a submit button as well, regardless of the icon on it.
#5 Updated by Jesús García Crespo over 5 years ago
- Status changed from New to In progress
Reminders to myself:
- Make sure that the bootstrap glyphicons sprite are not loaded.
- Optimize CSS selectors in FontAwesome, too many [class^=icon] selectors are causing performance issues during browser rendering. Use class nesting instead.
#9 Updated by Dan Gillean over 5 years ago
This issue no longer seems relevant given how "Browse" is implemented in the Dominion theme, though I noticed that you just updated the time estimate, Jesus - do you have thoughts for this or plans? I was thinking we could close the issue as invalid - we have other issues related to search bar functionality and improvement; this was originally filed when I thought the button was a submit button for the search bar (which the search bar does not in fact make use of, I have since learned), and overall the search bar no longer has this second button - the advanced search link is in the drop-down.