I have had the opportunity to work with some inspiring clients during the last year. People who are ready to think outside the box and focus on delivering the best experience for their users. I want to share three simple, yet essential, ideas you should keep in mind when creating modern user interfaces.
Since I mainly work with the excellent KnockoutJS MVVM framework and the Twitter Bootstrap CSS framework I quickly saw the benefit of creating reusable plugins for dealing with these tasks. This led to a small project called KoLite that me and my good friend John Papa released on Nuget.
1. Keep it clean stupid
To be truly productive you need to minimize all distractions that are not essential to the core task. This means a user interface without hundreds of buttons and elements always visible. However, you still want quick access to your secondary tasks without requiring too much of an effort. Here is a (greatly simplified) list editor:
Instead of showing the
If you are targeting touch devices you might want to rethink about how to implement this since they are not as hover friendly as your regular desktop browser is.
2. What the hell is going on?
The most annoying thing as a user is to not know what is going on – am I waiting for something or has the program crashed? I usually start my clicking frenzy after 2-3 seconds if I do not see some sort of activity indicator spinning somewhere. My rule of thumb is if you are executing an action that does not finish immediately (<100 ms) then you must inform the user what is going on. Check out what happens when you remove an article from the list:
This is my preferred way of showing an activity – inside the UI element that triggered the action. This applies to
buttons as well as
text boxes and
drop down lists. I try to avoid the use of activity indicators that blocks the whole UI unless they are needed (and they rarely are).
You should definitely check out the activity indicator in KoLite. It will make implementing your activity indicators a piece of cake.
3. Modal dialogs are so 2002
I try to avoid modal dialogs in favor of inline editing wherever possible, mainly because of the following reasons:
- They block the rest of the UI, which means if I want to navigate elsewhere or access some other information on the same page, I need to close the modal dialog (this usually means I lose any information entered in the dialog form).
- It makes it difficult to edit multiple items at the same time, something that I find more and more useful every day.
- Using dialogs does usually not work as seamlessly as inline editing when working with frameworks like KnockoutJS.
Try the inline editing below, together with the activity indicator I think this provides a clean and intuitive UX:
Keep in mind that allowing for multiple items to be edited at once may require you to handle cases where there are dependencies differently.
The key to good user interfaces is a delicate balance of design and productivity. It requires a lot of thought, iteration and testing before finding the sweet spot between a clean, responsive and and yet powerful UX.
Carry these simple rules with you at all times:
- Keep the UX clean, do not be afraid of white space or larger font sizes.
- Never keep your user waiting in the unknown, show what is going on – always.
- Avoid blocking the user interface at all costs, the user will appreciate the freedom.
- Use frameworks that will help you implement features like this without stealing your time. KoLite is one example.
Feel free to look at the jsFiddle that I made for this article. I also recommend checking out John Papa’s awesome course on Single Page Apps with HTML5, Web API, Knockout and jQuery where I helped out on some of the UX work and many of these ideas are used.