How empty space killed the functionality of a corporate app
Spacious. Minimalist. Clean. A large amount of empty space has become a classic technique when designing applications for consumers.
And it’s not that I hate this trend. Effective use of empty space is attractive and can significantly improve the usability of a simple interface. Long live the empty space!
But what about complex interfaces? Enterprise application developers understand what I mean: control panels that support innovative technologies, information-intensive logistics systems, and accounting systems with a large amount of data. These are the tools that our users use every day to do their work.
Let me tell you a sad story
The main character of this story is a UX designer of a large high-tech company. He needed to redesign the internal control panel, because the panel was ugly, difficult to study, and full of content on all screens.
Therefore, the designer solved the problem by relying on modern consumer applications. And he had good intentions.
With the new design, it was possible to simplify each screen. He split the huge pages into smaller pages to make it easier to focus. And used a step-by-step presentation of information to hide supposedly less important information. And since modern users don’t mind scrolling, there was an empty space in all the usual places – around titles, content blocks, and table rows. The space was magnificent.
But users simply hated the new system. Of course, the old system was ugly, but it had everything you needed – and right at your fingertips! Their work was evaluated by performance indicators, and required speed – they worked in a technical support call center. They didn’t have time to click or scroll to find information, the clock was literally ticking.
In their opinion, the redesign was not just pointless, but hindered and irritated. This continued for a month until the company got rid of this redesign.
Read also: how do I know that your design is complete?
What conclusions can be drawn?
Big business means a lot of data. And thousands of employees need to quickly navigate through this data without wasting time on long interaction with the interface.
Agree, you would not appreciate a dictionary containing only 10 words per page, because to search for a word you would have to scroll through a huge number of pages!
But that doesn’t mean that your interface should be terrible.
A well-designed data density can display a huge amount of information on each screen, while maintaining a clear and scanned hierarchy of content. If everything is done correctly, users can quickly and accurately access the necessary data. This will not affect their ability to read text or interact with the app as a whole.
Here are some recommendations on how to increase data density without reducing the modern aesthetic of your app.
First try reducing the amount of data
Before you start reducing the font size to fit more data on each screen, see if all this data is important. Ask yourself:
Can I delete extra data? Many systems randomly display the same data several times with small differences (massive tables are the place to start looking for duplicates).
Are there things that users really shouldn’t see right now? If you don’t know, ask! Find out if they are using everything that is provided to them.
Will I improve the design by grouping related information? Not every discrete data item always needs a separate table cell, even if it is already stored in the server system. Find out where you can reduce visual complexity by combining elements. For example, enter the customer’s first and last name in the same field.
Read also: 5 best free design tools for non-designers
Difficult to scan
Easier to scan
Use the standards of typography
“The interval is necessary for fast reading of long absolutely meaningless lines, such as serial numbers. It is also useful for shorter strings, such as phone numbers and dates.”
– Robert Bringhurst, ” Fundamentals of style in typography»
The appropriate typography is very important in a corporate application. Font weight, kerning, and spacing affect how quickly and easily users can scan information.
Try to use a font with the same width for numbers, which is necessary for convenient comparison of numbers between lines.
Consider using decimal alignment of numbers that represent currencies when it is important to allocate dollars and cents.
Keep the line height narrow, but be careful to use enough empty space to clearly separate objects.
Approach the color consciously
If possible, neutralize the color of less important content. Remember that using the usual palette in the design makes the color more effective and understandable for perception. For example, highlighting links in the text in blue, or red lines that signal an error.
In the example above, note that one cell in the table is highlighted in red. It is difficult to miss due to the absence of other bright colors. Rows suffer slightly in terms of horizontal scannability, but this makes it possible to scan the entire table. Think about what is more important for your app.
Use less ” furniture»
Discussing the creation of a more readable tables Robert Bringhurst notes:
“For comfortable movement in the typographic space, there must be a minimum amount of furniture (labels, cells, points, and other guides) and a maximum amount of information.”
– Robert Bringhurst, ” Fundamentals of style in typography»
As you increase the density of your app, think about what elements on your page are essentially aesthetic and not important for the internal logic and visual structure of the page.
Read also: Top web design trends in 2018
Instead, allow users to export data
Sometimes you just can’t keep enough data density. When working with large data sets (long lists, complex tables, or a large number of result pages), the best solution is to allow users to move this data to another tool where they can interact with it in a different way.
Consider giving users the ability to export the data they are viewing, or an extended set of them! What if such an export (via XML, XLS, JSON, or CSV) can include more data than you can fit on the screen?
Don’t forget about touch interaction
If you can’t rule out touch interaction without hesitation, don’t forget about the minimum size of touch targets. For example, in Material Design, there are good recommendations for the location of touch targets, which you should definitely familiarize yourself with.
Check out the MaterialDesign updates
In recent MaterialDesign updates, Google has added new standards that increase data density, making enterprise applications much more convenient. They have well-designed, specific recommendations that contain many great examples of how density can affect your layout.
Functionality is always above form
Corporate designers can bring a lot of value to consumer design, but functionality should always be our top priority. Users have no choice but to use the tools we design. After all, if they decide that the system is not usable, they can’t just install another system. That’s why we should always put performance first.