Adaptive Form Layouts: Tabs on the Top

If you liked the functionality of the wizard layout from last week but are looking for something less restrictive to the end user, the out of the box tabs on the top layout may be just what you are looking for.

When setting a parent panel to the tabs on the top layout each child element will appear as a section at the top of the parent panel, stacking the sections from left to right. Depending on the number of sections and the area available for display, arrows will appear at the left and right of the tabs container to allow the user to see the hidden sections. The tabs on the top layout is free flowing so users can move between the different sections without having to visit every section. This allows end users to quickly move from one area to another.

When using the tabs on the top layout consider the horizontal space, sub sections and navigation. Due to the tabs on the top adding each section to the length you may take up the all the real estate for the device viewing the form, it is best to avoid having to use the arrows to scroll though the list of sections if possible. Having sub sections within a tabs on the top layout can get cluttered quickly so it is best to leverage this layout when little or no sub sections exist. If your sections are long, then an end user would have to scroll back to the top of the section before being able to move to the next section. In this case it would be wise to create buttons the move the user to the next session removing the need to scroll back up the form.

One of the best times to use a tab on the top layout is when you always want to have content referenceable by all the tab sections. To do this, create a sibling panel above the tab panel container which would then always appear above the tabbed section. This would allow the user to reference the sibling panel regardless of what tab they were on.