Лого vc.ru

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

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

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

Сооснователь «Проектората» Антон Григорьев перевёл для 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 со временем поменял непонятный гамбургер на удобную навигационную панель, где иконки сопровождаются понятным текстом:

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

Популярные статьи
Показать еще
Комментарии отсортированы
как обычно по времени по популярности

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

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

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

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

У женщин восприятие отличается от мужского (это подтверждено многочисленными исследованиями). И в чем фишка?
Мужик дизайнер может сделать отличный дизайн, который будут понимать исключительно мужики. А женщины из-за особенностей восприятия этот дизайн не поймут.
В противоположность. Женщина дизайнер может сделать дизайн, который поймут и мужики и женщины.

Причина - гендерные отличия в восприятии, а не какие-то стереотипы.

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

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

0

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

0

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

0

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

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

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

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

0

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

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

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

0

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

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

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

0

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

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

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

0

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

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

0

Возможность комментирования статьи доступна только в первые две недели после публикации.

Сейчас обсуждают
Максим Федоров

SEO творит дела ;)

Стеллаж «Сын съедает всю еду»: IKEA превратила поисковые запросы о проблемах в семье в названия товаров
0
Владимир Ростопчин

О, не беспокойтесь. В мире, где будут править такие вот развеселые левые фашисты (оксюморон, да), как эта дама, трудностей и борьбы за жизнь будет предостаточно.

«Добро пожаловать в 2030 год»: член датского парламента о счастливой жизни без приватности и личных вещей
0
Андрей Суханов

Не только крупный бизнес двигается по "трендовым" мемам, но и мелочь за ними поспевает)
sweetbags.ru/news/vzhuh-jeto-kakaja-to-sumochnaja-magija

«Вжух»: реакция российских компаний на мем с котом и волшебной палочкой
0
Valentin Dombrovsky
Travelabs

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

«Вжух»: реакция российских компаний на мем с котом и волшебной палочкой
0
Показать еще