Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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

Update

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

share|improve this question
3  
Your updated mockup is a dramatic improvement. At this point your best bet is to do some hallway usability testing with people who haven't used the form before. –  Kit Grose Dec 12 '12 at 22:35
    
By using drop down lists you are allowing your user to only filter by one facet at a time--would they ever need to view by more than one at a time? For example, warehouse A + warehouse B? –  Charles Wesley Dec 13 '12 at 18:24
add comment

3 Answers

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.

share|improve this answer
    
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 Dec 13 '12 at 17:20
add comment

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.

share|improve this answer
    
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 Dec 13 '12 at 17:32
add comment

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.
share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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