Модальное окно что это
Коллекция модальных окон для сайта | html, css и javascript (jQuery)
Регулярно обновляемая коллекция самых интересных и бесплатных модальных окон для сайта, созданных при помощи JavaScript (jQuery), HTML и CSS (CSS3 & HTML5). Отзывчивые (responsive — респонсив, адаптивные), различные эффекты при появление, анимация и прочее… Сразу на странице Вы можете просмотреть Демо и скачать исходный код (* zip).
Если Вам понравилась наша коллекция, то Вы можете поделится ей в соцсетях!
Что такое модальное окно? Определение Webopedia
Главная »СРОК» М »Автор: Ванги Бил
Модальное окно - это любой тип окна, которое является дочерним (вторичным окном) по отношению к родительскому окну и узурпирует родительский контроль. Обычно это связано со всплывающим окном веб-сайта в Интернете, которое остается перед исходным окном. Пользователь не может нажимать какие-либо элементы управления или вводить какую-либо информацию в родительском окне (исходном окне, открывшем модальное окно), пока модальное окно не будет закрыто.Модальное окно обычно используется, когда автор хочет сохранить фокус пользователя на информации в модальном окне, так как пользователь не может взаимодействовать с другими окнами того же процесса.
НОВОСТИ ВЕБОПЕДИИ
Будьте в курсе последних событий в терминологии Интернета с помощью бесплатного информационного бюллетеня Webopedia. Присоединяйтесь, чтобы подписаться сейчас.
.Большой, жирный UX - использование модальных окон для взаимодействия с пользователем в приложении
Можете ли вы представить себе продукт или веб-сайт, которые испортились из-за слишком большого количества всплывающих окон? Время, когда ваш рабочий процесс или просмотр веб-страниц были прерваны переходом на полноэкранный режим без выхода? Надоедливое уведомление просто не понимает намеков?
Конечно можно. К сожалению, такое плохое UX-поведение - обычное дело.
Поскольку модальные окна способны привлечь внимание, они часто рассматриваются как быстрые исправления всего, что может способствовать повышению вовлеченности.
Модальные окна выделяются жирным шрифтом, и при правильном использовании они являются отличным способом доставки сообщений, заслуживающих полного внимания пользователей. Многие компании - Google, Grammarly, HubSpot, Spotify и т. Д. - успешно используют их, чтобы привлечь пользователей и подтолкнуть их к высокоэффективным действиям.
В этой статье мы поговорим о том, что делает модель хорошей модальной моделью и как вы можете использовать этот шаблон пользовательского интерфейса для улучшения вашего UX и привлечения (не раздражения) ваших пользователей.
Что такое модальное окно?
Модальные окна (также известные как модальные окна, наложения и диалоговые окна) - это большие элементы пользовательского интерфейса, которые располагаются поверх главного окна приложения - часто со слоем прозрачности позади них, чтобы пользователи могли заглянуть в главное приложение.
Чтобы вернуться к основному интерфейсу приложения, пользователи должны взаимодействовать с модальным слоем. Поскольку они по своей природе и преднамеренно разрушительны, их нельзя использовать легкомысленно.
Преимущества и варианты использования модальных окон
Модальные окна лучше всего использовать для заметных объявлений и важной информации, например приветственных сообщений или обновлений, которые нельзя пропустить. Поскольку они не привязаны к какому-либо конкретному элементу, они, как правило, лучше подходят для общих сообщений в приложении, чем для контекстной помощи.
Вот некоторые распространенные варианты использования:
1. Подключение пользователей
Модальное окно может быть как раз тем, что подходит для простого приветственного сообщения, которое тепло приветствует новых пользователей.
Zapier добавляет радость своему приветственному посланию с помощью анимированного конфетти.Если вам есть что сказать, мультимодальные потоки могут стать отличным способом привлечь новых пользователей к вашему продукту. Индикаторы прогресса помогают мотивировать пользователей выполнять многоэтапную адаптацию или ознакомление с продуктами.
Grammarly использует серию модальных окон, чтобы знакомить новых пользователей с важными функциями, повторяя при этом основные ценностные предложения продукта.2. Анонсы функций
Крупные анонсы - такие как редизайн продукта или выпуск долгожданной функции - часто заслуживают большой модальной рекламы.
Calendly использовал простое модальное окно, чтобы объявить о новой захватывающей функции (автоматические последующие электронные письма).3. Дополнительный ввод данных пользователем
Модальные окна также могут использоваться для сообщений об успешном выполнении, важных предупреждений и других вещей, которые требуют дополнительных действий пользователя, будь то форма или подтверждение одним щелчком.Эти инциденты стоит прервать рабочий процесс, если они имеют важные последствия - например, удаление чего-либо, сохранение прогресса, совершение покупки и т. Д.
InVision использует модальное окно, чтобы требовать дополнительного ввода данных пользователем перед удалением прототипа. Это важное действие, и привлекающий внимание шаблон пользовательского интерфейса полезен для предотвращения случайного удаления данных.Некоторые модальные окна занимают весь экран пользователя, блокируя видимость вашего приложения и полностью сосредотачивая внимание пользователя на сообщении и взаимодействии с пользователем перед ним.Мы называем этот шаблон захватом полноэкранного режима. Особенно на настольных компьютерах этот шаблон пользовательского интерфейса лучше всего зарезервировать для критически важной информации или когда есть необходимые данные, которые пользователь должен выполнить , прежде чем он сможет выполнить действие.
Недостатки
Модальные окна по своей природе мешают работе.
Для небольших объявлений придерживайтесь более тонких шаблонов пользовательского интерфейса. Выдвижные окна и баннеры часто более подходят для предоставления мгновенной обратной связи или обычных объявлений (как это делает Datadog в приведенном ниже примере).
Для контекстных сообщений, которые относятся к определенным элементам или функциям страницы (как в примере из HubSpot ниже), подсказки часто являются лучшим выбором.
Когда вы хотите предложить контекстную помощь (например, во время ознакомления с продуктом), всплывающие подсказки лучше привлекают внимание к одному конкретному элементу на странице или направляют пользователей через действия, которые им необходимо предпринять в данный момент.
Вы можете прочитать все о маленькой, но полезной подсказке здесь.
Советы по созданию отличного модального дизайна
Итак, теперь, когда вы знаете, когда использовать модальное окно - а когда вам будет лучше с меньшим шаблоном пользовательского интерфейса, - стоит поближе взглянуть на то, как на самом деле выглядит хороший модальный дизайн.
Конечно, не существует универсального шаблона, но есть несколько практических правил, которые стоит запомнить. Давайте разберемся:
💯 Заголовок
Модальный заголовок должен с первого взгляда рассказать пользователям, что такое модальное окно.
- Для модальных окон адаптации пользователей начните с повторения «Добро пожаловать в {ваш продукт}» или «Добро пожаловать, {имя}».
- В объявлениях о функциях используйте такие слова, как «Представляем» или «Новое», чтобы привлечь внимание пользователя.
- Модальные окна подтверждения должны четко повторять предполагаемое действие.Например: «Удалить фото?»
🖼 Графика
Одно из самых больших преимуществ модальных окон по сравнению с узорами меньшего размера состоит в том, что они могут легко размещать визуальный контент. Изображения могут быть добавлены под заголовком или в качестве главного изображения для дополнительного акцента. Короткие видеоролики или GIF-файлы могут помочь продемонстрировать, как работает функция, добавить человечность или даже немного юмора.
📝 Основной текст
Основной текст может состоять из нескольких коротких абзацев или состоять из предложения. Как и в любом UX-письме, будьте ясны и кратки.
🏃 Кнопка призыва к действию
Сильный, ориентированный на действия язык лучше всего подходит для CTA. Призывы к действию могут быть интригующими, но не слишком загадочными. Лучшие из них убедительно намекают на то, что будет дальше.
Для вдохновения прочтите, какие сильные слова находят отклик у пользователей.
🙅 Выходы
Не держите пользователей в заложниках. Пользователям должно быть легко покинуть модальное окно и вернуться в ваше основное приложение.
Модальные окна могут включать как кнопку «X», так и CTA для выхода.Их также можно спроектировать так, чтобы они закрывались, если пользователь выйдет из модального окна.
⏳ Индикаторы выполнения
При использовании серии модальных окон индикатор выполнения работает, чтобы поддерживать мотивацию пользователей и сообщать им, сколько еще шагов осталось в потоке. Тонкие точки (например, те, которые использует Google), простая дробь или классическая полоса - все это может иметь большое влияние на то, завершают ли люди модальную серию или нет.
Взгляните на модальное окно Календаря Google ниже. Здесь нет индикатора выполнения, поскольку это один шаг, но присутствуют все другие компоненты хорошего модального окна: описательный заголовок, фирменная графика, информативный основной текст и возможность выйти с действием или без него.
Использование модальных окон для мобильных приложений
Модальные окна также могут быть мощным инструментом для взаимодействия с мобильными приложениями. Поскольку мобильные экраны предлагают ограниченное пространство, граница между мобильными модальными окнами, выдвижными окнами и даже всплывающими подсказками может немного размыться - большая всплывающая подсказка может начать выглядеть как маленькая модальная форма на ладони.
Это может быть ограничением - каждое сообщение в приложении может казаться намного более разрушительным на мобильных устройствах - но также открывает интересные возможности для владельцев приложений и маркетологов.
Хотя использование модального окна для допродажи до подписки более высокого уровня может показаться немного агрессивным на настольном компьютере, например, допродажа - прекрасный вариант использования для мобильного модального окна при продуманном обращении.
Duolingo использует серию забавных анимированных модальных окон, чтобы подтолкнуть постоянных пользователей к своему премиальному продукту. Перенаправление разрешений - еще один распространенный вариант использования модальных окон на мобильных устройствах:
Skyscanner использует модальное окно с частичным экраном, чтобы предлагать пользователям включить уведомления после завершения первого поиска полета в приложении.Хотите узнать больше об использовании мобильных модальных окон? Ознакомьтесь с этими 8 примерами отличных мобильных модальных окон, которые порадуют и заинтересуют пользователей вашего приложения.
Сохранить модальные окна для впечатляющего обмена сообщениями
Модальные окна беззастенчиво выделены жирным шрифтом. Используйте их экономно и убедитесь, что содержащиеся в них сообщения приносят пользу, а не раздражают ваших пользователей.
Если вы хотите создавать и экспериментировать с модальными окнами, которые выглядят нативно для вашего приложения (и не требуют программирования или помощи разработчика, чтобы начать работу), попробуйте Appcues !
Лучшие практики для модальных окон
Думаете ли вы об использовании модальных окон в своем интерфейсе? Модальные окна предлагают пользователям выбрать действие, которое нужно предпринять, прежде чем они смогут вернуться в главное окно.
При правильном использовании они могут облегчить пользователю работу во время выполнения задачи. Если их неправильно использовать, они могут помешать пользователю. Вот несколько передовых методов, которые помогут вам разработать удобные модальные окна.
Модальные окна
Модальное окно - это дополнительное окно, которое открывается поверх основного.Пользователи должны взаимодействовать с ним, прежде чем они смогут выполнить свою задачу и вернуться в главное окно.
Вы должны использовать модальные окна, когда есть шаги, которые пользователь должен сделать, прежде чем задача может быть завершена. Использование модального окна вместо полной страницы позволяет пользователям поддерживать контекст своей задачи.
Включите четкий, видимый заголовок, соответствующий нажатой кнопке.
Когда открывается модальное окно, пользователям важно знать, откуда оно взялось. Ваше модальное окно должно включать заголовок, соответствующий кнопке, которую они нажали, чтобы открыть его.Это показывает последовательное поведение и говорит им, какую задачу они выполняют.
Предлагает высококонтрастную кнопку закрытия в верхнем углу.
Закрытие модального окна, когда это необходимо. Используйте обычный значок «X» для кнопки закрытия. Кнопка закрытия с высокой контрастностью позволит пользователям лучше видеть свой выход. Ваша кнопка закрытия должна иметь форму и цвет.
Разрешить пользователям закрывать окно с помощью клавиши ESC
По причинам доступности ваше модальное окно должно закрываться, когда пользователи нажимают клавишу ESC.Вы также должны разрешить пользователям переходить через элементы управления в модальном окне, если они у вас есть. Это позволит пользователям, использующим программы чтения с экрана и клавиатуру, перемещаться по вашему интерфейсу.
Закрывание окна, когда пользователи нажимают за его пределами.
Если пользователи не могут найти вашу кнопку закрытия, разрешите им закрыть окно, щелкнув за его пределами. Это делает выход простым и интуитивно понятным, поскольку пользователи часто нажимают на главное окно, чтобы вернуться в него. Но вы не хотите позволять пользователям выходить таким образом, если они вводят информацию в форму, иначе они могут ее потерять.
При необходимости используйте кнопки «Отмена».
В модальном окне потребуется кнопка «Отмена», если пользователь выполняет задачу, в которую вводит информацию. Если в вашем модальном окне есть форма, важно, чтобы пользователь не щелкнул за пределами окна, чтобы закрыть его. Чтобы предотвратить это, предложите пользователям кнопку «Отменить», поскольку это единственный способ закрыть окно.
Поместите за ним тень или прозрачное наложение
Когда открывается модальное окно, пользователи должны знать, что это дополнительное окно, накладываемое на основное.Упростите пользователям распознавание того, что они находятся в режиме, с помощью тени или прозрачного наложения позади вашего окна.
Убедитесь, что прозрачный лист не слишком непрозрачен, чтобы пользователи могли видеть главное окно. Если будет слишком темно, пользователи могут ошибочно подумать, что они покинули главное окно.
Не делайте размер окна слишком высоким или широким
Если ваше модальное окно выше или шире, чем экран пользователя, им придется прокрутить, чтобы увидеть все это.Это особенно неприятно для мобильных пользователей. Сделайте размер модальных окон подходящим для экрана пользователя, чтобы им не приходилось прокручиваться.
Немодальные окна
Немодальное окно также является второстепенным окном, которое открывается внутри основного. Однако разница в том, что пользователям не нужно взаимодействовать с ним, прежде чем вернуться в главное окно. Пользователи могут продолжить работу с открытым немодальным окном. Это не требует их немедленного внимания.
Используется, когда пользователям нужно обратиться к информации главного окна.
Когда пользователям нужно сравнить или обратиться к информации в главном окне, модальное окно не будет работать.Немодальное окно, которое вы должны использовать в этой ситуации, потому что оно занимает небольшую часть экрана и позволяет пользователям просматривать и работать в главном окне, когда оно открывается. Пользователи могут одновременно взаимодействовать как с немодальным, так и с модальным окном.
Сделайте его как можно меньше
Немодальные окна должны занимать очень мало места в главном окне. Сделайте ваше немодальное окно как можно меньшим и сдержанным, чтобы пользователи могли взаимодействовать с главным окном.Главное окно всегда находится в центре внимания задачи пользователя.
Прикрепите его к краю главного окна
Немодальное окно должно отображаться, пока пользователь не закроет его. Прикрепив его к боковому краю главного окна, он останется видимым для пользователей. Они могут прокручивать и по-прежнему взаимодействовать с немодальным окном, когда им нужно.
Используйте "X" для кнопки закрытия.
Немодальное окно не требует такого количества выходов, как модальное окно. Простая кнопка со значком «X» должна закрыть его.Сделайте кнопку видимой и поместите ее в верхнем правом углу.
Заключительные мысли
Модальные окна являются эффективным элементом интерфейса, если вы их правильно проектируете и используете. Они могут помочь пользователю выполнять задачи быстрее и проще. Но они также могут расстраивать их, когда они поступают неправильно.
Знание того, как создавать модальные окна, позволит вам использовать их таким образом, чтобы это вас не раздражало. Помните об этих передовых методах, чтобы создаваемые вами модальные окна приближали пользователей к успеху.
Филиалы
.Модальные окна в мобильном интерфейсе
Первый вопрос, который нужно задать: что означает термин «модальное окно»? Что ж, модальное окно - это интерфейс, который не позволяет посетителю взаимодействовать с приложением до тех пор, пока он не закроет окно.
Этот тип функции обычно избегается дизайнерами пользовательского интерфейса, поскольку они могут препятствовать продвижению посетителей или подталкивать их к поведению, которое они обычно не выбирают.
Более того, современные операционные системы приучили пользователей интуитивно и немедленно игнорировать диалоговые окна - посетители либо вообще не взаимодействуют с модальными диалоговыми окнами, либо они чувствуют себя сбитыми с толку их внешним видом.
Проблема с модальными окнами
Для вас модельный интерфейс может представлять преимущество дополнительного экранного пространства или веб-«недвижимости». Он предлагает практический подход к предоставлению контекстных данных, сообщений и других функций, относящихся к рассматриваемому экрану.
Опять же, эта функция может показаться уловкой или обманом, которую вам пришлось применить, чтобы разместить больше данных на веб-странице. Есть два самых драматических отношения к модельным интерфейсам, и чаще всего посетители оказываются в центре. Они могут быть довольно загадочными, если вы никогда не сталкивались с ними раньше.
Тем не менее, в какой-то момент модальные диалоги стали частью современного веб-дизайна. Теперь мы хорошо знакомы с такими функциями, которые появляются из ниоткуда, даже на оптимизированных экранах смартфонов.
В свете их инвазивного характера, возможно, удивительно обнаружить, что пока нет более эффективных методов создания и реализации модальных окон на мобильных устройствах, которые не снижали бы уровень удобства использования.
Получите 300+ бесплатных подарков на ваш почтовый ящик!
Подпишитесь на нашу рассылку и получите более 300 дизайнерских ресурсов за первые 5 минут в качестве подписчика.
Спасибо!
Нужен еще один шаг.Проверьте свой почтовый ящик на наличие электронного письма с подтверждением информационного бюллетеня.
В целом верно, что модальные оверлеи не работают эффективно на планшетах и смартфонах. Их дизайн требует времени и терпения; Требуется много навыков, чтобы решить различные варианты работы телефона и найти исправление любых существующих неисправностей. Они также должны быть в хорошем состоянии, если они хотят естественным образом ссылаться на главную страницу.
Многие приложения терпят неудачу, потому что они никогда не были созданы с нужными размерами в первую очередь (особенно в отношении ресурсов смартфона), или интерфейс отскакивает и выглядит неясным, когда он появляется впервые - это может испортить расположение закрытия функция.Кроме того, процесс просмотра может быть сложным, если посетители используют встроенную клавиатуру.
В большинстве случаев клавиатура выступает слишком высоко и закрывает большую часть экрана. Это может закончиться тем, что посетителям придется перемещаться неестественным образом, просто чтобы увидеть, что они пишут.
Чтобы посетители могли получать доступ к вашим данным в непринужденной и непринужденной манере, постарайтесь избежать необходимости использовать модальные интерфейсы на мобильных платформах. Если необходимо, используйте в качестве альтернативы встроенный аккордеон.
Прекрати. В самом деле.
Источник изображения: Крис Джонсон
Почти всегда можно избежать подталкивания посетителей к выполнению нежелательных функций. Как следствие, модальные интерфейсы могут включать в себя нежелательные источники разочарования и раздражения посетителей.
По возможности и в качестве альтернативы рекомендуется попробовать разработать немодальный пользовательский интерфейс. Это своего рода интерфейс, который позволит вашим посетителям изменить свой выбор в любой момент.Ваших посетителей никогда не следует подталкивать к поведению, которое им не нравится.
Важно отметить, что модальные интерфейсы плохо работают на небольших устройствах. Они занимают большую часть экрана, поскольку включают в себя дополнительные компоненты пользовательского интерфейса.
Например, если экран очень маленький в начале, данные, содержащиеся в модальном интерфейсе, естественно, будут еще меньше. Это проблема, если данные не соответствуют внутренней части экрана, и вам необходимо представить функции полосы прокрутки.
Типичная функция вложенной полосы прокрутки также плохо работает на мобильных машинах, потому что пользователи всегда хотят иметь возможность перемещать весь экран, просто жестикулируя пальцами определенным образом. Итак, если модальные интерфейсы представляют собой ухудшение пользовательского опыта, разумно предположить, что они не будут работать плавно и на мобильных машинах.
Решение
Типичная встроенная функция «аккордеон» представляет данные на веб-странице - чего она не делает, так это перекрытия их поверх других страниц, как это сделал бы модальный интерфейс.Это полезно, поскольку устраняет проблемы с расположением и перемещением окон, с которыми обычно сталкиваются посетители при работе с модальными окнами на мобильных устройствах.
Кроме того, посетителям не нужно беспокоиться об отключении контекста, поскольку встроенный аккордеон запускается прямо на той же веб-странице. Разница между этим и модальным окном заключается в том, что модальное окно удаляет посетителей из ситуации, чтобы занять большую часть экрана. Встроенный аккордеон складывает панель под ним, как только посетитель нажимает правую кнопку.
При правильной работе область панели будет полностью представлена на экране мобильного устройства - это не позволит посетителю столкнуться с проблемами с закрытым доступом или дисфункциональным перемещением страницы. Сама кнопка должна быть четко обозначена, чтобы посетители сразу понимали, с чем они взаимодействовали. Если возможно, рекомендуется установить небольшой индикатор X, чтобы посетители могли выключить панель в стандартной комплектации.
Объявление
Важно, чтобы вы не усложняли взаимодействие посетителей с вашими модальными интерфейсами - вы можете поменять встроенные аккордеоны на модальные окна на мобильных устройствах, чтобы обеспечить правильную работу оптимизированного для мобильных устройств содержимого.
Идеальное время для их использования
Загрузка сообщений
Источник изображения: Аарон Стамп
Бывают случаи, когда посетитель нажимает кнопку функции, и ваше приложение запускает интенсивный процесс за кулисами. Посетителю может быть непонятно, что вообще происходит - некоторые нажимают кнопку во второй раз, потому что считают, что первый раз был неработоспособным. Вы можете предотвратить это, предложив модальный интерфейс, содержащий добрую инструкцию проявить терпение.
Сообщения об ошибках
Источник изображения: Мухаррем Шеньыл
Одно из самых популярных применений модальных диалогов на мобильных устройствах - сообщения об ошибках, которые появляются, когда посетитель выполняет действие, которое веб-сайт не может обработать. Например, они могут попытаться избавиться от части работы, которая все еще открыта в другом месте - в этом случае работа не может быть перемещена в корзину.
Предупреждающие сообщения
Источник изображения: Mariusz Ciesla
Можно использовать модальные диалоги для предупреждения посетителей, когда они находятся на грани выполнения потенциально опасной функции.Например, если посетитель пытается избавиться от части работы, которая все еще используется (как описано выше), приложение может запросить: «Вы уверены, что хотите выполнить это действие?»
Тем не менее, это может быть сложно само по себе, поскольку многие посетители теперь автоматически игнорируют всплывающие сообщения, подобные этим, - они часто даже не пытаются взаимодействовать с ними. Чтобы исправить это, дайте возможность отменить нежелательную функцию или установить тайм-аут.
Конечные мысли
Источник изображения: Джоуи Ломанто
Для мобильных экранов модальные интерфейсы - не лучший вариант - они создают ряд проблем с прокруткой и определением местоположения, что снижает удобство работы пользователя.Они, как правило, основаны на JavaScript, а это означает, что, если простота использования жизненно важна для вашего веб-сайта, наверняка будет определенная часть ваших пользователей, которые на самом деле никогда с ними не столкнутся - они могут никогда не столкнуться с данными, которые они предоставить либо.
Источник изображения: Joris Rigerl
Если вы посмотрите на них с точки зрения особенностей, они могут показаться довольно сложными. К сожалению, дело в степени их привлекательности. Если вы создаете и поддерживаете мобильный веб-сайт или приложение, обычно есть гораздо лучший вариант, чем модальные интерфейсы.
