Мнение: «Лучшая иконка — это текст» Статьи редакции

Бельгийский дизайнер Томас Баттербир написал в своем блоге колонку с примерами того, в каких случаях следует отказаться от графической иконки и использовать только текст для обозначения функциональности.

Сооснователь «Проектората» Антон Григорьев перевёл для vc.ru заметку, опубликованную в блоге института.

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

Пиктограммы существуют с ранних дней человечества. Их часто считают первыми проявлениями письменности. Некоторые неграмотные народы всё ещё пользуются ими для письменной коммуникации.

Они служат для навигации в публичных местах. Одного текста недостаточно, если это мультикультурная среда типа аэропорта.

Иконки быстро завоевали интерфейсы. Взгляните на фото первого коммерческого графического пользовательского интерфейса на настольном компьютере (Xerox Star). Дизайнер Дэвид Смит придумал концепцию иконок и метафору рабочего стола:

Понятно, почему иконки так распространились в интерфейсах. Во-первых, с ними UI становится визуально привлекательней. И при правильном использовании они придают приложению визуальный характер.

Во-вторых, иконка может заменить длинное словесное описание. Это очень хорошо для небольших экранов. Но есть и обратная сторона: большинство иконок сложно понять. Они заставляют задуматься.

Какой смысл в красивом, но непонятном интерфейсе? Отсюда вывод: используйте иконку только тогда, когда её смысл понятен всем на 100%.

При разговоре о непонятных иконках я вспоминаю забавную картинку, которую Рон опубликовал в Twitter:

Видимо, он совсем запутался в непонятных иконках с условиями стирки.

При обсуждении этой темы с клиентами я часто слышу: «Люди будут работать с приложением каждый день и быстро запомнят значения иконок». Звучит логично, но я не уверен, что это действительно так. Я открываю Apple Mail несколько раз в день, но всё ещё не уверен, на какую иконку надо нажать, чтобы написать письмо:

Вот ещё плохая новость: пользователи избегают непонятных элементов интерфейса. Недоверие к незнакомому — в нашей природе. Когда Google решил в интерфейсе Gmail спрятать остальные приложения за непонятной иконкой, очевидно, его поддержка получила кучу запросов с вопросами вроде «Где мой Гугл-календарь?»

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

В последующей версии перейти к написанию твита стало намного проще.

А вы знали, что в Instragram можно отправлять приватные сообщения друзьям? Нужно нажать вот сюда:

Если вы пользуетесь Instagram, скорее всего, иконку вы видели. А нажимали? Непонятно, что она означает.

Конечно, важен контекст. Пиктограммы, предельно понятные в одном контексте, становятся двусмысленными в другом. Обращайте на это внимание. Откройте письмо в Gmail и посмотрите на две очень похожие иконки, выполняющие совершенно разные функции:

Я точно не единожды возвращался к списку писем вместо того, чтобы написать ответ. Контекст имеет значение.

Кто-то не поймёт иконки Tweetbot, но они понятны в контексте Twitter. Пользователи Tweetbot пользуются Twitter и легко улавливают смысл, поэтому их смело можно использовать:

То же самое можно сказать о приложении Tumblr для iOS. Большинству из нас иконки покажутся странными, но пользователи Tumblr'а легко в них ориентируются.

Приложение Rdio для Mac выглядит так:

Большинство иконок понятно в контексте проигрывания музыки. Единственная странность в том, что у одной из иконок — два значения: регулировка звука и идентификация звучащего сейчас трека.

Повторяю: используйте иконку только тогда, когда её смысл понятен всем на 100%. Сомневаетесь — уберите иконку. Замените обычным текстом, он всегда понятнее.

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

Так сделано в App Store для Mac. Но им это необходимо, так как одни лишь иконки будут слишком непонятными.

То же самое в веб-версии Twitter:

И последний пример. Facebook со временем поменял непонятный гамбургер на удобную навигационную панель, где иконки сопровождаются понятным текстом:

Надеюсь, я убедил вас в том, что иконки легко могут ухудшить важную характеристику интерфейса — понятность. Будьте внимательны и тестируйте! И если сомневаетесь, помните: лучшая иконка — это текст.

{ "author_name": "Филипп Концаренко", "author_type": "editor", "tags": [], "comments": 20, "likes": 20, "favorites": 20, "is_advertisement": false, "subsite_label": "flood", "id": 13640, "is_wide": true, "is_ugc": false, "date": "Mon, 15 Feb 2016 17:48:39 +0300", "is_special": false }
0
20 комментариев
Популярные
По порядку
Написать комментарий...
5

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

Ответить
0

Вот правильная пикча

Ответить
3

Непонятно, зачем дорогой Томас решил смешать иконки с микрокопией. У них совершенно разные функции. Интерфейс должен быть понятным, но если бы в углу инстаграма было написано DM или что-то в этом роде... это уже был бы не инстаграм.

Спасибо за перевод в любом случае.

Ответить
2

Точняк! Ждем продолжения: лучшая радиокнопка — это чекбокс.

Ответить

Комментарий удален

15

