This is the first in the series of article which I have planned to show the concept of better design from the developer’s perspective. Developers are mostly concerned with if the app works and not how the user perceives our app.
As developers, we are always inclined to show the latest and greatest of our creation to the world. We often forget that users who are new to your product are seeing it for the first time and we should refrain from bombarding them with multiple options.
Let take an example and show you what I mean. Consider you are building a product where the user is presented with multiple options at the beginning and based on his choice you are displaying the content he likes.
From the above design, you can understand that the first dropdown value will affect the second and second will affect the third. This design is common when you are providing the user with ways to filter. This design works most of the time when the user is familiar with your product and knows about “Category”, “Sub Category” , “Topics” in your product.
Consider a new user who enters your app and tries to just find content to browse. It would be better if the user learns about these as well as enjoy the content your app has to offer. We will look at ways to improves these so that it is more approachable from new user standpoint.
Introducing Empty State
The flaw is this design is that there is no visual way of conveying the dependencies between the dropdowns. When the user now selects the third dropdown without having selected the first dropdown, most apps just show empty dropdown. We can improve this by using Empty State in the design. We are adding extra interactivity to the form to show the dependencies. Empty state is something which is displayed when the user cannot perform any action on the control. It can give a message to user on what to do to enable that control.
Making the form more interactive, we have achieved the following
1. New user has less things to worry and can start quickly by selecting just the Category.
2. You have conveyed the dependencies between the dropdowns
3. Users will know that they can still search with just the Category selected.
4. Users are taken in steps and understand the difference between the different dropdowns (“Category” , “Sub Category” , “Topics”)
I am planning to write a series of articles about design for developers. Consider following if you would like these formats
Please feel free to ask any question and leave a comments. If this article has helped you in any way please share and hit that clap button👏 👏👏 .