Context-Based UI: The Missing Piece in User Experience Design

Why Paying Close Attention to User Interfaces Is Crucial

User interfaces are a critical component when designing any kind of software because they dictate how users interact with the application.

Even if the software has numerous features, a poorly designed UI will prevent users from utilizing them effectively.

User interfaces are constantly evolving, with engineers striving to optimize UI design for the most seamless user experience.

In this article, we’ll explore one such UI design technique called Context-Based UI.

Context-Based UI: A New Approach to User Interface Design

If you examine traditional UI designs—often seen in outdated websites or beginner-level projects—you’ll notice a common pattern: settings and tools are centralized in menus or toolbars.

While this may look aesthetically pleasing and organized, it often creates usability issues. Users may struggle to find essential settings when they need them.

To solve these problems and make the design more user-friendly, we can use Context-Based UI.

Context-Based UI is a design approach where tools, settings, and actions are placed in close proximity to the task at hand. Instead of forcing users to navigate away from their workflow, context-based UI integrates necessary controls within the workspace itself.

Benefits of Implementing Context-Based UI Design

Context-based UI reduces friction by:

• Minimizing context switching – Users stay focused on their primary task.
• Improving discoverability – Options appear when and where they are needed.
• Enhancing efficiency – Quick access to relevant tools streamlines workflows.
• Providing intuitive interactions – Users interact with settings naturally, leading to a smoother learning curve.

Examples of Context-Based UI in Action

Context-based UI is not new—it is widely implemented in modern software.

1. VS Code’s Inline Actions

   • Inline "Run Test" buttons beside test functions.
   • Breakpoints embedded directly within the code editor.
   • Inline error suggestions, eliminating the need for a separate error panel.

2. Google Docs’ Floating Toolbar

   • When users select text, a floating toolbar appears for quick formatting.

3. Figma’s Contextual Editing Panel

   • Selecting an object reveals only relevant design options, reducing clutter.

Finding the Best Design Through Continuous Iteration: A Case Study

Now, let’s apply these principles by walking through a real-world design challenge and how we iterated to achieve a context-based UI.

For this example, I’ll showcase a design problem I encountered while developing LiveAPI.

LiveAPI is a tool that automatically generates interactive API documentation by connecting to your repositories.

Each generated documentation includes an interactive widget, allowing users to test APIs by clicking a "Try It" button.

As shown above, the widget contains a textbox with a URL and a "Try It" button for execution.

The Problem

Since documentation is generated automatically, sometimes the default URL may not be the desired one. Users may want to test the API on a different URL.

• While users can manually edit the URL in the textbox, the change won’t apply across all pages.
• We needed a solution that minimized user friction while making URL editing intuitive.

Design Option #1: Separate Input Field

Initially, we considered adding an input field on the LiveAPI projects page where users could modify the URL.

Problems:

• The widget is on the documentation page, but the URL editing feature was on the LiveAPI projects page—creating a disconnection.
• Even if users discovered the feature, they had to navigate away from the widget to edit the URL, which was inconvenient.

Design Option #2: Global Settings Icon

To fix the separate page issue, we introduced a settings icon at the top of the documentation page.

Problems:

• The settings icon and the API widget were too far apart.
• Users might not associate the settings icon with URL configuration.

Design Option #3: Button Above the Widget

To address proximity concerns, we placed a button directly above the widget for URL editing.

Problems:

• The button took up unnecessary space if users didn’t need it.
• It was still not close enough for instant interaction.

Final Solution: Inline Settings Icon

Taking inspiration from VS Code’s inline actions, we introduced a small settings icon next to the URL, which appears only on hover.

Advantages of This Solution:

• The settings icon stays within the user’s context, appearing exactly when needed.
• Users get a clear visual indication that the URL can be modified.
• No extra UI clutter, as the option only appears when relevant.

Conclusion

Context-Based UI design ensures that controls and settings appear exactly when and where users need them.

As demonstrated, through an iterative design process, we refined our approach to create an intuitive UI.

By adopting context-based UI principles, designers can eliminate unnecessary distractions, reduce friction, and enhance user experience.

Enjoy the process, iterate continuously, and let the design evolve into the most user-friendly experience possible!

LiveAPI: Super-Convenient API Docs That Always Stay Up-To-Date

Many internal services lack documentation, or the docs drift from the code. Even with effort, customer-facing API docs can be hard to use. With LiveAPI, connect your Git repository to automatically generate interactive API docs with clear descriptions, references, and "try it" editors.