Лого vc.ru

Иконка, текст или иконка с текстом — что использовать при разработке интерфейса

Иконка, текст или иконка с текстом — что использовать при разработке интерфейса

Дизайн-студия 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 можно заменить панель с иконками на текстовую версию:

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

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

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

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

— Дон Норман, книга «Дизайн привычных вещей»

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

Иконки с подписями

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

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

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

Теория и практика

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

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

Простые правила

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

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

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

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

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

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

Присылайте свои колонки и интерфейсные кейсы на interface@vc.ru

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

Т.е. вариант tooltip к иконке даже не рассматривается? Например как сделано на Яндексе.Почте. Через пару наведений, легко запоминается назначение иконки.

Не соглашусь. Погуглил за тебя:
goo.gl/Mr0Kny

0

А ничего, что это разные вещи?)))
Мы обсуждаем вариант, где иконка(она же кнопка/ссылка) не очевидна, поэтому при ховере, будет подпись. Ты предлагаешь, вместо удаления, при нажатии будет подпись для для иконки?

Сначала думай, потом пиши)

0

Я просто отвечу скриншотом из той кучи, которую ты не стал смотерть.
Тонна вариаций различных решений есть.

0

Ты видимо не понимаешь разницу, между экшн иконкой, и информативной..

0

Я прекрасно понимаю. Проблема в том, что всегда останутся иконки, которые непонятны людям.
В Windows Phone это решалось довольно просто(иконки, отображаемые в футбаре были без подписей, но если потянуть за многоточие справа, подписи отображались)
В Android и iOS приложениях же чаще туторы бывают, которые указывают пользователю что это за иконка, если такой тутор можно будет вызвать, то после нескольких вызовов пользователь запомнит.

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

0

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

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

Тонкая грань между опытными юзерами и новичками сейчас затыкается Tooltipом. Кажется, что система должна обучать и меняться по мере получения пользователем опыта. А так же иметь переключатель (например как в gmail)

Круто конечно когда твоя аудитория шарит... но когда аудитория 40+ то всем эти иконки пофигу. Им нужно написать : зайти через одноклассники. А не тупую иконку. Кто сталкивался с мужицкой темой (а-ля сельхозтехника) меня поймёт. Но уж больно начали писать статьи что тайтлы кричат: тема подходит для всех ниш. Так что эти балаболь из школьных тематик порой напрягают.

0

А что, есть исследования про водителей комбайнов и аудиторию 40+?

0

Да какие там могут быть исследования. Им трудно все это понимать.

0

Так может стоит тогда туторы лепить перед запуском?
Посмотрите, например, на trello
Если б там не было демоинфы, то он был так же понятен?

0

Всё это знаю и даже больше. Порадуйтесь со мной 😁

0

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

Сейчас обсуждают
Izobretatel

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

Почему в Санкт-Петербурге сложно найти дизайнера интерфейсов
0
Egor Voinov

Недавно было здесь интервью с их основателем. У них трафик-трекер и биржа трафика.

Avito оказалась единственным российским представителем в рейтинге Deloitte Technology Fast 500
0
Ефим Дутый

Вы упускаете прекрасное: обязательный ПОВОРОТ от примеченого вами тезиса раз к шикарно оттеняющему его тезису два - "поньдидат должен то, се и это, и в очередь вставать".
То самое, когда "Мы такие хорошие, мы вас так хотим, мы вам столько всего предложим, пожалуйста-пожалуйста! А, кстати, почему вы хотите работать именно в нашей компании?"

Почему в Санкт-Петербурге сложно найти дизайнера интерфейсов
0
Дмитрий Трипалюк
hyper weapon

Собственно, так и не нашел ответ на вопрос из заголовка ))

Почему бизнес-издание Inc назвало Riot Games лучшей компанией 2016 года
0
Salawat Waliullin

(экологии)

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