When I started designing web applications, I had the habit of finding a solution to the problem, designing the user interface for it and moving ahead to the next problem. Design optimization was never on my mind.
I never invested time in finding alternate ways of doing the same thing.
As a result most of the features that I designed were good but not great. Many times they lacked to deliver the optimal design solution.
But I did realize one thing with experience, many times there are multiple design approaches that can be taken and I need to evaluate every possible approach before deciding on a particular design approach.
Many of you will think that it is a waste of time to try and evaluate every possible way of doing the same thing. And obviously, one cannot do it even if he tries his best.
Yes, I agree.
What I am trying to say is that you need to atleast try to find some alternate design solutions of doing the same thing before deciding on one of the design solutions.
Let me try to explain this with an example.
Adding Existing Objects to a Table
Most of web applications are loaded with tables and so the requirement to let the user add an existing object to a table is quite common.
For example, say you have table in your web application in which the user will add the names of the employees who are high performers. The details of the employees already exist in the application, so the user has to just search, select and add the appropriate employees to the table.
You obviously do not want the user to add a row in the table and then type in the name of the employees.
So how do you design such an UI that will allow the user to add one or multiple employees to a table?
Actually, there are couple of ways in which you can design this UI.
Let us discuss both of these one by one.
Adding One Existing Object at a Time
In the table toolbar you can provide an action to add a single row to the table.
This newly added row will be editable in which the user can enter the name of the employee.
The user can click the “+” icon to add an editable row to the table. Once the row is added, the user can select the name of the employee in the first column using the drop-down menu.
Then the user can again add one more row to the table by clicking the “+” icon and select another employee in the newly added row.
This way the user can add as many employees as needed to the table.
Does this design solution satisfy the requirement?
Yes it does.
However this design approach has couple of limitations:
- If the number of employees defined in the application is more, say 1000, then the drop-down in the table cell will look really odd. There is a way to avoid this unpleasant behavior. I will discuss that some other day.
- Adding one row at a time and keep on selecting employees in each row is not a very user-friendly way of doing things.
You can overcome these limitations by following the second design approach described below.
Adding Multiple Existing Objects at a Time
Instead of adding a row to the table on clicking the “+” icon, you can think of launching a popup in which the user can search for existing employees.
In the popup, the user can select one or multiple users at a time and click OK. This will add the selected users to the table.
This design not only satisfies the requirement but now the user can quickly add multiple employees to the table.
But is it the optimal design?
What if all the users cannot be found in a single search query?
In that case the user will have to launch the popup multiple times to search and select the remaining employees.
This is also something that is not really user-friendly.
You can improve the user experience over here by providing an “Apply” button in the popup.
Clicking the Apply button will add the selected employees to the base table but will not close the popup. So the user can continue to search for the remaining employees without having to launch the popup multiple times.
Once the user has added all the employees, he can click on the OK button to close the popup.
You can further enhance the user experience by adding the selected employees to the base table and closing the popup if the user hits the OK button instead of Apply button.
This way the user can add one or multiple employees to the table quite easily.
These are just two ways of achieving the same objective. I am sure you can think of many other ways.
By iterating the design couple of times, I was able to find an optimal solution that can deliver better user experience than what would have been delivered by the first design solution of adding one existing object at a time.
The point you have to keep in mind is that you should keep on iterating your design till you find a solution that solves the problem at hand as well as gives a better user experience by hiding the design.
If you stop at the first feasible solution, you might not find the optimal solution.
The goal of your design should be to find the optimal solution to the problem and you can achieve it easily by iterating your design multiple times.
So is this the only way of design optimization?
No. But this surely is the first and the basic way of achieving optimization of a design.
So tell me, what is your process of finding the optimal design solution? What steps do you take while sketching the elements of your UI?
Let me know in the comments below. I will love to hear your thoughts on this.
And as always, if you liked what you read, then please do share this article with your friends. I will really appreciate that.