Категории: Веб-дизайн

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

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

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


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

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

Довольно интересно сравнить обе версии. Многим именно модальный вариант понравится гораздо больше. Во-первых, его значимость намного ощутимее визуально. Во-вторых, в голове появляются интересные мысли о навигации.

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

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

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

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

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

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

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

via 37signals

Поделиться

Посмотреть комментарии

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

Последние посты

Дайджест ABOUT FACE #5: дизайн-принципы хороших продуктов, Sketch + AE, правильная иконка шаринга

Хорошей среды! Пришло время нового выпуска дайджеста. (далее…)

% дней назад

Дайджест ABOUT FACE #4: агенство или продукт, After Effects в код, 100 книг для дизайнера

Хорошего понедельника! Давно не было свежего выпуска дайждеста, а материала накопилось порядочно 😍 (далее…)

% дней назад

5 современных альтернатив WordPress

Это рекламная статья. Многие считают, что WordPress — одна из наиболее популярных open-source систем для…

% дней назад

Дайджест ABOUT FACE #3: новая книга Бюро, CSS в Скетче, дизайн для нескольких языков

Хорошего понедельника! Надеюсь все отлично отдохнули, потому как я собрал для вас новую порцию интересных…

% дней назад

Дайджест ABOUT FACE #2: книги по типографике, одновременная работа с макетом, дизайнер-cатана

Хорошего понедельника! Приветствуем второй выпуск дайджеста. Для тех, кто не в теме, дайджест просеивает тонны…

% дней назад

Дайджест ABOUT FACE #1: редизайн Хрома, сколько зарабатывают дизайнеры, каким должен быть VR интерфейс

Хорошего понедельника! Как я писал в паблике, я решил немного изменить формат выхода новостей. Поэтому всё…

% дней назад