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

 

Преимущества иконок

При правильном использовании, иконки могут оказать положительное влияние на UX и юзабилити продукта.

  • Иконки легко распознаются. Если вы будете использовать известные иконки, ваша аудитория будет моментально их распознавать, что улучшит навигацию и эффективность выполнения задач.
  • Иконки экономят экранное пространство. Это преимущество особенно важно для мобильных устройств, где применение иконок действительно экономит значительный объем экранного пространства.
  • Иконки — это хорошие тач-таргеты. Рекомендуемый размер иконок составляет 1х1см — идеальный размер для тач-таргета.
  • Иконки универсальны. Пользователь сможет легко распознать значение иконки, даже, если он не говорит на вашем языке.
  • Иконки эстетически привлекательны. Хорошо выполненная иконка способна улучшить визуальную привлекательность веб-сайта или приложения.

 

Распространенные ошибки

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

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

Вот некоторые другие ошибки, которые приводят к проблемам юзабилити:

  • Отсутствие соответствующего сопроводительного текста
  • Использование иконок, которые не передают свое значение
  • Выделение под иконки слишком малого объема пространства на мобильных устройствах
  • Креативность за счет узнаваемости
  • Попытки изобрести колесо, вместо применения известных и узнаваемых иконок
  • Создание слишком детальных иконок

 

Лучшие практики и рекомендации

Чтобы избежать самых часто допускаемых ошибок, используйте этот чеклист.

  1. Не пытайтесь изобрести колесо. Узнаваемые иконки лучше справляются со своей задачей.
  2. Используйте иконки чтобы сэкономить экранное пространство, и улучшить узнаваемость элементов тулбаров, функций и навигации.
  3. Иконки должны быстро распознаваться. Используйте иконки, которые люди уже видели.
  1. Не изменяйте иконку типа файла для его загрузки. Например, в случае с документами Word, используйте «W» в синем квадрате.
  1. Иконки всегда должны служить инструментом передачи значения. Не используйте их слишком часто, или в качестве украшения.
  2. Используйте правило пяти секунд: если время распознавания иконки превышает 5 секунд, то она неэффективна.
  1. Иконки должны визуально описывать функцию и назначение. Они должны быть простыми и понятными.
  1. Размер иконки должен составлять минимум 1х1см — в этом случае, она будет хорошо различима, и на нее будет удобно нажимать.
  1. Достаточная большая иконка — это хороший тач-таргет на мобильных устройствах, где экранное пространство ограничено.
  2. Используйте один набор иконок.
  3. Всегда подписывайте иконки. Эту подпись можно разместить справа, или снизу.
  1. Хороший тест эффективности иконки — это когда пользователь может понять ее значение без дополнительного сопроводительного текста.
  1. Не используйте противоречивые, или неоднозначные иконки.
  1. Будьте осторожны с иконками «сердце», и «звезда». Они могут иметь разное значение, и способны ввести пользователя в заблуждение.
  1. Дизайн иконок должен быть простым и схематичным. Минимизируйте сложные формы и количество деталей.
  2. Иконки должны отличаться цветом и формой. Это поможет пользователям распознавать, и вспоминать их.
  1. Не используйте схожие иконки с разной целью, или разные иконки для одного и того же.
  1. Если сомневаетесь, помните — лучшая иконка — это текстовая подпись.

Перевод статьи Эндрю Кучерявого