Динамические и интерактивные элементы и объекты на веб-сайтах

Введение

Все элементы, из которых создаются веб-сайты, можно разделить на три типа: статические, динамические и интерактивные.

  • Статические — это неподвижные элементы, с которыми не предусмотрено взаимодействия пользователя. К ним относят, в частности, тексты, изображения, декоративные элементы.
  • Динамические — это подвижные или анимированные элементы. Это могут быть, например, облака, движущиеся на фоне сайта, или другие анимированные элементы, цель которых, как правило, декоративная. Сами по себе они не представляют значительного интереса, поэтому в этом материале мы в большей степени сосредоточимся на третьем типе элементов — интерактивных.
  • Интерактивными называют элементы, которые так или иначе реагируют на действия пользователя. Собственно, слово «интерактивные» буквально означает «взаимодействующие» (от англ. interactive). Базовыми интерактивными объектами являются ссылки, кнопки и элементы форм.

Отдельные интерактивные элементы могут объединяться в более сложные интерактивные объекты. Например, поля ввода и кнопка — это элементы. А форма — объект.

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

Учитывая такое разнообразие, мы решили в этом материале рассмотреть типичные средства и возможности взаимодействия сайтов, которые лежат в основе большинства интерактивных объектов, какими бы они ни были. А некоторые наиболее популярные интерактивные объекты мы рассмотрим подробнее.

Начнем с того, что лежит в основе любых взаимодействий на сайте — сценариев взаимодействия.

Сценарии взаимодействия

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

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

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

На самом деле даже этот простой сценарий содержит несколько базовых составляющих веб-сценариев:

  • Участники сценария (блок оформления подписки и содержание страницы)
  • Место действия (нижняя часть экрана)
  • Условие (подождать 10 секунд)
  • Действие (появление с эффектом всплывания)

Одна веб-страница может содержать десятки отдельных сценариев.

Участником сценария может быть любой элемент или объект на веб-сайте.

А вот условиям взаимодействия мы предлагаем уделить немного больше внимания.

Условия взаимодействия

Условия взаимодействия — это факторы, которые вызывают связанное с элементом событие.

Наиболее типичными условиями наступления события сценария являются:

  • Наведение
  • Нажатие
  • Прокрутка
  • Нажатие клавиш
  • Ввод и отправка информации
  • Получение информации
  • Привязка ко времени

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

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

В будущем курсе Креативной Практики «Создание интерфейсов» мы посвятим теме сценариев несколько отдельных материалов. Пока рассмотрим подробнее описанные условия взаимодействия и контексты их использования.

Наведение курсора

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

Нажатие

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

Прокрутка

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

Нажатие клавиш

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

Ввод и отправка информации

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

События по графику

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

Получение информации

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

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

Типовые интерактивные и динамические объекты

Формы

Вероятно, наиболее типичным интерактивным объектом на сайте являются формы. Об элементах, которые их образуют, мы подробно рассказали в одном из предыдущих материалов.

Ну а наиболее типичные случаи использования форм — это общение (чат), регистрация и авторизация, оформление заказа, обратная связь. С некоторыми из них в этом курсе мы познакомимся поближе.

Прелоадеры

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

Таймеры

Таймеры — это динамические элементы, отвечающие за выполнение определенного действия в привязке ко времени. Они могут быть очевидными или скрытыми. Скрытые таймеры незаметны для пользователя. А очевидные могут иметь разные уровни детализации. Они могут быть более абстрактными — оформленными как линия или круг. Или выглядеть как элемент, который четко отсчитывает время до события (подобные таймеры часто используются как составляющие рекламных баннеров).

Слайдеры и галереи

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

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

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

Частным случаем слайдеров можно считать кольцевые галереи.

Модальные и диалоговые объекты

Модальные и диалоговые окна переместились в веб-дизайн из других графических интерфейсов.

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

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

Баннеры

Баннеры — это интерактивные объекты для внутренней или наружной рекламы. И они бывают самыми разнообразными — статическими, анимированными, интерактивными.

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

Часто они имеют кричащий, несоответствующий сайту дизайн. И как бы нам, пользователям, это ни было неприятно, задача веб-дизайнеров заключается именно в том, чтобы сделать баннеры заметными. Поэтому их часто размещают в таких областях, где баннер трудно игнорировать: над шапкой, в колонке, занимающей треть главной страницы, прямо под главной новостью и так далее.

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

В заключение

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

Частично мы коснемся этой темы и в модуле, посвященном удобству веб-сайтов.

·
706
·
goodsuper 5
Головна