Side Panels - 2018-2019
When I started at eFlex Systems, the application was engineer and developer designed. Parts of configuration were here, some there, and some was- go do this-go there-do that-then come back. In addition, much of the configuration was dome on modals—which divorces itself from its content with a background screen over and disabling everything except the modal content. This is great when appropriate, but a modal is not always appropriate. There are better ways. I had already started patterning some of the new design screen (e.g. JEM, WIE, Andon) with configuration on right-hand side-panels. The side panels DO NOT divorce the content. In addition. the shareholders hated the modals.
Long story short, most modals were transferred to side panels, and side panels became the default here after. The example above showcases the new tab pattern to do segmented configuring, with the controls above the tabs pertinent to the entire task at hand.
In the example below with the callouts, all the pertinent configuration was consolidated onto one Station Options side panel from at least three seperated locations. In the example below with the callouts, all the pertinent configuration was consolidated onto one Station Options side panel from at least three seperated locations.
1- “Station Options” tells what this configuration is for—station options. “OP4670” identifies what station this configuration pertains to.
2- CLOSE buttons. One spelled out, the other (left border indicator) subtle. Actually clicking the entire left border will close the side panel in a progressive disclosure manner.
3- The accordion arrow is accent orange when opened, gray when closed. A subtle and helpful micro-interaction and visual indicator.
4- The accordion closes the top section which is common to all the tabs below. Once filled out, that real estate can be granted to the bottom section if needed.
5- “Content is King!” The labels should be subordinate to the content—smaller and lighter text. This allows the labels to lead the viewer to the content then recede—instead of fighting for attention with the content or overpowering the King.
6- Disabled or non-pertinent fields are shown 50% opacity and inoperable.
7- Tab Bar with accent orange underline.
8- Section header. It could be bold, but I didn’t want it fighting content so I gave it a level of hierarchy with keeping it light but all caps.
9- Checkboxes- When unselected, light gray text as disabled. When selected, dark text with an accent orange checkbox.
10- Tag-Based Authorization. TBA allows a quick, easy, and clean way to allow authorizations. Select from a dropdown to authorize, click the “x” button unauthorizes.
11- Section dividers. The darker rules divide sections. The lighter rules sub-divide within sections.
12- “ADD” Text Buttons - Clearly states function while saving button “container” space. The accent orange coloring also designates them a degree of importance.
13- White input fields against a darker background helps the eye travel from one input to the next. White on white may overall appear clean, but may not be the best "productive" solution. Often white buttons on white group boxes on white backgrounds are often slower to navigate because it takes more cognitive power to decipher the landscape. Is aesthetics more appropriate to this user, or the ability to run through it fast and efficiently?
14- Blue text in this application indicates “model-specific”.
15- Only selected rows (grayed row background) in the data grids show the editable fields within, thus keeping a nice, clean, and easily read appearance. The exception is the trash can icon which user feedback indicated it was extra work to have to first click a row to delete it, as deleting rows is a pretty common action.
