Condition Builder Usecase
The Challenge
Design a modular framework to define simple as well as complex conditions that can be built once and surfaced anywhere were there is a common need to conditionally query data and present information.
The Goals
-
Empower business users to define conditions that have traditionally been the domain of power users or administrators.
-
Provide a common condition building experience across EPM suite.
-
Minimize the need to define conditions in the first place.
-
If user needs to define the condition, make it natural and progressively disclose the relevant parameters.
My Role
-
User experience lead, driving design direction and responsible for delivering it.
-
Managing additional design tasks and resources.
Analyzing the Conditional Formatting Criteria and Parameters
The structure of condition expressions where researced and analyzed to identify their patterns., which were used to define a sentence-like approach to construct them while eleminatin the inherit complexity in the current ui.
Design Direction
The Surface
The Condition Builder is a surface where a simple expression can be defined as well as multiple expressions can be combined using boolean operators to define an advanced condition. The condition builder can be surfaced in different contexts where a condition is defined (e.g., Filter Bar and Conditional Formatting.) In some of these contexts, it is combined with other surfaces (e.g. format properties pane in the case of Conditional Formatting.)
The Expression
Most expressions are structured with attributes, an operator and values, which are represented as facets. In most cases there are only 4 facets per row (two attribute, an operator and one value) but the number of facets to the left and right of the operator may change based on the expression. In the initial state of an expression ONLY the first facet should be enabled. Facets to the right are enabled based on choices made "upstream" (i.e. to the left). Whenever a facet is changed upstream, affected downstream facets should react appropriately.
Application Example (Conditional Formatting)
Usecases
-
Alert users to problems and opportunities and emphasize patterns in the data.
-
Facilitate application of conditional formatting on the grid definition during design-time.
-
Facilitate application of conditional formatting on selected cell range during run-time.
Conditionally Formatted Grid Sample
Conditional Formatting UI (Before)
Evolving the Design Approach
Progressive Disclosure
The conditional formatting surface evolves from a simple pre-defined expression and simple selection of pre-defined formats all the way to a surface that supports crafting of a complex expression and custom formatting properties.
1. Apply a Conditional Format
2. The Simple Predefined Conditional Format
3. The Simple Custom Conditional Format
4. The Advanced Conditional Format
5. The Result
