Иконки для сайта: как подобрать набор и не испортить интерфейс

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

Зачем сайту иконки и когда без них лучше

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

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

Поэтому вопрос «какие иконки взять» стоит задавать после вопроса «где они нужны». Иконки уместны в шапке рядом с телефоном и корзиной, в списках преимуществ, в кнопках с привычными действиями. Без них лучше там, где смысл не передать картинкой: «Методика», «Партнёрам», «Документы для тендера» — такие пункты понятнее словами.

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

Какие иконки понимают без подписи?

Без подписи понимают совсем немного иконок. Nielsen Norman Group называет почти всеобщим узнавание только у нескольких: дом, печать и лупа для поиска. Значок из трёх полосок, который открывает меню, постепенно становится общепринятым, но и его некоторые сервисы используют для списков.

Остальные иконки на разных сайтах означают разное. По данным NN/g, сердечко и звёздочку посетители часто понимают неправильно: где-то это избранное, где-то оценка, где-то «понравилось» без сохранения. Посетитель не может полагаться на то, что значок работает так же, как на соседнем сайте.

Самый показательный пример из исследования — иконка часов в главной навигации одного сайта. Часы узнавали все, но значок открывал историю просмотров, и в тесте его не нажал ни один участник. Функция была, но её никто не нашёл.

Факт. Nielsen Norman Group называет почти всеобщим узнавание только у трёх иконок: дом, печать и лупа для поиска.

Почему иконке почти всегда нужна подпись?

Подпись снимает двусмысленность, которая есть почти у любой иконки. Nielsen Norman Group прямо пишет: рядом с иконкой должна стоять текстовая подпись, которая объясняет её смысл в этом месте сайта. Даже стандартный значок безопаснее подписать, если его перерисовали под стиль сайта.

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

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

Мнение. Если сомневаетесь, подписывать ли иконку, подписывайте. Подпись почти не занимает места, а неверно понятый значок стоит посетителю целой попытки найти нужное.

Как выбрать набор иконок для сайта

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

Перед выбором стоит посмотреть, какие иконки используют сайты вашей ниши и платформы, на которых сидит аудитория: такие значки посетители узнают быстрее всего. Nielsen Norman Group советует, если иконку приходится рисовать самим, делать её простой и схематичной, без мелких деталей, которые теряются в маленьком размере.

У NN/g есть и проверка на здравый смысл — правило 5 секунд: если подходящая иконка не придумывается за 5 секунд, иконка вряд ли передаст смысл. Тогда лучше обойтись словом.

Ещё три критерия при выборе готового набора:

• Полнота — в наборе должны найтись все нужные сайту значки, иначе недостающие придётся рисовать или брать из другого набора, и стиль развалится.
• Лицензия — у бесплатных наборов разные условия: где-то нужна ссылка на автора, где-то запрещено коммерческое использование. Условия проверяют до того, как набор попал в макет.
• Культурные различия — NN/g приводит пример: конверт понятнее почтового ящика как международная иконка почты, потому что почтовые ящики в разных странах выглядят по-разному.

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

SVG, шрифт иконок или PNG: какой формат выбрать

Для иконок на сайте почти всегда выбирают SVG. Справочник MDN описывает SVG как векторный формат, который подходит для элементов интерфейса и иконок, которые должны точно рисоваться в разных размерах. Одна SVG-иконка одинаково чёткая на обычном экране и на экране с высокой плотностью пикселей, а её цвет меняется стилями сайта без перерисовки файла.

Шрифт иконок когда-то был популярен, но у него есть слабые места: если шрифт не загрузился, вместо значков появляются пустые квадраты или случайные буквы, а программы экранного доступа могут зачитать символ шрифта как текст. Если проект начинается с нуля, берите SVG.

Размер и контраст иконок

Иконка должна быть видна и по ней должно быть легко попасть. Для обоих требований есть точные ориентиры в руководстве по доступности WCAG.

