Заменить скучный текст красивыми картинками – привлекательная идея. Но не всегда стоит поддаваться соблазну и увлекаться визуальным представлением возможностей сайта, приложения или программы. Почему, разберем в статье.
Вопросы восприятия
Иконки способны как помочь пользователю сориентироваться, так и донельзя усложнить восприятие продукта и его функциональности. Второе происходит, когда внедрение иконок привело к таким результатам:
- пользователи не понимают значение иконок;
- иконки незаметны или их сложно найти;
- значение иконок в восприятии пользователя отличается от заложенного их создателями.
Есть и еще одна проблема: иконки могут ухудшать общее впечатление от дизайна. С одной стороны, они могут украсить интерфейс, сделать его более приветливым и привлекательным. С другой, из-за неудачного расположения, оформления и размера иконки могут создать ощущение перегруженности страницы.
Для справедливости нужно отметить, что удачно выбранные и разумно используемые иконки способны:
- упростить навигацию;
- сэкономить место;
- визуализировать предлагаемое действие и упростить его понимание;
- ускорить знакомство с интерфейсом;
- визуально облегчить дизайн за счет отказа от лишнего текста;
- сделать интерфейс понятным для пользователей, говорящих на разных языках.
Но для этого нужно, чтобы значение иконок моментально считывалось пользователями и не вызывало вопроса, зачем они здесь. Задача непростая, требующая критического взгляда на интерфейс и понимания пользовательского опыта.
Следует остановиться еще на одной проблеме восприятия иконок. Как показывают исследования, люди привыкают не столько к внешнему виду, сколько к месту расположения таких элементов интерфейса. А значит, автоматически ищут привычные значки на аналогичных сайтах там, где они чаще всего расположены. Классические примеры: значок «Корзина» в правом верхнем углу, кнопка «Назад» в левом верхнем и «Поиск» справа от строки для ввода запроса. Это тоже стоит учесть при внедрении иконок: пользователи могут просто не заметить иконку, если она нестандартно расположена. Это касается и обычных, и мобильных версий интерфейсов.
За: когда нужны иконки?
Существуют ситуации, когда использование иконок вместо текста оправдано, потому что общепринято:
- навигация – стрелки, «лупа», «корзина», «настройки», «домашняя страница», «конверт» используются повсеместно, они привычны и понятны людям;
- информирование – значки доставки, работы 24/7, технической поддержки, справочного раздела также имеют общепринятый внешний вид и помогают быстро увидеть, что предлагается на сайте;
- призыв к действию – это стрелки, символизирующие запуск скачивания, «плюсы» в значении «добавить» и тому подобные знаки, привлекающие внимание к текстовому CTA или полностью заменяющие его.
Также иконки часто используются в качестве сопроводительных картинок для пунктов меню и ссылок на разделы. Но здесь нужно убедиться, что они помогают ориентироваться в контенте, а не просто иллюстрируют подписи «для красоты».
Итак, если предлагаются распространенные и привычные функции, стоит посмотреть, как они обозначаются в большинстве популярных интерфейсов, и воспроизвести привычные людям значки. И, как уже говорилось, важно расположить иконки там, где их будут искать в первую очередь. В остальных случаях к выбору в пользу иконок стоит отнестись с долей сомнения.
Против: когда текст понятнее?
Однажды компания Microsoft предложила пользователям панель инструментов, состоящую только из иконок, и это нововведение не обрадовало людей. Это пример того, что далеко не все можно заменить картинками, не дав к ним пояснений.
Текст нужен в следующих случаях:
- функциональность продукта не знакома пользователям настолько, чтобы навигацию можно было заменить картинками;
- иконки могут трактоваться по-разному, в том числе ошибочно;
- нет достаточно информативной иконки, потому что невозможно выстроить точный ассоциативный ряд между изображением и действием, которое оно символизирует;
- сложная и разнообразная функциональность продукта, в которой невозможно сориентироваться только по иконкам.
Лаконичный текст будет для пользователей полезнее, чем красивая картинка, даже при том, что изображения считываются быстрее, чем слова. Если люди не понимают, как взаимодействовать с интерфейсом, мало кто из них хотя бы попытается это сделать. Не говоря уже о том, что значение незнакомых иконок нужно не только узнать, но еще и запомнить на будущее.
Отличия десктопных и мобильных версий
Выбор в пользу текста или иконок осложняется еще и тем, что нужно учесть привычки и возможности пользователей различных устройств. Обычно иконки нужны в первую очередь на мобильных версиях, поскольку позволяют существенно сэкономить место. Но если продублировать такое же расположение и внешний вид иконки в десктопной версии, ее могут просто не заметить.
Еще одна сложность связана с текстовыми подсказками к иконкам. Когда необходимы пояснения, но не хочется отказываться от картинок, очевидное решение – снабдить иконки всплывающими подсказками. Их появление при наведении курсора привычно для пользователей ПК. Для мобильных версий можно сделать подсказки, но для их получения нужно будет нажать на иконку или на знак справки возле нее, а это уже может оказаться неочевидным действием.
В поиске компромисса
Чтобы упростить навигацию, улучшить дизайн и при этом оставить интерфейс понятным, удобным и не перегруженным, можно выбрать один из следующих вариантов:
- использовать только общепринятые иконки, во всех остальных случаях оставить текст;
- сопроводить иконки текстом – постоянно видимым или всплывающим;
- совместить оба способа, давая пояснения там, где они необходимы, и оставив без них иконки, понятные без слов, даже если не относятся к категории общепринятых.
Выбор в большей степени зависит от пользовательского опыта аудитории, для которой предназначен интерфейс. Например, для тех, кто постоянно работает в Adobe PhotoShop, существует один набор привычных и понятных иконок, а у тех, кто посещает только социальные сети и интернет-магазины, другой. И это нужно учесть, прорабатывая интерфейс аналогичных сайтов, приложений и программ.
Вывод: тестирование покажет
Как видно, точного рецепта нет – многое зависит от привычек аудитории и назначения продукта. Однозначно можно сказать только одно: не стоит экспериментировать с внешним видом и расположением иконок, использующихся повсеместно. В остальных случаях путь к удачному решению только один – это тестирование разных вариантов до появления самого удобного и понятного для пользователей.
