Интерактивный сайт: что это и примеры

Что такое интерактивный сайт

Обычный сайт показывает готовый текст и картинки. Интерактивный сайт реагирует на действия посетителя: считает, рисует или показывает результат.

Результат у каждого посетителя свой, поэтому таким сайтом есть зачем поделиться.

Какие бывают интерактивные сайты

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

Четыре примера

Inkfall, чернила в воде

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

Surf, прогноз для серфинга

Surf работает как веб-сервис. Он собирает прогноз волны, ветра и прилива для пляжей Пхукета из нескольких погодных моделей и сводит всё в одну оценку от 0 до 10. Человеку не нужно сравнивать графики на нескольких сайтах, он сразу видит ответ.

«Глазомер», игра на один раз в день

«Глазомер» состоит из пяти заданий на глаз. Нужно, например, остановить таймер вслепую, найти центр круга и выставить угол. Задания каждый день новые и одинаковые у всех, поэтому результат можно сравнить с друзьями. Сервера у игры нет, прогресс хранится в браузере.

Лента работ на главной

На главной странице Void Studio работы показаны лентой, которую тянут мышью или пальцем. Лента рисуется на видеокарте. Если устройство этого не умеет, показываются обычные картинки.

На чём делают интерактивные сайты

WebGL рисует на видеокарте прямо в браузере. Он нужен для сложной графики и физики.
SVG и Canvas подходят для графики попроще: схем, диаграмм, небольших игр.
Камера и микрофон позволяют управлять сайтом жестами и звуком, если посетитель разрешит доступ.
Открытые данные дают сайту погоду, карты, курсы и расписания.

Устанавливать ничего не нужно, всё открывается по ссылке на телефоне и компьютере.

О чём подумать заранее

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

Когда интерактив уместен

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