11 tips to make your BPM screens shine
Starting in the middle of the Texas summer, we trained a group of new hires on BPM and Brazos. The following 11 tips proved invaluable in adding some finishing touches to their sample applications.
The Section Control groups form elements that logically belong together. It is not meant to represent sub groups, and thus results in poor spacing and other layout anomalies when sections are placed in other sections. Instead, try using column headers or ribbons to accomplish the same goal.
The ‘Responsive column’ is built to correctly display buttons when multiple are placed into the same column. Giving each button in a set its own column results in irregular spacing and an awkward layout. Even when buttons need to be left or right aligned, place them in the same column and use configuration options to control their alignment.
The color of a button communicates its purpose. Not using color correctly can confuse the user, make them less productive, or worse yet lead to mistakes. As a general rule of thumb the more significant the action the brighter and more eye catching a button should be. For example, use the ‘Default’ style (orange by default) for task completion and ‘Inverse’ style (white by default) to go back to a previous screen.
Efficient use of white space and layout allows for more form components to fit into the same area. Not taking advantage of unused space inside sections, forces the user to scroll when they don’t have to and distracts them from the task at hand. Take label width and expected user screen size into account when designing form layouts.
Surrounding a column with controls inside of it (i.e. focus area) with empty columns increases the margins of simple forms that don’t need the full width of the screen. Not increasing the margins and stretching out the content of simple forms can confuse users and make a task look more complex than it actually is.
Each control in Brazos exists to handle a specific type of input scenario. Not using the ideal control for a given scenario can adversely impact user productivity and lead to confusion. (See: Which Brazos input control to use)
All input fields should only be as long (wide) as the average expected value. Input fields that are much longer or shorter than the average expected value are likely to confuse users and cause errors. Still, this guideline should not overshadow aesthetic norms. If there are multiple fields in a given section that all need to be the same length, the average size of all values should be taken into account.
Using icons in Brazos is a great way to improve user experience. The human brain is more efficient at interpreting symbols than text. Using just a few icons can increase the speed with which a user fills out a form. If those icons are not universally understood as symbolic representation of what goes into a given input field, the user will get confused, become less efficient, or worse yet enter erroneous data into the form.
Over the 3+ years of its public availability, Brazos has acquired thousands of features based on customer demand. These features are immensely valuable and most are enabled by simply checking a configuration option. For example, CSV export or sorting in a table. Still, features that are not explicitly called for by business requirements may confuse users and make them less productive.
Through the use of other applications and websites, business users have built up a comprehensive understanding of input types (e.g. checkboxes, radio buttons), common layouts (e.g. tables, responsive design), and other controls (e.g. buttons, popups). Ignoring this understanding when building BPM interfaces can result in redundant user instructions or otherwise frustrating UI patterns.
The page background in Brazos is gray while the insides of sections and tabs are white. This is done to focus the user’s attention on the content of sections and tabs. Placing controls outside of those components will yield undesirable color patterns, broken layouts, and degrade the overall quality of interfaces.