In Part 1 and Part 2 of this article, we explored how context-based UIs can enhance user experience by guiding users to action buttons intuitively. We also examined a real-world example that illustrates the benefits of this approach via LiveAPI.
In this article, we will dive into the design decisions we made along the way and how we arrived at our final solution. Understanding this process can help in designing better, more user-friendly interfaces.
Design Option #1
In this option, we initially planned to add an input field that allows users to edit the URL.
Even though this approach seems straightforward, it has a drawback. The actual location where URLs are displayed is on another page, making this text field feel out of place.
To improve this, we considered integrating this functionality within the documentation.
Design Option #2
In this approach, we added a settings icon at the top of the documentation.
Both the widget (where the URL resides) and this button are on the same page. However, there are still issues with this approach. The widget and the settings icon are too far apart.
When a user sees a URL they want to change inside the widget, they might not even notice the settings icon, leading to uncertainty about whether the button will be used.
To address this, we needed a solution closer to the widget.
Design Option #3
In this approach, we decided to bring the base URL editing feature closer to the user.
Here, we introduced a button above the widget that allows users to change the URL.
While this approach is an improvement, it still has some issues:
- The button takes up unnecessary space if the user doesn’t need it.
- It’s still not close enough for the user to click it instantly.
To resolve these issues, we arrived at our final solution.
Design Option #4
In this approach, we placed the button exactly where the user needs it—next to the URL.
The advantages of this approach are:
- The button stays within the user's context. Since users hover around the URL when they want to change it, the settings cog appears automatically.
- This gives users a clear indication that the URL can be changed using the settings icon, making the process more intuitive and convenient.
Conclusion
Designing a context-based UI is a process of iteration and refinement. Each approach had its pros and cons, but by continuously assessing usability and user behavior, we arrived at a solution that seamlessly integrates into the workflow.
The final design ensures that users can effortlessly locate and modify URLs without unnecessary distractions, improving both efficiency and user experience. This iterative approach to design can be applied to various UI challenges. So Enjoy the process and let the design take its shape in the most user friendly way!
Top comments (0)