Как иконки на сайте могут снизить конверсию 

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

Предки иконок на сайте: пиктограмма и идеограмма – в чем разница?

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

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

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

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

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

Как работают иконки на сайте и зачем они нужны

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

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

Основные функции иконок на сайте:

1. Привлекают внимание – яркие тематические иконки цепляют взгляд пользователей и акцентируют внимание на контенте.
2. Помогают понять смысл – изображения легче воспринимаются пользователем, нежели голый текст.
3. Ориентируют в интерфейсе – правильно размещенные иконки могут служить ориентирами, помогая пользователям быстрее находить нужные им функции и разделы на сайте или в приложении.
4. Экономят визуальное пространство – позволяют передать информацию с помощью компактных изображений, тем самым освобождают место на экране и делают дизайн более чистым и удобочитаемым.
5. Устанавливают связь с пользователем – иконки могут быть эмоционально заряжены через стилистику и создавать положительное впечатление о бренде.

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

5 основных принципов создания иконок

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

1. Единый стиль

   Существует множество стилей иконок: тонкие линии, залитые, 3D-иконки, скругленные и острые формы. Чтобы иконки выглядели гармонично, следует использовать их из одного набора или в одном стиле. Набор иконок называется «иконпаком» или «сетом».

2. Информативность

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

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

   

3. Простота

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

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

4. Соответствие бренду

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

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

   

   Вот такой иконопак подойдет для стогих сфер бизнеса:

   

5. Размер

   Обычно наборы иконок создаются одного размера. Популярные размеры включают 16x16, 24x24, 32x32, 48x48 и 256x256 пикселей.

   Однако вы также можете использовать размеры, удобные для вашего проекта. Главное, чтобы внутри одного набора иконки не отличались друг от друга. Если вам нужны разные размеры, лучше создать отдельные наборы иконок. Например, иметь наборы иконок размером 16x16, 24x24 и 40x40 – нормально и даже хорошо.

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

   

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

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

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

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

Обычно мы просто помещаем иконку с изображением шестеренки и добавляем текст «собственное производство». Но что видит посетитель сайта? Всего лишь иконку в виде шестеренки.

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

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

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

Использование реальных фотографий вместо иконок

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

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

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

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

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

Так надо ли отказываться от иконок на сайте?

Нет, конечно. Иконки все еще полезны, особенно если вы хотите привлечь внимание посетителей к определенным элементам на вашем сайте.

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

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

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

И не забудьте поставить огонечек внизу, если информация была полезна :)