например: кворум
Антон Николаев
Бесплатный курс обучения "Продвижение сайтов для начинающих". Обучение с акцентом на алгоритмы поисковых систем и бесплатные SEO инструменты.
> как учиться > 32. user interface
Лекция 1: Начинаем знакомство с поиском (13 мин.)Лекция 2: Внутри поисковой системы: от запроса до выдачи (18 мин.)Лекция 3: Поисковые системы и слова (в тексте, HTML коде), назания за СПАМ (14 мин.)Лекция 4: Оптимизация, переоптимизация и качество текста (13 мин.)Лекция 5: Поисковые системы и ссылки (16 мин.)Лекция 6: Сервисы с собственными базами ссылок и параметры ссылок (19 мин.)Лекция 7: Сервисы (2) с базами ссылок и новые типы ссылок (19 мин.) Лекция 8: Сервисы (3) с базами ссылок и новые атрибуты ссылок (19 мин.)Лекция 9: JavaScript и новые типы ссылок. Внутренние ссылки. (30 мин.)Лекция 10: Поисковые системы и поведение пользователей (36 мин.)Лекция 11: Поведение пользователей и технические параметры (24 мин.)Лекция 12: Формула и факторы ранжирования поисковых систем (40 мин.)Лекция 13: Создаем сайт под продвижение - запросы пользователей (50 мин.)Лекция 14: Пример ручного создания семантического ядра (32 мин.)Лекция 15: Сервисы для создания семантического ядра - 1 (35 мин.)Лекция 16: Сервисы для создания семантического ядра - 2 (16 мин.)Лекция 17: Кластеризация, отбор запросов и контент посадочной страницы (26 мин.)Лекция 18: Сервисы и инструменты - кластеризаторы (23 мин.) Лекция 19: Три типа посадочных страниц и контент для них (23 мин)Лекция 20: Контент посадочных страниц и сниппет (45 мин)Лекция 21: Методы контроля и оценки результатов продвижения (26 мин.)Лекция 22: Коммерческие сервисы для контроля продвижения сайта (29 мин.)Лекция 23: Получили в продвижение старый сайт (21 мин.)Лекция 24: Выявляем и устраняем проблемы скорости загрузки (19 мин.) Лекция 25: Проблемы с индексацией, дубли и переспам (19 мин.)Лекция 26: Увеличиваем SEO трафик - подбор запросов близких к ТОПу (35 мин.)Лекция 27: Увеличиваем SEO трафик - расширяем запросы по конкурентам (16 мин) Лекция 28: Естественный ссылочный профиль (21 мин.)Лекция 29. Ссылочный профиль по методам получения ссылок (14 мин.)Лекция 30: Традиционные SEO методы наращивания ссылочной массы (42 мин.)Лекция 31. Воронка продаж, SEO воронки и удовлетворенность пользователя (29 мин.)Лекция 32. Поведение посетителей, цвет и дизайн (24 мин.)

Урок 32. Поведение посетителей, цвет и дизайн (24 мин.)

В этом уроке: Цветовые предпочтения мужчин и женщин. Утилитарные и гедонистические цвета. Ассоциации - механизм визуального восприятия. Выявление интересов аудитории вашего сайта. Стилистика дизайна и доверие аудитории.
смотреть видеолекцию:

КОНСПЕКТ УРОКА:

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

Привлекательность сайта и цвет

В начале сегодняшнего урока я хочу напомнить вам вот эту схему.

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

Вам нужно понимать, на какую целевую аудиторию направлен сайт, который вы продвигаете. И насколько его визуальный дизайн соответствует задачам и интересам этой целевой аудитории.

В маркетинге и в дизайне есть много исследований о влиянии дизайна на продажи. Например, точно установлены цветовые предпочтения: мужчины предпочитают яркие, насыщенные цвета, а женщины - мягкие, сглаженные. И это нужно учитывать в дизайне сайта, который ориентирован на мужскую или на женскую аудиторию - чтобы он был привлекательным.

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

Среди базовых понятий о привлекательности цвета в маркетинге, рекламе, дизайне:

Желтый и красно-оранжевый цвета на физиологическом уровне ускоряют работу нервной системы.
А синий и зеленый - притормаживают.

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

С этим связано разделение оформления помещений под различные бизнес и оформления упаковок на
"гедонистические цвета" и "утилитарные цвета".

Там где нужно возбуждение нервной системы - рекомендуется применять "гедонистические цвета": красный, желтый, фиолетовый (шоколад, мороженое, ночные клубы и рестораны).

А "утилитарные цвета", которые не требуют возбуждения нервной системы используют для утилитарных товаров (шины, антифриз, электрика, бумажные полотенца, адвокатура).

Этот подход годится и для сайта.

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

Я встречал ссылку на исследование, в котором утверждается, что 90% пользователей отказываются от покупки нужного товара, если не нравится цвет. Поэтому цвет он очень важен при оформлении сайта.

Цвет и управление вниманием на экране

Кроме эмоциональной стороны цвета в оформления сайта, есть еще и прикладная специфика, связанная с управлением поведением пользователя на сайте. В частности: как оформлять интерактивные элементы, кнопки, которые требуют реакции посетителя.

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

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

