Оффтоп Philipp Kontsarenko
11 371

Мнение: «Лучшая иконка — это текст»

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

Сооснователь «Проектората» Антон Григорьев перевёл для 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": "Philipp Kontsarenko", "author_type": "editor", "tags": ["\u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u044b","\u0438\u043a\u043e\u043d\u043a\u0430","\u0434\u0438\u0437\u0430\u0439\u043d"], "comments": 20, "likes": 20, "favorites": 1, "is_advertisement": false, "subsite_label": "flood", "id": 13640, "is_wide": true }
00
дни
00
часы
00
мин
00
сек
(function(){ var banner = document.querySelector('.teaserSberbank'); var isAdsDisabled = document.querySelector('noad'); if (!isAdsDisabled){ var countdownTimer = null; var timerItem = document.querySelectorAll('[data-sber-timer]'); var seconds = parseInt('15388' + '59599') - now(); function now(){ return Math.round(new Date().getTime()/1000.0); } function timer() { var days = Math.floor(seconds / 24 / 60 / 60); var hoursLeft = Math.floor((seconds) - (days * 86400)); var hours = Math.floor(hoursLeft / 3600); var minutesLeft = Math.floor((hoursLeft) - (hours * 3600)); var minutes = Math.floor(minutesLeft / 60); var remainingSeconds = seconds % 60; if (days < 10) days = '0' + days; if (hours < 10) hours = '0' + hours; if (minutes < 10) minutes = '0' + minutes; if (remainingSeconds < 10) remainingSeconds = '0' + remainingSeconds; if (seconds <= 0) { clearInterval(countdownTimer); } else { timerItem[0].textContent = days; timerItem[1].textContent = hours; timerItem[2].textContent = minutes; timerItem[3].textContent = remainingSeconds; seconds -= 1; } } timer(); countdownTimer = setInterval(timer, 1000); } else { banner.style.display = 'none'; } })();
{ "id": 13640, "author_id": 4, "diff_limit": 1000, "urls": {"diff":"\/comments\/13640\/get","add":"\/comments\/13640\/add","edit":"\/comments\/edit","remove":"\/admin\/comments\/remove","pin":"\/admin\/comments\/pin","get4edit":"\/comments\/get4edit","complain":"\/comments\/complain","load_more":"\/comments\/loading\/13640"}, "attach_limit": 2, "max_comment_text_length": 5000, "subsite_id": 199791 }

20 комментариев 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

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

Ответить
0

Прямой эфир

[ { "id": 1, "label": "100%×150_Branding_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox_method": "createAdaptive", "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfl" } } }, { "id": 2, "label": "1200х400", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfn" } } }, { "id": 3, "label": "240х200 _ТГБ_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fizc" } } }, { "id": 4, "label": "240х200_mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "flbq" } } }, { "id": 5, "label": "300x500_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfk" } } }, { "id": 6, "label": "1180х250_Interpool_баннер над комментариями_Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "ffyh" } } }, { "id": 7, "label": "Article Footer 100%_desktop_mobile", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjxb" } } }, { "id": 8, "label": "Fullscreen Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjoh" } } }, { "id": 9, "label": "Fullscreen Mobile", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjog" } } }, { "id": 10, "disable": true, "label": "Native Partner Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyb" } } }, { "id": 11, "disable": true, "label": "Native Partner Mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyc" } } }, { "id": 12, "label": "Кнопка в шапке", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "bscsh", "p2": "fdhx" } } }, { "id": 13, "label": "DM InPage Video PartnerCode", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox_method": "createAdaptive", "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "flvn" } } }, { "id": 14, "label": "Yandex context video banner", "provider": "yandex", "yandex": { "block_id": "VI-223676-0", "render_to": "inpage_VI-223676-0-1104503429", "adfox_url": "//ads.adfox.ru/228129/getCode?pp=h&ps=bugf&p2=fpjw&puid1=&puid2=&puid3=&puid4=&puid8=&puid9=&puid10=&puid21=&puid22=&puid31=&puid32=&puid33=&fmt=1&dl={REFERER}&pr=" } }, { "id": 15, "label": "Плашка на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byudx", "p2": "ftjf" } } }, { "id": 16, "label": "Кнопка в шапке мобайл", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byzqf", "p2": "ftwx" } } }, { "id": 17, "label": "Stratum Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvb" } } }, { "id": 18, "label": "Stratum Mobile", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvc" } } }, { "id": 19, "label": "Тизер на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "p1": "cbltd", "p2": "gazs" } } } ]
Хакеры смогли обойти двухфакторную
авторизацию с помощью уговоров
Подписаться на push-уведомления