Designing For Data-Intensive Applications

Work in Progress - Some thoughts on designing for data-heavy applications.

Stick with a Common Visual Language

Remove unnecessary icons. Icons are a visual vocabulary and are generally "read" by the user. If it isn't clear what the icon is, or there are two similar icons, or the icon and the description/heading don't match exactly, it becomes confusing + visual noise to the user.

Similarly, headings help organize + orient the user in longer, multi-form pages.

Visual cues give the user direction on what to do, not words: keeping data in form-field-inputs-styles makes it look like the data is editable.Removing the forms (making it look more like text) makes it clear that the input is not editable. It also makes the design look cleaner.

Simplify Where Possible
Remove a lot of redundant/repeated text. The extra text actually makes it harder to understand because there is too much of it to scan, read, and process. It also makes the page look much busier, clunkier. 

Keep Things Consistent
In general, if the inputs are either a) all the same size, or b) arranged in a consistent grid, it looks cleaner. 

Also broadly speaking, grouping similar data types helps users a) read information faster and b) enter information faster. A good example is address fields: they tend to follow a similar format so most people can enter them almost without thinking. So, if you group the address fields together, the user 'sees' it as one field, not the 5 fields it actually is. Adding some space in between similarly-grouped fields helps the user make that distinction. 

Form Follows Function
Inputs with short data (i.e., Gender) should be kept short. Long input fields make it look like there's a lot to fill out.

Similar inputs should >>tab in the same direction. I.e., if "Last Name" is to the right of "First Name", then "Secondary Phone" should be to the right of "Primary Phone" and that pattern should follow across all pages... the user shouldn't move left -> right in some areas, and then top->bottom in other areas.

Form labels and input fields can be used to signify what's important as well: For empty forms, the text is now inside and the same size as what it would look like filled out (twice as large as the label). For active form inputs (ones with content in them), I did not change anything. The reason for this is so that a user can quickly scan the page to see both what is important (the patient information) and what is missing (the empty form ovals). By making the labels smaller and turning the form ovals into a simple underline, the focus is placed on the data/input rather than the label or the form itself (because the form does not change from patient to patient). In contrast, by maximizing the empty form (outlining the whole oval), the goal is to draw attention to missing information. The concern is that it is too easy to overwhelm a user when a lot of information is presented at the same time; color + size can act as a clear hierarchy for the user to quickly navigate through.

Visual Design Principles Still Apply

Things like 'keep contrast high', 'keep fonts at a readable size', 'have a hierarchy of styles' all still apply.