Most modal windows on the web take over your screen when they open. They pop up on the page and block you from viewing the content underneath until you close it.
This is sometimes useful, but sometimes it’s overkill when all you want is to give the user extra context to the content they’re viewing. At the same time, you don’t want to make the page longer to do so. If this is your case, inline modal windows are what you need.
Inline modal windows are modal windows that open inline with content without covering the page. The example above shows how an inline modal expands. Users are able to view more content without losing their page context. Clicking the X collapses the inline modal and reverts to the original state.
Had the site not used an inline modal it would’ve made the page longer and overwhelming. The content is easier to read because the user only gets more content if they expand a section.
Sometimes a modal window is what you need to keep the user focused on a task. Other sometimes an inline modal window is what you need to allow users to read your content without feeling overwhelmed.
Book
Affiliate
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.
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.
There was some interesting discussion about this pattern and the usability of it in this context here:
http://ux.stackexchange.com/questions/52615/any-research-on-the-usability-of-the-inline-modals-design-pattern
Yes, technically it’s a modeless window, but whenever that term is mentioned most designers don’t know the difference. Also, most modeless windows you see are attached to the sides of the page as a form of utility and not really apart of content.
I like the term “inline modal window” because it speaks to the characteristic that the modal window is inline with content rather than a form of utility.
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.