Недавно читал руководство Macintosh Human Interface Guidelines от 1992 года и нашёл в нём интересную иллюстрацию:

Которая сопровождалась пояснением:

Перевод

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

А теперь перенесёмся в 2025. Apple выпускает macOS Tahoe. И что стало в этой ОС основной особенностью? Добавление некрасивых, неразборчивых, отвлекающих, перегруженных и сбивающих с толку иконок для каждого элемента меню (причём это не мои слова, а множества недовольных пользователей):

Всё очень печально. Но почему так получилось? Предлагаю разобраться.

Дисклеймер: скриншоты взяты из macOS 26.1 и 26.2 со стоковых приложений Apple, которые устанавливаются вместе с системой. Никакие настройки самой системы я не менял.

Иконки должны вносить различие

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

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

То же касается цвета — чёрно-белые иконки выглядят опрятно, но они не ускоряют поиск необходимых опций.

В Microsoft это понимали:

 

Оцените, насколько быстрее можно найти Save или Share в правой версии:

К тому же, такой вариант выглядит чище и менее перегруженным.

Цветная версия будет ещё лучше, благодаря отчётливому отделению текста от самой иконки. Искать становится ещё проще:

Я знаю, что вам не понравится, как это выглядит. Мне тоже не нравится. С такими иконками трудно работать. Для создания красивого дизайна нужно грамотно использовать цвет, но с сохранением того же принципа — чтобы иконки было проще использовать.

Согласованность между приложениями

Если вы хотите, чтобы иконки работали, они должны быть согласованными. Мне нужна возможность визуально запомнить, что конкретно искать.

К примеру, я вижу команду «Cut» и рядом «ножницы». Хорошо. В следующий раз, когда я буду искать «Cut», то могу сэкономить время, просто высматривая те же ножницы.

А что по этой части у нас в Tahoe? Сейчас я продемонстрирую вам 50 оттенков «New»:

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

Очевидно, что некоторые из них относятся к разным операциям, поэтому и иконки разные. Думаю, что создание смарт-каталога отличается от создания записи журнала. Но это?

Или это:

Или вот это:

Непростительная глупость.

То же самое с «Open»:

 

«Save»:

Да, один из вариантов — это галочка. Причём даже направление стрелок в иконке и хоткее расходятся.

«Close»:

«Find» (иногда называется «Search» или «Filter»):

«Delete» (из семейства «Cut-Copy-Paste-Delete»):

Сворачивание окна (Minimize):

И это не какие-то второстепенные, уникальные операции. Всё это основы ОС. Они есть в каждом приложении и всегда находятся на одном месте. Они не должны отличаться!

Согласованность внутри приложения

Иконки также используются в тулбарах. Теоретически, операции в тулбаре идентичны операциям, вызываемым через меню, а значит, должны использовать такие же иконки. Реализовать это проще всего — внутри одного приложения, часто представленного на одном экране. Насколько трудно в этом случае сохранить согласованность?

Preview:

Photos: здесь информационные иконки, отвечающие за общую функцию, различаются, причём во втором случае меняются местами ¯\_(ツ)_/¯

В картах и других приложениях часто для масштабирования используются разные символы:

Дублирование иконок

Ещё один смертный грех состоит в использовании одинаковой иконки для разных действий. К примеру, сначала я узнаю, что эта иконка означает «New»:

Потом открываю приложение и вижу следующее. Ну «круто», думаю я, «ведь мне уже известно, что это значит»:

Ага, попался!

Или вот. Можно подумать, что символ глаза означает быстрый просмотр:

Иногда так и есть. Но иногда он означает «Show completed»:

А вот эта иконка иногда означает «Import»:

А иногда «Updates»:

Та же проблема, что и в случае рассогласованности. Иконки дублируются не только в разных приложениях. К примеру, сначала можно встретить её в тулбаре:

А потом зайти в меню того же приложения и увидеть, что она значит уже совсем другое:

Более того, порой в одном меню встречаются идентичные иконки.

Иногда они просто находятся рядом.

А иногда даже выстраиваются в ряд:

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

Пока что худший пример дублирования иконок мне встретился в приложении Photos:

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

Понимаю.

Слишком много деталей

Глядя на иконки, мы обычно допускаем небольшие отличия в их исполнении. Это наша типичная модель восприятия. К примеру, в случае дорожных знаков она помогает понять, что разные в техническом смысле знаки, по сути, означают одно и то же:

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

Ну неужели вот эти два значка должны означать разные вещи? Я вас умоляю!

Или две буквы А, которые лишь слегка отличаются размером шрифта:

Иконка карандаша означает «Rename», а чуть увеличенный карандаш — это уже «Highlight»?

Стрелки, указывающие разные направления диагонали?

