Иконки позволяют пользователю понимать посыл без лишнего объяснения и текста. Это способ направить посетителя по сайту быстро, удобно и стильно. Сайты и приложения – это способ коммуникации компании с потенциальным клиентом. И иконки в этом играют важную роль. Как грамотный подбор или создание иконок влияет на пользовательский опыт, как его улучшить и сделать крутые визуальные эффекты – читайте далее.
Каждый человек приходит на сайт с конкретной целью. Задача веб-дизайнера заключается в том, чтобы помочь пользователю достичь этой цели легко, быстро, позитивно и с максимальной пользой для владельца сайта.
И применение иконок будет одним из простейших способов решить эту задачу. Они передают смысл без слов, помогают воздействовать на подсознание, облегчают коммуникацию. Они также позволяют сделать дизайн лаконичным – ведь не потребуется добавлять лишний текст с объяснениями и инструкциями.
Стоит понимать, что нет никаких универсальных решений в веб-дизайне – иначе специалисты были бы не нужны. Все делали бы роботы. И в зависимости от задач и специфики бизнеса будут решаться и вопросы с применением иконок. Тем не менее, мы обсудим несколько интересных идей применения иконок, которые помогут вам улучшить интерфейс сайта и пользовательский опыт.
Расширение навигации
Применение иконок для перемещения по сайту – самый распространенный и самый логичный путь их применения. Здесь важно подбирать изображения, которые понятны всем – пользователь не должен разгадывать ребусы, он обязан с первого взгляда осознавать, что означает тот или иной значок.
Особенно важно это для международных платформ. Посетитель даже без знания языка должен понять, что делать. Как минимум пройти до этапа переключения языка – чаще всего для этого используют иконки флагов или земного шара. Просто, понятно, наглядно.
Те же требования выдвигаются к сайтам и приложениям для детей – они имеют свою специфику, в том числе необходимость без слов показать все, что нужно.
При использовании иконок в навигации не обойтись без пояснительного текста. Желательно, чтобы он был кратким, не загромождал сайт. Можно сделать пояснение всплывающей строкой при наведении на иконку.
Отдельно стоит отметить “меню-гамбургер” – в среде веб-дизайна большинство специалистов его не переваривают. Но при этом используют, потому что его своеобразная иконка уже давно понятна пользователям и не требует лишних пояснений.
Альтернатива гамбургеру – мега-меню с характерной стрелочкой, указывающей на возможность разворота. Пользователь знает, что такой значок означает вложенный список ссылок и кнопок.
Эти элементы не являются необходимыми и тем более оригинальными. Но они способствуют улучшению пользовательского опыта, потому что воспринимаются привычно и понятно.
Первое правило для расширения функционала и навигации – делать так, чтобы не запутался никто. А поэтому требуется применение стандартных символов.
Визуальные эффекты
Меню и навигация в виде перечня функций в хедере – это база. Как и боковые панели с перечнем товаров и услуг. И добавить в названия разделов иконки будет всегда отличным решением. Особенно для создания иерархии. Например, принято выделять значком корзину. И значок этот – тележка из супермаркета. Наглядно и очевидно. В корзину пользователь заходит с максимальной вероятностью, даже если еще не оформляет покупку. Чего нельзя сказать про остальные пункты меню – некоторые из них его могут вовсе не интересовать.
Очень полезны иконки на кнопках Call to Action. Их стоит подбирать в зависимости от действия, которое происходит при нажатии:
- загрузка архива или каталога – стрелочка вниз, символизирующая скачивание;
- покупка – та же тележка, как на корзине;
- бесплатный пробный период или промокод – значок подарка;
- символ проигрывателя для просмотра видео;
- телефонная трубка для заказа звонка и т.п.
Если иконки расположены сами по себе (например, в блоке преимуществ или алгоритма действий), то кроме краткого пояснительного текста можно добавить визуальные эффекты. Будет уместно сделать ховер-эффект – пусть иконка при наведении курсора станет другого цвета, увеличится в размерах, немного покачивается. А если вы умеете сделать полноценную анимацию, то это будет максимально круто. Главное тут – не переборщить. Анимированными должны быть не все иконки, а лишь несколько для акцента. Например, в одном блоке с преимуществами – весь ряд. Дополнительно в главной кнопке СТА и ближе к футеру в форме для заказа обратного звонка. Этого будет достаточно.
Формы, контакты, поддержка
Практически на каждом сайте есть форма связи или техподдержка – это может быть звонок, отправка вопроса, сообщение на e-mail, вход в учетную запись. И здесь тоже иконки находят себе применение.
Контакты – отдельная история. Невозможно представить себе этот блок без иконок. Номер телефона, электронная почта, адрес физический и юридический + знак точки на карте. Это практически обязательные элементы в виде иконок, такое негласное правило.
Ссылки на соцсети – та же ситуация. Вы можете использовать логотипы или их упрощенные версии в виде иконок в одном стиле. Это всегда смотрится аккуратно, особенно если сайт монохромный и разноцветные эмблемы будут сильно выбиваться из концепции.
А еще стоит добавлять иконки в квизы и формы регистрации. Если есть несколько полей – сделайте там небольшие полупрозрачные значки, которые помогут заполнить графу верно. При начале заполнения обычно поле активируется и иконка пропадает для удобства.
Функции
У любого проекта есть свои особенности и уникальные черты, которые и заставляют пользователя посетить сайт. Если таковых нет, то вы обязаны как специалист отыскать отличия и создать уникальное торговое предложение. Это есть как у крупных мировых игроков, так и у маленьких стартапов.
При этом удобный сайт может быть сам по себе главным преимуществом – поверьте, есть ниши, которые просто не дошли еще до конкуренции в медиаполе и стоит внимательно изучить конкурентов и их платформы, прежде чем делать сайт. У бизнеса может не быть особых отличий от конкурентов, но подача, стиль и простота заказа сыграют свою роль 100%.
Но вернемся к иконкам – они станут палочкой-выручалочкой, если нужно объяснить, чем занимается фирма и какие есть функции, если их несколько. Вы визуально разделяете направления, показываете наглядно разнообразие. Иконки гораздо легче воспринимаются, чем текст. Таким же образом могут работать фотографии, но не всегда можно подобрать действительно меткие изображения, которые передадут суть. А иконки можно. А еще возможна перегрузка фото на сайте – этого стоит избегать.
Если есть возможность превратить иконку в кнопку – сделайте это. Пользователи любят нажимать на всевозможные элементы и ждут от них отклика. Пусть при нажатии на иконку открывается ссылка с продуктом или поп-ап с более подробным описанием.
Кроме функций/видов услуг/типов продукции иконками можно отображать этапы получения услуги. Если алгоритм не совсем стандартный, то такой блок нужен обязательно. И если вы сделаете его списком, то это лучше, чем простыня текста. Но если это будут красивые анимированные иконки со всплывающим пояснением, то это будет идеально.
Где взять иконки?
Современные стандарты веб-дизайна все больше стремятся к лаконичности и строгости. При этом нужно сделать не скучно, а аккуратно и изысканно. Вот как раз концепция иконок вписывается в такой сюжет идеально. Вы применяете меньше картинок и иллюстраций, вместо них ставите больше схем и значков.
Бесплатные ресурсы
Есть огромные библиотеки с иконками, где можно подобрать решения для любого проекта. И много совершенно бесплатных паков, просто выбирайте и скачивайте! Вот десяток ресурсов, которые вам точно понравятся:
Самостоятельное создание иконок
Мастерским подходом будет самостоятельное создание иконок под проект. Если они будут выполнены в соответствии с брендбуком заказчика, то это высший пилотаж. Иногда это просто красиво, но иногда и необходимо – когда отрасль специфическая и найти готовый сет иконок просто невозможно. И в такой ситуации непозволительно брать значки из разных паков – это сильно испортит дизайн. И вашу репутацию.
На что обратить внимание при самостоятельном создании иконок:
- Сетка – при рисовке четко делайте разметку по клеточкам, многие даже делают это от руки в тетради.
- Геометрия – важно использовать элементы простые, но оригинальные. Не забывайте, что кроме стандартных форм бывают и те, которые мы применяем реже. Из них получаются свежие значки, которые еще не приелись.
- Пространство – как и любой элемент иконка требует воздуха. И учитывайте размеры экранов и масштабы – если пользователь уменьшит сайт до 70% и будет смотреть с телефона, то будет ли иконка читаться четко? Должна.
- Отсутствие эффектов – по той же причине не стоит злоупотреблять бликами, звездочками и прочими деталями.
Иконки становятся все более важным элементом веб-дизайна. Поэтому учитесь применять их правильно или даже создавать в зависимости от потребности. В идеале пользователь должен просто пробежаться по сайту глазами и уже понять все о навигации и о расположении нужной ему информации – это задача грамотного подбора понятных значков и их гармоничного расположения. Там все по полочкам разложит опытный наставник – с проверкой домашних заданий и самостоятельной работой для портфолио!
Материал подготовлен командой образовательной платформы WAYUP