Статью «The best icon is a text label» написал Томас Байтибер 23 марта 2015 года.
Я уже писал, что классный интерфейс в первую очередь должен быть понятным. Иконки — значимая часть многих интерфейсов. И проблема в том, что чаще они ухудшают понятность, нежели улучшают.
Пиктограммы существуют с ранних дней человечества. Их часто считают первыми проявлениями письменности. Некоторые неграмотные народы всё ещё пользуются ими для письменной коммуникации.
Они служат для навигации в публичных местах. Одного текста недостаточно, если это мультикультурная среда типа аэропорта.
Иконки быстро завоевали интерфейсы. Взгляните на фото первого коммерческого графического пользовательского интерфейса на настольном компьютере. Дизайнер Дэвид Смит придумал концепцию иконок и метафору рабочего стола:
Понятно, почему иконки так распространились в интерфейсах. Во-первых, с ними UI становится визуально привлекательней. И при правильном использовании они придают приложению визуальный характер.
Во-вторых, иконка может заменить длинное словесное описание. Это очень хорошо для небольших экранов. Но есть и обратная сторона: большинство иконок сложно понять. Они заставляют задуматься. Какой смысл в красивом, но непонятном интерфейсе? Отсюда вывод: используйте иконку только тогда, когда её смысл понятен всем на 100%.
При разговоре о непонятных иконках я вспоминаю забавную картинку, которую Рон опубликовал в твиттере:
Видимо, он совсем запутался в непонятных иконках с условиями стирки.
При обсуждении этой темы с клиентами я часто слышу: «Люди будут работать с приложением каждый день и быстро запомнят значения иконок». Звучит логично, но я не уверен, что это действительно так. Я открываю Apple mail несколько раз в день, но всё ещё не уверен, на какую иконку надо нажать, чтобы написать письмо:
Вот ещё плохая новость: пользователи избегают непонятных элементов интерфейса. Недоверие к незнакомому — в нашей природе. Когда Google решил в интерфейсе Gmail спрятать остальные приложения за непонятной иконкой, очевидно, его поддержка получила кучу запросов с вопросами вроде «Где мой Гугл-календарь?»
Другой пример: новые пользователи Твиттера после редизайна не понимали, что им делать дальше. Иконка нового твита была недостаточно понятной:
В последующей версии перейти к написанию твита стало намного проще:
А вы знали, что в Инстаграме можно отправлять приватные сообщения друзьям? Нужно нажать вот сюда:
Если вы пользуетесь Инстаграмом, скорее всего, иконку вы видели. А нажимали? Непонятно, что она означает.
Конечно, важен контекст. Пиктограммы, предельно понятные в одном контексте, становятся двусмысленными в другом. Обращайте на это внимание. Откройте письмо в Gmail и посмотрите на две очень похожие иконки, выполняющие совершенно разные функции:
Я точно не единожды возвращался к списку писем вместо того, чтобы написать ответ. Контекст имеет значение.
Кто-то не поймёт иконки Твитбота, но они понятны в контексте Твиттера. Пользователи Твитбота пользуются Твиттером и легко улавливают смысл, поэтому их смело можно использовать:
То же самое можно сказать о приложении Tumblr для iOS. Большинству из нас иконки покажутся странными, но пользователи Tumblr’а легко в них ориентируются:
Приложение Rdio для мака выглядит так:
Большинство иконок понятно в контексте проигрывания музыки. Единственная странность в том, что у одной из иконок — 2 значения: регулировка звука и идентификация звучащего сейчас трека.
Повторяю: используйте иконку только тогда, когда её смысл понятен всем на 100%. Сомневаетесь — уберите иконку. Замените обычным текстом, он всегда понятнее.
Если хотите сохранить визуальные преимущества иконок, комбинируйте их с текстом. Это отличное решение, сочетающее преимущества обоих подходов.
Так сделано в App Store для мака. Но им это необходимо, так как одни лишь иконки будут слишком непонятными.
То же самое в веб-версии Твиттера:
И последний пример. Фейсбук со временем поменял непонятный гамбургер на удобную навигационную панель, где иконки сопровождаются понятным текстом:
Надеюсь, я убедил вас в том, что иконки легко могут ухудшить важную характеристику интерфейса — понятность. Будьте внимательны и тестируйте! И если сомневаетесь, помните: лучшая иконка — это текст.
…
Также опубликовано в VC и на Медиуме.
Технологии цифрового маркетинга — книга, где я был соавтором (параграф про создание сайта) и литературным редактором (привёл текст к единой стилистике и упростил формулировки). От 249 рублей.