Перед вами информация из сервис Kissmetrics. Он позиционирует себя как альтернативу Google Analytics и заточен, прежде всего, на маркетинговые вопросы. В этом примере:
- Компания изменила цвет кнопки в форме на своем сайте, с зеленого на красный. И получила увеличение отправки формы на 21%
- Вторая компания изменила цвет кнопки с зеленого на желтый - и получила увеличение кликов на 6.3%

А слева на экране пример тестирования эффективности несколько вариантов оформления и расцветки ссылки download - по этой кнопке должна загрузиться некоторое программное обеспечение.

Вы видите результаты:
- вариант номер 1 имел конверсию 39%;
- вариант номер 12 дал конверсию на 38% больше исходного варианта;
- вариант номер 10 и дал наибольшую конверсию в 63%, это на 60% больше исходного варианта 1.

Нужно отдать должное, в варианте 12 еще добавить слово for free, а не только изменили цвет.
Однако вот посмотрите - вариант 12 тоже написано for free. И разница только в цвете дала увеличение конверсии на 10%

В маркетинговой литературе встречается много разных рекомендаций - какие цвета и какие цветовые гаммы использовать для той или иной аудитории (пример на экране). При этом нужно понимать, что эти цветовые схемы имеют ограниченное использование в рамках конкретной культуры. Для американцев на Среднем Западе и для россиян в Москве или на Дальнем Востоке - это могут быть разные цвета.

Более того, в воздействии цвета есть и индивидуальная составляющая восприятия. Вот в примере зеленый цвет - он воздействуеь на ассоциативные связи человека в его личном визуальном опыте. На данной картинке изображено: для фермера зеленый цвет будет ассоциироваться с растительностью на его полях и связанными с этой деятельностью эмоциями. А для инвестора зеленый цвет может ассоциироваться с понятием "green backs" - традиционным символом американских купюр. Поэтому личные эмоциональные ассоциации от цвета могут корректировать восприятие среднестатистических наборов цветов. И такие рекомендации, как на экране, носят весьма условный характер.

Примеры работы с цветом на сайтах

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

Первая колоночка скриншотов крупных SEO-сервисов использует синий цвет - самые любимый в массах.

Вторая колоночка использует зеленый цвет.

Ипользование цветового акцента на кнопке действия:

Вот вы видите первый же экран: синий экран и ярко-оранжевая "кнопка действия".
Ниже: также синий экран и оранжевая "кнопка действия" (только на белом фоне и чуть вверху - тоже вполне видно).

Далее три сервисы используют синий цвет основного фона экрана и зеленую "кнопку действия".

Все грамотно, прямо по теории.

В следующей колонке два сервиса - основной цвет зеленый и оранжевая кнопка действия.

Напомню вам, что в теории цвета к утилитарным прикладным цветам относятся: зеленый, синий, черный и серый.

Следующие 4 сервиса используют оттенки серовато-зеленого и серовато-синего. И белый фон.
Выглядит гораздо спокойнее и утилитарнее.

Эта колонка - дизайн сайтов построен на темно-сером или черном, с небольшими оттенками в зеленый или синий. Всё соответствует теорию прикладных утилитарных цветов.

В качестве акцента "кнопки действия" на этих темных сайтах используется: зеленый, оранжевый, синий, желтый, красный.

Темный, тёмно-серый и чёрный дизайн создают серьезную, деловую атмосферу.

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

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

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

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

Последняя колонка - известные сервисы с оригинальным подходом к цвету в дизайне сайта.

Вот два сервиса воспользовались сиренево-фиолетовой цветовой гаммой. Как вы помните, она на втором месте по предпочтениям у женщин. И на последнем месте у мужчин. Я не знаю, насколько здесь это задумано - ориентация на предпочтения только женщин и игнорирование предпочтений мужчин. Это SEO-сервисы только для женщин? Хотя вполне возможно, что просто здесь дизайнером была женщина и она привнесла собственные цветовые предпочтения не думая о целевой аудитории.

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

Ну и совсем оригинальные цвета у сервиса Тургенев (Ашманов и Партнеры). Шоколадно-подарочный, гедонистический дизайн, не стандартный для утилитарных задач.

Попробуйте глядя на эти сайты прочувствовать и уловить собственные эмоции по отношению к тому, что вы видите. И для себя решите:
- какой сайт обещает наиболее обещает, что SEO - это легко;
- какое сайт показывает наоборот, что SEO - это будет совсем не просто;
- если вы пришли на сайт первый раз - на каком сайте хочется остаться?
- какой сайт вызывает доверие?
- какой сайт вызывает несерьезное, неубедительное впечатление?

Ещё немного о теории цвета для маркетологов и дизайнеров.

Цвета воздействуют на восприяте двумя способами:

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

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

Дизайн, ассоцииации и восприятие

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

Коричнево-зеленая гамма будет ассоциироваться у большинства пользователей с землей и растениями, и всем, связанным с этой деятельность.

