We have a modal in our app where people can search for products within various user flows (in this instance it's for connect products in your inventory to your Amazon listings, so you can keep orders etc in sync).

It needs a bit of an overhaul, so far I've improved things like moving labels above fields, more meaningful labels, aligning fields, some style changes.

I've attached the mockup so far (feel there's more room for improvement). The trickiest part is getting the 5 fields to work within the space of the modal (moving this out of the modal or changing the modal significantly would be out of scope). The space above and below the search form changes depending on the user journey, so will have to be careful about changing that too much.

enter image description here


Here's a new mockup:

enter image description here

Update 2

Here's a another new mockup based on the answers posted:

enter image description here


3 Answers 3


It looks very cool but I would like suggest following improvements:

  1. I do not think having Action Button (i.e. "Search Products") in same row where we already have some field. I would like to suggest you to have two fieds in a row. Yes I know in that case you will have "Season" alone in a row. But I see no problem in it.
  2. Modify "Set up seasons" to "Setup seasons".
  3. Make "Setup seasons" a bit more like a link. You can use underline or blue color so users can understand its a link or action button.

Nice work on the modal, I just wanted to offer some general feedback since I don't see a specific question.

The lines often blur between searching vs filtering depending upon how applications work and are arranged visually. Does your form apply any selected filters ahead of the search query, or does it afterward to the results? I ask because your filters are placed below a block-level search text input, and the functionality implied is a little ambiguous. My $.02 is to suggest that if the filters go into the initial query, put them above the search input so they appear somewhere before the "Search products" button. That will accurately describe the behavior of the system.

Alternatively, if those select inputs are filtering the results of the search request, they can be below it and maybe disabled or even hidden until the results return, again if for no other reason than to more accurately model the behavior of the system.

  • Thanks Luke. I posted an updated mockup again in the original question. Your comment about the position of the filters got me thinking - they looked like they were a step after you search by product name (they're not, they're part of the same form). But, instead of moving them above (most people just search by SKU or product name, I've keylined the form and moved the position of the search. I think it's a lot clear. Thanks!
    – Jon
    Commented Dec 13, 2012 at 17:32

So, you're offering users actions within a search form within a modal dialog within another host page? I think you're trying to do waaaay too much with a modal. The modal should only really provide a single step action that directly relates to the host page, and you certainly shouldn't be doing something that could demand scrolling (viewing lists of search results) within the body of the lightbox.

I would probably pull this into its own interface / view.

  • Yep, pretty deep. I have thought about this, but it's a pretty complex ERP app. It seems such users often prefer convenience before initial clarity (i.e. give me more sooner, even if it's potentially confusing). But I do agree, most times I would simply use a new page.
    – Jon
    Commented Dec 13, 2012 at 17:20

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.