PAYSTO
Компания
41,54
рейтинг
15 июля 2014 в 14:18

Дизайн → Использование принципов психологии для роста конверсии сайтов. Часть 1: гештальт-психология, закон лаконичности перевод

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

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

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

Часть 2
Часть 3
Часть 4
Часть 5

1. Закон лаконичности

Один из центральных принципов гештальт-психологии является закон Лаконичности. Этот закон говорит о том, что мы, как правило, значительно лучше воспринимаем простые, в том числе и с визуальной точки зрения, вещи, Мы предпочитаем вещи, которые понятны, мы боимся сложных вещей, идей или проектов. Инстинктивно мы знаем, что простые вещи безопасней.

Немного информации

Закон лаконичности учитывает не только количество информации и смысловых акцентов в дизайне. Есть несколько моментов, которые необходимо принимать во внимание при создании «простого» дизайна:

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

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

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

Принцип связанности. Если два элемента визуально связаны третьим, они воспринимаются как единое целое.
image

Зонирование. Группа элементов воспринимается как единое целое, если она ограниченна замкнутой областью.
image

Близость. Объекты, которые расположены ближе друг к другу, скорее воспринимаются как единое целое, нежели объекты, расположенные на удалении.
image

Продолжение. Элементы, расположенные на одной линии, воспринимаются как целое, даже несмотря на другие критерии группировки (цвет, форма, размер).
image

Параллельные объекты воспринимаются, как группа.

Несколько примеров удачного использования этого закона для увеличения конверсии:

Пример № 1: The Sims 3 (128% увеличение)

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

Оригинальный дизайн содержал 4 CTA:

• Регистрация (или вход)
• Посетите магазин
• Прочитайте последние новости компании
• Получите бесплатные материалы

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

image

В результате лучшим был признан вариант D (на картинке), с результатом в 128%. При этом стоит отметить, что все предложенные варианты оказались лучше, чем оригинал, минимальным результатом повышения конверсии было 43%.

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

Пример № 2: Device Magic (35% увеличение)

Мобильный бизнес компании Device Magic был представлен на отличной посадочной странице, которая была наполнена содержательным материалом, объяснявшим, как все это работает.

image

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

Пример № 3: Highrise (37,5% роста)
Когда 37signals захотели улучшить коэффициент конверсии для своего популярного программного обеспечения Highrise CRM, они решили реализовать несколько кардинальных изменений:

image

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

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

Пример № 4: Daily Burn (20.45% роста)
Daily Burn (ранее Gyminee) разработали отличный дизайн домашней страницы. Отличные скриншоты, визуализация работы обеспечения и интересный счетчик калорий.

Они решили попробовать простейшее преобразование и просто удалили часть страницы.

image

В каждом новом тесте они убирали различные элементы страницы, сводя фокус к главному элементу – CTA. В среднем рост конверсии достиг 20,45%.

Пример № 5: DesignBoost (13% увеличение)

Когда DesignBoost запустили свой проект, они понимали, что им предстоит множество А/В тестов, поэтому они решили начать с того, что могло принести наибольший результат.
Они слышали, что короткие страницы обычно работают лучше, и именно это они решили проверить в первую очередь. Упрощенный вариант позволил увеличить конверсию на 13%.

image

Обратите внимание на слово «обычно» выше. Хотя общие принципы, такие как простой дизайн, длина страницы или словесные триггеры обычно эффективны, они имеют различное влияние на различные целевые группы сайты.
Автор: @Irina_Ua Nate Desmond
PAYSTO
рейтинг 41,54
Компания прекратила активность на сайте

Комментарии (10)

  • –5
    Лечили меня «Гештальтом», что-то не помогло, а тут на повышение конверсии влияет. Странно.

    Может дело все же в более приятном дизайне, а не в «психологии» и тонких материях? Т.е. ну не связан адекватный дизайн с психологией, во всяком случае так «прямо».
    • 0
      Лечить можно чем угодно, а вылечить только того, кто хочет быть «здоров».
      • 0
        Выгорание лечится тяжело.
    • 0
      Гештальт-психология и гештальт-психотерапия действительно связаны весьма слабо. Основатель гештальт-терапии Пёрлз использовал просто академическое «прикрытие» гештальт-психологии для того, чтобы делать что-то совсем своё :) А так, в терапии работает не подход, а человек/специалист. Это как сказать «делали мне программу на С++, не заработала, а тут операционные системы на них пишут».
  • 0
    В примере с продолжением я бы поспорил. Я например, сразу определил для себя там две линии как красная и черная, а не прямая и кривая.
    Ну и про короткие страницы тоже сомнительно в некоторых случаях.

    Но все равно спасибо — буду ждать второй части.
  • НЛО прилетело и опубликовало эту надпись здесь
  • 0
    Почему в статье везде используется сокращение СТА без единого обозначения, что это Call To Action? И почему в русской раскладке, влом было переключаться?
    Опять же, схема статьи:
    1)Простые вещи лучше чем сложные.
    2)Люди воспринимают группы-гештальты.
    3)Вот как можно сделать лучше, упростив нагромождение на сайтах или удалив половину страницы.
    Вторая часть вываливается из повествования, и не связана ни с началом, ни с концом.
    • +3
      Спасибо за критику.
      1. Мне показалось, что люди, интересующиеся веб-дизайном и конверсией интернет-магазинов знают, что такое CTA, а если не знают, то загуглив получат определенный уровень базовой информации, необходимый тем, кто интересуется данной сферой. При этом, освещать эту базовую информацию в статье, не имеет никакого смысла. Это как в хабе «Apache» пишут «MySQL» и не делают никаких разъяснений по этому поводу.
      2. Насчет раскладки: спасибо, что заметили, упустила при финальной правке черновика.
      • +2
        Конечно загуглили. Потому в латинице надо было :)
  • +1
    Весьма интересная статья. Прочитал с удовольствием на обеде.

Только зарегистрированные пользователи могут оставлять комментарии. Войдите, пожалуйста.

Самое читаемое Дизайн