Как повысить эффективность иконок на сайте

Автор: Юлия Федотова

«Шеф-редактор блога GetGoodRank, веб-аналитик, блоггер.
Что такое плохие и хорошие иконки, как иконки повышают юзабилити, правила создания качественных иконок.»

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

Неправильно подобранная, некачественная иконка:

• если изображение уже имеет четкое назначение, но используется с иной целью — к примеру, звезда используется для оценки, рейтинга либо добавления в Избранное;
• иконка неизвестна, ее назначение непонятно пользователю с первого взгляда — к примеру, символ ракеты, круг, цветок и прочие. Основная задача иконки — четко указать пользователю, что произойдет по клику (откроется корзина, сохранится документ, запустится видео);
• изображения низкого качества — такое случается, если иконка создается не профессиональными дизайнерскими инструментами, а обычное изображение редактируется в графическом приложении или его размер просто подгоняется под необходимый.

Как иконки влияют на юзабилити

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

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

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

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

Польза иконки должна превышать стоимость ее размещения и поддержки.

Преимущества правильных иконок

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

Три критерия хороших иконок

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

По материалам NNGroup