Inline Expand

Show only the most essential features/content up front, and hide the rest. Reveal secondary elements “inline” when requested by the user.

Travelstart flight booking service

BBC: Tools for customizing the page are hidden until the user needs them.

Muxtape: Content is divided into sections, and only one section is visible at a time.

What problem does the pattern solve?

  • There are too many screen elements (features, content, options etc) to comfortably fit on the page.
  • Most users won’t need all the elements all the time.
  • There are not large amounts of additional elements to be revealed (Otherwise consider using modal Overlay instead to avoid heavy page jumping).
  • It is important show additional elements in context and without hiding anything else on the page.
  • You don’t want to interrupt the user (If you need to get user’s full attention, use an Overlay).

When to use it?

  • There are too many screen elements (features, content, options etc) to comfortably fit on the page.
  • Most users won’t need all the elements all the time.
  • There are not large amounts of additional elements to be revealed (Otherwise consider using modal Overlay instead to avoid heavy page jumping).
  • It is important show additional elements in context and without hiding anything else on the page.
  • You don’t want to interrupt the user (If you need to get user’s full attention, use an Overlay).

How to use it?

  • Make a split between primary and secondary elements.
    • Figure out which elements are the most important and most commonly used for the task the user wants to focus on, and which are less critical, rarely used.
    • Keep the number of primary elements as low as possible.
    • Don’t put complex items on the primary group.
  • Show primary elements up front, and hide the rest by default.
    • Let the users decide if they need secondary elements or not.
  • Provide a simple way to access secondary elements and invite users to use it.
    • Use a link or button for revealing additional elements, and label it clearly.
    • Use icons with the link/button that describe the behavior: Chevrons, arrows, plus and minus controls, etc.
    • In addition, you can use Tooltip Invitation to help users understand what will happen if they click the link/button.
  • Expand the minimized part of the page.
    • Secondary elements should slide out seamlessly, without a page refresh.
    • Expand/Conceal should happen very quickly, in less than half second.
  • Use transition to help users notice what changed.
    • Show a transition effect when secondary elements slide out or in.
  • Make it easy close secondary elements.
    • Users might need secondary items just for a while.

Why to use it?

Inline Expand applies the principle of progressive disclosure, which is an effective UI design technique for keeping the UI clean and simple without sacrificing functionality. Inline Expand allows focusing on the essential, but makes it easy to access additional features and content when needed.
Reasons for using Inline Expand include:

  • Doesn’t interrupt users’ flow. Instead of going to a new page, additional elements are revealed within the page.
  • Simplifies the UI and saves screen real estate.
  • Saves time and helps users avoid mistakes because there is less stuff to scan and learn.
  • Doesn’t hide anything else on the page (Unlike Overlays).
  • Keeps the context.

Accessibility

Sources

This pattern is inspired by “Inlays“ in “Designing Web Interfaces: Principles and Patterns for Rich Interactions“.

Useful links

Example images (4 examples)