<?xml version="1.0" encoding="UTF-8"?>
<feed xmlns="http://www.w3.org/2005/Atom" xml:lang="en">
    <title>Colas.Nahaboo.net - ux</title>
    <subtitle>Colas Nahaboo personal site, with discussions about programming code, web and computing topics, surfing and SUPing, and various musings.</subtitle>
    <link rel="self" type="application/atom+xml" href="https://colas.nahaboo.net/tags/ux/atom.xml"/>
    <link rel="alternate" type="text/html" href="https://colas.nahaboo.net"/>
    <generator uri="https://www.getzola.org/">Zola</generator>
    <updated>2026-04-05T00:00:00+00:00</updated>
    <id>https://colas.nahaboo.net/tags/ux/atom.xml</id>
    <entry xml:lang="en">
        <title>Explicit Action Pattern keeps you in the flow</title>
        <published>2026-04-05T00:00:00+00:00</published>
        <updated>2026-04-05T00:00:00+00:00</updated>
        
        <author>
          <name>Unknown</name>
        </author>
        
        <link rel="alternate" type="text/html" href="https://colas.nahaboo.net/code/explicit-action-pattern-keeps-you-in-the-flow/"/>
        <id>https://colas.nahaboo.net/code/explicit-action-pattern-keeps-you-in-the-flow/</id>
        
        <content type="html" xml:base="https://colas.nahaboo.net/code/explicit-action-pattern-keeps-you-in-the-flow/">&lt;p&gt;When designing interfaces for tools for my personal use, I have been using what I call an &lt;strong&gt;Explicit Action Pattern&lt;/strong&gt;, 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.&lt;/p&gt;