Три точки, занимающие ⅔ выделенного пространства иконки, или аналогичные три точки, но уже занимающие его целиком. Да ладно!

Чуть более тёмные точки?

Символ бумажной страницы, который меняет значение в зависимости от того, загнут ли её уголок, и есть ли внутри линии?

Но финальный босс — это стрелки. Они все разные:

Ожидается, что пользователь должен стать мастером по различению степени округлости стрелки, а также определению её направления и вытянутости.

Сильно ли меня это волнует? Честно говоря, не особо. Я мог бы даже попробовать с этим ужиться, если бы в Apple применяли такие значки согласованно. Но они считают, что в одном месте символы карандаша в рамке и плюса должны означать одно, а в другом — другое, и что я должен уметь различать тонкие детали.

Нет уж, избавьте. После всего увиденного, я больше вам не верю.

Детализация

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

При этом иконки в меню Tahoe крохотные. Большинство из них умещаются в квадрат 12х12 пикселей (с реальным разрешением 24х24 из-за технологии Retina), а поскольку многие из них не квадратные, одно из измерений обычно ещё меньше.

В такой тесноте особо не разбежишься. Даже в Windows 95 иконки были 16х16. Если взять типичное соотношение DPI той эпохи, которое составляло 72 точки на дюйм, то получим физический размер иконки в 0,22” (5,6 мм). На современном же MacBook Pro, где DPI равно уже 254, иконки Tahoe при размере 24х24 физически занимают всего 0,09” (2,4 мм). Да, 24 больше 16, но по факту иконки получаются в четыре раза меньше.

Симулированное сравнение физических размеров иконок 16х16 при 72 DPI (слева) и 24х24 при 254 DPI (справа):

Так что, когда я вижу подобное:

Меня мутит. Я понимаю, что это разные иконки, но мне сложно понять, что конкретно в них изображено.

И даже при увеличении 20-х всё равно неразбериха:

Или вот ещё. Это три разных иконки:

И я должен отличить здесь символ плюса от звёздочки?

Толщина некоторых из этих линий на полпикселя меньше толщины других, и в этом заложен смысл:

А это вот типа стрелка?

Кисточка?

Смотрите, крохотная камера.

 

У неё даже есть малюсенький видоискатель, который можно почти разглядеть при 20-кратном приближении:

 

Или вот. Здесь у нас рамка, внутри которой круг, а внутри круга — крохотная буква i длиной в целых 2 пикселя:

Не видите?

Я тоже, но она есть…

А вот это — окно! В нём даже виден «светофор». Просто восхитительно:

Напомню, что это пиксели экранов Retina, которые равны ¼ реального пикселя. Даже сам Стив Джобс жаловался, что они невидимые.

Существует магическое значение — примерно 300 пикселей на дюйм — которое является пределом, когда сетчатка человеческого глаза начинает различать пиксели при рассмотрении информации с расстояния в 10-12 дюймов.

Тем не менее иконки Tahoe предполагают, что вы должны уметь их разглядеть.

Пиксельная сетка

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

В случае иконок Tahoe в Apple решили использовать не старомодные битовые карты, а векторные шрифты. Это экономит компании ресурсы — рисуешь один раз, используешь везде. При любых размерах, любом разрешении экрана и любой ширине шрифта.

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

Такие иконки определённо смотрятся лучше и понятнее, если выделить для них больше пикселей.

Или упростить графику. Но комбинация мелких деталей и крохотного размера иконок — убийственна. Так что, пока Apple выпускает MacBook с экранами, плотность которых составляет 389+ пикселей на дюйм, пиксельная сетка по-прежнему будет играть важную роль.

Сбивающие с толку метафоры

Иконки могут служить и ещё одной функции — помогать пользователям понять суть команды.

К примеру, когда вы знаете контекст (перемещение окна), иконки поясняют возможные действия быстрее слов:

Но такой принцип будет работать, только если пользователь понимает, что изображено на иконке. Это должен быть знакомый объект, отчётливо отражающий конкретное программное действие (например, корзина -> удаление), широко используемый символ или понятная схема. Вот, что по этому поводу говорится в том же руководстве по созданию интерфейсов (HIG):

Перевод

Используйте подходящие метафоры

Для создания эффективных иконок выбирайте подобающие метафоры. К примеру, папки будут хорошим символом для хранилища документов, так как в реальном мире люди используют их для хранения бумаг. Большинство людей вряд ли станут хранить документы в круглых кухонных контейнерах. Некоторые действительно хранят в них всякие вещи, и своей круглой формой такие контейнеры ассоциируются с круглыми дисками, которые используются внутри HDD. Но человеку потребуется изрядно напрячь логику, чтобы связать образ кухонного контейнера с хранилищем для чего-то вроде документов. На рис. 8-9 эта идея отражена наглядно.

