Bug #5149

Improve usability of search bar icons

Added by Dan Gillean almost 9 years ago. Updated almost 9 years ago.

Status:InvalidStart date:05/30/2013
Priority:LowDue date:
Assignee:Jesús García Crespo% Done:


Category:UsabilityEstimated time:1.00 hour
Target version:Release 2.0.0
Google Code Legacy ID: Tested version:
Sponsored:No Requires documentation:


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.

ArchivesCanada_searchButton.png - image of the current search bar button (23.4 KB) Dan Gillean, 05/30/2013 01:00 PM

Related issues

Related to Access to Memory (AtoM) - Task #5009: Review menu icons Verified 04/27/2013


#2 Updated by Jesús García Crespo almost 9 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.

#3 Updated by Jesús García Crespo almost 9 years ago

  • Subject changed from Change AC search button icon from a gear to a magnifying glass to Improve usability of search bar icons

I've changed the icon to the m. glass.
I feel like we can still improve this later.

#4 Updated by Dan Gillean almost 9 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 almost 9 years ago

  • Status changed from New to In progress
I've started working on this as part of interim-1.
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.

#6 Updated by Jesús García Crespo almost 9 years ago

Jessica commented in #5383 that the import icon is confusing.

#7 Updated by Jesús García Crespo almost 9 years ago

  • Estimated time set to 5.00

#8 Updated by Jesús García Crespo almost 9 years ago

  • Estimated time changed from 5.00 to 1.00

#9 Updated by Dan Gillean almost 9 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.

#10 Updated by Jesús García Crespo almost 9 years ago

  • Status changed from In progress to Invalid

You're right.

Also available in: Atom PDF