Also known as: Accordion, Expand in Context, Inlay, Inline Expose, In-Page Expand, Inplace Expand
What?
Show only the most essential features/content up front, and hide the rest. Reveal secondary elements “inline” when requested by the user.
Example Videos
Inline Details
Inline Dialog
Accordion / Inline List
Use When?
- 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).
Why?
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.
How It Works?
- 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.
History
Janne Lammi wrote this pattern. It is inspired by Jakob Nielsen’s Alertbox article: “Progressive Disclosure” and many other articles and books on the topic. See ‘References’ on the side navigation panel for full list.
Pattern Gallery
Show Your Pattern Examples Here!
More photos in Flickr group "UIPatternFactory.com" tagged with inline-expand
This website uses IntenseDebate comments, but they are not currently loaded because either your browser doesn't support JavaScript, or they didn't load fast enough.
0 Responses to “Inline Expand”
Leave a Reply