Ошибочная интерпретация объекта станет глупой ошибкой. Например, так выглядит выделение:

А связанная с этим действием иконка выглядит вот так:

Я писал эту статью неделю, но так и не понял, почему для иконки выбрали именно такой образ. Существует объект, который выглядит похоже, но это текстовый блок во Freeform/Preview:

В SF Symbols он называется character.textbox:

Почему этот значок стал символом для команды «Select All»? Лично мне кажется, что это просто ошибка.

Ещё в одном месте для выделения текста используется символ из iOS. И это на Mac!

С некоторыми принципами ассоциированы очевидные или устоявшиеся символы, и в таком случае будет ошибкой их не использовать. Но возьмём, к примеру, типичные закладки — ?, для обозначения которых в Apple почему-то решили использовать книгу:

Иногда у вас уже есть элемент интерфейса, и вы можете использовать его в качестве иконки. Главное старайтесь не запутать пользователей. Точки в прямоугольнике напоминают поле ввода пароля, а не разрешения:

Здесь иконка гласит «Check», но по факту связана с действием «Uncheck».

Это ужасная ошибка, когда иконка не помогает, а сильно путает пользователя.

Также порой возникает соблазн создать двухуровневую иконку — объект и некий дополнительный индикатор. Например, символ галочки с крохотным крестиком, означающим «снять отметку».

Или значок пользователя и галочка типа «отметить пользователя»:

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

Подбирать символы трудно. Существительные в этом смысле проще глаголов, но элементы меню чаще представлены именно глаголами. К примеру, как выглядит действие «Open»? Как стрелка, направленная вправо и вверх? Но почему?

Я не говорю, что для «Open» существует очевидный символ, который в Apple упустили. Такого нет. Я лишь хочу сказать, что если вы не можете подобрать удачный символ, то лучше вообще не использовать иконку, чем использовать неудачную, сбивающую с толку или бессмысленную.

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

Ошибочно считать, что если хорошенько подумать, то можно найти удачную иконку для всего. Это не так. Такая попытка обречена на провал. И никакие вливания денег или «решения руководства» сей факт не изменят. Это на 100% внутренняя проблема.

Тем не менее я готов выразить Apple признание там, где оно уместно. Порой дизайнерам этой компании удаётся найти поистине удачные решения:

Симметричные действия

Особенно сбивают с толку случаи, когда для прямо противоположных действий, таких как Undo/Redo, Open/Close, Left/Right, используются разные метафоры.

В этом случае, напротив, связанные с ними иконки, должны использовать одинаковую метафору:

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

Поэтому будет ошибкой не использовать для связанных по смыслу действий схожие символы:

Или здесь:

Ещё одной ошибкой является создание симметрии там, где её нет. «Back» и «See all»?

В некоторых меню в Tahoe допущены обе этих ошибки — например, отсутствует симметрия между «Show»/«Hide» или присутствует ложная между «completed»/«subtasks»:

В качестве зеркального действия для «Import» используется не «Export», а «Share»:

Текст в иконках

Ещё одна выдержка из HIG:

Перевод

Не добавляйте в иконки текст

По возможности избегайте использования в иконках текста. Его добавление может сбивать с толку, к тому же, он не будет локализовываться под другие регионы, языки или страны. Следует сопровождать иконки текстовым описанием, чтобы пользователи их понимали и при необходимости могли прочесть тем, кто сам этого сделать не может. На момент релиза в вашем продукте все иконки должны быть проименованы. Также предоставьте пользователям возможность в любой момент эти имена менять. На рис. 8-11 показан пример, где в одном случае иконки содержат текст, а в другом намного яснее передают смысл без него.

Авторы этого руководства возражают против использования в иконках текста. Поэтому что-то вроде такого:

Или такого:

 

В 1992 бы не взлетело.

И я с этим согласен, но в Tahoe есть и более серьёзные проблемы, когда иконки состоят только из текста. Вот пример:

Неясно, где заканчивается «символичный текст иконки, прочтение которого не предполагается» и начинается реальный. Для того и другого использован одинаковые шрифт и цвет. Так как же мне их различать? В итоге иконки только мешают: A...Complete? AaFont? Что это вообще значит?

Я ещё могу как-то понять ABC с точками внизу и A… Точки должны что-то означать. Также могу представить себе мысль, которая привела к созданию Aa. Но Abc? Никаких графических пояснений, никаких эффектов. Просто Abc. Вы серьёзно?

Преобразование текста

Кто-то может подумать, что использование иконок для иллюстрации преобразований текста будет хорошей идеей.

Например, в таком духе:

Таком:

Или таком:

Мол, это позволит по одной только иконке понять, что именно произойдёт с текстом. Иконка же иллюстрирует действие.

К тому же, обозначения B I U давно устоялись в сфере обработки текста. Вроде бы сплошные плюсы?

