Screen real estate is becoming more valuable as we see more users viewing websites from mobile, tablet, and netbook devices. When there is little screen real estate available and a large quantity of information to convey, the content of the page may be altered to contain less information. This is less than ideal, as users come to the webpage precisely for information. Alternatively, the content of the page may be broken into smaller subsections that result in a set of sub-pages. This can cause unnecessarily complicated navigation, as more than five levels of hierarchy become a challenge for users to understand and keep track of. Increasingly, designers are making use of interactive controls as an alternative to these methods. An interactive control can be used to show subsections of the information to the user at a time. Three interactive controls that are used frequently are tabs, accordions, and scroll areas.
Used properly, tabs, accordions, and scroll areas can allow users to see more information without scrolling down the webpage. By interacting with the control, the user can see similar kinds of information in the same area of the webpage. Generally, these interactive controls are not suited for full-page interactions.
So when should you use tabs? When should you use accordions? Here is a short review of how these interactive controls compare in orientation, label size, content size, content type, and user browsing versus selection.
Tabs should always be oriented so that the labels of each tab read left to right across the top of the tab area. Likewise, scroll areas should scroll left to right. Accordions should be oriented so that the labels of each section stack up and down with one another. The accordion area should also open up and down.
The controls vary in flexibility of label size. Tabs are fairly rigid in label size. There is a trade-off between fewer tabs with longer label sizes and more tabs with shorter label sizes. No more than eight tabs can fit horizontally on standard screen resolution. Both accordions and scroll areas provide greater flexibility of label size. Accordion label sizes and scroll area label sizes are limited by the width of the actual accordion or scroll area control.
Although different amounts of content can be squeezed into the controls, each control has a unique propensity for different sizes of information. Tabs can generally hold more content, and the tab control itself may be large. The reason for this is that the horizontal orientation of the tab labels and the selected tab signals to the user where they are in context of the whole tab control. Accordions generally hold less content. Accordions hold less content because of the vertical stacking of accordion labels. For screen resolutions with a wider width and narrower height, less accordion labels fit on a single screen. Depending on its use, the scroll area can be used with different content sizes. An example of a greater amount of content is the banner on a homepage. An example of a lesser amount of content is an area to scroll though related media.
All of the controls should be used to display information that is not absolutely imperative for the user at all times. A designer would not want to risk obscuring important information, such as the end of the date of a sale. While tabs and accordions are better suited for static informational content, scroll areas are generally seen as more lively and animated. Because of the animated aspect of scroll areas, they often contain promotional or ad content.
User Browsing versus Selection
The different controls support, in varying degrees, the user browsing through information and the user being able to select which piece of information is pertinent to them at any point. Tabs allow the user to browse through different information and select a relevant piece of information at any time. Similar content and layout of that content within the tabs allows users to easily browse through several similar pieces of information contained in separate tabs. Always displaying the tab labels at the top of the tab control allows users to also select a piece of information of interest particularly to them. Accordions also allow the user to browse through different pieces of information and select important information at any point. They are slightly worse than tabs at allowing users to select information at any time, as the accordion labels may be spread out between the upper extreme and lower extreme of the control when a middle accordion label is selected. Scroll interactions are mostly designed to allow users to browse through pieces of information. Most scroll interactions do not provide more information about the content of the pieces of information that they hold beyond the acknowledgment of their existence. This can be seen in the number links “1 2 3 4″ often found in the upper right-hand corner of scrollable banners.
Tabs, accordions, and scroll areas may all be used to address fitting a large quantity of similar kinds of information in a single smaller area of screen real estate. Keep orientation, label size, content size, content type, and user behavior in mind as you select a control for the best user experience.