Как использовать элементы дизайна для увеличения конверсии
Опубликовано: 2018-01-03
Хотите увеличить конверсию вашего сайта? Очевидные изменения будут включать ваш призыв к действию, придумывание чего-то более заманчивого и привлекательного. Или, возможно, сами маркетинговые и рекламные материалы. В конце концов, если вы заинтересуете людей до того, как они попадут на ваш сайт, они обязательно обратятся, верно?
На самом деле, вы можете быть удивлены, узнав, что все начинается с дизайна. Без сомнения, вы понимаете основы как менеджер по маркетингу или владелец малого бизнеса. Вы имеете дело с одной и той же концепцией при выборе логотипа, цветов и темы, а также при оснащении своего обычного магазина. Все сводится к презентации и опыту, который вы предоставляете своим посетителям.
Почти половина потребителей (46,1%) чувствовать дизайн — лучший способ решить, заслуживает ли компания или бренд доверия. Кроме того, люди просто покинут ваш сайт, если он некрасивый — всего 38% всех посетителей. , если быть точным.
Каков наилучший способ сделать ваш сайт привлекательным, а также увеличить потенциал конверсии? Ответ заключается в соблюдении основных принципов дизайна: цвет, размер, пространство, линия, форма, текстура, ценность.
1. Цвет
По сути, цвет используется для того, чтобы вызывать эмоции, повышать визуальную привлекательность и выделять важные элементы. Цвета, которые вы выбираете, влияют на более глубокий уровень. Конечно, выбор двух цветов для темы, которые не совпадают, вызывает раздражение, но именно чувства и эмоции, которые они вызывают у ваших посетителей, будут мешать их общему опыту.
Теплые, активные цвета, такие как оранжевый и красный, обычно вызывают более яркие реакции. Прохладные и пассивные цвета, такие как синий и фиолетовый, гораздо приятнее, поэтому многие исследования показывают, что синий — это цвет счастья. .
Вы захотите обратить на это внимание при выборе цветов для фона, дополнительных визуальных элементов и акцентов, типографики и многого другого. Учитывайте тон вашего сайта, товары, услуги и то, чего вы хотели бы достичь. Если вы хотите произвести более расслабляющее, успокаивающее впечатление, холодные цвета, такие как различные оттенки синего, отлично подойдут. Если вы хотите привлечь внимание, более яркие цвета — это очевидный выбор, но опять же, то, что вы используете, будет зависеть от внимания, которое вы привлекаете.
Вы можете узнать больше об использовании психологии цвета для повышения конверсии в этой подробной статье. Нил Пател. Мне нравится это колесо эмоций от Converter для описания различных эмоциональных триггеров цветов:
2. Размер
Размер, как вы знаете, это то, насколько большим или маленьким является предмет или элемент. Когда дело доходит до элементов дизайна, размер часто связан с отношением одного элемента к другим вокруг него. Чем крупнее элемент, тем больше он будет выделяться визуально. Таким образом, вы можете использовать размер, чтобы определить важность, вызвать визуальный интерес, привлечь внимание, направить фокус почти как сюжетную линию и многое другое.
Если вы хотите, чтобы заголовок или название продукта мгновенно привлекли внимание посетителя, используйте крупный привлекательный шрифт, который выделяется на фоне всего остального на странице. Это также отличный способ увеличить конверсию без изменения всего дизайна. Например, ваш призыв к действию можно увеличить, чтобы он выделялся на фоне обычного контента.
Если вы не знакомы с кодом, вам может быть страшно вносить подобные изменения самостоятельно. К счастью, если ваш сайт работает на WordPress, есть плагины, которые позволят легко изменить размер заголовка. Попробуйте бесплатный плагин Customify .
3. Космос
Пространство — это пустые области вокруг различных элементов, включая типографику, поля вокруг текста и многое другое. Стратегии минимального дизайна способствуют использованию большего пространства и уделение внимания визуальным компонентам, которые существуют. В некотором смысле, он сохраняет чистый интерфейс, который помогает всему выделяться и выглядеть красиво.
Пространство можно использовать для разделения элементов или групп. Он может разбить текст — как в случае с разрывами строк и новыми абзацами — и даже добавить визуальную привлекательность. Что еще более важно, пространство дает глазам зрителя, так сказать, отдых. Поскольку он не включает в себя ничего важного или всеобъемлющего, его также можно использовать для направления взгляда или фокусировки вашей аудитории.
Оставьте достаточно места вокруг определенного объекта, изображения или элемента, и вы действительно определите его важность. На самом деле это настолько важно, что стоит особняком среди моря текста и контента на вашем сайте.
Если вы используете WordPress, ищите тему, включающую конструктор страниц. Конструкторы страниц дают вам гораздо больше контроля над размером и расстоянием между элементами на вашей целевой странице. Одна из моих любимых — тема Salient. .
4. Линия
Строго говоря, линия — это отметка между двумя противоположными точками. Как вы уже знаете, существует много типов линий, и они бывают разных размеров и форм. У вас есть прямые линии, волнистые линии, изогнутые линии, жирные линии, тонкие линии и т. д.
Линии — подобные пространству — универсальная составляющая современного дизайна. . Вы можете использовать их для самых разных целей, от простых до продвинутых. Вы можете использовать акцентные линии, чтобы подчеркнуть слово, фразу или изображение. Вы можете соединять элементы вместе, используя одну трассируемую линию. Конечно, это не заканчивается.
Лучшая стратегия повышения конверсии с помощью строк — использовать их, чтобы привлечь внимание к CTA или лид-форме. В одном тематическом исследовании, опубликованном ConversionXL , юридическая фирма протестировала ряд визуальных сигналов, чтобы определить, какой из них лучше всего работает в исследованиях с отслеживанием движения глаз. Стрелка, указывающая на форму генерации лидов, была явным победителем.
5. Форма
Форма — это, по сути, комбинация высоты и ширины, если ее разбить. В начальной школе, а обычно даже раньше, вы начали работать с этими основными строительными блоками. Есть треугольники, квадраты, круги и сферы, шестиугольники и многое другое. Странные или менее распространенные формы могут использоваться для привлечения внимания — поэтому знаки остановки имеют именно такую форму, в сочетании с ярко-красным цветом, конечно.
Формы можно разделить на три основных типа: геометрические, естественные и абстрактные.
- Геометрические: треугольники, квадраты, прямоугольники, круги и т. д.
- Натуральные: листья, животные, деревья, люди, предметы и т. д.
- Абстрактные: значки, стилизации, графические изображения, символы, контуры и т. д.
Вы можете использовать формы, чтобы расширить визуальную привлекательность раздела, элемента или области. Например, включение призыва к действию в кнопку или другой контейнер, который сам по себе является фигурой, — отличный способ привлечь внимание. Мне нравится этот пример из Visual Website Optimizer :
6. Текстура
На самом деле мы знаем текстуру как ощущение предмета или поверхности. Он шероховатый, как бетон, или гладкий, как полированное дерево? В дизайне это не совсем так, поскольку вы не можете чувствовать элементы страницы или экрана. Тем не менее, вы можете показать текстуру через внешний вид предмета.
Например, хорошо известный узор из уложенного кирпича можно использовать для добавления визуальной глубины и интереса к мягкому сплошному цвету. Конечно, это подразумеваемая текстура, но она работает так же эффективно. , особенно когда вы выбираете соответствующий стиль.
Вы можете использовать такие текстуры, как кирпич, бетон и камень, чтобы подчеркнуть силу или надежность. Вы можете использовать древесную текстуру, чтобы украсить внешний вид или элегантность. Все зависит от того, как и где вы используете визуальные текстуры и какой эмоциональный отклик вызывает ваш дизайн.
В одном тематическом исследовании благотворительная организация, которая собирала бывшие в употреблении сотовые телефоны, применила текстурированный фон к форме для генерации лидов. , и это увеличило пожертвования на 53%. Это простой трюк, который можно реализовать с помощью CSS. .
7. Ценность
В маркетинге мы определяем ценность как нечто, что в некотором роде дает отдачу. Какова неотъемлемая ценность продукта или компонента?
В дизайне ценность определяется через светлоту или темноту области. Градиент — популярный в современном дизайне — один из самых распространенных способов представления ценности. Обычно он переходит от темного к светлому или от сплошного к прозрачному.
Как и многие другие компоненты здесь, вы можете использовать значения или градиенты, чтобы привлечь внимание. Что еще более важно, их можно использовать, чтобы подчеркнуть важность определенного органа или концепции. Вы можете поместить свой CTA в самую яркую часть градиента или окружить кнопку CTA цветным свечением. чтобы выделиться.
В приведенном ниже примере из концептуального дизайна Дениса Абсуллина на Dribbble. , вы можете увидеть слабое свечение вокруг кнопки призыва к действию, чтобы добавить товар в корзину.
Заставьте элементы дизайна работать на вас
Дизайн является критически важным компонентом успеха веб-сайта, но он не должен быть сложным. Простое упоминание элементов дизайна может стать основой для выдающегося сайта, который может эффективно продвигать ваш бренд.