Не совсем. И здесь та же проблема — текстовые иконки выглядят как текст, а не иконки. Кроме того, такие иконки избыточны. В чём смысл дополнительно повторять первую букву слова? «Bold» уже начинается с «B» и читается вполне легко, так зачем дублировать «B»? Взгляните ещё раз:

Эти буквы повторяются и в связанном с действием хоткее…

Есть более удачный способ для дизайна этого меню:

И Apple он известен не менее 33 лет.

Системные элементы в иконках

Естественно, операционная система использует некоторые визуальные элементы для собственных нужд. Это и элементы управления окнами, и кнопки масштабирования, и курсоры, и хоткеи, да и многое другое. Поэтому будет ошибкой использовать эти значки в иконках.

Перевод

Не назначайте новое поведение уже существующим объектам

В предыдущем разделе говорилось, как использовать элементы из уже существующего пользовательского интерфейса. Если вы на это идёте, то используйте их стандартным образом. Проследите, чтобы типичное поведение этих элементов не менялось. Если же вам нужно новое поведение, создайте для него отдельный элемент. Если элементы будут в разных местах вести себя по-разному, интерфейс станет непредсказуемым и сложным для понимания.

К сожалению, в Apple наступили и на эти грабли. Они повторно использовали стрелки.

Вот ключевые хоткеи:

В HIG есть целый раздел, где говорится конкретно об использовании символа трёх точек и о том, как опасно применять его где-то ещё в меню.

Перевод

Рассмотрим пример, в котором палитра содержит вложенную палитру. Вы можете решить использовать символ трёх точек для указания на присутствие внутри основной палитры дополнительных опций. Но в этом случае применение трёх точек будет нести не тот смысл, который обычно в них закладывается. В меню этот символ означает, что пользователю для выполнения команды нужно предоставить дополнительную информацию. То есть он не говорит, что при выборе соответствующего элемента должно открыться какое-то подменю. Пример такого некорректного использования этого символа показан на рис. 3.3.

И в Tahoe эта проблема тоже присутствует.

Иконки мешают беглому просмотру

Без иконок вы можете просто бегло просмотреть меню сверху вниз, прочитав только первые буквы, так как они все выровнены:

Но в Tahoe у некоторых элементов меню есть иконки, у других нет, и выравнивание в результате пляшет:

Некоторые элементы могут сопровождаться флажками и иконками, чем-то одним из этого или ничем. В итоге мы имеем следующее:

Мда.

Отдельный номер

Это меню заслуживает собственной категории:

Одинаковые иконки для разных действий. Никакого вам очевидного символизма. Зато первая чуть меньше второй и третьей. Мои поздравления — это аншлаг!

Может, HIG уже не актуально?

Я неоднократно ссылался на HIG, и вы можете задуматься: «Насколько сегодня актуально руководство по оформлению интерфейсов от 1992 года? Возможно, компьютерные технологии изменились настолько, что теперь работают совершенно другие принципы дизайна и идиомы?»

И да, и нет. Естественно, совет о том, как адаптировать иконки под чёрно-белые дисплеи уже устарел. Но сами принципы — при условии, что это хорошие принципы — по-прежнему актуальны, так как основаны на том, как работают люди, а не компьютеры.

Человек не обновляется ежегодно новым релизом. Объём нашей памяти не удваивается, и зрение не становится острее. Внимание работает в одном режиме. Способности визуального распознавания и моторика — всё это работает так же, как и работало в 1992 году.

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

Заключение

На мой взгляд, ребята из Apple взяли на себя невозможную задачу — добавить иконки для каждого элемента меню. Для подобной затеи просто-напросто недостаточно хороших символов.

Да даже если бы они были, сомнительна сама идея. Если у всего будет иконка, то это ещё не значит, что пользователи смогут быстрее находить то, что им нужно.

Ну а если и счесть такую идею верной, то я бы с радостью сказал, что «они сделали всё, что могли». Вот только и это не так — дизайнеры не справились с тем, чтобы согласованно применить метафоры и грамотно спроектировать собственные иконки.

Надеюсь, эта статья поможет кому-нибудь избежать при дизайне иконок распространённых ошибок, которые в Apple умудрились допустить все разом в одном релизе ОС. Я люблю компьютеры, люблю интерфейсы и визуальную коммуникацию, поэтому печально видеть, как прекрасное знание, известное ещё 30 лет назад, сегодня полностью игнорируется.

Но есть и положительный момент — в наши дни не так уж сложно делать собственный дизайн получше, чем в Apple! Предлагаю поднять за это тост! С наступившим всех Новым годом!

Примечание

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

Ещё один нюанс: Раздел меню Safari → File с версии 26.0 стал намного хуже. Раньше в нём было всего 4 иконки, а теперь целых 18!