Context-Based UI in Action: Solving a Real-World Problem

Context-Based UI in Action: Enhancing an API Executor Widget In the first part of this series, we introduced Context-Based UI, a design principle where UI elements appear exactly where they are needed. This reduces cognitive load, improves efficiency, and aligns with intuitive user behavior—much like how VS Code places controls (e.g., breakpoints, test runners) directly within the code editor. Now, let’s apply this principle to a real-world problem: improving the UX of an API Executor Widget by embedding configuration options directly into the context of the user’s interaction. The Problem: Configuring the API URL in the Widget I'm currently building LiveAPI, a tool which generates API documentations from any git repository. The documentations which are generated contains an Interactive Widget, which can be used to directly execute the APIs and test them out. Sometimes there can be situations where the URL for the request needs to be changed. So for changing that,a typical UI approach might provide a "Settings" button somewhere outside the widget or separate page for configuration. However, this disrupts the user’s workflow. Solution: Context-Aware Settings Placement Instead of a detached button, we embed the settings icon directly next to the URL in the API request section. This follows the VS Code approach of placing actions where they are most relevant. Implementation Details Location-Specific Placement: The settings icon appears inline with the URL field, subtly indicating that it is tied to the request URL configuration. Hover-Based Visibility: The icon is only visible when the user hovers over the URL line, keeping the interface clean. How It Looks Here’s how our context-based settings placement enhances usability:

Feb 25, 2025 - 20:42

Context-Based UI in Action: Solving a Real-World Problem

Context-Based UI in Action: Enhancing an API Executor Widget

In the first part of this series, we introduced Context-Based UI, a design principle where UI elements appear exactly where they are needed. This reduces cognitive load, improves efficiency, and aligns with intuitive user behavior—much like how VS Code places controls (e.g., breakpoints, test runners) directly within the code editor.

Now, let’s apply this principle to a real-world problem: improving the UX of an API Executor Widget by embedding configuration options directly into the context of the user’s interaction.

The Problem: Configuring the API URL in the Widget

I'm currently building LiveAPI, a tool which generates API documentations from any git repository. The documentations which are generated contains an Interactive Widget, which can be used to directly execute the APIs and test them out.

Sometimes there can be situations where the URL for the request needs to be changed. So for changing that,a typical UI approach might provide a "Settings" button somewhere outside the widget or separate page for configuration. However, this disrupts the user’s workflow.

Solution: Context-Aware Settings Placement

Instead of a detached button, we embed the settings icon directly next to the URL in the API request section. This follows the VS Code approach of placing actions where they are most relevant.

Implementation Details

Location-Specific Placement: The settings icon appears inline with the URL field, subtly indicating that it is tied to the request URL configuration.
Hover-Based Visibility: The icon is only visible when the user hovers over the URL line, keeping the interface clean.

How It Looks

Here’s how our context-based settings placement enhances usability: