Иконка, текст или иконка с текстом — что использовать при разработке интерфейса — Советы дизайн-студии iA

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

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

Иконки экономят место и выглядят свежо. Иконки — это быстрый ответ на сложные вопросы:

Как сделать это красивее?
Как это забрендировать?
Как сделать веселее?

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

Есть много разных иконок: на продуктах, в архитектуре, в компьютерах, в списках, на кнопках, для веба и приложений, для iOS и Android. Иконки на панелях инструментов, подписанные и неподписанные, стилизованные и стандартизованные, цветные и монохромные, в шрифтах, файлах PNG или SVG.

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

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

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

Так Норман поучал своего бывшего работодателя — Apple. Примеры «иконотоксикоза» Apple встречаются в iTunes, в почтовом клиенте и на панели управления iOS.

В Twitter iTunes-иконками пугают, как Бабой Ягой. Вот отличный пример из Apple Mail для OS X: сколько из этих иконок вы опознаете без подписи?



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



С объяснениями интерфейс становится удобнее, поэтому некоторые бессердечные люди утверждают, что лучшая иконка — это текст. Логично, правильные подписи спасают от путаницы. Так почему бы не использовать только подписи без иконок?



Функционально «чисто текстовый» дизайн ясен как день (если информационные архитекторы справились со своей задачей). Но когда вы убираете изображения из интерфейса, то в нем что-то ломается, его покидает жизнь. Это не заботит дизайн-позитивистов, но волнует остальных людей. Мы проверили эту гипотезу, удалив иконки из iA Writer. Реакцией пользователей было решительное «Не надо!»

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

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

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

Показать действие реально. Анимированная иконка отвлекает, поэтому лучше использовать метафору действия. В контексте рабочего стола компьютера иконка принтера значит «Печатать», мусорная корзина — «Удалить», ножницы — «Вырезать». У каждого из этих объектов есть одно конкретное назначение, поэтому целевое действие понять легко.

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

Общая проблема пиктографических систем в том, что они ограничены количеством предметов из окружающего мира, которые можно показать на изображении. — Джон Хадсон, «Будущее эмодзи»

Голые иконки на функциональных элементах интерфейса ухудшают юзабилити. Лучший способ сообщить о функции — слово, а не картинка. Еще лучше, если это глагол.

Лучшее, что есть у людей для несовершенного обмена мыслями, — это речь. Письменная речь придает мыслям долговечность и точность: в устной речи мы редко исправляемся, а это предложение я исправил несколько раз. — Джон Хадсон, «Будущее эмодзи»

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

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

Многие дизайнеры убеждали меня использовать иконки в интерфейсе. Я спрашивал их: «Это действительно лучший интерфейс из всех возможных или он сделан по привычке?». Дизайнеры просто застряли в этой парадигме и не замечают ее упадка. — Джеф Раскин, инициатор проекта Macintosh

Иконки модно выглядят и решают проблемы с нехваткой места. Конечно, в злоупотреблении чистыми иконками виновата не только Apple. Фирменными символами отравлен и «Материальный дизайн» Google. Вот для сравнения Gmail:



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

Стоп, а разве Google не измеряет все на свете? Они наверняка знают, что делают, в компании же работают ученые. Раз в Google выбрали подход с иконками без подписей, значит, иконки — это правильно. Но то, что подходит Google или Facebook, может не подойти нам. Мы еще увидим, что Google могла найти причину вне естественных наук. Как бы то ни было, Gmail предлагает и вариант с одними только текстовыми подписями. Только текст

Изображения можно интерпретировать по-разному. В зависимости от контекста даже вездесущая иконка с лупой читается и как «поиск», и как «увеличение». Значение слова тоже зависит от контекста, но читается оно всегда одинаково. Что если иконки заменить на текст? Логично, что такой интерфейс будет работать лучше иконочного. В настройках Gmail можно заменить панель с иконками на текстовую версию:



Смысл кнопок теперь понятен, но интерфейс стал холоднее, менее человечным и веселым. Теперь он напоминает рабочий инструмент и, на удивление, кажется более сложным. Как это возможно? Текстовый интерфейс объективно удобнее, но из-за эстетических нюансов он так не воспринимается.

Текст — это рациональный выбор. Разумно структурированные и подписанные функции — основа взаимодействия человека с компьютером.

Иконки — это эмоциональный выбор. Хорошо сделанные иконки добавляют позитива. Эмоциональное воздействие нельзя измерить, но от этого оно не пропадает.

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

Люди — и рациональные, и эмоциональные создания: «Мозг не обрабатывает информацию, извлекает знания и сохраняет воспоминания. Короче говоря, мозг не компьютер» (Роберт Эпштейн, «Пустой мозг»). Если по теме удобства иконок что-то и доказано точно, так это то, что иконки вместе с подписями работают лучше, чем только иконки или только текст. Иконки с подписями

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

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



С точки зрения эмоций предпочтительнее иконки, а рационально лучше заменить иконки на текст. В теории иконка с подписью — беспроигрышный вариант, но на практике в дизайне нет «серебряных пуль». Беспроигрышных вариантов нет, но есть компромиссы получше и похуже. Теория и практика

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

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

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



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

Прежде чем выбрать иконку, спросите себя: какое слово она будет обозначать? Это правильное слово, понятное? Оно будет работать в этом контексте? Иконка без труда может вмещать много разных понятий. Слова же в контексте не так пластичны: в отличие от иконок, они подчиняются многим правилам.



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

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

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