Конверсионная воронка. Как ускорить конверсионный путь или воронку продаж? Важные параметры и характеристики воронки продаж

«Шеф-редактор блога GetGoodRank, веб-аналитик, блоггер.
Как правильно оформить и применить иконки на сайте? Рассказываем о простых правилах юзабилити иконок, а также приводим простой чек-лист проверки.»

Иконка - схематический элемент графического интерфейса, обозначающий приложение, функцию или тематический раздел сайта/приложения. Иконки простые, лаконичные и эффективные. Используются для упрощения графического интерфейса приложения или сайта, а также для упрощения и ускорения коммуникации с пользователем (человеческое сознание в разы быстрее обрабатывает и «понимает» графику, нежели текст). Иконки классифицируются в зависимости от выполняемой функции:

Навигационные иконки - используются для обозначения функции: навгационные стрелки вверх и вниз для перемещения по длинной странице, корзина для перехода в корзину, лупа для активации строки поиска.
Информационные иконки - указывают на тематику раздела. К примеру, скрещенные инструменты часто указывают на раздел с технической информацией, шестеренка - на раздел с настройками, машина указывает на информацию о доставке, цифры 24/7 - на круглосуточный график работы и т. д.
Иконки-призывы к действию - часто используются для обозначения очевидных действий. К примеру, на странице скачивания приложения жирная стрелка вниз обозначает призыв к загрузке софта, на странице товара плюс обозначает призыв добавить товар в корзину и т. д.

Правила юзабилити иконок

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

1. Сопроводительный текст - разные сайты используют даже стандартные иконки с разной целью. Так, стандартная лупа может обозначать поиск по сайту или приближение/увеличение изображения. Графические символы можно трактовать двояко. Чтобы упростить задачу пользователя, следует сопровождать иконки текстом. Это в большей степени касается иконок навигации. Текст и графика в паре работают гораздо лучше, чем что-то одно.

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

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

4. Тест 5 секунд - при разработке индивидуальной концепции иконок (применении нестандартных иконок) проведите тест 5 секунд. Если в вы в течении 5 секунд не сможете идентифицировать иконку и понять, что она означает на сайте, значит данный графический символ недопустим в дизайне. Он будет создавать дополнительные препятствия на пути пользователя к цели: изучению информации на сайте, выбору товара/услуги.

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

Как проверить юзабилити иконок

Используйте для проверки юзабилити иконок на сайте следующий чек-лист вопросов:

Легко ли найти иконку в интерфейсе сайта или приложения?
Насколько гармонично выглядит иконка в интерфейсе? Не нарушает ли она общую концепцию дизайна?
Расположена ли иконка в ожидаемом для пользователя месте?
Не отвлекает ли иконка внимание от основного контента страницы?
Понятен ли смысл иконки пользователю?
Как выглядит иконка в мобильной версии сайта? Легко ли с ней взаимодействовать с тачскрина?
Ассоциируется ли данная иконка с другими, несмежными действиями? Не создает ли она дополнительные трудности в использовании сайта? Не приведет ли иконка к ошибочным действиям?
Необходима ли иконка в данном контексте для обозначения того, что к чему она привязана? Возможно ли обойтись без нее?

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

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

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

1. Как использовать иконки

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

Усиливаем список особенностей

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

Привлекаем внимание к новым особенностям веб приложения

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

Список различных приложений и продуктов

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

Пример:

Перечислите ваши услуги и увеличьте легкость чтения списка

Иконки должны соответствовать контенту и иметь простой дизайн. Определите, что вы хотели выразить с помощью контента и создайте на этой основе иконку. Какая тема у веб сайта или статьи? Какие цвета используются? Что это за стиль? Модерн? Классик? Иконки должны быть визуально унифицированы с идеями, выраженными в контенте.

2. Назначение и размещение

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

Акцентирование колонтитулов для придания заголовкам особенного вида

Даже простая иконка может добавить шарма и индивидуальности веб сайту.

Пример:

Увлеките посетителя чтением длинной страницы

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

Пример:

Отделяем заголовки и секции

Используйте иконки, чтобы поставить визуальную точку, отделяющую различные части текста.

Пример:

Размер значения не имеет! Даже маленькие иконки могут быть эффективны

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

Выделяем текст, размещая иконки справа от абзаца

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

Изменяете размер и размещение иконок

Включите воображение! Изменение размера и размещения иконок сделает контент более динамичным и интересным.

3. Выберите свой стиль

Когда дело доходит до стиля, то нужно иметь в качестве цели эффективность. Если ваш дизайн предполагает уникальность, то оригинальные иконки будут хороши для него, но эффективность гораздо более важна. Помните, что иконки предназначены для расширения и дополнения контента и дизайна. Поэтому особенно важно уделять внимание тому, как ваши иконки соответствуют остальному веб сайту. Не стоит покупать круто выглядящие иконки на каком-нибудь сайте, вроде iStockPhoto. Гораздо важнее, чтобы иконки были в одном стиле с остальным содержанием сайта.

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

Использование светлых цветов и отличного 3D дизайна иконок отлично дополняет внешний вид сайта: GoodBarry