The Inlay Design Pattern
Inlays are a great way to condense details while remaining in the same context. This design pattern hides information to save room for overview content and then exposes it when a user initiates the inlay. Inlays typically work by expanding the area being viewed to show more information, navigation, inputs, etc.
Kayak.com uses inlays for its flight options. After a user searches for a flight they are shown a series of options. If the user wants to view additional details regarding the flight they can click the “details” button below the overview.
The inlay design pattern is an alternative to presenting additional details on another page. It is also an alternative to an overlay, which is a design pattern that pops up on the screen.
Because this pattern expands when initiated there is the potential that users will lose their place on the screen. Providing a subtle animated transition is a way to remedy this issue.
When not to use
The user should be taken to a different page if there is an abundance of material to be presented. Alternatively, do not use an inlay if there isn’t much content to be concealed.
