Streamlining Widget Creation in IoT-Based Web Apps

Introduction

The process of adding new widgets to the dashboard of an IoT-based web app can be complicated and time-consuming. With multiple steps involved, it can be difficult for users to navigate and customize the widgets they need. However, by applying effective UX principles and design thinking, it is possible to streamline the process and create a more intuitive user experience.

Before the Solution

Before we discuss the solution, let's first understand the issues that users were facing while adding new widgets to the dashboard. The process was complex and involved multiple steps, making the UX difficult to navigate. Users had to select a widget, add data points, and make visual settings, which made the UX complex and time-consuming.

Missing UX Laws

During the design process, we initially missed some important UX laws that were later added to the solution. 

The first law was Hick's Law, which states that the more options users are presented with, the longer it takes for them to make a decision. To address this, we added a thumbnail and description for the most useful widgets, reducing the number of options and making it easier for users to decide which widget to choose.

The second law was the Law of Proximity, which states that items that are close together are perceived as related. To apply this law, we grouped similar widgets together in the left panel, making it easier for users to find related widgets.

The third law was the Law of Similarity, which states that items that look similar are perceived as related. To apply this law, we used consistent visual design for all the widgets and their data points, making it easier for users to understand the information and relationships between them.

Missing UX Laws

During the design process, we initially missed some important UX laws that were later added to the solution. 

The first law was the Hick's Law, which states that the more options users are presented with, the longer it takes for them to make a decision. To address this, we added a thumbnail and description for the most useful widgets, reducing the number of options and making it easier for users to decide which widget to choose.

The second law was the Law of Proximity, which states that items that are close together are perceived as related. To apply this law, we grouped similar widgets together in the left panel, making it easier for users to find related widgets.

The third law was the Law of Similarity, which states that items that look similar are perceived as related. To apply this law, we used consistent visual design for all the widgets and their data points, making it easier for users to understand the information and relationships between them.

Conclusion:

In summary, by applying UX design principles and best practices, we were able to streamline the process of adding new widgets to the dashboard of an IoT-based web app. We separated widgets and chart options into the left panel, added a search bar and category dropdown, included thumbnails and descriptions for the most useful widgets, and simplified widget settings in the right panel. Additionally, we added important UX laws such as Hick's Law, Law of Proximity, and Law of Similarity to further enhance the user experience.

More by YOGESH KANTHALE

View profile