Build interactions that let users find the information they need, when they need it, and confidently take action (no matter how complex).
If users will be doing any of these tasks, use the Rules, Filters, and Logic guidelines to create an understandable and approachable interface:
- Setting conditions that will determine a value or execute an action
- Creating complex if/else logic without code
- Selecting rules to show results from a dataset
- Filtering down results based on user-determined criteria
Don't use these guidelines to build workflows or business processes with multiple conditions. Consider the Builder framework instead.
Rules, Filters, and Logic Elements
A key part of constructing interfaces for logical expressions is only presenting the necessary elements. To decide which components and tools are right for a particular situation, consider what the end user will be able to do.
|Can users add their own rules?||Use a simple search input and show any available facets.||Use the expression component to allow users to add their own logical expressions.|
|Is the logic mode connecting the rules customizable (e.g. all conditions are true, any condition is true)?||Logic should be "all conditions are met" by default. Do not show a toggle for the logic mode.||Use the expression component to show a toggle for the logic mode and allow users to change it to any available option.|
When users are not adding their own rules and cannot change the logic mode, use components such as combobox, dueling picklist, select, and text input. These simple and familiar elements will give users fast access to their desired results.
When users are creating more advanced logical expressions—like adding their own rules or changing the logic mode—use the expression component to enable users to construct their logic in an intuitive fashion. The power of this component is in being able to scale the interface to meet the complexity of the task. Optional variations exist to help users understand the functionality available to them.
- When only 2-3 logic modes are needed, and one more includes a formula, the modes can be surfaced as a radio button group instead of a picklist.
- When vertical space is a concern—like when many instances of these logical groups might exist in the same area—you can nest the expression component inside of a collapsible wrapper.
In any of these cases, you can use a panel and narrow variant of the expression component to contain these elements when horizontal space is limited, or when you can immediately preview the results on a larger part of the layout.
Find the right combination of components to give your users the functionality they need for the task at hand without overcomplicating the interface and causing confusion.