вот типичный пример женского дизайна
https://medium.com/facebook-design/how-we-changed-the-facebook-friends-icon-dc8526ea9ea8#.1ewxm272c

погундела про дискриминацию и вывела в иконке телку на первый план, а мужика на второй.
Давайте уж как-нибудь без женщин в дизайне.

Ответить

Комментарий удален

10

А можно ссылки на многочисленные исследования?

Ответить
0

Не влезут, настолько многочисленны.

Странная форма самобичевания у человека однако.

Ответить
0

Прочитал статью - улыбнуло! В следующей вариации Нимб над светлооким женским силуэтом

Ответить
0

Из всей ветки комментариев, я так и не понял - а кто не пускает женщин в дизайнеры?

Ответить
3

Думаю не совсем всё так однозначно, что "лучшая иконка — это текст." Картинки гораздо быстрее "считываются", главное, чтобы они были очевидными. Тем более, не всегда есть место для текстовой ссылки.

Ответить
3

опять статья ради статьи. без воды:
1. используйте иконки в контексте
2. иконки должны трактоваться однозначно

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

Ответить
0

Ну и представьте что вся статья бы была как ваши два пункта:) ...думаете всем бы было интересно ее читать? А так куча коментов.

Ответить
3

Джеф Раскин, «Интерфейс. Новые направления в проектировании компьютерных систем», 2000 год. Там целая глава ровно об этом.

В статье вообще ничего нового, вообще.

Ответить
3

Хорошие примеры с почтой, Gmail, и Apple Mail.
Интересная заметка, но, как обычно, мы упираемся в здравый смысл: используйте то, что понятно, а то, что непонятно — не используйте. Или хотя бы не ставьте рядом две похожие внешне и разные по функционалу иконки.
Спасибо за перевод!

Ответить
0

Спасибо в следущий раз поставлю цифры вместо иконок или кружечки

Ответить
0

Спасибо за перевод:) С юмором написано)

Ответить
0

Автор явно перегибает выдавая свои проблемы в восприятии за общий UX.

Ответить
0

Покуда есть примеры такой реализации, за проф. будущее можно быть спокойным.

Ответить
–2

ДА я смотрю коментаторы сплошь профи по разработке интерфейсов:))
А статья хорошая, есть над чем подумать. Считаю что основная проблема разрабов , то что они думают как разрабы а не как клиенты, простые пользователи. Поэтому некоторые интерфейсы не понятны для простых пользователей.

Ответить
Читать все 20 комментариев
Банкомат «Тинькофф» выдал ошибку во время пересчета и перезагрузился, не зачислив деньги

20/07/21 положил в банкомат 100 купюр по 5000 р. (500 т.р.). Во время пересчета написал неисправность и перезагрузился. Деньги не зачислены.

Можно ли продолжать работать в той же компании после выгорания: история продакт-менеджера Тинькофф

В Тинькофф — 28 000 сотрудников, и у каждого своя история. Кто-то легко справляется с работой, и после всех задач спокойно отключается и идет отдыхать. Другим все может даваться труднее, даже сложно в уйти в отпуск — думает, «как я всё здесь брошу». Мы начинаем серию статей от лица наших сотрудников, которые делятся своим опытом: какие появлялись…

ЦБ повысил ключевую ставку с 5,5% до 6,5% — это самое резкое повышение с 2014 года Статьи редакции

И четвёртое повышение с начала 2021 года.

Возможности, как в корпорации, а гибкость, как у стартапа. Что думают о своей работе сотрудники DiDi

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

«Тинькофф» открыл центр разработки в Минске Статьи редакции

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

The Insider и пятерых журналистов включили в список СМИ-иноагентов Статьи редакции

Информация об этом появилась на сайте Минюста.

Starlink Илона Маска предоставила бесплатный доступ к спутниковому интернету пострадавшим от наводнения в Германии Статьи редакции

Пострадавших поддержали и автопроизводители: Ford предоставил фургоны для спасательных работ, а Volkswagen пожертвовал €1 млн.

Сбежал с $80 млн, пообещав построить фермы: история основателя игры Farm Bank, который обманул 130 тысяч человек Статьи редакции

Как Мехмет Айдын, создатель виртуальной фермы, создал схему Понци и обманул тысячи пользователей, вложивших реальные деньги в приложение — в пересказе Rest of World.

Айдын на основанной им ферме Daily Sabah
Восточная Техника успешно автоматизирует процессы управления складами на базе решения Columbus-WMS
«Стартап-полка»: Самокат набирает производителей альтернативных продуктов

Онлайн-ритейлер Самокат совместно с Ассоциацией Производителей Альтернативных Пищевых Продуктов объявляют сбор заявок от инновационных производителей продуктов для участия в «стартап-полке» Самоката. Лучшие продукты попадут в постоянный ассортимент Самоката в раздел «Супермаркет» уже этой осенью.

На конференции «B Word» Илон Маск в очередной раз поменял свою позицию по биткоину

В ходе конференции где также присутствовали Джек Дорси и Кэти Вуд, Маск отметил, что он является владельцем биткойнов не только через баланс Tesla и SpaceX, но и лично владеет биткойнами, эфиром и Dogecoin.

null