Brazos UI

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.

1.Use one Section Control at a time

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.

Do.
Use sections to group similar form fields.
Don't.
Put sections inside of other sections.

2. Put buttons in the same column

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.

Do.
Put all buttons in to the same column.
Don't.
Put buttons in to their own columns.

3. Color buttons based on their purpose

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.

Do.
Color buttons based on their purpose.
Don't.
Leave all buttons as the same color.

4. Use white space inside of sections efficiently

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.

Do.
Maximize use of space inside sections.
Don't.
Leave white space or otherwise unused area inside of sections.

5. Make the focus area only as wide as it needs to be

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.

Do.
Use empty columns to increase the margins in simple forms.
Don't.
Stretch out content of simple forms.

6. Use the right input control

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)

Do.
Use the right control for every input scenario.
Don't.
Miss-use controls.

7. Make input fields only as long as they need to be

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.

Do.
Make fields as long as the average value.
Don't.
Make fields shorter or longer than the average value.

8. Use icons only if there is a perfect fit

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.

Do.
Use universally understood icons.
Don't.
Use icons that are not universally understood.

9. Only provide the user with the features they need

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.

Do.
Expose feature based on business requirements.
Don't.
Expose unnecessary fields.

10. Take advantage of user experience in other apps

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.

Do.
Assume users know how basic form controls work.
Don't.
Describe interactions that don’t need description.

11. Place all controls inside of sections or tabs

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.

Do.
Put tables and other objects inside sections.
Don't.
Leave objects outside of containers.


2016 All Rights Reserved. BP3 Global Inc.