Контраст. Значимая графика интерфейса — иконки-кнопки, значки состояний — должна иметь контраст не менее 3:1 с соседними цветами. Бледно-серая иконка на белом фоне выглядит аккуратно в макете, но на солнце или на дешёвом экране пропадает. Декоративные значки, которые ничего не сообщают, под это требование не попадают.

Размер зоны нажатия. WCAG требует, чтобы зона нажатия для указателя была не меньше 24 на 24 CSS-пикселя, либо вокруг маленькой цели было достаточно свободного места. Сам рисунок может быть меньше — важна область, на которую реагирует нажатие. Для сенсорных экранов Nielsen Norman Group советует ещё больший запас: зоны нажатия не меньше 1 x 1 см.

Маленькая иконка допустима, если вокруг неё большая зона нажатия. Попадать пальцем приходится по зоне, а не по рисунку.

Как сделать иконки доступными?

Доступность иконок сводится к одному вопросу: что услышит человек, который не видит экран. Ответ зависит от того, несёт ли иконка смысл.

Если иконка служит кнопкой без текста — лупа, крестик, корзина, — у кнопки должно быть имя, описывающее её назначение. Этого требует критерий WCAG о нетекстовом содержимом. На практике кнопке дают скрытую подпись или атрибут aria-label со словами «Поиск», «Закрыть», «Корзина».

Если иконка стоит рядом с текстом и повторяет его — значок телефона перед номером, галочка перед пунктом списка, — она декоративная. Её делают так, чтобы программы экранного доступа её пропускали. Справочник MDN приводит атрибут aria-hidden="true" именно для такого случая: он скрывает чисто декоративное содержимое, например иконки. Иначе программа зачитает «изображение, изображение» перед каждым пунктом.

Честная граница: aria-hidden нельзя ставить на кнопку или ссылку, которая состоит только из иконки. Тогда элемент станет невидимым для программ экранного доступа целиком, и человек не узнает, что на странице есть поиск или корзина.

Фавиконка: иконка сайта во вкладке и в выдаче

Фавиконка — маленький значок сайта во вкладке браузера, в закладках и в результатах поиска. Её тоже часто называют иконкой сайта, и требования к ней задают сами поисковые системы.

Яндекс в справке Вебмастера рекомендует размер 120 x 120, 32 x 32 или 16 x 16 пикселей. Рекомендуемый формат — SVG, также подходят ICO, GIF, JPEG, PNG и BMP; анимация не поддерживается. Google требует квадратную фавиконку не меньше 8 x 8 пикселей и советует размер больше 48 x 48, чтобы значок хорошо выглядел в разных местах.

Фавиконку обычно делают из знака логотипа без надписи: длинное название в квадрат размером со строку текста не помещается. Если у логотипа нет отдельного знака, берут первую букву названия в фирменном цвете.

Что делать дальше

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

Если сайт уже работает, пройдите по нему с вопросом к каждой иконке: поймёт ли новый посетитель её смысл без подписи. Сомнительные значки подпишите или замените словами, кнопки-иконки проверьте на контраст и размер зоны нажатия. Чем UI-дизайн с его иконками и кнопками отличается от проектирования сценариев, разобрано в статье UX и UI-дизайн: в чём разница.

Набор иконок мы рисуем как часть визуального языка компании, когда разрабатываем фирменный стиль. Оставьте заявку — подберём иконки под ваш логотип, шрифты и цвета.

Источники

• Icon Usability — Nielsen Norman Group
• Utility Navigation: What It Is and How to Design It — Nielsen Norman Group
• Image file type and format guide — MDN Web Docs
• Sticky Headers: 5 Ways to Make Them Better — Nielsen Norman Group
• aria-hidden — MDN Web Docs
• Understanding SC 1.4.11 Non-text Contrast — W3C
• Understanding SC 2.5.8 Target Size (Minimum) — W3C
• Understanding SC 1.1.1 Non-text Content — W3C
• Фавиконка — Справка Яндекс Вебмастера
• Define a favicon to show in search results — Google Search Central