Designing Interfaces for Critical Tasks

Try to explain the job title designer and you’re likely to be met with some assumptions. You’re just an artist. You live for bright colors. And in the age-old battle of form vs. function, the former always wins in your book.

The design umbrella, however, encompasses much more. Interface, product, and user experience design remain the driving forces that cater to the critical tasks of everyday life. From renewing car insurance, to managing finances, to ordering groceries during a pandemic. Design plays a key role in the applications and services that make this all possible.

While marketing and sales design aim to persuade and promote, these applications have a different modus operandi — enable users to get the important work done.

A thoughtful approach is necessary to design a good user interface for critical tasks in everyday life. We’ll dive into this soon but first, let’s look at some common concerns and best practices.

Productivity is the Top Priority

Application use is goals-driven and as such, productivity and efficiency are key. Remember that the user flows you create may be used hundreds of times a day. Introduce anything that slows workflows unnecessarily and it’s your users who will feel the sting. To avoid this:

• Make core features plainly obvious or easily discoverable
• Keep in mind the spectrum of user needs. Some may enter large amounts of data daily. Others may only access the system once in a blue moon.
• Remember that complexity has a place and power users aren’t afraid to get in the weeds. Don’t slow them down by oversimplifying the interface.

Trust is a Must

Whether dealing with medical records, financial documents, or top-secret intellectual property, communicating security is of the utmost importance to instill and maintain user confidence. Because of this, reassuring users that the app’s sensitive data is properly protected via appropriate visual cues, clear feedback, and other devices is a must. Missing the mark here increases the potential for eroded trust and diminished user confidence in the interface.

The Stakes are Higher

Little to no room for error exists when designing interfaces. This is especially true when missteps caused by a poorly executed interface can lead to less than ideal consequences. Stakes run much higher when large sums of money, peoples’ health, and even lives are on the line.

The Design Approach

Focus on the following key areas when designing for various interface complexities and advanced user needs:

UI Considerations

Color

Color is one of the most effective ways to promote brand consistency and recognition in an interface. However, just because a certain color palette works well for a brand, doesn’t mean it will translate well to an application. When choosing color, consideration for the overall appropriateness with the tone of the application is required.

Take Mailchimp for example. The brand’s public-facing site is characterized by its use of bright yellow and playful illustrations. However, behind the login wall, things take a much more subdued turn. While the illustrations remain, the yellow splashes of color are stripped away. This change maintains the overall playfulness of the brand while shifting user focus to the important tasks at hand.

Typography

With written words making up 95% of the information on the web, typography plays a starring role in the design of any interface. Poor typography creates the potential for impeded productivity, overwhelming cognitive loads, and costly user errors.

Focusing on core tenets of effective typography promotes an enjoyable, and productive, experience for all users:

• Font Choice: Select easily readable fonts that match the overall tone of the application. Also, keep in mind that using too many fonts can be distracting. Reduce the potential for overwhelm by choosing fonts within the same family and keeping the total number of font families used to a minimum.
• Hierarchy: Using appropriate type hierarchy for headlines, body copy, and other supporting text improves legibility by making content easily scannable. When in doubt, type scales are always a great jumping-off point.
• White Space: Having too much or too little white space will both negatively impact readability. To combat this, be mindful of line-height, line-length, and letter-spacing in compositions.

Semantics

Using the right words and an appropriate tone ensures users can successfully navigate, find information, and perform tasks. With this in mind, check the witty copy at the door in exchange for clear messaging that inspires appropriate action when necessary. 

For example, button labels should make it abundantly clear what action is being performed. Empty states should give appropriate context to the content that will eventually appear. References and instructions should provide clear directions for completing tasks. 

Information Density

Information density refers to the amount of readable information presented in a single screen view. While modern interfaces have leaned heavily into minimal aesthetics, remember that less isn’t always more and simplification doesn’t automatically equate to ease of use.

An oversimplified design approach will actually slow productivity for users with advanced needs. Protect against the ills of poorly-executed information density by giving users options to control it. Configurable layouts, customizable font sizing, and keyboard shortcuts for quicker navigation all fit the bill.

To see this in action, compare the differing information density approaches for stock trading applications used by professional traders vs casual investors.

Fidelity’s Active Trader Pro application offers high information density within a configurable workspace. In addition to having a plethora of information at their disposal, users are also given the freedom to customize the layout to fit their unique needs.

By contrast, the Robinhood web interface, which caters to more casual investors, takes a simpler approach. The styling is reduced to a minimum, making use of plenty of white space and pops of their brand color to draw attention to key areas.

UX Considerations

Anticipate User Needs

Understanding users and their workflows gives way for making intelligent suggestions that anticipate their needs. This anticipation is one of the best ways to increase user productivity and overall satisfaction with the interface.

Quickbooks offers a perfect example of what this looks like in action. From the jump, the usefulness of their onboarding experience is increased by exposing users to the various features available to them. They aren’t locked into one path or forced through novice-level onboarding flows. Instead, Quickbooks successfully anticipates the tasks their users need to get done and offers a direct means for doing so.

Communicate Context with Data and Results

Charts, graphs, and other forms of data representation are a mainstay of interface design. No matter the industry, this type of data cannot afford to be misrepresented or unclear. To avoid any confusion, it is important to adhere to accepted best practices with this type of content on the web. 

Google’s Material Design data visualization guidelines offer excellent advice for creating visualizations that are accurate, helpful, and scalable.

Bulk Operations

Whether it’s edits, deletions, or some other change, bulk operations allow for heavy lifting without the strain. These are especially useful for interfaces where productivity and efficiency are a top priority. 

The Power of Friction

Applications exist to make work easier. However, making actions too easy to perform may lead to unintended consequences. Irreversible actions such as deleting an important dataset or set of documents is a tough loss to come back from. To avoid this (and the potential headaches that result), employ the power of friction to build in safeguards against human error.

GitHub’s 3-step repository deletion process offers a perfect illustration:

Multiple Paths

Make efficiency the name of the game. Instead of locking users into one way of working, offer multiple paths for completing tasks. This level of autonomy promotes an enjoyable user experience.

Take a task like data entry for example. On the one hand, manually entering a large amount of data one cell at a time offers fine control but is a tedious process compared to simply uploading an entire spreadsheet of data. Whether manually or by some automated process, give users the option to complete tasks in the way that works best for their unique workflow.

Animations

Interface animation has the ability to call attention, provide clarity, and convey relationships between content. However, even with all of its merits, motion has the potential to slow an interface down and quickly becomes a hindrance without the correct approach.

Just imagine how frustrating it would be to work in an application all day long and repeatedly have your workflow slowed by gratuitous animations.

Avoid any motion that will confuse users or impede action. Instead, be thoughtful with your approach and give users the option to turn off animation completely if they choose. This level of control goes a long way in ensuring users are able to create the optimal viewing experience for their unique needs.

Getting It All Right

The right steps taken before, during, and after the design phase go a long way in removing the guesswork and better defining the work to be done.

Interviews and User Stories

Before any design work begins, user interviews combined with card sorting exercises are a great way to determine how work is currently being handled. With this insight, you’re better able to create user stories and land on the correct feature set for improving workflows while still meeting users where they are.

Test Early and Often

Given the various complexities of interfaces, getting usable flows in front of practitioners sooner, rather than later is a must. In doing so, you’re better able to test ideas, pivot if necessary, and confirm the product being built is the right one for the job.

By following these guidelines and keeping user needs top of mind, you’ll be empowered to design interfaces that cater to life’s most critical tasks.