What's the purpose of the bottom bar in popups / modal windows?

Question

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:

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.

Answer 1

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.

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:

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:

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?"):

Answer 2

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.

Answer 3

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.

Answer 4

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.