Adaptive Form Layouts: Tabs on the Left

The first out of the box layout I want to cover is the tabs on the left layout. This is a familiar layout that many people and organizations are already utilizing to help streamline different areas of content. Setting a panel to the tabs on the left layout will create each child element as a sperate tab stacked on top of each other on the left side of the parent container. This layout is like a tab separator for a binder, allowing the user to see each section from a high level. These sections are free flowing and allow the user to move between each section by choice while giving a structured overview of how the end user should navigate the form.

A strong benefit to using the tabs on the left layout is that the tabs are structured vertically. If there are many different sections an end user will still be able to see all the sections as vertical space, generally is much larger than horizontal. Also, out of the box vertical space is not truncated or hidden but rather enables the web scrolling feature so everything is visible.

A few things to consider when using the tabs on the left layout are the titles for the sections and navigation. Based on the out of box design for the tabs on left sections you should aim for no more than twenty characters for your titles, more than this and you may run the risk of wrapping issues. As for navigation, if a tab’s body is long the end user will need to scroll back to the top of the section to select the next tab to move to. It is recommended to have a button at the bottom of the section that moves the user to the next session rather than forcing the user to manually navigate on their own.

The best time to use a tabs on the left layout would be when there are more than five different sections, not including sub sections, that the end user would need to complete. A key design principle for adaptive forms is to ensure that content is visible and uncluttered for end users and forcing multiple sections into a horizontal layout can make the form cluttered. If you are wanting the structured nature of a wizard layout the logic can be built into the form itself.