What is the best way to indicate that a user can perform a value lookup?

I have a section of an application screen where users have the option to use a NAICS code as part of their search criteria. Because the database for NAICS are so larger and the data might not always be used, we decided to hide the information from the screen until a user requests it. But what is the best way indicate to the user they can preform this lookup. Our initial though was to use a button as demoed below.


download bmml source – Wireframes created with Balsamiq Mockups

  • why did you use the dots and not a clear name, "look up code"? – Rumi P. Dec 12 '13 at 20:55
  • No reason in particular here. I just threw the mock-up together to get feedback. I can definitely make the button say that in the actual app if needed. – JeffH Dec 13 '13 at 12:34
  • Why not simply have the button labelled 'Search'? – Fractional Dec 13 '13 at 12:54
  • 1
    A field with a value and a button to select/look up for the value, it's a combobox. Put an icon similar to combobox it's well understood. – ColdCat Dec 13 '13 at 16:19
  • 2
    Because this is a criteria for search I already have another search button on the page. I think 2 would be confusing. – JeffH Dec 14 '13 at 3:15

I think I'd consider something like this:


download bmml source – Wireframes created with Balsamiq Mockups

That is:

  • Get rid of the explicit button
  • Filter dynamicly as soon as the user starts typing in the filter box
  • Use a place holder text that explains the purpose and that disapears if the box has any real contents or gets the input focus
  • Use a small search icon in the box for extra clarity

This is a quite standard solution nowadays for filtering back long lists, but it can work on trees as well of course.

| improve this answer | |
  • I don't think it will work well with trees, because matches may occur in any hierarchy level, and you cannot show all matches as well as the path to them. I have no experience with NAICS, but some deeply embedded entries may required the path to be indentifiable. – virtualnobi Dec 16 '13 at 14:03
  • @virtualnobi: In my experience, it does work with trees. I have build applications where we use exactly this pattern. The branch nodes that have leave nodes that match, but don't match themselves obviously need to stay visible, but might be dimmed at bit. Inversely, you will need to considder what happens to leaf nodes that don't match in branches that do match, if that's possible. In our application, these needed to stay visible. – André Dec 16 '13 at 14:33

I would use a button with a magnifying glass icon; a text label on this button would clutter the UI. Place the button right next to the text field with no space in between.

Text field with magnifying glass lookup button

I have seen this setup in applications before, and it works well.

If you're feeling particularly motivated, you could make it even better by placing the looking glass icon inside the search field. Depending on what programming language you're using, this could be a lot of extra work, though.

| improve this answer | |
  • I like @Sildoreth idea however I would add description text maybe inside/outside the search input describing what users can search for. If users are limited to certain key values it would be beneficial to mention. – Courtney Jordan Dec 17 '13 at 12:48

I get the impression that users of the system will get used to NAICS and not need so much prompting, it is new users of the system who are our concern.

Sometimes, with complicated systems, I think it is better to be verbose. I would suggest a watermark:

"SEARCH (enter your search term for a list of NAICS codes click the ellipsis button)"

If the textbox cannot expand to fit this text then you could place it underneath the textbox or just use search as a watermark and change the ellipsis to a button with "List NAICS" as its text.

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.