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:
🔹 Before (Traditional UI)
🚫 A separate "Settings" button in the sidebar or header.
🚫 Context switching disrupts API testing.
✅ After (Context-Based UI)
✔️ A small ⚙️ settings icon appears next to the URL field on hover.
✔️ Clicking it gives the necessary modal to edit it.
✔️ Users stay within their workflow, making quick, frictionless changes.
Why This Works
1️⃣ Minimizes Cognitive Load: The settings option is exactly where the user expects it, reducing confusion.
2️⃣ Enhances Efficiency: No extra clicks or context switching.
3️⃣ Matches User Intent: Users only see configuration options when they need them, avoiding clutter.
Conclusion
By integrating context-based UI principles into our API Executor Widget, we significantly improve usability. This small design shift creates a seamless, intuitive experience, proving that UI should appear where it makes the most sense—right in the context of use.
In the next part, we will go through the options we had earlier and how we came to a decision on planning the design for this feature, Stay Tuned!
Top comments (0)