How to Streamline Complex Rule Expressions for B2B Tools: UI & Efficiency Tips

The rule expression discussed consists of three parts: tag, operator, and value. Multiple expressions can be combined into a composite rule tag group. For example, to whitelist a high‑value customer for an artificial‑intelligence‑driven service, the expression might be ({CustomerScore} [>=] {9000}) or ({CustomerAccount}) [is] {A+User}.

Tag – CustomerScore / CustomerAccount

Operator – >= / is

Value – 9000 / A+User

The initial product design followed a hand‑written expression mindset, offering buttons such as "tag", "parentheses", "and", "or". Users clicked these buttons to fill in content, producing an expression that resembled handwritten code. Editing required hovering over each element, and validation only occurred on submission.

Several clear problems emerge from this approach:

Tags and operators are selected from dropdowns while values are typed, forcing users to constantly switch between mouse and keyboard.

Frequent button selections introduce small latencies that accumulate into significant overhead.

Complex rules require parentheses for precedence, leading to dense, multi‑level bracket arrangements that are hard to read and debug.

Expressions are displayed flatly, allowing only element‑by‑element editing, which makes bulk deletion or movement cumbersome.

To address these issues, the following optimization directions were identified:

Improve input and editing efficiency Inspired by code editors favored by developers, the new design emphasizes keyboard use and intelligent autocomplete. Although a rule may be complex, it is fundamentally a series of simple expressions similar to code statements. Each expression is entered linearly; after completing one step, the cursor automatically moves to the next, and invalid inputs are filtered out. A searchable input box lets users quickly locate needed tags or values, allowing most actions to be performed via keyboard and dramatically increasing input speed.

Optimize readability and parentheses usage To simplify the relationship between multiple expressions, the system defaults the logical connector to "and" after each expression, with the option to switch to "or" manually. When parentheses are needed, users click a "+" button to add a new region, which visually becomes a card. Each card represents a set of parentheses, and the "+" positions indicate the logical relation between groups. This card‑based layout greatly improves both reading and editing compared to the previous flat view.

Modular operation of complex expressions With the card structure in place, the next step is to enable modular actions. Operations teams often need to move or reuse entire expressions. To meet this demand, drag‑and‑drop functionality was added inside each card, allowing operators to rearrange expressions flexibly, which further boosts maintenance efficiency.

Brief recap B‑side tools often receive little attention due to low exposure and a small user base, yet a dedicated group of power users relies on them daily. Even minor UI improvements can multiply their productivity. Designers should stay alert to these needs, leverage convergent components, and deliver tangible value. Many enhancements—such as cross‑card drag, copy‑paste, etc.—remain unimplemented due to time and resource constraints; readers are encouraged to extend the design and share feedback.