Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

There seems to be a common pattern where the bottom of a modal window contains an area that looks slightly separated from its content. I'm trying to find out where this habit comes from, and what usability principles are behind it.

Why or when would you use them? Even when there aren't any buttons in there? Where did this come from?

Modal windows (or popups in general) have a lot of quasi-tactile qualities. They seem to break out of the regular flow of an application, and lie on top of it. Does this have something to do with the color of the bar at the bottom of this area? Is there some kind of real-life item we're mimicking?

Some examples:

Facebook modal

Pinterest modal

Google's modal

As a side note; accidentally all examples are social networks, but it happens elsewhere too.

A little more detail about my use-case

I'm currently at a point in a project where we're deciding whether or not to drop that area, as the separation takes a fair amount of space away from the content of the modals. We have a fair few different use-cases, ranging from T&C to contact forms, and some more complex functionality coming as well.

Some of the new functionality is part of the process of entering certain user-generated content, consisting of about 3 or 4 steps, some having buttons at the bottom of the modal, some without.

share|improve this question
    
Physically, that's always been the space for buttons/user interactions. That's a holdover from desktop GUI days. Aesthetically, the visual bar that contains them is just a trend--likely stemming from a few common front end UI libraries (like jQuery UI and Bootstrap) which help propagate UI style trends. –  DA01 Nov 26 '13 at 18:06

4 Answers 4

up vote 18 down vote accepted

The idea behind this bar can be traced back to Gestalt's law of similarity which states:

Elements within an assortment of objects are perceptually grouped together if they are similar to each other.

An example of Gestalt law of similarity

This is why you shall see two columns in (a) and two rows in (b). The latter also demonstrates that colour wins over shape (in this specific example at least).

In some of the screenshots you've provided the similarity is often in the background.

Another way to look at this is an example of the law of common region, which states:

Objects that are enclosed within common region are likely to be perceived as belonging in a group, regardless of similarity or nearness of constituent objects.

Like in this illustration:

A box containing items, with more items outside the box

By separating groups using border lines (generally more noise) or colour, you promote the logical grouping of graphical elements (what's in the group and what's outside it).

It is worth noting that by grouping items together, you also separate them from items in another group.

Examples

In the dialog box, the bar separates content from interaction. On the menu, it is simply used for highlighting:

Pinterest Example

In the case of Google, in the top dialog the 'bar' separates the actual content from the type of content to be shared (I can't see anyone understanding this without some visual separation).

In the bottom dialog, the differentiation of the upper and bottom regions separates data manipulation interaction from task/progress interaction. Also the bar buttons will close the dialog, where all other interactions wouldn't; if you ask me, the email checkbox shouldn't be in that bar, but below the To field (although I can see the reason it is there - "just before you dismiss this dialog, do you want to email the people as well?"):

Google screenshot

share|improve this answer
    
By that reasoning, shouldn't they NOT be in a separate area, since they relate (in case of a contact form for example) to the content of the box? In other words: so why/when should they be grouped together in the context of a modal window? –  Dirk v B Nov 26 '13 at 1:10
    
I've edited my answer to add examples. –  Izhaki Nov 26 '13 at 1:33
    
excellent answer with oodles of examples - thanks! –  Erics Nov 26 '13 at 8:25
3  
Kiorrik: they should be in a separate area, since they are buttons affecting the WHOLE dialog, while the choices in the body (as well as the information) are choices WITHIN the dialog, hence they are two different groups –  magnus.westrom Nov 26 '13 at 8:50

This is a pretty common way for calling out the tasks for the modal you have open, to bring more attention to them. I don't think its necessary to have the bar a different color if your task buttons stand out.

share|improve this answer

Actually the accepted answer does not show one main reason why it has been made this way.

More than visual perception, putting a fixed bar at the bottom of a modal popup which has actions (like "OK" button in your examples) will let the user see the possible actions even if the content section is too big to fit in a small screen -->There is a scrollbar.

By doing this way, even the smallest screen size can see the action button without having to scroll down to the end of the content.

Otherwise it would be very confusing if the user had to scroll in the content before he could even know there was an action associated to it.

This design makes it very clear and the main actions will fit in the bottom bar, anytime, regardless what part of the content you are reading.

share|improve this answer
    
There are some amazing answers here that dive into Gestalt and visual fundamentals.... I think the simple answer is the main reason. The actions are always sequestered to the bottom for continuity and the fact the modal content may scroll. –  Itumac Mar 28 at 14:07

To answer your other question "Where did this come from?": the real-life item we mimic with this is your standard index card clipped to a note.

The Gestalt law applies in real life because we have depth perception that alerts us that the index card is not part of the note below. With the emerging standard of flat OS, this becomes a more valid question.

Even Apple has been slow to the draw on figuring out which interfaces are still pertinent enough to mimic. Certainly, the dial telephone influenced the early iPod interface, and the datebook-style calendar was among the last iOS objects to be updated.

One thing my long experience in UX has taught me: everything is up for debate.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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