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