Диалоговые окна в вебе: хорошие примеры и альтернативы

Совсем недавно Аза опубликовал свою заметку о модальных окнах, так называемых оверлеях — то есть, именно о тех самых известных и надоедливых диалоговых окошках, которые совершенно внезапно выскакивают на мониторе и блокируют все то, что находится за ними. В этом случае ваши действия свободны в рамках только модального окна, при этом вы не можете никак использовать ни один «закрытый» элемент до тех самых пор, пока всплывшее окно не исчезнет.

Обычно, когда речь заходит о модальных окнах, имеются в виду диалоги, как в известном сервисе GoogleDocs (на данный момент уже все работает нормально — прим. пер.). Аза критикует именно модальные окна такого рода. После открытия диалога поиска/замены, нигде нельзя кликнуть мышью. Ну, кроме самого этого диалога. Вы не сможете полистать документ, который находится под диалогом, либо скопировать из документа какое-нибудь слово и вставить в строку поиска, при этом не закрывая диалог.

google docs


Существуют и другие виды модальных окон. За примером можно отправиться на сайт me.com компании Apple. Взгляните на панель настроек — тут нет ничего, что потребовало бы работу с перекрытым им содержимым. С точно таким же успехом это мог быть и отдельный экран.

me.com 1

Вообще, именно то, что это мог быть какой-нибудь отдельный экран, и интересно. В 37 (именно так кратко именуют компанию 37signals) никогда не используются модальные окна. Панель с настройками всегда является совершенно независимым экраном приложения. Чтобы исследовать разницу между обоими подходами, достаточно смакетировать для панели настроек альтернативную версию, чтобы использовалось весь экран, как это, собственно, могло бы выглядеть в каких-нибудь стандартных web-приложениях.
me.com 2
Довольно интересно сравнить обе версии. Многим именно модальный вариант понравится гораздо больше. Во-первых, его значимость намного ощутимее визуально. Во-вторых, в голове появляются интересные мысли о навигации.

Модальные окна в виде альтернативной навигации

Есть несколько вопросов, крутящиеся в нашем сознании чаще всего при работе с различным программным обеспечением — «Да где же я?» и «Что мне сделать, чтобы вернуться обратно?». Существует масса вариантов упрощения: кнопки «Отмена», вкладки и многое другое. Вот почему бы взять и не подумать о разных модальных окнах, которые бы решили те же проблемы? Такой механизм довольно эффективно сглаживает все эти вопросы. «Где я?» попросту не возникает, так как вы и не думали покидать основной экран. А ответ на вопрос «Как вернуться обратно?» вполне очевиден, потому что основной экран на заднем плане остается видимым.
diagram

Немного о размере экрана

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

Когда разрабатывается интерфейс какого-то конкретного экрана web-приложения, специалисты всегда стараются выделить самые важные и очень часто используемые элементы, увеличить их количество по сравнению с теми элементами, которые используются редко. Это довольно неплохое правило, воспринимать разные элементы одинакового размера как равнозначные. Панель настроек у «яблочной» компании использует такой же принцип. Экран панели настроек немного меньше окна браузера, содержащего намного более важные экраны web-приложения, которые наполнены различными данными.

Есть и хорошие модальные окна

Интернет-сайт me.com вполне наглядно показывает, что все-таки некоторые модальные оверлеи обладают каким-никаким правом на существование, как своего рода альтернатива традиционному принципу навигации между несколькими независимыми экранами. Также довольно интересно вести рассуждения о том, какие экраны заслуживают отдельного полного окна браузера, а какие наоборот — должны относиться к разряду подуровней у других экранов. Можно предположить, что когда разные люди нахваливают приложения за их хорошую «десктопность», этот пусть небольшой недостаток навигации между несколькими экранами рождает много критических замечаний. Компания Apple хорошо показала возможность включения так называемых «десктопных» принципов в различные приложения без превращения в аналог «десктопных» систем.

via 37signals

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



Подписка по РСС
Мой твитер

Один комментарий

  1. Роман

    Интереснейшая статья, мне очень понравилась. Много нового я узнал. Проанализировав содержимое статьи, соглашусь с высказыванием, что конечно вариант компании 37signals нравится мне гораздо больше других. А именно своим функционалом. То, что панель настроек фактически является отдельным экраном во многом развязывает руки.

Оставить коментарий

Суперрассылка!

Введите почту и будьте в курсе