Inline Modals: Show More Content Without Losing Context

by on 02/13/14 at 9:44 am

Most modal windows on the web dominate your screen when they open. They pop up over the web page and block you from viewing other content until you click the X to close it. This is sometimes useful, but sometimes it’s overkill when all you want is to give the user a snippet of information. At the same time, you don’t want to make the page long, nor do you want users to lose their page context. If this is the case, inline modal windows are what you should use.

Inline Modals: Show More Content Without Losing Context

Inline modal windows are modal windows that open inline with content without covering the rest of the page. The example above shows separate inline modal windows opening on the same page. Users are able to compare and reference other information on the page with the new information they see. Clicking the X closes the inline modal and reverts to the original content.

The page is a step by step guide on how to upgrade to a new operating system. Had they not used inline modals it would have made each page section long, and give users the impression that upgrading was a hard task. Instead the inline modals make the steps look short and simple. Users can view new details for each step at the same time without losing where they are on the page. A normal modal window would’ve only allowed users to view details for each step one at a time. Sometimes modal windows are what you should use to dominate the user’s attention. But sometimes inline modal windows are what you need to display content in a simple and efficient way.


Inline Modals: Show More Content Without Losing Context Inline Modals: Show More Content Without Losing Context

Author and editor-in-chief of UX Movement. Loves great web experiences and fights for the user.

5 Responses to “Inline Modals: Show More Content Without Losing Context”

  1. Christophe

    Feb 14th, 2014

    May be there is something that I’m missing but I see no differences between an “inline modal window”and a regular non modal window.

  2. Cameron Nokes

    Feb 17th, 2014

    That’s a great design pattern that I’ve never seen before. I wish there was a better way than a plus icon to somehow signal that the interaction would be this inline modal thing before the user clicks on it, because as of now, when I see it I assume it’ll take me to another page. Sometimes thinking something will take me to the another page is enough to make me not click it.

  3. Nick Angiolillo

    Apr 29th, 2014

    I’m a fan of this device, but this is not a “modal” pattern. Modals are UI features that force the user to interact with them before proceeding. An example is a popup that requires a user to check that they’ve read a legal notice before completing an account registration. It’s not an optional step — it’s a modal interstitial. The user has to accept it or close the window and end the process.

    So, a real inline modal “window” would be loading the modal content inline but graying out and/or disabling functionality that sits outside of the inline modal content. The user would have to interact with the modal in some way to restore the functionality they lost.

Leave a Comment