Colas.Nahaboo.net - uxColas Nahaboo personal site, with discussions about programming code, web and computing topics, surfing and SUPing, and various musings.Zola2026-04-05T00:00:00+00:00https://colas.nahaboo.net/tags/ux/atom.xmlExplicit Action Pattern keeps you in the flow2026-04-05T00:00:00+00:002026-04-05T00:00:00+00:00
Unknown
https://colas.nahaboo.net/code/explicit-action-pattern-keeps-you-in-the-flow/<p>When designing interfaces for tools for my personal use, I have been using what I call an <strong>Explicit Action Pattern</strong>, the opposite of modal design. Due to the general trend towards minimalism of modern UI practice, it is not used a lot, but I think it should, and here is why.</p>
<h2 id="examples">Examples<a class="zola-anchor" href="#examples" aria-label="Anchor link for: examples">🔗</a></h2>
<table style='background-color: #f0f7ff;'>
<tr>
<th>Explicit Action Pattern</th><th>Modal Design</th>
</tr>
<tr>
<td style='padding-right:2em;'>
<div><b>Initial Search</b></div>
<form style='display:inline'>
<input name=search value="" size=24>
<input type=submit value='SEARCH ALL' style='font-weight:bold'>
</form>
<br>
<form style='display:inline'>
<input name=search value="" size=24>
<input type=submit value='Search Movie'>
</form>
<br>
<form style='display:inline'>
<input name=search value="" size=24>
<input type=submit value='Search Music'>
</form>
<br>
<form style='display:inline'>
<input name=search value="Alan Cooper" size=24>
<input type=submit value='Search EBook'>
</form>
</td>
<td>
<form style='display:inline'>
<input name=search value="Alan Cooper" size=24>
<input type=submit value='Search'>
<br>
<input type="radio" id="0" name="movie" value="all" />
<label for="0"><b>All</b></label>
<input type="radio" id="1" name="movie" value="movie" />
<label for="1">movie</label>
<input type="radio" id="2" name="movie" value="music" />
<label for="2">music</label>
<input type="radio" id="3" name="movie" value="ebook" checked />
<label for="3">ebook</label>
</form>
</td>
</tr>
<tr>
<td>
<div><b>Search results...</b></div>
<form style='display:inline'>
<input name=search size=24 value="">
<input type=submit value=Search>
</form>
<br>
<form style='display:inline'>
<input name=search value="Alan Cooper" size=24>
<input type=submit value="Re Search">
</form>
</td>
<td>
<form style='display:inline'>
<input name=search value="Alan Cooper" size=24>
<input type=submit value='Search'>
<input type=submit value='Clear'>
<br>
<input type="radio" id="0" name="movie" value="all" />
<label for="0"><b>All</b></label>
<input type="radio" id="1" name="movie" value="movie" />
<label for="1">movie</label>
<input type="radio" id="2" name="movie" value="music" />
<label for="2">music</label>
<input type="radio" id="3" name="movie" value="ebook" checked />
<label for="3">ebook</label>
</form>
</td>
</tr>
</table>
<p>As you can see in the top row, for searching an ebook, I will "flow" through the form from left to right, filling the relevant field and hitting the return key, or pressing the "Search EBook" button. But with the traditional modal design, choosing the radio button "ebook" breaks my flow of entry.</p>
<p>On the second row, you can see how I use this design for providing a "search again" form, where I can choose to enter a new search, or edit the previous one by selecting the relevant search box. It treats the search interface like a REPL (Read-Eval-Print Loop) rather than a static webpage. Whereas in the traditional way, I would have to break my flow to go hit the "Clear" button to empty the field.</p>
<h2 id="interaction-flow">Interaction flow<a class="zola-anchor" href="#interaction-flow" aria-label="Anchor link for: interaction-flow">🔗</a></h2>
<p>So, rather than breaking the flow of the interactions to set modes, you just flow seamlessly into branches of the decision tree. If we take a car driving analogy, you just choose a direction when encountering a fork in the road, rather than having to get out of the car to move a barrier before resuming your ride.</p>
<script src=https://colas.nahaboo.net/js/mermaid.js></script>
<pre class="mermaid">
graph TD;
User((User Interaction));
%% LEFT SIDE: Explicit Pattern (Parallel)
subgraph Explicit ["Explicit Action Pattern (Parallel)"];
FormB[Dedicated Form: Search Books];
InputB[/Input Field: Books/];
FormM[Dedicated Form: Search Movies];
InputM[/Input Field: Movies/];
end;
%% RIGHT SIDE: Modal Pattern (Sequential)
subgraph Modal ["Modal    Design (Sequential)"];
FormS[Single Search Form];
%% The Vertical Spine (invisible link to keep things straight)
FormS ~~~ InputS[/Generic Input Field/];
%% The "Hook" - Positioned to the side
Mode{{Mode Selection: Books vs Movies}};
end;
%% Explicit Connections (Direct Flow)
User --> FormB;
User --> FormM;
FormB --> InputB;
FormM --> InputM;
InputB --> Submit((Submit));
InputM --> Submit;
%% Modal Connections (The Hook Flow)
User --> FormS;
FormS --> Mode;
Mode --> InputS;
InputS --> Submit;
%% Styling from original source
style FormB fill:#f9f,stroke:#333;
style FormM fill:#f9f,stroke:#333;
style InputB fill:#ccf,stroke:#333;
style InputM fill:#ccf,stroke:#333;
style Modal fill:#f5f5f5,stroke:#999,stroke-dasharray: 5 5;
style FormS fill:#eee,stroke:#999;
style Mode fill:#fff,stroke:#333,stroke-width:2px;
</pre>
<h2 id="benefits">Benefits<a class="zola-anchor" href="#benefits" aria-label="Anchor link for: benefits">🔗</a></h2>
<p>This Explicit Action Pattern has many benefits for power users:</p>
<ul>
<li><strong>Distributed Entry:</strong> Breaking one complex task into multiple simple, dedicated entry points.</li>
<li><strong>Parallel UI:</strong> Presenting all options simultaneously rather than hiding them behind a selection step.</li>
<li><strong>Non-Modal Interaction:</strong> Avoiding the "mode" where you have to set a state (e.g., clicking a radio button) before you can perform the actual action.</li>
</ul>
<p>For the examples above:</p>
<table><thead><tr><th style="text-align: left">Feature</th><th style="text-align: left">Separate Dedicated Fields</th><th style="text-align: left">Single Field + mode switches</th></tr></thead><tbody>
<tr><td style="text-align: left"><strong>Cognitive Load</strong></td><td style="text-align: left"><strong>Higher initial load</strong> (more to look at), unless you are already used to this UI.</td><td style="text-align: left"><strong>Lower initial load</strong> (cleaner look), especially for novices.</td></tr>
<tr><td style="text-align: left"><strong>Physical Effort</strong></td><td style="text-align: left"><strong>Lower</strong> (Click bar → Type → Enter).</td><td style="text-align: left"><strong>Higher</strong> (Click radio → Click bar → Type → Enter).</td></tr>
<tr><td style="text-align: left"><strong>Intent Clarity</strong></td><td style="text-align: left">Absolute from the moment you click.</td><td style="text-align: left">Ambiguous until the modifier is set.</td></tr>
<tr><td style="text-align: left"><strong>Screen Space</strong></td><td style="text-align: left">"Expensive"; requires more vertical/grid space.</td><td style="text-align: left">Efficient; fits in a header.</td></tr>
</tbody></table>
<p>This is essentially applying <strong>Functional Programming</strong> and <strong>CLI philosophy</strong> to a GUI.</p>
<ul>
<li><strong>Immutability:</strong> The pre-filled field is the "original state."</li>
<li><strong>Pure Functions:</strong> Each input field has a single, predictable output.</li>
<li><strong>No Side Effects:</strong> Clearing one field doesn't break your ability to see the other.</li>
</ul>
<p>In a nutshell, <strong>Directness over Modality</strong>.</p>
<h2 id="for-power-users">For power users<a class="zola-anchor" href="#for-power-users" aria-label="Anchor link for: for-power-users">🔗</a></h2>
<p>If you are used to CLI environments, or using mostly keyboards shortcuts in interfaces, or editors like Emacs or vi, your brain likely functions on "Command-Action" pairs. And Explicit Action Patterns offers you:</p>
<ul>
<li><strong>Muscle Memory:</strong> You can bind a specific field to a specific mental "slot." You don't have to check the state of a radio button before hitting enter; you <em>know</em> which field you are in. It transforms a two-click "hunt and peck" task into a single-click muscle memory task. You don't have to wait for an animation or look for a label; you just hit the coordinate on the screen you already know.</li>
<li><strong>No "Context Switch" Tax:</strong> Selecting a radio button is a "mode switch." It requires you to stop thinking about your search query for a second to handle the UI mechanics. Separate fields eliminate that tax.</li>
<li><strong>Visual Affordance:</strong> The label "Search Movies" is context-free, an immediate call to action. A generic "Search" box is a mystery until you look at the surrounding buttons.</li>
</ul>
<h2 id="in-the-real-world">In the real world<a class="zola-anchor" href="#in-the-real-world" aria-label="Anchor link for: in-the-real-world">🔗</a></h2>
<p>While interfaces have moved toward the "Google-style" of Modal Design to flatten the learning curve for the general public, many expert-level interfaces still rely on the Explicit Action Pattern. You can find it in library catalogs, Bloomberg or Reuters terminals, and high-end enterprise software.</p>
<p>You can also see this approach in media editing software. Instead of a single "Save..." dialog that asks for a format later, you often have explicit menu entries: "Save," "Export as PNG," "Export as JPG," or "Export as MP3."</p>
<p>And one can consider that the <a rel="noopener external" target="_blank" href="https://en.wikipedia.org/wiki/Unix_philosophy">Unix philosophy</a> of having one tool per function, instead of mega-commands with tons of options is also an embodiment of the Explicit Action Pattern.</p>
<h2 id="dive-deeper">Dive deeper<a class="zola-anchor" href="#dive-deeper" aria-label="Anchor link for: dive-deeper">🔗</a></h2>
<p>This approach is highly "discoverable." You don't need to learn "how the search bar works"; the interface tells you exactly what it can do by simply existing. This is what ihas been advocated by many Usability experts, that I consider mandatory reads:</p>
<ul>
<li>The boss: Alan Cooper books, especially <a rel="noopener external" target="_blank" href="https://thedesignbooks.com/books/about-face-the-essentials-of-interaction-design">About Face: The Essentials of Interaction Design</a>.</li>
<li>The enjoyable <a rel="noopener external" target="_blank" href="https://sensible.com/dont-make-me-think/">Don't make me think</a> by Steve Krug.</li>
<li><a rel="noopener external" target="_blank" href="https://www.cs.umd.edu/users/ben/papers/Shneiderman1983Direct.pdf">Direct Manipulation</a> by Ben Shneiderman</li>
<li><a rel="noopener external" target="_blank" href="https://www.edwardtufte.com/notes-sketches/?msg_id=0000Jr">Data Density</a> the examples above being described by him as "Parallel Input".</li>
<li><a rel="noopener external" target="_blank" href="https://en.wikipedia.org/wiki/The_Humane_Interface">The human Interface</a> by Jef Raskin, especially his "Monotonicity": the idea that a specific goal should always be achieved by a specific, unchanging set of actions.</li>
</ul>