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

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

Детализированные или упрощенные иконки

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

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

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

Маленькие или большие иконки

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

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

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

Темное на светлом или светлое на темном

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

В изображении выше обе панели с иконками отличаются только знаком полярности. Светлые иконки на темном фоне кажутся больше и более четкими. Это позволяет быстрее заметить и опознать нужный символ.

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

Предпочтительные цвета

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

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

Оптимизация иконок — не только эстетика

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

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

Автор статьи anthony

Перевод — Дежурка

Смотрите также:

• Как сделать кнопки, по которым не будут промахиваться
• Как выбрать яркость фона для сайта
• Как иллюстрировать пошаговые этапы в мобильном дизайне