XXIX Международный конкурс научно-исследовательских и творческих работ учащихся
Старт в науке
Tilda: Психология восприятия в веб-дизайне
Полная версия работы доступна во вкладке "Файлы работы" в формате PDF
ВВЕДЕНИЕ
Постановка проблемы. В современном веб-дизайне наблюдается разрыв между эстетически привлекательными решениями и практически работающими интерфейсами. Многие сайты выглядят «красиво», но не достигают бизнес-целей из-за низкой конверсии. Особенно остро эта проблема стоит при использовании массовых конструкторов, таких как Tilda, где соблазн использовать готовый шаблон часто перевешивает необходимость продуманной пользовательской логики.
Актуальность обусловлена тремя факторами: рост конкуренции в интернете требует эффективности каждого элемента; «клиповое мышление» пользователей заставляет адаптировать контент под быструю обработку; Tilda как массовый конструктор становится всё популярнее, но её шаблонные решения не всегда учитывают принципы когнитивной эргономики.
Цель работы — изучить ключевые законы психологии восприятия, значимые для веб-дизайна, и на практике проверить их эффективность на платформе Tilda.
Задачи:
1. Изучить законы гештальта, когнитивную нагрузку, F- и Z-паттерны, цветовое и шрифтовое влияние.
2. Проанализировать технические возможности Tilda (шаблоны, Zero Block, анимация, адаптив).
3. Выявить типичные ошибки на реальных сайтах.
4. Спроектировать два сайта в Tilda и провести A/B-тестирование.
5. Сформулировать практические рекомендации.
Обзор литературы. Теоретической базой послужили работы по когнитивной психологии (Д. Канеман), гештальт психологии (М. Вертгеймер, К. Коффка), труды по UX/UI (С. Круг, Д. Норман), а также документация Tilda.
Степень изученности. Психология восприятия в дизайне широко освещена,
однако адаптация этих знаний под российские конструкторы сайтов представлена фрагментарно. Работа восполняет этот пробел.
Личный вклад авторов заключается в систематизации принципов применительно к Tilda, разработке двух прототипов, проведении A/B тестирования и формулировании практических выводов.
1. ТЕОРЕТИЧЕСКИЕ ОСНОВЫ ПСИХОЛОГИИ ВОСПРИЯТИЯ В ВЕБ-ДИЗАЙНЕ
1.1. Законы гештальта и когнитивная нагрузка
Гештальт-психология утверждает, что восприятие стремится упорядочивать визуальную информацию в целостные структуры. Для веб-дизайна это означает, что пользователь воспринимает не отдельные кнопки и тексты, а смысловые блоки.
Основные законы:
· Близости — элементы рядом воспринимаются как группа (группировка товаров в каталоге).
· Сходства — одинаковые по цвету или форме объекты объединяются в категории (все кнопки «Купить» должны быть единообразны).
· Фигуры и фона — чёткое выделение активного элемента на фоне остального контента (Tilda позволяет настраивать контраст через Zero Block).
Когнитивная нагрузка — объём умственных усилий для обработки информации. В веб-дизайне её минимизация — ключевая задача. Чем меньше пользователь должен думать, чтобы понять, куда нажать, тем выше конверсия.
1.2. Паттерны сканирования, цвет и шрифт
Пользователи сканируют страницу по определённым паттернам:
· F-паттерн — для текстовых страниц (глаз движется по верхней строке, затем по левому краю вниз). Важный контент должен располагаться в этих зонах.
· Z паттерн — для лендингов (взгляд идёт по диагонали: верхний левый → верхний правый → центр → нижний левый → нижний правый, где обычно располагается CTA-кнопка).
Цвет — мощный психологический фактор:
· Красный — привлекает внимание, создаёт срочность (кнопки «Купить», распродажи).
· Зелёный — ассоциируется с безопасностью (кнопки «Оплатить», «Подтвердит).
· Синий — вызывает доверие (корпоративные сайты).
· Жёлтый/оранжевый — стимулируют импульсивные покупки.
Шрифт также влияет на восприятие: с засечками (Times New Roman) — традиция и серьёзность, гротески (Arial) — современность и технологичность.
2. ТЕХНИЧЕСКИЕ ВОЗМОЖНОСТИ TILDA
2.1. Шаблоны и Zero Block
Tilda предлагает два подхода:
1. Готовые шаблоны — быстрый старт, но ограниченная кастомизация. Часто не учитывают специфику аудитории и не позволяют гибко менять расположение элементов.
2. Zero Block — режим полной свободы: можно размещать блоки в любом порядке, изменять отступы, цвета, анимацию. Это открывает возможности для реализации психологических принципов — задать нужный паттерн сканирования, расставить визуальные акценты, снизить когнитивную нагрузку.
Однако Zero Block требует знаний о восприятии, иначе «свобода» превращается в хаос. В работе использован гибридный подход: базовый шаблон дорабатывался в Zero Block.
2.2. Анимация и адаптив
Анимация (плавное появление, параллакс, изменение прозрачности) может быть мощным средством привлечения внимания, если:
· она предсказуема (пользователь понимает, зачем элемент появился);
· скорость не слишком быстрая и не слишком медленная;
· она не «шумная» и не конкурирует с основным контентом.
Адаптив важен не только технически, но и психологически: пользователь раздражается, если сайт «плывёт» на телефоне. Tilda позволяет настраивать отображение блоков для разных экранов, сохраняя структуру внимания.
3. ПРАКТИЧЕСКОЕ ИССЛЕДОВАНИЕ: ПРОЕКТИРОВАНИЕ САЙТОВ
3.1. Выбор объектов и этапы работы
Для исследования выбраны два сайта разных тематик:
1. Интернет-магазин одежды (продажа худи).
2. Беговое сообщество (регистрация на забеги).
Этапы:
1. Подготовительный — изучение литературы, обзор исследований, определение критериев анализа.
2. Начало проектирования — выбор шаблонов, под задачи.
3.Доработка — создание описания товара, отзывов, выбор цвета, обеспечение кнопок и навигации.
4. A/B-тестирование — сравнение вариантов на фокус-группе, формулировка выводов.
Для магазина добавлены отзывы с рейтингом (4,9 из 5, 107 оценок) — элемент социального доказательства. Для сообщества — регистрационная форма с вариантами CTA-кнопок.
3.2. Типичные ошибки и их устранение
В ходе работы выявлены типичные ошибки на сайтах Tilda:
· Отсутствие визуальной иерархии — все элементы выглядят одинаково.
· Перегруженность информацией — много текста, мелкие кнопки, высокая когнитивная нагрузка.
· Игнорирование контраста — цвет кнопки сливается с фоном.
· Неудачное расположение CTA — вне зоны F- или Z-паттерна.
· Отсутствие социальных доказательств — нет отзывов, рейтингов.
· Анимация ради анимации — элементы прыгают, отвлекая от цели.
Все эти ошибки были учтены при проектировании.
4. A/B-ТЕСТИРОВАНИЕ И АНАЛИЗ РЕЗУЛЬТАТОВ
4.1. Влияние цвета кнопки «Купить»
Гипотеза: красная кнопка «Купить» привлечёт больше кликов, чем зелёная, при идентичном содержании карточки товара.
Дизайн эксперимента: фокус-группа из 170 человек (студенты и преподаватели). Каждому показали две версии сайта, отличающиеся только цветом кнопки. Фиксировалось количество кликов.
Результаты:
· Красная кнопка — 89 кликов.
· Зелёная кнопка — 71 клика.
Разница — 18 кликов (~18% прирост). Красный создаёт ощущение срочности и приоритета, побуждая к действию. Зелёный ассоциируется с подтверждением и не подходит для первичного призыва.
Вывод: выбор цвета кнопки на Tilda не должен быть случайным — он требует обоснования с точки зрения психологии восприятия и проверки через A/B-тестирование.
4.2. Влияние слова «сейчас» в CTA-кнопке
Гипотеза: добавление слова «сейчас» в текст кнопки регистрации увеличит клики за счёт эффекта срочности.
Результаты:
· «Регистрируйся сейчас» — 89 кликов.
· «Регистрируйся» — 68 кликов.
Разница — 21 клик (~31% прирост). Конкретный призыв к немедленному действию работает значительно эффективнее абстрактного. Для событий с ограниченным временем регистрации использование слова «сейчас» в CTA — обоснованная стратегия.
Вывод: формулировка призыва должна содержать временной триггер, если цель — стимулировать немедленное действие.
ЗАКЛЮЧЕНИЕ
В ходе работы решены все поставленные задачи. Теоретическая часть показала, что законы гештальта, когнитивная нагрузка, паттерны сканирования, цвет и шрифт — фундаментальные принципы, которые должны лежать в основе любого интерфейса. Их игнорирование приводит к низкой конверсии и потере доверия.
Анализ Tilda продемонстрировал, что платформа предоставляет как ограничивающие (шаблоны), так и гибкие (Zero Block) инструменты. Zero Block позволяет реализовать практически любой психологический приём, но требует знаний. Анимация и адаптив при правильном применении усиливают эффект.
Практическое исследование подтвердило универсальность выявленных закономерностей.
A/B-тестирование дало эмпирические подтверждения:
1. Красная кнопка «Купить» привлекает на 18% больше кликов, чем зелёная.
2. Кнопка «Регистрируйся сейчас» получает на 31% больше кликов, чем «Регистрируйся».
Цвет и формулировка CTA — не второстепенные детали, а ключевые факторы восприятия.
Практическая значимость — создан алгоритм принятия решений при проектировании на Tilda: прежде чем выбрать цвет или текст, дизайнер должен определить желаемый психологический эффект и проверить гипотезы тестированием.
Перспективы развития:
· Добавление адаптивных микро-анимаций для направления внимания.
· Персонализация контента (приветствие в зависимости от времени суток).
· Создание Telegram-бота для проверки сайтов на соответствие законам восприятия.
Работа представляет собой комплексное исследование на стыке психологии и веб-дизайна, имеющее теоретическую и прикладную ценность.
СПИСОК ИСПОЛЬЗОВАННЫХ ИСТОЧНИКОВ И ЛИТЕРАТУРЫ
1. Вертгеймер М. Продуктивное мышление. — М.: Прогресс, 1987.
2. Канеман Д. Думай медленно… решай быстро. — М.: АСТ, 2014.
3. Коффка К. Принципы гештальтпсихологии. — М.: Академический проект, 2015.
4. Круг С. Веб-дизайн: не заставляйте меня думать. — СПб.: Символ-Плюс, 2008.
5. Официальная документация Tilda Publishing. — URL: https://tilda.cc/ru/help/
6. Хоган К. Психология влияния в интернете. — М.: Эксмо, 2019.
7. Мышкина Н.А. UX-стратегия. — М.: Альпина Паблишер, 2021.
ПРИЛОЖЕНИЯ
Приложение А. Скриншоты сайта интернет-магазина (варианты с красной и зелёной кнопкой).
Приложение Б. Скриншоты сайта бегового сообщества (варианты CTA).
Приложение А
Приложение Б
Ссылка на фото забега: https://yandex.ru/images/search?cbir_id=1377467%2Fvg_HaWlzGb2HWdo16F9ksQ8662&from=tabbar&rpt=imageview&tabInt=1&url=https%3A%2F%2Favatars.mds.yandex.net%2Fget-images-cbir%2F1377467%2Fvg_HaWlzGb2HWdo16F9ksQ8662%2Forig