3

I recently read an article on a design pattern called "inline modals" here: http://uxmovement.com/content/inline-modal-windows-display-new-content-in-page-sections/. I think it's a good pattern that elegantly solves the context-killing and disruption issues that traditional modals have.

I was wondering if there is any usability research on these or if anyone has observed the usability of them first hand and could share their findings? If you had any other examples of inline modals in the wild I would appreciate that as well.

One tangental thought I had with inline modals in Apple's implementation below is that I wonder if we confuse users with small icon buttons (especially plus/minus icons) that always seem to do different things. In one application they could add/remove items, in another it slides content up/down, here it activates a small, inline modal area.

A live example of an inline modal can be found here: http://www.apple.com/osx/how-to-upgrade/. Picture of above URL:

Step 1 is the starting state, the section below it (step 2), is shown with the inline modal activated. Clicking the close button will bring it back to the same state as step 1.

Improve this question
3
  • 1
    I don't have any sort of research reference for you, but I can say that, personally, something that I like about traditional modals is that they are much easier to return to the original content. with this method, i have to click the x to return. with traditional modals, i can click outside the box, hit escape, possibly hit enter, etc. chances are i don't have to move my mouse or think about it at all. My only complaint against this.
    – JHixson
    Feb 20, 2014 at 22:43
  • @JHixson actually, traditionally, the very definition of 'modal' requires that you interact with the modal and that clicking outside of it will do nothing.
    – DA01
    Feb 21, 2014 at 3:13
  • Also, that's a confusing article. I'd never call what they are describing as modals. Maybe 'show/hide layer' or 'contextual help'.
    – DA01
    Feb 21, 2014 at 3:14

1 Answer 1

Reset to default
5

Small Nitpick

There are 2 types of dialogs: modal and modeless (or non-modal).

A modal dialog blocks the content beneath and only allows you to interact with it.

A modeless (or non-modal) dialog does not block the content beneath and allows you to interact with it, as well as the content beneath.

Therefore, saying that a dialog is inline modal is really just a fancy way of saying that it is modeless (or non-modal) because it does not block any content due to it being inline and you can interact with it, as well as the content around it.


Usability

As far as the usability goes, I think that it would be very subjective and would depend on how the designer/developer chooses to implement it. It could be very smooth and intuitive. However, it could also be horribly annoying and/or confusing.

For example, like @JHixson pointed out in the comments with respect to your Apple example, you have to click the X on the inline modal to return to the original content. That's annoying!

The intuitive route would be to allow a mouse click or key press, usually Esc or Space, to return you to the original content so that clicking the X isn't the only option.

Also, take a look at the link itself. What does it look like? A link. What do links do? Take you somewhere else. Or does it? The plus icon helps, but still you aren't very sure what to do. That's confusing!

The intuitive route would be to make it look less like a standard link. Separate it with a different color; better wording of the link itself; a different icon, maybe a down arrow? There are many different ways to improve the usability.

Come full circle to say again, I think that it would be very subjective and would depend on how the designer/developer chooses to implement it.

Improve this answer
4
  • 3
    I think that's a very important nitpick!
    – DA01
    Feb 21, 2014 at 3:15
  • 1
    @DA01: Totally agree. Absolutely a very important nitpick. Terminology is confusing enough as it is, it doesn't help when people start misusing terminology and are thereby confounding issues even more.
    – Marjan Venema
    Feb 21, 2014 at 10:23
  • @CodeMaverick, thanks for the great response. I like the distinction between modal vs modeless. In the context of Apple's website, I wonder if it would have been better to just have the "modeless" content slide down or something than make the user click around a bunch? I guess it would take some user testing to really make that call.
    – ccnokes
    Feb 21, 2014 at 18:36
  • @ccnokes - No problem! I think Apple could have easily done that. Just a simple slide up/down that was toggled by mouseenter/mouseleave or something to that effect would've been much better.
    – Code Maverick
    Feb 21, 2014 at 18:37

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.