Агентство комплексного интернет-маркетинга

Иконки на сайте

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

Как иконки подчеркивают преимущества на сайте — наш опыт

Автор: Алексей Харитонов22.12.2021

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

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

Задачи и виды использования иконок

Мы в Маркетинг Ап относимся к сайту как к бизнес-инструменту. Поэтому разговор о любом веб-элементе мы начинаем с задач, которые он решает. У иконок на любом сайте всего три основные задачи:

1) Ускорять восприятие информации;

2) Привлекать внимание;

3) Помогать сориентироваться в интерфейсе.

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

Для выполнения первой и второй задачи иконки традиционно используются в таких разделах сайта, как:

  • преимущества;
  • схема работы;
  • виды оказываемых услуг.

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

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

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

Те же принципы применимы к иконкам в разделе услуг. Например, так мы отразили строительное направление на площадке для организации тендеров:

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

Иконки — зеркало дизайна сайта

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

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

Например, так при многократном увеличении выглядит одна из иконок на разработанной нами тендерной площадке группы компаний «Гарез и Партнеры»:

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

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

Сначала каждую иконку нарисовали карандашом:

Потом обвели черной ручкой, перевели в электронный формат:

Затем разместили на сайте:

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

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

Каких ошибок следует избежать при работе с иконками

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

2) Цвет и стилистика и иконок не должны быть случайными. Они должны быть согласованы с фирменным стилем.

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

4) Не следует злоупотреблять эффектами. Далеко не всегда стоит добавлять блики и тени. Часто вместо ожидаемого эффекта это создает лишь визуальный шум, перегруженность и даже «грязь» при некоторых разрешениях.

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

6) Не перегружайте. Лучше проще, больше крупных деталей. Пожалуй, принцип минимализма в веб-разработке находит максимальное выражение именно в иконках.

7) Не включайте в иконку текст. Во-первых, на многих устройствах он будет совсем уж мелким и нечитабельным. Во-вторых, это убивает саму идею иконки.

«Мелочи» в комплексе решают все

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

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

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

Впечатление же пользователя в значительной степени определяется дизайном сайта. Как говорится, «встречают по одежке». А это впечатление зависит от множества мелочей, одной из которых остаются иконки.

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

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

2580