&lt;h2 id=&quot;examples&quot;&gt;Examples&lt;a class=&quot;zola-anchor&quot; href=&quot;#examples&quot; aria-label=&quot;Anchor link for: examples&quot;&gt;🔗&lt;/a&gt;&lt;/h2&gt;
&lt;table style=&#39;background-color: #f0f7ff;&#39;&gt;
  &lt;tr&gt;
    &lt;th&gt;Explicit Action Pattern&lt;/th&gt;&lt;th&gt;Modal Design&lt;/th&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td style=&#39;padding-right:2em;&#39;&gt;
      &lt;div&gt;&lt;b&gt;Initial Search&lt;/b&gt;&lt;/div&gt;
      &lt;form style=&#39;display:inline&#39;&gt;
        &lt;input name=search value=&quot;&quot; size=24&gt;
          &lt;input type=submit value=&#39;SEARCH ALL&#39; style=&#39;font-weight:bold&#39;&gt;
      &lt;/form&gt;
      &lt;br&gt;
      &lt;form style=&#39;display:inline&#39;&gt;
        &lt;input name=search value=&quot;&quot; size=24&gt;
        &lt;input type=submit value=&#39;Search Movie&#39;&gt;
      &lt;/form&gt;
      &lt;br&gt;
      &lt;form style=&#39;display:inline&#39;&gt;
        &lt;input name=search value=&quot;&quot; size=24&gt;
        &lt;input type=submit value=&#39;Search Music&#39;&gt;
      &lt;/form&gt;
      &lt;br&gt;
      &lt;form style=&#39;display:inline&#39;&gt;
        &lt;input name=search value=&quot;Alan Cooper&quot; size=24&gt;
        &lt;input type=submit value=&#39;Search EBook&#39;&gt;
      &lt;/form&gt;
    &lt;/td&gt;
    &lt;td&gt;
      &lt;form style=&#39;display:inline&#39;&gt;
        &lt;input name=search value=&quot;Alan Cooper&quot; size=24&gt;
        &lt;input type=submit value=&#39;Search&#39;&gt;
        &lt;br&gt;
        &lt;input type=&quot;radio&quot; id=&quot;0&quot; name=&quot;movie&quot; value=&quot;all&quot; /&gt;
        &lt;label for=&quot;0&quot;&gt;&lt;b&gt;All&lt;/b&gt;&lt;/label&gt;
        &lt;input type=&quot;radio&quot; id=&quot;1&quot; name=&quot;movie&quot; value=&quot;movie&quot; /&gt;
        &lt;label for=&quot;1&quot;&gt;movie&lt;/label&gt;
        &lt;input type=&quot;radio&quot; id=&quot;2&quot; name=&quot;movie&quot; value=&quot;music&quot; /&gt;
        &lt;label for=&quot;2&quot;&gt;music&lt;/label&gt;
        &lt;input type=&quot;radio&quot; id=&quot;3&quot; name=&quot;movie&quot; value=&quot;ebook&quot; checked /&gt;
        &lt;label for=&quot;3&quot;&gt;ebook&lt;/label&gt;
      &lt;/form&gt;
    &lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td&gt;
      &lt;div&gt;&lt;b&gt;Search results...&lt;/b&gt;&lt;/div&gt;
      &lt;form style=&#39;display:inline&#39;&gt;
        &lt;input name=search size=24 value=&quot;&quot;&gt;
        &lt;input type=submit value=Search&gt;
      &lt;/form&gt;
      &lt;br&gt;
      &lt;form style=&#39;display:inline&#39;&gt;
        &lt;input name=search value=&quot;Alan Cooper&quot; size=24&gt;
        &lt;input type=submit value=&quot;Re Search&quot;&gt;
      &lt;/form&gt;
    &lt;/td&gt;
    &lt;td&gt;
      &lt;form style=&#39;display:inline&#39;&gt;
        &lt;input name=search value=&quot;Alan Cooper&quot; size=24&gt;
        &lt;input type=submit value=&#39;Search&#39;&gt;
        &lt;input type=submit value=&#39;Clear&#39;&gt;
        &lt;br&gt;
        &lt;input type=&quot;radio&quot; id=&quot;0&quot; name=&quot;movie&quot; value=&quot;all&quot; /&gt;
        &lt;label for=&quot;0&quot;&gt;&lt;b&gt;All&lt;/b&gt;&lt;/label&gt;
        &lt;input type=&quot;radio&quot; id=&quot;1&quot; name=&quot;movie&quot; value=&quot;movie&quot; /&gt;
        &lt;label for=&quot;1&quot;&gt;movie&lt;/label&gt;
        &lt;input type=&quot;radio&quot; id=&quot;2&quot; name=&quot;movie&quot; value=&quot;music&quot; /&gt;
        &lt;label for=&quot;2&quot;&gt;music&lt;/label&gt;
        &lt;input type=&quot;radio&quot; id=&quot;3&quot; name=&quot;movie&quot; value=&quot;ebook&quot; checked /&gt;
        &lt;label for=&quot;3&quot;&gt;ebook&lt;/label&gt;
      &lt;/form&gt;
    &lt;/td&gt;
  &lt;/tr&gt;
&lt;/table&gt;
&lt;p&gt;As you can see in the top row, for searching an ebook, I will &quot;flow&quot; through the form from left to right, filling the relevant field and hitting the return key, or pressing the &quot;Search EBook&quot; button. But with the traditional modal design, choosing the radio button &quot;ebook&quot; breaks my flow of entry.&lt;/p&gt;
&lt;p&gt;On the second row, you can see how I use this design for providing a &quot;search again&quot; 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 &quot;Clear&quot; button to empty the field.&lt;/p&gt;
&lt;h2 id=&quot;interaction-flow&quot;&gt;Interaction flow&lt;a class=&quot;zola-anchor&quot; href=&quot;#interaction-flow&quot; aria-label=&quot;Anchor link for: interaction-flow&quot;&gt;🔗&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;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.&lt;/p&gt;
&lt;script src=https://colas.nahaboo.net/js/mermaid.js&gt;&lt;/script&gt;
&lt;pre class=&quot;mermaid&quot;&gt;