Когда мы видим любое изображение, в нашем мозгу срабатывает два уровня ассоциаций:

1. Во-первых, это "литературные ассоциации". Когда мы распознаем объекты и они нам что-то "говорят". В примере на экране картина "Ленин выступает перед рабочими". Мы здесь распознаем: Ленина, рабочих, понимаем, что речь идёт про революцию. Срабатывают ассоциативные связи и возникают какие-то воспоминания, что-то мы знаем, возможно - некоторые эмоции. Это одна сторона восприятия.

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

В результате ассоциации и эмоции от двух уровней могут действовать в одном направлении, а могут и противоречить друг-другу.

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

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

В качестве примера, мои собственные ассоциации, образы от сайтов популярных SEO-сервисов.

1. Здесь изображена очень сложная сеть (в оригинале это всё еще и движется). В этом доме живут ученые. Они изучают очень сложные системы (потому что здесь такая сложная сетка). Далеко не все способны знать про такие сложные вещи. Когда вы - новичок и приходите на такой сайт в первый раз, то вы думаете "хочу ли я углубляться в знание таких сложных вещей?".

2. Тёмное, размытое пространство. Из темноты выступает экран монитора. На экране сложные таблицы и графики. И некоторая форма для заполнения. Здесь обитают умные специалисты. Они смотрят на свои светящиеся мониторы и в этих мониторах есть вся информация про всё. Специалисты знают все по этим графикам.

И вот эта форма на переднем плане, она, как дверь - предлагает нам присоединиться к этим специалистам. И я задаю себе вопрос: "хочу ли я войти в эту дверь и присоединиться к этим специалистам? погрузиться в знание этих таблиц и графиков, научиться с этим работать?". Лично я - да, а вы - не знаю...

3. Две трети экрана занимает большое и комфортное мягкое красное кресло. В нём удобно сидит веселая девушка. Ей нравится сидеть в этом кресле - она улыбается и показывает нам большой палец. Ей очень комфортно, она сидит и смотрит на ноутбуке ролики из Ютюба или Тиктока. Ей весело и комфортно.

Наверное, я на сайте мебельной фирмы. И мне предлагают купить такое кресло, чтобы мне было также весело и комфортно. Хочу ли я купить кресло?

4. Следующий образ: симпатичный светло-синий фантастический город с небоскребами, уходящими вдаль. Это "город будущего" и меня приглашают в это "светлое будущее". Вот здесь, в это белое поле я должен ввести свои данные и меня возьмут в светлое будущее. На мой взгляд очень хороший образ, который затягивает. И это приглашение выглядит привлекательно.

5. Еще один сервис. Яркий синий, доброжелательный цвет. В меру спокойны и в меру активный. Ккрупные буквы - как в детской азбуке, веселые картиночки и кнопка с предложением туда войти. Это приглашение в "игровую комнату" для маленьких детей. Мне предлагают поиграть. Причем эти ассоциации здесь заложен осознанно - далее в тексте так и написано: "вам не нужно быть профессионалам, чтобы добиться высокого ранга и большого трафика". Это очень логичный дизайн, в котором визуальный ряд работает в том же направлении, что и "литературный" текст. И предложение, и позиционирование сервиса, и оформление - все гармонично. Этот сервис подходит целевой аудитории, которая хочет весело и легко поиграть, а не становиться профессионалами.

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

Интересы аудитории и дизайн

Перед вами Google Analytics. В разделе "Интересы - Обзор" вы можете посмотреть: какие еще интересы есть у аудитория, которая посещает ваш сайт.

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

У аудитории сегментированной по интересам - разные поведенческие характеристики. Вот здесь вы видите, что у разных групп по интересам - разное количество просмотров страниц за сеанс, разная средняя длительность сеанса и разный показатель отказов.

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

Например, можно попробовать визуально присоединиться к тому стилю, тем брендам, которые для аудитории имеют значимость. Я это покажу на примере разработки логотипа. У меня была задача разработать логотип для коттеджного поселка, который позиционируется в люксовом сегменте (кроме образования программиста у меня есть еще художественное образование и значительный опыт разработки в графическом дизайне).

Ход дизайнерской мысли:
- первично выбирают коттеджи, в основном, женщины;
- для обеспеченных женщин привычны товары люксового сегмента и известные бренды - производители;
- вот картинка с логотипами популярных брендов;
- нужно сделать такой логотипа в таком стиле, чтобы он смотрелся "своим" среди этих брендов.

Здесь я использовал стилистику, шрифты, игру толщин в шрифте - как во многих этих популярных брендах. Также здесь использовал золотой цвет. А это второй вариант. Оба предложения хорошо вписываются в общий ряд популярных брендов. И, таким образом, целевая аудитория будет "узнавать" данный проект, как "свой". Вот, что можно делать средствами визуального дизайна.

На этом я, пожалуй, и завершу свой цикл лекций. Всем спасибо за внимание!

Предыдущая лекция 31: Маркетинг и UX, потребности и поведение пользователей; Воронка Продаж и Воронка SEO (Google Analytics и Search Console, Яндекс Метрика и Вебвизор, similarweb, tools pixelplus)