UX Patterns
Backoffice applications are work tools. Their quality is measured not by visual flair but by productivity, safety, and the reduction of cognitive effort. Users spend hours inside these systems — every unnecessary click, every lost filter, every context switch carries a real operational cost.
Mateu’s thesis is that good business UX is regular enough to be codified once, on the backend, and applied consistently without writing frontend code. This section documents the patterns Mateu supports and how to express each one.
Principles
Section titled “Principles”Seven principles drive every pattern in this catalogue. Each exists to eliminate a concrete cost.
| # | Principle | What it prevents |
|---|---|---|
| 01 | Preserve context | Users should never lose their orientation or mental state. Leaving a screen to come back is the most expensive form of context loss. |
| 02 | Minimize navigation | Fewer screens and fewer jumps equal more productivity. Composing beats navigating. |
| 03 | Keyboard-first | Power users live on the keyboard. If a frequent task requires a mouse, it is badly designed. |
| 04 | Workflow over screens | The unit of design is the task, not the screen. Design to complete work, not to display an entity. |
| 05 | Progressive complexity | Show complexity only when it adds value. Advanced features are revealed, not imposed. |
| 06 | Recoverability | Every error must be correctable. Confirm destructive actions, undo reversible ones, never lose work in progress. |
| 07 | Consistency | Patterns repeat predictably. What a user learns on one screen works on all. |
Pattern catalogue
Section titled “Pattern catalogue”| Pattern | Status | Key primitive |
|---|---|---|
| Navigation & Menus | ✅ Implemented | @App(AppVariant.*), ⌘K command palette |
| Split View | ✅ Implemented | @SplitCrud |
| Filters & Listing | ✅ Implemented | @List, @Filterable, @RowAction |
| Wizard | ✅ Implemented | @WizardCompletionAction |
| Entity Picker | ✅ Implemented | @Lookup, @Composition |
| Workspace | Composition | @SplitLayout, @Tabs, @Accordion |
| Task-centric page | Composition | @Action, @MainAction |
| Long-running jobs | ✅ Implemented | @Action(background, sse), @Trigger |
| Autosave | ✅ Implemented | @AutoSave |
| Keyboard Shortcuts | ✅ Implemented | @Action(shortcut = ...), @Trigger(OnEnter) |
Anti-patterns
Section titled “Anti-patterns”Each anti-pattern has a name so it can be recognised quickly — and a pattern that prevents it.
| Anti-pattern | Description | Solved by |
|---|---|---|
| CRUD Tunnel | List → detail → back, breaking the flow on every row visit. | Split View |
| Modal Hell | Nested modals that destroy orientation. | Split View, Task-centric page |
| Spinner Prison | Freezing the entire screen while something loads. | Long-running jobs |
| Filter Amnesia | Losing filters when navigating away. | Deep linking via @Route, Saved Views (planned) |
| Desktop Denial | Ignoring the keyboard and penalising the expert user. | Keyboard Shortcuts — @Action(shortcut = ...) |