Выбор читателей
Популярные статьи
С помощью HTML можно задавать цвета всех ссылок на странице, а также изменять цвета для отдельных ссылок.
Цвета ссылок задаются в качестве атрибутов тега
. Атрибуты являются необязательными и если они не указаны используются значения по умолчанию.link — определяет цвет ссылок на веб-странице (цвет по умолчанию синий, #0000FF).
vlink — цвет уже посещенных ссылок. Цвет по умолчанию фиолетовый, #800080.
В HTML цвета задаются обычно цифрами в шестнадцатеричном коде, в виде #rrggbb , где r, g и b обозначают соответственно красную, зеленую и синюю составляющую. Для каждого цвета задается шестнадцатеричное значение от 00 до FF, что соответствует диапазону от 0 до 255 в десятичном исчислении. Затем эти значения объединяются в одно число, перед которым ставится символ # (пример 1).
Пример 1. Задание цветов ссылок
Содержание сайта
Цвет не обязательно задавать в шестнадцатеричном формате, можно использовать и ключевые слова. В данном примере цвет фона веб-страницы установлен черным, а цвет ссылок — красным.
Для изменения цвета ссылок удобнее использовать CSS. Чтобы установить цвет для всех ссылок на веб-странице применяются следующие псевдоклассы, которые добавляются к селектору A .
visited — Стиль для посещенной ссылки.
active — Стиль для активной ссылки. Активной ссылка становится при нажатии на нее.
В примере 2 показано, как изменить цвет ссылок на веб-странице с помощью стилей. Для этого воспользуемся стилевым свойством color , оно задает цвет определенного текста, в данном случае, ссылок.
Пример 2. Цвет ссылок, заданных через стили
Содержание сайта
Вышеописанный способ задания цветов работает для всех ссылок веб-страницы. Однако, иногда возникает необходимость одновременно использовать разные цвета. Светлые, например, для темных областей веб-страницы, а темные цвета — соответственно для светлых. Для этого также можно воспользоваться стилями.
Для изменения цвета ссылки следует использовать атрибут style="color: #rrggbb" в теге , где #rrggbb — цвет в шестнадцатеричном представлении. Можно, также, использовать названия цветов или указывать цвет в формате: rgb (132, 33, 65) . В скобках указаны десятичные значения красного, зеленого и синего цвета (пример 3).
Содержание сайта
Интернет-маркетинг
Юзабилити
В данном примере приведены три разных способа задания цвета с помощью стилей.
Не нужно пытаться угадать цветовое оформление рекламных объявлений по которым посетители охотнее кликают. Нужно провести эксперимент с показом рекламных объявлений разного цветового оформления. И по его итогам мы узнаем предпочтения посетителей Вашего сайта. Однако за окнами 21 век. Поэтому напишем небольшой скрипт, который все сделает за нас.
В своем эксперименте я остановился на трех основных цветах: синем, красном и зеленом. Взял каждый из них с разной степенью яркости. И прибавил к ним еще один цвет — цвет ссылок на моем сайте. Таким образом в моем эксперименте будут участвовать семь цветов.
За основу я беру скрипт показа рекламных объявлений РСЯ (Рекламная сеть Яндекс), который мне выдал ЦОП Профит-Партнер . Добавим в него автоматическую смену цвета. Для каждого из цветов создадим уникальную метку. Чтобы в дальнейшем по этим срезам можно было проанализировать какой цвет рекламных объявлений на Вашем сайте более привлекательный для посетителей.
Запустим скрипт в работу и начнем собирать данные. В статистике появятся срезы, которые создал наш скрипт.
Эксперимент нужно проводить круглосуточно минимум в течении недели. Чтобы учесть все временные зависимости и особенности выходных и рабочих дней. Важно, чтобы каждое цветовое оформление было показано не менее 1000 раз.
Если выбирать из трех основных цветов, то на моем сайте явного лидера нет. Разница в несколько процентов может быть обусловлена погрешностью. Но общая тенденция совпадает с рекомендациями специалистов ЦОП Профит-Партнер — более кликабельный цвет красный.
Если рассматривать детально все семь цветов, то предпочтения у посетителей вызывает следующая группа: темно-красный (#990000), светло-зеленый (#00CC00) и темно-синий (#000099).
Я советую не смотреть на мою статистику, а проводить свой собственный эксперимент по подбору цветового оформления объявлений рекламной сети Яндекс.
Если у Вас несколько сайтов, то для каждого сайта необходимо проводить свой эксперимент.
Если Вы сменили дизайн, то опять проведите эксперимент.
Если у Вас несколько рекламных блоков как у меня, то для каждого рекламного блока также необходимо проводить свой эксперимент. Вы будете удивлены, но на моем сайте предпочтения пользователей отличаются в рекламных блоках в середине и конце статьи.
Эксперимент необходимо проводить круглосуточно минимум 7 дней.
Работа с цветом - важнейший навык любого веб-дизайнера. Грамотное владение им может принести сайту успех, а даже небольшая ошибка в создании гаммы доставить много хлопот в будущем. В этой статье мы разберем 10 ошибок, которые дизайнеры допускают при работе с цветом на сайте, и расскажем вам, как их избежать.
Например, оранжевый - прекрасно мотивирующий к покупкам цвет. Отлично передает призывы к действию, подходит для интернет магазинов.
Зеленый цвет символизирует доверие, а что может быть важнее доверия, когда речь заходит о еде?
Даже если вам очень нравится какой-то сайт, задумайтесь, прежде чем заказывать «точно такое же, но про мои товары».
Советуем использовать при подборе цветовой палитры как минимум цветовой круг. При подборе с его помощью цветов нужно помнить, что хорошо сочетаются друг с другом соседние цвета и те, что расположены напротив.
Советуем также использовать специализированные сайты . Здесь можно сформировать свою гамму или использовать одну из уже готовых.
На первом примере для оформления текста используется 3 цвета, на втором всего два. Именно второй вариант смотрится лучше и текст на нем проще читается.
На примере две кнопки с одним и тем же назначением на одном сайте. Неудачное решение.
Два этих модных веяния чаще всего несовместимы. Нельзя продавать в расчете на эмоции, если ваш сайт не создает этих самых эмоций при просмотре.
Но это не означает, что продающий эмоциональный лендинг должен сиять всеми цветами радуги.
Наши привычки, как и методы маркетологов, перекочевывают из супермаркетов на просторы интернета, к примеру, сайт ювелирной компании, выполненный в черном цвете, выглядит элегантно и дорого:
Не стоит использовать много черного цвета на сайте в качестве фона, если вы оказываете услуги в низком ценовом сегменте или продаете недорогие товары. Впечатления от сайта у посетителей не будут совпадать вашим торговым предложением.
Ваше видение может быть сколько угодно прекрасным, но позвольте дизайнеру предложить свое. Если после нескольких попыток дизайнер так и не сможет показать нечто, что вам понравится, только тогда стоит задавать ему жесткие рамки в подборе цветовой гаммы.
Другое исключение: если вы уверены в том, что ваш вариант цветового оформления хорошо продуман и вы можете сами себе аргументировать этот выбор. Как правило заказчики не учитывают того, что берет в расчет дизайнер - читаемость текста, достаточная яркость кнопок и оптимальное количество цветов.
Для примера мы размыли первый экран Aviasales.ru - внимание привлекают блоки элементов 1, 2 и 3. После прочтения заголовка, т.е. формирования у пользователя правильных ожиданий, он (вспоминаем про правила контраста) будет смотреть на нужные элементы выбора параметров и call-to-action.
А посмотрите, как четко выделяется на размытом фоне основное действие на сайте ostrovok.ru.
Если ваши интерфейсы проходят подобные тесты на ура, то дальнейшие улучшения сайта необходимо проводить, основываясь на понимании пользовательской психологии, т.е. анализируя фидбек от реальных пользователей. С помощью вопросов вроде: “Куда вы посмотрели в первую очередь: на какие 3 элемента сайта, и в каком порядке? Куда вам хочется нажать в первую очередь и почему?” в AskUsers вы сможете понять не только как распределяется внимание пользователей, но и почему пользователи смотрят на те или иные элементы. Данная информация поможет выявить целый ряд проблем в текущем интерфейсе и найти оптимальные варианты их решения.
Помните, что форма подчиняется содержанию. Цветовое оформление служит инструментом, позволяющим сконцентрировать внимание пользователя на важной для пользователя и владельца сайта информации.
Продолжаю опубликовывать интересные, и на мой взгляд, полезные новости из большого и необъятного мира SEO . Сеголня поговорим о расцветках дизайна сайта... Да-Да именно о цветовых гаммах. Ну что же начнем. Цвет (расцветка) дизайна сайта влияет на кликабельность рекламы, полагают психологи из университета Оксфорд США.
Американские ученые подсчитали, что обычный пользователь проводит на одном интернет-портале приблизительно 2 минуты. Из них последние 4-7 секунд являются решающими для нас - seo специалистов, хотя дизайнеров это также касается. именно в этот период времени пользователь либо покидает интернет-сайт, либо нажимает на предложенную ему рекламу. Выбор зависит от цвета сайта и рекламного блока . Самый "плохой" (нежелаетльный и некликабельный) вариант оформления дизайн сайта - это оформить сайт в серых или красных тонах. Трафик приблизится к нулю (кликабельность), эффективность рекламы, размещеннйо на интернет ресурсе тоже. Комфорт и спокойствие испытывают пользователи, которые находятся на сайтах, где доминирует белый цвет. Они хорошо кликают по баннерам, контекстная реклама их привлекает только, если заголовки неожиданно (очень) яркие и контастные, а текст и URL максимальной величины. Почти тоже самое происходит с зелеными дизайнами.
Сайты с синим дизайном и оформлением вызывают доверие (на ум сразу приходят социальные сети «В Контакте » и «Facebook»). Что интересно, реклама здесь работает, если расположена на белом фоне, а заголовки набраны цветом на 2 тона темней (и снова это подходит к нашим любимым «В Контакте» и Facebook). Самый выигрышный цвет дизайна сайта , по мнению британских психологов, желтый. Соотношение заходов к кликам здесь составляет 1 к 2,5, так как многие интернет-пользователи просматривают сразу 2-3 рекламных объявления. А вот баннеры на всех желтых сайтах неэффективны. Другой удачный цвет для оформления дизайна порталов, на которых кликают по рекламным блокам и банерам - это не контрастный коричневый. Здесь результат для баннерной рекламы составляет 1 клик на 3 посещения, для контекстной приблизительной 1 к 2.
PS. Подведем итоги. Первое, смущает то, что конечно же аудитория, которую тестировали является не русскоязычной, у нас другой менталитет. Все таки жители СНГ - это не жители Америки или Европи. Росийские сайты всегда отличались радужными цветами и оттенками в дизайне, в отличие от сдержанных европейских и американских интернет-ресурсов (яркий пример сайт Apple). Второе, в связи с этим и по рекламе "кликают" у нас (собственное наблюдение) яркой и контрастной. На счет желтых сайтов и порталов можно не согласиться - не вызывают они доверия у отечественных пользователей сети (даже не скажу сразу о большом желтом портале - не приходит не одного на ум), разве что у маленьких деток (хотя это мое мнение)! В общем наверное нужно будет провети небольшой тестик, о котором я и расскажу в рубрике "эксперименты".
У какого цвета кнопки самая высокая конверсия - старый философский вопрос, на который многие знают ответ. «Красная» - ответят начинающие маркетологи. «Контрастная» - ответят опытные маркетологи. Мы протестировали 21 666 пользователей на эту тему. И пришли к довольно интересным выводам.
Вначале статьи надо добавить интриги и будоражащих фактов, чтобы привлечь внимание. Руководствуясь этим советом, могу сказать, что на практике мы получили увеличение конверсии до 65% при простой смене цвета кнопки. В этой статье расскажем о результатах и как это сделать.
Не буду рассказывать, что мы изобрели волшебную таблетку по управлению конверсией. В случаях увеличения конверсии я пришел к одному простому выводу. Стопроцентных утверждений, которые будут работать всегда и для всех - не существует. Волшебных таблеток тоже. Ранее мы писали о том, как в некоторых случаях слово «Бесплатно» понижает конверсию. Что уж говорить о других «стопроцентных» истинах.
Итак, насколько можно повысить конверсию, просто изменив цвета кнопки?
Мы получили до 65% повышения конверсии. 65% было самым максимальным результатом тестов. Среднее значение было на уровне 11%. Но даже такое повышение конверсии - очень хороший результат. Учитывая, что этого можно добиться с помощью изменения цвета кнопки.
Многие тесты экспертов говорят, что кнопка красного цвета обладает самой высокой конверсией. Почему? Мы знаем, что каждый цвет обладает своими ассоциациями и вызывает определенные эмоции. Красный цвет подразумевает остановку, опасность и страстность. И в большинстве случаев (как считается) он приводит к лучшим результатам в интернет-маркетинге.
Ниже алгоритм создаия А/Б тестов:
1. Создание виджета в конструкторе
Для создания виджета вы должны быть зарегистрированы в конструкторе .
Процесс создания состоит из 3-х шагов:
Вы можете посмотреть данное видео по созданию виджета. Здесь подробно разбирается каждый этап. Текстовая инструкция по созданию виджета находится .
Хочу отметить, что возможностей настроек в конструкторе гораздо больше. Например, показ при просмотре определенного количества страниц, по дням недели, по источнику переходу, частоте показа и многое другое. Но вначале советую использовать основные настройки, а потом экспериментировать с дополнительными.
После того, как вы создадите виджет надо сделать его копию. Чтобы внести в новый виджет изменения и поставить в А/Б тест. Для этого вы кликаете на иконку «Копировать» в созданном виджете.
Он автоматически включается на сайте. Сейчас надо его выключить, так как он не отредактирован. Для этого измените статус.
Теперь перейдите в его настройки, нажав иконку «В редактор».
Здесь измените желаемый элемент, который вы хотите протестировать. Например, давайте поменяем цвет кнопки. Это делается в один клик. Надо просто выбрать другой цвет кнопки.
Кликните на «Цвет кнопки» и выберите нужный.
После этого сохраняем виджет. На 4-ом шаге можно ничего не менять, чтобы оставить настройки прошлого виджета. Для этого просто нажмите кнопку «Сохранить».
Теперь у вас создано 2 виджета с разным цветом кнопок. Можно переходить к созданию А/Б теста. Для удобства осталось только поменять название во втором виджете.
3. Создание А/Б теста
Для создания теста надо зайти в меню «А/Б тесты». И нажать на кнопку «Создать тест».
Здесь надо:
Выбрать сайт- написать название теста
Выбрать тип теста
Касательно типа теста. В KEPLER LEADS есть 2 разных типа А/Б теста: Классический и Индивидуальный. Различие - в показе виджетов вернувшимся посетителям. Если вы хотите вернувшемуся посетителю показывать новый вариант виджета, выберите Классический тест. Если хотите, чтобы вернувшемуся пользователю не показывался другой вариант виджета (запоминается первый показанный и всегда срабатывает только он, в зависимости от настроек показа), тогда выберите Индивидуальный.
Выбрав тип теста, нажмите кнопку «Добавить». Останется последний шаг - выбрать виджеты для теста. Для этого надо кликнуть на ячейку «Виджеты» и выбрать их.
Выбрав виджеты, проверьте все ли они активные. Если есть неактивные виджеты, то вы можете включить их прямо здесь.
Все! Тест создан. Все результаты вы можете посмотреть в статистике теста. Для этого кликните справа от названия теста на иконку «Просмотр». Рекомендует проводить тесты на общем трафике от 1000 показов (это видно в столбце «Просмотры»). После этого принимать решение о запуске следующей теста.
Ваша работа на этом не заканчивается. Теперь надо отслеживать результаты, и после достижения значительных данных (мы рекомендуем от 1000 посетителй) тестировать другие гипотезы. Это могут быть заголовки, тексты призыва к действию, ценностные предложения, изображения и пр. О других А/Б тестах мы напишем в следующих статьях. Расскажите о своих результатах в комментариях.
Статьи по теме: | |
Как настроить выключение компьютера?
На дворе 21-й век и сейчас мало кто выключает компьютер перед тем как... Как сохранить набранный текст
Большинство знакомых мне интернет-маркетологов неохотно пишут тексты. Их... Юань стал новой резервной валютой мвф
С 1 октября 2016 года в мире начали официально действовать уже не... |