Современные пользователи не любят сайты-порталы. Они тратят на просмотр страниц совсем немного времени.

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

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

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

Модальные окна

Модальные окна — один из лучших способов представления информации, которая является второстепенной или утяжеляет дизайн. Дополнительный контент, более крупные изображения, уведомления и сообщения об ошибках — все это вы можете элегантно отображаться на вашем сайте при помощи модальных окон.

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

Модальные окна для изображений и видео

Посмотреть увеличенное изображение, не загружая лишнюю страницу только ради одной полноразмерной картинки. Или посмотреть видео по ссылке со страницы в модальном окне — что может быть удобнее. Дополнительная фокусировка на содержимом при помощи затемнения фона поможет пользователю сконцентрироваться на модальном окне.

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

Фотографии в модальном окне на Facebook совмещены с комментариями

Формы обратной связи

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

Вход или регистрация на сайте

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

Предупреждения и уведомления

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

Загрузка файлов

Иногда вам нужно загрузить файл на сайт, например, ваше резюме или новый теплый аватар. Все действия по управлению загрузкой этих файлов очень удобно было бы вынести в отдельное модальное окно — меньше загрузок-перезагрузок страниц и большая фокусировка на процессе обеспечены!

Загрузка файлов и вставка изображений в CMS Wordpress происходит в модальном окне

Скрипты модальных окон

Выпадающие и всплывающие элементы

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

Наведение

Все дополнительное мы будем показывать при наведении! Подробное описание, навигация «Вправо\Влево» в слайдшоу, мотивирующая стрелка возле кнопки «Скачать». Все это сильно нагрузит дизайн, если мы сразу обрушим его на пользователя. Хвала всплывающим элементам — теперь это будет решаться изящно.

Подсказки

Распространенной практикой использования всплывающих элементов являются подсказки — дополнительная информация при наведении или фокусировке на блоке (о подсказках в формах — «Юзабилити веб-форм»).

«Аккордеоны» или сворачивающиеся блоки

Блоки, которые могут сворачиваться, скрывая ненужные в данный момент элементы. Любите все настраивать под себя? Хотите дать пользователю скрыть вооон тот блок с последними комментариями — он просто не любит их читать, в отличие от последних новостей? Сворачивающиеся блоки спешат к вам на помощь!

Скрипты тултипов

Создаем меню

Заключение

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