Иконки экономят место и выглядят свежо. Иконки — это быстрый ответ на сложные вопросы:
- Как сделать красивее?
- Как нам это забрендировать?
- Как сделать веселее?
Мы любим иконки. Пока не начинаем в них путаться.
Иконки бывают разные: на продуктах, в архитектуре, в компьютерах, в списках, на кнопках, для веба и приложений, для iOS и Android. Иконки на панелях инструментов, подписанные и неподписанные, стилизованные и стандартизованные, цветные и монохромные, в иконочных шрифтах, файлах PNG или SVG…
Есть много бесплатных и платных наборов иконок, векторных и растровых, плоских и объёмных, и если записывать правила работы с ними, потребуется тетрадка потолще. Чёртовых иконок так много, что Дьявол легко убедит вас в том, что они вытянут даже плохой дизайн.
Но будьте осторожны. Если «иконка» станет вашим ответом на любой вопрос, однажды Дон Норман постучится в вашу дверь, а когда откроете, пристально посмотрит вам в глаза и скажет:
«Непонятные иконки замусоривают интерфейс, хотя научное сообщество давно показало: люди запоминают значения лишь небольшого числа иконок. Вы можете вспомнить значение всех этих иконок? Я — нет».
Этими словами Дон Норман поучал своего бывшего работодателя — Apple. Примеры иконотоксиоза Apple встречаются в iTunes, Mail и панели управления iOS.
В твиттере айтюнсовыми иконками пугают как Бабой Ягой. Вот отличный пример из Apple Mail для OS X: сколько из этих иконок вы опознаете без подписи?
Что мы видим на этом примере? Только то, что иконки экономят место и выглядят свежо. Назначение кнопок не вызывает вопросов только у дизайнера, разместившего иконки на этой панели. За иконкой может скрываться тысяча разных слов, и это главная проблема. Когда у слова — тысяча значений, только хорошее понимание контекста позволит избежать разночтений. Вот те же иконки, но с подписями:
Подписи объясняют иконки. С ними интерфейс становится удобнее. Из-за этого некоторые бессердечные люди утверждают, что «лучшая иконка — это текст». Логично, правильные подписи спасают от путаницы. Так почему бы нам не использовать только подписи без иконок?
Функционально «чисто текстовый» дизайн ясен как день (если информационные архитекторы справились со своей задачей), но что-то ломается, когда вы убираете изображения из интерфейса. Жизнь покидает его. Он перестаёт быть свежим и весёлым. Это не волнует дизайн-позитивиста. Но волнует остальных людей. Мы проверили эту гипотезу, удалив иконки из iA Writer. Реакцией пользователей было решительное «Не надо!»
Может быть, лучше не выбирать между текстом и иконкой, а понять, когда использовать только иконки, когда только текст, а когда иконки с подписями. Давайте разберёмся…
Только иконки
Иконки — это картинки. На картинках легко показать обычные предметы. Подпись не нужна иконкам, на которых изображены легко узнаваемые объекты, представляющие знакомые понятия. Например, самолёты для аэропортов, человеческие фигуры для туалетов, корзины для мест, где лежат документы, которые мы скоро выбросим.
Материальные объекты изобразить легко, а необходимость показать на иконке действие или абстрактное понятие заставила помучиться многих дизайнеров. Проблема в том, что при взаимодействии человека с компьютером большинство иконок — это действия и абстракции.
Показать действие реально. Анимированная иконка отвлекает, лучше использовать метафору действия. В контексте рабочего стола компьютера иконка принтера значит «Печатать», мусорная корзина — «Удалить», ножницы — «Вырезать». У каждого из этих объектов есть одно конкретное назначение, поэтому целевое действие понять легко.
Со сложными действиями и абстракциями так уже не выйдет. И нет надежды на то, что в ближайшее время что-то изменится. За 40 лет взаимодействия человека с компьютером мы не нашли универсальных символов для базовых функций вроде сохранения, копирования и вставки.
«Общая проблема пиктографических систем в том, что единственное их ограничение — количество предметов из окружающего мира, которые можно показать на изображении».
Голые иконки на функциональных элементах интерфейса ухудшают юзабилити. Лучший способ сообщить о функции — слово, а не картинка. Ещё лучше, если это глагол.
«Когда дело доходит до всегда несовершенного обмена мыслями между людьми, лучшее, что у нас, людей, для этого есть — это речь. Письменная речь придаёт мыслям долговечность и точность (мы редко исправляемся в устрой речи, а это предложение я исправил несколько раз)».
Визуально графические символы проще и привлекательнее плотных слов. Но чем ближе, тем больше сирены становятся похожи на монстров. Когда вы пытаетесь их прочесть и понять, они превращаются в загадочные знаки из незнакомого вам языка, хватают взаимодействие и откусывают ему голову. Голые иконки улучшают внешний вид интерфейса, снижая его понятность. Они затеняют понятные функции, маскируя их слоем тёмных символов.
«Иконка — это символ, одинаково непонятный на любом языке. Не важно, какие языки вы знаете, значению иконки вам придётся научиться. Люди не просто так придумали фонетические языки, где можно объединить несколько символов, чтобы создать любое слово. Многие дизайнеры уверяли меня использовать иконки в интерфейсе. Я спрашивал их, «это действительно лучший интерфейс, который можно придумать, или он сделан по привычке?» Дизайнеров просто застряли в этой парадигме и не замечают её упадка».
Иконки модно выглядят и круто решают проблемы с нехваткой места. Конечно, не одна Apple виновна в злоупотреблении голыми иконками. Материальный дизайн Google отравлен фирменными символами. Вот для сравнения Gmail:
Что мы здесь видим? Иконки Gmail выглядят просто, но они заставляют задуматься о назначении кнопок. Если вы сосредоточитесь и немного сконцентрируетесь, сможете угадать. Через некоторое время вам будет помогать мышечная память, но и краткосрочная и долгосрочная память будет принимать их с таким же трудом. В почтовом приложении концентрацию и сосредоточенность следует направлять на понимание и написание текста, а не на расшифровку интерфейса.
Стоп! А разве Google не измеряет всё на свете? Они наверняка знают, что делают, так? Там работают учёные. Они выбрали подход с иконками без подписей, и они никогда не ошибаются. Значит, иконки — это правильно! Возможно, но то, что подходит Google или Facebook, может не подойти нам. Как будет сказано ниже, Google могли найти причину вне естественных наук. Как бы то ни было, Google предлагает и вариант с голым текстом.
Только текст
Изображения можно интерпретировать по-разному. В зависимости от контекста даже вездесущее увеличительное стекло читается и как «поиск», и как «увеличение». Значение слова тоже зависит от контекста, но читается оно всегда одинаково. Что если иконки заменить на текст? Логично, что такой интерфейс будет работать лучше иконочного. В настройках Gmail можно заменить иконочную панель на текстовую версию:
Что произошло? Смысл кнопок теперь понятен. Но интерфейс стал менее человечным, менее весёлым. Он напоминает рабочий инструмент, стал холоднее, и, на удивление, кажется более сложным. Как это возможно? Текстовый интерфейс объективно удобнее, но из-за эстетических нюансов он таким не воспринимаются.
Текст — это рациональный выбор. Правильно структурированные и названные функции — основа взаимодействия человека с компьютером.
Иконки — это эмоциональный выбор. Правильные иконки добавляют позитива. Эмоциональное воздействие не измерить, но оно не становится от этого менее реальным.
«Недостаточно создавать продукты, которые работают, которые понятны и просты в использовании. Надо создавать продукты, которые привносят восторг и возбуждение, радость и веселье, и конечно, красоту в человеческие жизни», — Дон Норман в книге «Дизайн привычных вещей».
Люди — и рациональные и эмоциональные создания: «Мозг не обрабатывает информацию, извлекает знания и сохраняет воспоминания. Если кратко: мозг — не компьютер». Если что-то по теме удобства иконок и доказано, так это то, что «Иконки с подписями работают лучше, чем чисто иконка или чисто текст».
Иконка с подписью
Иконка с подписью и эмоциональна и понятна. Иконки с подписями работают всегда. Если иконка непонятна, подпись объяснит. Так почему бы не использовать эту пару победителей?
Проблема в том, что это компромисс. Он снижает эмоциональный посыл иконок и простоту чистого текста. Он не экономит место и не украшает внешний вид. Он занимает больше места по вертикали и создаёт больше визуального шума, чем чисто иконки или чисто текст.
Эмоционально мы предпочитаем иконки. Рационально нам лучше заменить иконки на текст. В теории иконка с подписью — беспроигрышный вариант. На практике в дизайне нет серебряных пуль.
Беспроигрышных вариантов нет, но есть компромиссы получше и похуже. Мы работаем для людей. Люди чувствуют и думают. Хотя лучше не углубляться в релятивизм.
Теория и практика
Подобно любой технологии это помогает выстраивать интерфейсы на вершине рациональной, функциональной структуры. Дизайн — не естественная наука. Это практика, извлекающая выгоду из науки и измерений, но качество дизайна нельзя оценить только объективными измерениями. Пользовательское тестирование и аналитика не заменяют дизайнеров, но проверяют дизайнерские предположения. В продукте больше того, что может продумать дизайнер, а в дизайне больше того, что мы можем измерить. Это «больше» можно охватить только разговаривая с людьми, которые используют продукт.
Взаимодействие человека с компьютером строится на рациональном фундаменте. Мы — живые существа, наше поведение нельзя просчитать, но с нами можно поговорить. Иконки, цвета, ритм, воздух, типографика и другие красивые вещи делают интерфейс приятнее и за счёт этого улучшают взаимодействие. Он выглядит не таким рациональным. Он выглядит человечным.
Простые правила
Не спешите добавлять иконки, если с дизайном что-то не так, если вам кажется, что он работает не так, как запланировано. Иконки не исправят плохую структуру сайта. Добавляйте их в самом конце. Не играйте с иконками во время работы над вайрфреймом. За одной картинкой может скрываться тысяча слов. Хорошая информационная архитектура помещает правильные слова в правильный контекст. Проработайте рациональную часть до перехода к эмоциональной.
Иконка обозначает некий раздел или функцию. Она представляет собой некое слово, которое доносит простой и понятный смысл. Смысл сообщения зависит от контекста. Даже самая прекрасная иконка будет бесполезна, если слово подобрано непонятное или не соответствующее контексту. Прежде чем выбрать иконку, спросите себя: Какое слово она будет обозначать? Это правильное слово? Понятное? Оно будет работать в этом контексте? Иконка может скрывать много разных понятий. Слова в контексте не так пластичны. В отличие от иконок они подчинаются многим правилам.
Когда ваша структура готова и пора вступать в игру иконкам, радости и прочему, следуйте простому правилу: добавьте необходимый минимум иконок, но не меньше.
Относитесь к иконками с максимальным вниманием. Их улучшение может занять всё ваше время. Они должны быть узнаваемы сами по себе, должны чётко иллюстрировать понятие, которое представляют, и они должны работать в контексте с другими иконками и понятиями.
Иконки — это прилагательные и наречия в обычном тексте. Их удаление не превратит ваш текст в литературный шедевр. Удаляйте лишнее, ищите подходящее, заменяйте расплывчатые и вычурные формулировки на точные и лаконичные.
…
Эссе написано специалистами компании iA.