Developer.com content and product recommendations are editorially independent. We may make money when you click on links to our partners. Learn More.
Modern web apps are typically sold via software as a service (SAAS) over the internet. Many businesses also maintain custom in-house web apps that support the business. Whether your web app is used by millions of people or twenty people in accounting, your app will primarily be judged by users on the intuitiveness and ease of use of your user interface. Learn how to design better web apps with these 10 quick tips!
Tip 1: Beware Tabs
Tabs can be an incredible visual metaphor for organizing content. Their function is intuitive and everyone knows how to use them. Unfortunately, tabs can also allow lazy designers to allow forms to get out of control and become confusing messes.
Never use tabs to break up an overly complicated form. Focus instead on making the overly complicated form less complicated. If it must be too complex to live on a single page, break it up into a wizard.
Tip 2: Keep Saving Behavior Consistent
Never mix auto-commit on change behavior with behavior that only saves when the user clicks a save button. Having used the save button, the user will no longer trust that the auto-commit will do its job. Likewise on other types of input they may overlook the save button and assume the auto-commit will take care of it. Whichever method you choose, stick with it and be consistent.
Tip 3: Consider Where You Put Your Delete Buttons
Unless your users need to delete things very frequently, you should consider putting your delete buttons as a subtle action on your edit forms. Putting the delete button in the search results can add unnecessary complexity to your search forms and over-emphasize an action you probably don’t want your users to do very frequently.
Tip 4: Always Provide Field Labels
It has become a popular trend to use placeholders instead of field labels in web applications because the resulting application is cleaner-looking. Unfortunately as soon as the user types something in the field the placeholder labeling is gone and the user is left wondering what data is in what field.
Floating labels have come forward as a new popular solution and split the difference between the cleanliness of user placeholders versus the real-estate of using labels.
Tip 5: Ask the Right Questions When You Get New Requirements
Most end-users don’t know how to design software but they frequently make software design requests. Ask why they need a new thing, understand what they are trying to accomplish. Then instead of just blindly delivering the new feature, deliver a better solution to the underlying need.
Tip 6: Balance Intuitiveness with Efficiency
When a user first uses your application they need to be able to figure out what to do with a minimum of bumping around. Users will never consult the documentation and in most circumstances they won’t get any training. That said, over time users will transition from trying to learn how to use your application to needing to use it very efficiently to get their work done for eight or more hours a day.
Make your application easy to pick up and use by keeping your screens simple. Layer in efficiency shortcuts in ways that are subtle.
Tip 7: What Happens After I Save?
Always think about what happens after the user clicks save and commits the action. The result must be consistent and the user needs to be placed in a location that makes sense. If your application has the typical search-edit-save metaphor, the right thing to do is to place the user back on the search results page as they are probably ready to move on to the next item on the list.
If the user has completed a multi-step process like a wizard, they need a completion page that shows what was saved and gives them the option of where to go next. Ending a wizard on a confirmation page with no next action or step suggested can be confusing to novice users.
Tip 8: Where Am I?
In a larger web application, there can be dozens or even hundreds of screens. The user needs to always have a consistent way of knowing where they are in the application and what record they are editing. This can be accomplished by highlighting the visible navigation to show the user how they got to where they are in the application.
You can also use breadcrumbs to describe where in the application the user is. Breadcrumbs can also show each thing the user selected to get where they are and to be able to click one of those items to get back to where they came from.
Tip 9: Don’t Obsess Over the Scrollbar
In the era of desktop applications the UI was typically designed to fit on a single screen with no scrollbar. The vertical scrollbar isn’t a bad thing in a web application as long as it is visible and clear that it exists. As a user tabs through a form, it will even automatically scroll as appropriate just based on how the browser works.
Tip 10: Don’t be Afraid of Whitespace
There is a natural tendency to try to make everything fit. As requirements grow, developers shoehorn in more and more functionality into a finite space. What’s left is an overly complicated application that ends up looking complicated and confusing. Use a balanced amount of whitespace to keep your application looking simple and approachable.
Conclusion
Users judge applications by the UI even more so than the functionality. If a user thinks the application is easy-to-use and makes them feel good using it they will use your application over the alternatives even if the alternatives might have more functionality. Keep these 10 tips in mind when you design your next web application and your users will thank you!
About the Author:
David Talbot currently works as a Principal Architect at EverBank. He has over 15 years of experience in the software industry and specializes in building rich UI web applications. He is also the author of Applied ADO.NET and numerous articles on technology. He can be reached at david@legendarycode.com