graph TD;
    User((User Interaction));

    %% LEFT SIDE: Explicit Pattern (Parallel)
    subgraph Explicit [&quot;Explicit Action Pattern (Parallel)&quot;];
        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 [&quot;Modal     Design (Sequential)&quot;];
        FormS[Single Search Form];
        %% The Vertical Spine (invisible link to keep things straight)
        FormS ~~~ InputS[/Generic Input Field/];
        %% The &quot;Hook&quot; - Positioned to the side
        Mode{{Mode Selection: Books vs Movies}};
    end;

    %% Explicit Connections (Direct Flow)
    User --&gt; FormB;
    User --&gt; FormM;
    FormB --&gt; InputB;
    FormM --&gt; InputM;
    InputB --&gt; Submit((Submit));
    InputM --&gt; Submit;

    %% Modal Connections (The Hook Flow)
    User --&gt; FormS;
    FormS --&gt; Mode;
    Mode --&gt; InputS;
    InputS --&gt; 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;

&lt;/pre&gt;
&lt;h2 id=&quot;benefits&quot;&gt;Benefits&lt;a class=&quot;zola-anchor&quot; href=&quot;#benefits&quot; aria-label=&quot;Anchor link for: benefits&quot;&gt;🔗&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;This Explicit Action Pattern has many benefits for power users:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;Distributed Entry:&lt;/strong&gt; Breaking one complex task into multiple simple, dedicated entry points.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Parallel UI:&lt;/strong&gt; Presenting all options simultaneously rather than hiding them behind a selection step.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Non-Modal Interaction:&lt;/strong&gt; Avoiding the &quot;mode&quot; where you have to set a state (e.g., clicking a radio button) before you can perform the actual action.&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;For the examples above:&lt;/p&gt;
&lt;table&gt;&lt;thead&gt;&lt;tr&gt;&lt;th style=&quot;text-align: left&quot;&gt;Feature&lt;/th&gt;&lt;th style=&quot;text-align: left&quot;&gt;Separate Dedicated Fields&lt;/th&gt;&lt;th style=&quot;text-align: left&quot;&gt;Single Field + mode switches&lt;/th&gt;&lt;/tr&gt;&lt;/thead&gt;&lt;tbody&gt;
&lt;tr&gt;&lt;td style=&quot;text-align: left&quot;&gt;&lt;strong&gt;Cognitive Load&lt;/strong&gt;&lt;/td&gt;&lt;td style=&quot;text-align: left&quot;&gt;&lt;strong&gt;Higher initial load&lt;/strong&gt; (more to look at), unless you are already used to this UI.&lt;/td&gt;&lt;td style=&quot;text-align: left&quot;&gt;&lt;strong&gt;Lower initial load&lt;/strong&gt; (cleaner look), especially for novices.&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td style=&quot;text-align: left&quot;&gt;&lt;strong&gt;Physical Effort&lt;/strong&gt;&lt;/td&gt;&lt;td style=&quot;text-align: left&quot;&gt;&lt;strong&gt;Lower&lt;/strong&gt; (Click bar → Type → Enter).&lt;/td&gt;&lt;td style=&quot;text-align: left&quot;&gt;&lt;strong&gt;Higher&lt;/strong&gt; (Click radio → Click bar → Type → Enter).&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td style=&quot;text-align: left&quot;&gt;&lt;strong&gt;Intent Clarity&lt;/strong&gt;&lt;/td&gt;&lt;td style=&quot;text-align: left&quot;&gt;Absolute from the moment you click.&lt;/td&gt;&lt;td style=&quot;text-align: left&quot;&gt;Ambiguous until the modifier is set.&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td style=&quot;text-align: left&quot;&gt;&lt;strong&gt;Screen Space&lt;/strong&gt;&lt;/td&gt;&lt;td style=&quot;text-align: left&quot;&gt;&quot;Expensive&quot;; requires more vertical/grid space.&lt;/td&gt;&lt;td style=&quot;text-align: left&quot;&gt;Efficient; fits in a header.&lt;/td&gt;&lt;/tr&gt;
&lt;/tbody&gt;&lt;/table&gt;
&lt;p&gt;This is essentially applying &lt;strong&gt;Functional Programming&lt;/strong&gt; and &lt;strong&gt;CLI philosophy&lt;/strong&gt; to a GUI.&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;Immutability:&lt;/strong&gt; The pre-filled field is the &quot;original state.&quot;&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Pure Functions:&lt;/strong&gt; Each input field has a single, predictable output.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;No Side Effects:&lt;/strong&gt; Clearing one field doesn&#39;t break your ability to see the other.&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;In a nutshell, &lt;strong&gt;Directness over Modality&lt;/strong&gt;.&lt;/p&gt;
&lt;h2 id=&quot;for-power-users&quot;&gt;For power users&lt;a class=&quot;zola-anchor&quot; href=&quot;#for-power-users&quot; aria-label=&quot;Anchor link for: for-power-users&quot;&gt;🔗&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;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 &quot;Command-Action&quot; pairs. And Explicit Action Patterns offers you:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;Muscle Memory:&lt;/strong&gt; You can bind a specific field to a specific mental &quot;slot.&quot; You don&#39;t have to check the state of a radio button before hitting enter; you &lt;em&gt;know&lt;/em&gt; which field you are in. It transforms a two-click &quot;hunt and peck&quot; task into a single-click muscle memory task. You don&#39;t have to wait for an animation or look for a label; you just hit the coordinate on the screen you already know.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;No &quot;Context Switch&quot; Tax:&lt;/strong&gt; Selecting a radio button is a &quot;mode switch.&quot; It requires you to stop thinking about your search query for a second to handle the UI mechanics. Separate fields eliminate that tax.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Visual Affordance:&lt;/strong&gt; The label &quot;Search Movies&quot; is context-free, an immediate call to action. A generic &quot;Search&quot; box is a mystery until you look at the surrounding buttons.&lt;/li&gt;
&lt;/ul&gt;
&lt;h2 id=&quot;in-the-real-world&quot;&gt;In the real world&lt;a class=&quot;zola-anchor&quot; href=&quot;#in-the-real-world&quot; aria-label=&quot;Anchor link for: in-the-real-world&quot;&gt;🔗&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;While interfaces have moved toward the &quot;Google-style&quot; 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.&lt;/p&gt;
&lt;p&gt;You can also see this approach in media editing software. Instead of a single &quot;Save...&quot; dialog that asks for a format later, you often have explicit menu entries: &quot;Save,&quot; &quot;Export as PNG,&quot; &quot;Export as JPG,&quot; or &quot;Export as MP3.&quot;&lt;/p&gt;
&lt;p&gt;And one can consider that the &lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https://en.wikipedia.org/wiki/Unix_philosophy&quot;&gt;Unix philosophy&lt;/a&gt; of having one tool per function, instead of mega-commands with tons of options is also an embodiment of the  Explicit Action Pattern.&lt;/p&gt;
&lt;h2 id=&quot;dive-deeper&quot;&gt;Dive deeper&lt;a class=&quot;zola-anchor&quot; href=&quot;#dive-deeper&quot; aria-label=&quot;Anchor link for: dive-deeper&quot;&gt;🔗&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;This approach is highly &quot;discoverable.&quot; You don&#39;t need to learn &quot;how the search bar works&quot;; 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:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;The boss: Alan Cooper books, especially &lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https://thedesignbooks.com/books/about-face-the-essentials-of-interaction-design&quot;&gt;About Face: The Essentials of Interaction Design&lt;/a&gt;.&lt;/li&gt;
&lt;li&gt;The enjoyable &lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https://sensible.com/dont-make-me-think/&quot;&gt;Don&#39;t make me think&lt;/a&gt; by Steve Krug.&lt;/li&gt;
&lt;li&gt;&lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https://www.cs.umd.edu/users/ben/papers/Shneiderman1983Direct.pdf&quot;&gt;Direct Manipulation&lt;/a&gt; by Ben Shneiderman&lt;/li&gt;
&lt;li&gt;&lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https://www.edwardtufte.com/notes-sketches/?msg_id=0000Jr&quot;&gt;Data Density&lt;/a&gt; the examples above being described by him as &quot;Parallel Input&quot;.&lt;/li&gt;
&lt;li&gt;&lt;a rel=&quot;noopener external&quot; target=&quot;_blank&quot; href=&quot;https://en.wikipedia.org/wiki/The_Humane_Interface&quot;&gt;The human Interface&lt;/a&gt; by Jef Raskin, especially his &quot;Monotonicity&quot;: the idea that a specific goal should always be achieved by a specific, unchanging set of actions.&lt;/li&gt;
&lt;/ul&gt;
</content>
        
    </entry>
</feed>
