Best Practices for UI Design
Client-side front-end frameworks have become powerful tools in recent years. Many of these frameworks have a low learning curve and are simple to install and use. Along with companion CSS/component libraries, it is easier than ever to spruce up your interface with all the bells and whistles. As tempting as that might be, a well-designed and thought-out user interface (UI) is essential to maximizing user experience.
Whether you are developing a simple web app or sophisticated enterprise-level software, the core principles for good UI design are the same. You should always develop with your end user in mind. Your user should not have to hunt for information. The interface should not be clouded by unnecessary features. The application should be fast, responsive, and intuitive. The final product should be ‘delightful’ (to use a UX term). Below we outline some best practices in designing user interfaces that maximize your user’s experience and make your UI as easy to use as possible.
Understand your user’s needs
To develop with your user in mind, you first have to know your user. User stories are a good way to go about this, setting a foundation for who your users are, what they want, and why. It’s a good idea to ask the following questions, and to keep coming back to them throughout the development process:
- What is the purpose of the application? What needs/goals is the application looking to fulfill?
- What are your user’s typical time constraints? Are they going to spend a long time on this application or just poke in now and then?
- How comfortable is your user with technology and how similar is your application to others they may already use?
- What are some common frustrations and difficulties that your user might face and how can you proactively address these concerns?
Balance functionality with visual appeal
Of course you want your application to be visually appealing, but it’s important not to compromise usability or functionality. Animations look awesome but are not always practical. Worse, they can distract from the content and confuse your audience, potentially disrupting their workflow. When in doubt, keep it simple. And certainly keep the design consistent across the application.
That being said, a good style guide goes a long way. 2018 design trends point towards a minimal style with vibrant color palettes and no borders. Many visually appealing applications make good use of white space while playing with fonts, colors, and sizes to give the page dimension and complexity (think of the Google homepage). Cards continue to dominate the layout of web and mobile applications and are a good way to add hierarchy to information.
Implement Visual Cues
Another way to make your UI design more intuitive is to implement visual cues along the way, so the user can see the state of the application as it progresses. It is important for the application to communicate what is happening. Your user should be informed, in an unobtrusive way, of their location in the app, actions they’ve taken, changes in state, necessary next steps, and errors.
This is especially important in business applications where you may have multi-channel workflows. With the efficiency of business systems being the top priority, you should automate processes as much as possible and make decision-making steps clear. The user should be seamlessly led through the workflow, with each task they need to complete clearly emphasized.
Web applications provide straightforward examples of this concept. E-commerce sites often use a context pattern that shows the buyer the different stages of the purchasing process, highlighting their current position:
MailChimp lets users know immediately that their email has been sent, a vital and comforting step if the user is managing large campaigns.
Here are other visual cues you can implement to enhance user experience:
- Use progress bars to let users know data is loading.
- Break up pages into blocks or clearly defined areas (cards are great for this purpose).
- Organize sections in a hierarchy that shows how each item is related to another (think parent-child-sibling relationships).
- Offer suggestions in search bars, navigation menus, bottom of pages, etc. to help point the user in the right direction.
Pinpoint weaknesses in the application and apply solutions
When developing a new application, it’s important to think through the UI’s functionality and anticipate potential sore spots in the design. For existing applications, determining UI weaknesses can be done through usability testing. Usability testing determines how easy and intuitive an application is to use. Good user testing lets you proactively apply solutions to UI flaws.
Some examples:
- Can navigation be simpler? Provide several routes to the desired target to reduce the number of clicks.
- Are users not clicking on the call to action items? Implement different colors or minimize other features to highlight a button, icon, or area.
- Is part of the application tricky to decipher? Add onscreen guidance that walks the user through the product.
Don’t Ignore Standards
An important take-away from this article is to keep things simple, remove clutter, and increase functionality and usability. To achieve these goals, don’t ignore the standard patterns and designs that users have grown comfortable with. When creating enterprise-level or proprietary software, you will want to rely on the same patterns that users expect to see, similar to the web sites, mobile apps, and other popular applications they use every day.
Designers love to create and reinvent. While design innovation can certainly lead to positive outcomes, be wary of changing tried-and-true patterns and visuals that make an application feel familiar and easy for a new user to learn. Love it or hate it, the hamburger menu is here to stay, as users know that it leads to more navigation options when clicked. This is also why the menu bar in Google docs looks very similar to Microsoft Word’s menu prior to Vista.
Measure Data
While user research and testing provide a solid foundation for feedback about an application, setting up analytics and continually measuring data is key to finding out if your app is performing as expected, reaching its goals, and accessing the correct audience. Google Analytics is a great tool for obtaining behavioral data, and there are plenty of other options in the market, including Mixpanel and Amplitude.
This article originally appeared in my company’s blog. Check us out at: eikospartners.com.
