3

I have a modal window which lists items and organizes them by category through tabs. I want to implement a typeahead search for the items. My current implementation is to have search as another tab and when the tab is clicked, a text input will fade in to allow users to search for items.

Are there any alternative ways to implement this?

enter image description here

2 Answers 2

3

I would not make search another tab because it creates disconnect between search and the categories search is for.

Instead, I would put the search field above the tabs (a global search) so user understands that search is for all the categories.

enter image description here

When user performance a search, you could display a search results tab to show the results.

1

mockup

download bmml source – Wireframes created with Balsamiq Mockups

I would probably do something along the lines of Option 3 or Option 4, with Option 4 most likely winning out.

3
  • I would not recommend option 3 and 4 because the "Cancel" button next to the search field creates confusion. Is cancel for search or for closing the modal window? Commented Feb 20, 2014 at 0:25
  • @ChairmanMeow - It's not the design that's confusing, it's the wording. One could simply change the wording from Cancel to Close or Close Window. That would alleviate the confusion. Or one could separate the two via a pipe character |. The designs of options 3 and 4 are much cleaner due to the fact that the user does not have a visual barrier at the top and can get right to the tabs. It puts all actions at the bottom. Commented Feb 20, 2014 at 0:51
  • @ code Maverick - Changing the copy on the button will help, but the placement of the button relative to the search field is my main concern because one of the oldest principles of human-computer interaction is that things that are close together on the screen are seen as related. Commented Feb 20, 2014 at 1:05

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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