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.

I am using Chosen multi-select inputs on a site I'm currently designing and building.

I am using them on a form of 6 inputs which filters a list of results. The issue is its quite a set layout...

Optimal layout

However if the user chooses a large number of options from the selects (which is kind of the point) they have to expand vertically to accomodate the space to show the selected items. Like this...

The problem layout

This will end up pushing other content down. Its not massively noticeable but it does slightly 'break' the optimal layout. Would anyone consider this an issue? And what alternatives are there?

share|improve this question

3 Answers 3

This is a design problem. What you want to do is avoid suggesting that these regions should be uniformly aligned, so when they become nonuniform and unaligned it doesn't look disconcerting.

Increasing the space between the columns and decreasing vertical padding might help achieve this. There may be other things that would help, the right weight of borders and such, but you'd have to try different things. The main thing is to convey the impression that horizontal alignment isn't important, and when the horizontal alignment breaks, it doesn't look wrong. Play around with spacing and borders and I think you'll see some under some configurations the misalignment will look less disconcerting than other configurations.

share|improve this answer

Your initial layout creates visual pattern, in this way Gestalt principle of proximity works. Filling the fields could break the pattern and the final image of the filters area look not so pretty.

As the usefullnes (functionality) goes first, then aesthetics, the solution could be on a visual design layer. I think different layout could work better, see the image.
enter image description here

This layout provides more clear perception of filtering elements, too.

share|improve this answer

If it was my task, I'd make sure things can't move when other things are selected.

Mainly because a user may be confused when two seemingly unconnected options have what would appear to be an interaction - when the expansion of a selected element causes another to move.

I'd simple create a fixed layout, probably one option per row on mobiles and two or more in an obvious grid layout on desktops.

Elements moving around can scare users that aren't tech/internet savvy and make them think 'What did I do?'

If you look at almost any form on any website, the only time something changes after an interaction is when it's directly related to that interaction.

share|improve this answer
    
Although I'm not sure that I agree that moving fields would necessarily scare a user. This is probably the route I will go down. I'm thinking along the lines of a collapsible bar that contains the filter fields. –  Joe Taylor Oct 16 '13 at 8:54
    
@Taylor You'd be surprised then at how little confidence some of the much older generation has when it comes to using the internet. You should consider it unless they're not part of your target audience. –  Mr E. Upvoter Oct 16 '13 at 11:44

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.