Какова цель нижней панели в всплывающих окнах /модальных окнах?

Кажется, что существует общий шаблон, в котором нижняя часть модального окна содержит область, которая выглядит слегка отделенной от ее содержимого. Я пытаюсь выяснить, откуда эта привычка, и какие принципы юзабилити стоят за ней.

Почему или когда вы будете использовать их? Даже если там нет кнопок? Откуда это взялось?

Модальные окна (или всплывающие окна в целом) имеют много квази-тактильных качеств. Они, похоже, выходят из обычного потока приложения и лежат сверху . Связано ли это с цветом панели в нижней части этой области? Есть ли какая-то реальная вещь, которую мы подражаем?

Некоторые примеры:

Facebook modal

Pinterest modal

Google modal

В качестве побочного примечания; случайно все примеры - это социальные сети, но это происходит и в другом месте.

Немного больше о моем случае использования

В настоящее время я участвую в проекте, где мы решаем, удалять или нет эту область, поскольку разделение занимает достаточно много места вне содержания модалов. У нас есть несколько различных вариантов использования: от T & C до контактных форм, а также более сложные функции.

Некоторые из новых функций являются частью процесса ввода определенного пользовательского контента, состоящего из примерно 3 или 4 шагов, некоторые из которых имеют кнопки внизу модального кода, а некоторые без него.

12 голосов | спросил Dirk v B 26 22013vEurope/Moscow11bEurope/MoscowTue, 26 Nov 2013 02:43:29 +0400 2013, 02:43:29

4 ответа


18

Идею этого бара можно проследить до закон подобия Гештальта , который гласит:

  

Элементы в ассортименте объектов перцептивно группируются, если они похожи друг на друга.

Пример гештальт-закона подобия

Вот почему вы увидите два столбца в (a) и две строки в (b). Последний также демонстрирует, что цвет выигрывает по форме (по крайней мере, в этом конкретном примере).

В некоторых снимках экрана, которые вы указали, сходство часто находится в фоновом режиме.

Еще один способ взглянуть на это - это пример закона общей области , которая гласит:

  

Объекты, которые заключены в общую область, вероятно, будут восприниматься как принадлежащие к группе, независимо от сходства или близости объектов-составляющих.

Как на этой иллюстрации:

Ящик, содержащий элементы, с большим количеством элементов вне поля

Разделяя группы с использованием пограничных линий (как правило, большего количества шума) или цвета, вы продвигаете логическую группировку графических элементов (что находится в группе и вне ее).

Стоит отметить, что группируя элементы вместе, вы также отделяете их от элементов в другой группе.

Примеры

В диалоговом окне панель отделяет контент от взаимодействия. В меню он просто используется для выделения:

Пример Pinterest

В случае с Google в верхнем диалоговом окне «бар» отделяет фактический контент от типа контента, который должен быть общим (я не вижу, чтобы кто-то понимал это без какого-либо визуального разделения).

В нижнем диалоговом окне дифференциация верхней и нижней областей отделяет взаимодействие обработки данных от взаимодействия задачи /прогресса. Кроме того, кнопки панели закрывают диалог, в котором все другие взаимодействия не будут; если вы спросите меня, флажок электронной почты не должен находиться в этом баре, но ниже поля To (хотя я вижу причину этого есть - «перед тем, как вы отпустите этот диалог, вы также хотите отправить по электронной почте людям?»):

Google screenshot

ответил Izhaki 26 22013vEurope/Moscow11bEurope/MoscowTue, 26 Nov 2013 04:49:20 +0400 2013, 04:49:20
2

Фактически принятый ответ не показывает одну основную причину , почему это было сделано таким образом.

Вместо визуального восприятия, помещая фиксированный бар внизу модального всплывающего окна, в котором есть действия (например, кнопка «ОК» в ваших примерах), позволит пользователю увидеть возможные действия, даже если раздел содержимого слишком большой, чтобы вписаться в маленький экран -> Существует полоса прокрутки .

Таким образом, даже самый маленький размер экрана может видеть кнопку действия без прокрутки вниз до конца содержимого.

В противном случае было бы очень запутанным, если бы пользователь должен был прокручивать содержимое, прежде чем он мог даже знать, что есть связанное с ним действие.

Эта конструкция делает ее очень ясной, и основные действия будут соответствовать нижней панели в любое время, независимо от того, какую часть содержимого вы читаете.

ответил Leths 28 MarpmFri, 28 Mar 2014 14:42:24 +04002014-03-28T14:42:24+04:0002 2014, 14:42:24
1

Это довольно распространенный способ для вызова задач для модального, который вы открыли, чтобы привлечь к ним больше внимания. Я не думаю, что его необходимо иметь планку другого цвета, если выделяются кнопки задач.

ответил jeff 26 22013vEurope/Moscow11bEurope/MoscowTue, 26 Nov 2013 23:40:22 +0400 2013, 23:40:22
0

Чтобы ответить на ваш другой вопрос: «Откуда это взялось?»: реальный элемент, который мы имитируем, - это ваша стандартная индексная карта, привязанная к заметке.

Закон гештальт применяется в реальной жизни, потому что у нас есть понимание глубины, которое предупреждает нас о том, что индексная карта не является частью примечания ниже. С новым стандартом плоской ОС это становится более правильным вопросом.

Даже Apple не спеша ничья, выясняя, какие интерфейсы по-прежнему уместны, чтобы имитировать. Разумеется, телефон с номером телефона повлиял на интерфейс раннего iPod, а календарь в стиле даты в день был одним из последних объектов iOS, которые необходимо обновить.

Одна из моих давних опытов в UX научила меня: все для обсуждения.

ответил user45865 28 MarpmFri, 28 Mar 2014 17:27:37 +04002014-03-28T17:27:37+04:0005 2014, 17:27:37

Похожие вопросы

Популярные теги

security × 330linux × 316macos × 2827 × 268performance × 244command-line × 241sql-server × 235joomla-3.x × 222java × 189c++ × 186windows × 180cisco × 168bash × 158c# × 142gmail × 139arduino-uno × 139javascript × 134ssh × 133seo × 132mysql × 132