Дизайн интерактивного сайта об охране природы

Интерактивный сайт об охране природы, построенный вокруг упавшей древесины

Second Spring начинается с упавшего бревна, а не с формы пожертвования. Ветка пересекает экран по диагонали под крупным заголовком, набранным шрифтом с засечками, а листья обрамляют внешние края. При движении над древесиной вырастает временный участок мха. В зафиксированном состоянии интерфейс сообщает о 20% покрытия мхом; это число описывает экранный эффект, а не восстановленную среду обитания.

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

01

Поверхность, к которой хочется прикоснуться

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

02

Обратная связь без счётчика достижений

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

03

Управление атмосферой

У вращения и дождя есть отдельные элементы управления, поэтому движение и погода не обязаны быть единым неразделимым эффектом. Для зафиксированного главного экрана вращение было приостановлено, а дождь продолжался. Это полезно в сцене, предназначенной для изучения: посетители могут рассмотреть одну область, не теряя всей атмосферы, которая придаёт ей своеобразие.

Связь сумм поддержки с конкретными видами деятельности

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

Единицы намеренно различаются, поэтому страница не устанавливает соотношение цены и результата. В реальной кампании для таких связей потребовались бы доказательства. Здесь на каждой кнопке написано Support (simulated), а локальное подтверждение повторяет, что платёж не выполняется. Такой дизайн полезен для проверки того, как люди понимают варианты, до подключения какой-либо транзакционной системы.

От историй о лесной подстилке к форме для волонтёров

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

1. Сначала расскажите об объекте

   Первое наблюдение связывает мёртвую древесину с лесной подстилкой. Затем вода, грибы и полог леса расширяют тему вокруг того же объекта. Благодаря этому повествование остаётся связанным с бревном, которое посетитель уже видел, вместо резкого перехода к не относящемуся к нему заявлению кампании.

2. Предложите не только финансовое действие

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

3. Сделайте границы действия формы очевидными

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

Что демонстрирует этот природоохранный прототип

Локальная предварительная версия демонстрирует отрисованную интерактивную сцену, настраиваемое движение, редакционный контент и интерфейсы с имитацией участия. Диалог поддержки на сумму £15 был открыт и подтверждён локально. Это не привело ни к платежу, ни к отправке электронной почты, ни к восстановительным работам. Названия дней полевых работ и суммы поддержки — вымышленные примеры; процент покрытия мхом в сцене не следует представлять как показатель воздействия на окружающую среду.