I'm about to design a GUI for creating/editing a filter. A filter can have one of the following types:

  • Text
  • Object name
  • Object type
  • Object attribute

The following is a draft of a possible design:

enter image description here

The current value in combo box Filter type determines the layout of the window. If Text is current value the first window in the picture is shown and if Object name is current value the second window in the picture is shown and so on... Suppose Filter type = Text is default, i.e. the first window is opened when Add filter button is pressed in main window.

What is best practise in the above design, to resize the window and hide/show components as different filter types are displayed or to work with four different windows?

Is there a better way to design the GUI for creating/editing the four filter types?

  • 1
    Is there a reason the design can't add field BELOW the filter type? (Rather than expand horizontally?) Expanding sideways will introduce greater visual disparity and change, moving where the mouse has to click next, vs changes vertically (while keeping currently clicked element exactly where it was). Mouse moves less to keep adding data. – mix3d Oct 1 '18 at 15:08

A common dependent form layout pattern will modify selection items once the parent selection is made. This is especially important if you intend to allow a user to change the filter type after creating one; the needed fields will change depending on the edits made.

Example: Creating a new filter will only show the Name and Filter type fields, perhaps with a disabled default state saying "select filter type". Once a selection is made, new fields show below, with the appropriate additional selections, Function and Types / Value where appropriate.

If the design for the single- or multi-select requires a larger width, then perhaps widen the overall modal to fit.

The Block model filter, however, represents an interesting challenge. Are the table columns and rows predefined, or do you need to allow for adding in new columns and rows? If so, the modal size constraints given may not provide all the needed space to include such UX elements. If they are predefined, why not just have them as more text-inputs in the existing design, perhaps with a separated label to show they are grouped together, and separate from the generic filter form fields?

I would encourage NOT using a dynamic horizontal-width Modal, because expanding sideways will introduce greater visual disparity and change. If shown as screen-centered, once expanded w/ additional content, the original form fields will have shifted left, moving content under where the user had their focus, (requiring mentally recalculating where the mouse has to click next). If you add items vertically, (while keeping currently clicked element exactly where it was), the user's focus is in the same place and they can peripherally notice the next selection is where there was change. The mouse moves only to the next line to keep adding data. If you have a modal that hides the additional horizontal content, but displays in such a way that the original form fields stay put, you'll have an off-center modal 50-75% of the time. (assuming even use of all filter types; unlikely)

  • @AndyRehn does this answer your question well enough? If so, please mark as the Answer. Thank you! – mix3d Oct 25 '18 at 20:47

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.