Typographic UI – новая концепция дизайна, философия которой выражается тремя словами: интерфейс есть текст.
До последнего времени все концепции пользовательских интерфейсов (за исключением командной строки) можно было понять по дизайну форм элементов, используемых в интерфейсе. Речь идет о формах кнопок, меню, окон и любых других фреймов. Облик любого UI целиком определялся визуализацией этих самых форм, а стиль интерфейса определялся исключительно подходами к изображению этих форм.
Натуральный UI
Классика жанра – стиль iOS. Облик этого интерфейса определяется в первую очередь формой иконок. Иконописный канон iOS заключается в том, что изображение формы максимально символизирует внутреннее содержание. Видишь объектив – значит после клика запустится камера, шестерёнка – значит внутри настройки. Это подобно академическому живописному реализму: что вижу, то и пишу. Внешний вид соответствует содержанию, начиная от наскальных рисунков. Совершенствуется только техника изображения, повышается реалистичность.
Великий Малевич называл этот стиль искусством дикаря: «Позор им…» и всячески призывал от него отказаться: «Мир мяса и кости должен уйти».
Малевич – не единственный революционер, бросивший вызов классическому искусству. Стоит отметить также товарища Кандинского, основоположника абстракционизма. Поскольку абстракционизм не обошел стороной продукты направления UI, остановимся на нем подробнее.
Кандинский пришел к абстракционизму не сразу, долго страдал, думал. Но к осознанию его подтолкнули работы импрессионистов. В частности, работа Моне «Стог сена».
Неестественные краски, каких нет в природе, воздействовали на восприятие сильнее натуральных цветов. Кандинский понял: если можно отказаться от естественных цветов, то почему бы не пойти дальше и не отказаться от натуральных форм. Реалистичное поменять на абстрактное.
Абстрактный UI
Классикой абстрактного UI можно считать Metro-дизайн. В противоположность натуральной иконописи iOS – какие-то разные цветные плиточки.
Осознанно ли, как Кандинский, или нет, но разработчики концепции Metro пришли от натуры к абстракции. Скорее всего, это случайность, в противном случае рынок бы изобиловал множеством примеров такого построения UI. Например, неплохо смотрелись бы цветные круги или пилюли Дэмиена Хёрста.
Концепция абстракционизма в дизайне пользовательских интерфейсов в настоящее время до конца не раскрыта. Можно сказать, разработчики Metro только приоткрыли дверь в новый мир, но другие не спешат ей воспользоваться. Все дело в скевоморфизме. Глубоко укоренившийся в сознании разработчиков, он не дает широко открыть эту дверь, так как они просто в упор ее не видят, уж больно ненатурально она для них выглядит.
Стоит же снять шоры и выбраться из глубокой колеи, где ничего не видно, кроме натуральной задницы «верблюда, навьюченного разным хламом» и создающего эту колею, – как откроются новые миры – от абстрактных форм до бесформенных, миры чистой информации.
Бесформенный дизайн
Абстракционизм в дизайне в сравнении с натурализмом – это, конечно, движение в сторону минимализма. Но до каких пределов можно дойти, продолжая это движение? Каковы границы минимального UI? Возможно ли совсем отказаться от формы и что останется в итоге?
Крайний случай минимального UI – это один пиксель, меньше быть не может. Предположим, наш UI состоит из этого пикселя. После нажатия на этот пиксель должна выполниться какая-то функция. Давайте теперь разместим наш UI поверх контента, что часто бывает, а в качестве контента возьмем изображения шедевра Моне.
Ну как? Видите наш UI? Нет?! А он есть! Пиксель настолько мал, что слился с задним фоном и не может обеспечить приемлемый человеку уровень коммуникации. Пиксельный интерфейс может подойти для роботов, но не для людей.
Таким образом, графический интерфейс абонента должен быть больше, чем пиксель. Но насколько? Да и вообще, где находится тот рубеж минимализма, после которого мы теряем возможность нормальной коммуникации?
Чтобы попытаться нащупать этот рубеж, предлагаем двигаться от максимально возможного по размеру UI в сторону минимального, отсекая по пути все ненужное.
Максимальная площадь UI ограничена рабочей областью. Рассмотрим в качестве максимального UI изображение, которое занимает 100% экрана. Возьмем в качестве такого изображения все тот же шедевр Моне. И пусть при нажатии на стог сена должна выполниться какая-то функция.
Как видно, пользователь не получает никакой информации, сообщающей ему, что нужно сделать, чтобы выполнить функцию. Хотя функциональная область UI – стог – составляет чуть ли не треть экрана, пользователь об этой функциональности никак не догадывается, нет никакой подсказки. Визуальной информации много, но непонятно, как ее интерпретировать.
Максимальный UI в нашем случае по способности передать полезную для коммуникации информацию сравним с минимальным, состоящим из одного пикселя. Все дело в энтропии.
Чем выше энтропия, тем меньше пользователь понимает, что происходит. Хаос. Визуальный поток большой, но пустой, весь объем передаваемой информации рассеивается. КПД низкий. Чем выше энтропия UI, тем ниже КПД интерфейса.
Энтропия, или показатель неопределенности UI – условный показатель, индивидуальный для каждого, так как это характеристика восприятия. Например, интерфейс, выполненный в цветах, которые не различают дальтоники, будет иметь для них большую энтропию в отличие от остальных людей. Определить энтропию UI можно только опытным путем.
Однако вернемся к примеру, где UI выполнен в виде изображения, занимающего 100% экрана. Достаточно нам написать в нужном месте пояснение – и ситуация кардинально меняется.
Сразу стало понятно, куда жать. Этой надписью мы резко уменьшили энтропию. Нет ничего конкретнее текста.
Если при этом отбросить само изображение (форму), а оставить только текст, – качество коммуникации не изменится, но при этом интерфейс задействует всего несколько пикселей экрана, отводимых под надпись. Чем лапидарней UI, тем выше его КПД.
Картина Моне в интерфейсе – ни к чему. Хоть она и является великим произведением изобразительного искусства, это не повод пихать ее во все места. Кто хочет посмотреть на Моне – пойдет на выставку, или купит книгу с репродукциями, или посмотрит документальный фильм.
Аналогично и с другими формами, например, иконками. Если иконки с текстом несут такую же полезную для коммуникации информацию, что и текст без иконок, то зачем оставлять иконки? Чтобы что? Чтобы продвигать творения дизайнеров в массы? Но выше мы вполне обоснованно отказали в этом самому Моне, указав на то, что интерфейс – не картинная галерея.
Закрепим сказанное примером. В качестве контента для заднего плана возьмем те же стога, а в качестве UI рассмотрим два варианта – с иконками в виде кружочков Хёрста с текстом и просто текст.
В первом случае появляется ощущение безвкусицы. Сложение двух шедевров дает не плюс, а минус. Это правило работает при наложении любых картинок. Это хорошо знают те, кто работает с интерфейсами, строящимися поверх контента (например, в IPTV). На крайний случай в интерфейсе можно использовать контурные рисунки, которые по существу можно считать иероглифами.
Второй вариант с текстовым UI выглядит лучше, но композицию портит равномерное распределение текста. Это состояние в физике называется тепловой смертью. Но дело поправимое, задачу можно решить несколькими способами: путем перемещения или трансформации надписей (по примеру того, как Кандинский перетаскивал точку из центра, чтобы добиться нового звучания композиции – положение в центре он называл беззвучной точкой) или с помощью анимации (нужно быть предельно осторожным во избежание приступов эпилепсии). В обоих случаях нарушается равновесное беззвучие композиции, появляется позитивная напряженность, которая четко улавливается человеческим восприятием.
Как показано ниже, вся информация сгруппирована и занимает минимум пространства, оставляя пользователю право созерцать контент при включенном UI. Также на этом примере видно, как только за счет смещения можно выделить выбранный элемент, закрепив выделение дополнительно хэштегом.
Сравните это с вариантом 1. Посмотрите, от какого объема ненужной информации мы избавились, не потеряв информативности, насколько легче смотрится интерфейс.
Текст поверх контента напоминает обложку глянцевого журнала, где правильно подобранный шрифт, гармонично сочетающийся с изображением, вместе образует единое целое. Если постараться, можно рассчитывать на эффект резонанса, когда эффект восприятия от результата наложения текста на контент будет в разы выше, чем по отдельности.
UI без форм, состоящий только из текста, – смелый тренд современности. При этом интерфейс с использованием языка на базе алфавита более минималистичен, чем пиктограммы. Версия для роботов – UI с использованием бинарного кода.
Избавляйтесь от форм с лишней графической информацией, паразитирующей на внимании пользователя, отсекайте все лишнее, отправляйте форму на помойку, занимайтесь только текстом. Искусство каллиграфии и типографика вам в помощь. Отсюда название концепции – Typographic UI.
Теперь задача построения интерфейса сводится к созданию нужной композиции текста в рабочей области. При этом одно и то же композиционное решение может значительно отличаться в плане визуального воздействия на пользователя за счет подбора шрифтовых комбинаций. Шрифты играют роль красок, задают настроение и стиль. Каллиграфия – главный инструмент художника в таком UI.
Универсальных решений, подходящих для решения всех задач, не существует. Святого Грааля нет, это следствие теорем Геделя о неполноте и теоремы Тарского о невыразимости истины. Но в классе интерфейсов для управления просмотром контента наш подход способен выполнить любую работу.
Концепция Typographic UI родилась в компании A.R.E.S. при работе над проектом IPTVPORTAL. TYPOGRAPHY – так мы назвали наш пользовательский интерфейс для просмотра интерактивного телевидения. Впервые он был продемонстрирован на выставке CSTB-2018.
P.S.
Для тех, кто не нашел UI из 1-го пикселя. Подсказка.
