Алгебра дизайна: IV. Фактура
Фактура — это изменение связанных уникальных признаков элементов конструкции в пространстве и времени. Она включает в себя признаки целей тектоники и статичные элементы конструкции. Ищите разницу. Объединяйте одинаковое, разделяйте разное.
Термин Фактура
Слово фактура обычно понимается как характер поверхности объекта, его рельеф. Рядом с ним стоит текстура, понимаемая как ориентация элементов материала. Оба значения недостаточно полно передают смысл понятия фактура в той степени, что трактуем мы и что закладывалось Алексеем Ганом, советским художником и искусствоведом, основоположником конструктивизма.
В 1922 году в своей статье-манифесте “Конструктивизм” он пишет следующее:
“Фактура есть органическое состояние обработанного материала или новое состояние его организма. … сознательно взятый материал и целесообразно использованный, не останавливающий тектоники, и есть фактура.”
“Разбирая наше понятие фактуры, следует исходить из материала вообще.
Для примера возьмем чугун — индустриальный материал.
Для того чтобы из него получить вещь, производиться сложный производственный процесс.
Чугун плавится, т. е. претворяется в огненную жидкую массу, затем вливается в форменную опоку, проходит наждачное отделение или просто обрубается, поступает в механическое отделение на токарные станки, после чего можно сказать, что чугун становиться вещью.Весь этот процесс и есть фактура, т. е. обработка материала в целом, а не обработка только одной его поверхности.
Целесообразное использование материала значит выбор и переработка, а характер целевой переработки и есть фактура.”
Базируясь на этом определении фактуры, а также на концепции признаков и свойств, мы дали фактуре более практичное, формальное определение, позволяющее применять её во многих отраслях.
Фактура — это изменение признаков элементов конструкции
Немного раскроем это определение.
Признаки сменяют друг друга только тогда, когда меняются значения свойств (состояния объектов). Что-то произошло, какое-то событие — пользователь ввёл адрес, либо положил товар в корзину, либо сделал выбор. Всё это влияет на свойства элементов и конструкции в целом, соответственно новый признак замещает текущий.
Так как присутствует конструкция, то элементы связаны между собой. То есть изменения происходят по всем связанным элементам одновременно. Грубо говоря, изменения происходят в пространстве, по всему вашему сайту, продукту или бизнесу. Точечное воздействие влияет на все зависимые кусочки. Если признаки не связаны, то это разные фактуры. Относящиеся к разным конструкциям. Ночь, улица, фонарь, аптека связаны через стихотворение Блока. И могут быть прочитаны, напечатаны, продекламированы. Но по отдельности они независимы как сущности.
Более того, изменение происходит во времени. В каждый момент времени происходят события. Они влияют на всю конструкцию. Закончился ли товар на складе или начал с утра работать колл-центр, изменился статус заказа или же курьер заменил отсутствующий товар на аналогичный — все это находит отображение в правильно выстроенной конструкции. Для пользователя (даже если тот не трогает ничего) сайт или интерфейс живет сам, перестраиваясь под имеющиеся данные.
Тут следует сделать небольшое отступление для пояснения: меняться должна только фактура. Конструкция под заданные цели остается неизменной, иначе нарушим принцип тектоники. На примере это означает следущее: при поиске товар на сайте отображается в сетке выдачи, как и его количество (остаток). Предположим, пользователь смотрит на эту страницу достаточно долго. На длительном периоде сайт в одностороннем порядке может менять остаток товара, сведя его до нуля. Но не надо убирать саму карточку товара из сетки выдачи — это будет изменение конструкции страницы с результатами поиска. Оно повлияет на тектонику — отображение признаков цели пользователя “найти товар”. В принципе, это уже часть фреймворка по UX-рефакторингу.
Наконец, уникальность. Признаки не должны повторяться. Два разных элемента (кнопки или поля ввода, например), с одинаковыми признаками, которые нельзя объединить — значит в этом есть смысл, свойство отличающее эти элементы. Значит это свойство, лежащее в основе отличия, проявится в соответствующем признаке (или нескольких).
Ищите разницу
Теперь, учтя эти замечания, определим фактуру подробнее:
Фактура — это изменение связанных уникальных признаков элементов конструкции в пространстве и времени
Алгебра дизайна
Для тех, кто пропустил статью о конструкции — рекомендуем почитать хотя бы главу “При чем тут алгебра?”. Напомним, если возьмем уравнение вида
aX²+bX+c = Y
Фактурой будут значения переменной X. Константы, как и взаимосвязь содержащихся в уравнении элементов — это всё целиком является конструкцией. Y — цель, а все уравнение целиком явно доступное и понятное — тектоника. Например, если бы X зависел от Z и в текущем уравнении это не было бы показано, то имелась бы конструкция, но не была бы соблюдена тектоника.
Логично задать вопрос, а разве значения Y не будут фактурой? Да, верно, будут.
Фактура относится ко всем признакам элементов, включая в себя и признаки цели тектоники
Возвращаясь к дорожным знакам и навигации, приведенным как примеры тектоники, можно говорить о том, что меняющееся расстояние до Москвы, пока вы едете из Санкт-петербурга — это фактура. Уровень масла, бензина, показания спидометра, запах леса из окна автомобиля и шорох колес о дорожное полотно — это все признаки, это всё является фактурой поездки.
Если что-то меняется — это фактура. Если неизменно — это конструкция
Если признак меняется — это фактура. Перестал меняться и достаточно конкретного значения — стал константой. Признак стал элементом конструкции.
Константы в конструкции — это единичный признак фактуры
Например, в Москве несколько аэропортов. И заказывая такси нельзя сказать “поехали в аэропорт”, надо пояснить в какой именно. А вот в Казани можно, там он один, константа.
Оплата на сайте может быть несколькими способами и при оформлении заказа можно предложить выбор клиенту: наличные, картой, по безналу от юрлица и т.д. А если один вид оплаты — наличные, то человеку надо просто “оплатить”. Кстати, тут начинается тонкая грань смысла слов. “Оплатить” по умолчанию у клиента в голове может быть картой. А у вас — наличными. Как и яблоко — один представит круглое, второй красное, третий сладкое.
Принципы
Давайте теперь немного направимся в практическую плоскость применения и посмотрим как принципы работы с фактурой могут помочь в UX и интерфейсах.
Уникальность признаков
Если вы не можете удалить одинаковые элементы в фактуре, значит в каких-то свойствах они отличаются. Значит, надо это свойство выявить и показать его признаки. Только в этом случае элементы станут уникальными. В какой-то степени, это очень близко к правилу Оккама.
Одинаковое — объединяется. Разное — разносится.
Предположим, используем желтую рамку для кнопки “Подписаться” при нажатии. Значит этот признак “желтая рамка” должен быть всегда, когда кнопка нажимается. Если в другом месте сайта рамка синяя или же отсутствует вовсе — это ошибка. Для одинаковых свойств — одинаковые признаки. Если уверены, что у кнопки необходимы разные рамки — задайтесь вопросом “зачем?”. Наверняка ведь есть какой-то смысл, некая разница, которую надо донести до пользователя в самом поведение кнопки, в ее свойствах. Возможно, у вас второе действие не просто подписка, а подписка на какую-то определенную тематику рассылок? Дайте пользователю знать об этом.
Используя данный принцип, с помощью фактуры можно как проверить дизайн-систему на корректность, так и дополнить ее. В рамках UX-рефакторинга, она получится автоматически, как побочный продукт.
На всякий случай, если вдруг столкнетесь с затруднениями в выделении признаков и разницы у элементов — посмотрите на “признаки признаков”. Кнопка имеет признаки: габариты, рамка, надпись, фон. Рамка, как сущность, тоже имеет признаки: цвет и толщина; у надписи — шрифт, цвет и другие.
Тут можно привести такие примеры:
Колл-центр. Наверняка сталкивались с тем, что при переключении между операторами приходится каждый раз пересказывать суть обращения. А должно быть один раз.
Регулярные покупки. Например, если каждый месяц пополняете запас вина или закупаете бытовую химию — это можно организовать по подписной модели. Отделиляем признаки повторяющегося заказа (набор товаров в корзине) от меняющихся признаков — даты и времени.
Авиабилеты. Представьте себе форму выдачи. И выглядит она как стандартный авиабилет. Те признаки, которые общие отображаются как на обычном билете. А те, которые отличаются — показываются рядом с текущим. Этот же принцип применим к карточкам товара.
В статье Baymard Institute подмечено, что данные должны быть связаны между вариантами одного продукта. Только коллеги решили связать карточки товаров через перелинковку. Намного более эффективно было бы связать параметры, на одной карточке товара. Представьте, что вы выбираете товар, а у каждой характеристики написано сколько доплатить, чтобы купить товар с другим значением этой характеристики. Прототип подобного решения приведен справа.
Обратите внимание, что этот принцип объединения одинакового и разнесения отличающегося работает в пространстве-времени. И в прошлое и в будущее
Пользователь отменил последнее действие — удалил введенный email. Соответственно, удалилось везде. Во всех местах по конструкции каскадно произошли связанные с этим изменения. Например, отписка от рассылки. Но, естественно, должна быть применена тектоника — покажите предварительно признаки того состояния что получит (или чего лишается, если угодно) пользователь при удалении email-адреса.
В интернет-магазине, где я много лет покупаю книги, хорошо проработана фактура, например, в части уже заказанного товара. Сайт помнит меня, знает мои заказы, видит что просматриваю. И сразу подсказывает, что я уже заказывал данную позицию ранее.
А что мешает делать подобное, например, с товаром, удаляемым из корзины? Не просто удалять и отображать корзину, будто его и не было, а выделить признак “удален”. Например, сделать товар зачеркнутым, серым текстом (зачеркнутость и цвет как раз будут признаками удаленного товара) и возможность восстановить его в корзине. Это как Ctrl+Z, но в конкретном месте сценария.
Кстати, всем известное сочетание Crtl+Z, ведущее к отмене последнего действия — это фактура. Нажимая его, я отменяю последнее действие (изменяю свойство), откатываюсь к предыдущему состоянию. И внешне это сразу же проявляется в новом наборе признаков, где результаты последнего действия не учтены.
Равноправность признаков
Если вернуться к уравнению выше, то для каждого X можно определить Y. И, наоборот, для каждого Y можно найти свои Х.
Переведя с технического языка на гуманитарный, можно сказать о том, что можно перейти из текущего состояния (набора признаков) к любому другому в рамках нашей конструкции. Посмотрите на карточку очистителя выше. Можно нажать на любую ссылку рядом с характеристикой и попасть на карточку другой модели. Остальные признаки при этом перестроятся соответственно.
Если какой-то признак вы меняете — любые другие можно перестроить под него в рамках текущей конструкции. Если это не так — проверьте, а верно ли выделены признаки вообще?
Достаточность признаков для фактуры
Частый вопрос — а что закладываем-то в наш сайт/ продукт/ систему? Какие признаки значимы, а какие нет? Текущие методологии выявляют персоны, смотрят пути пользователя и т.п. Но это же не дает полной картины. Так как понять, что учли необходимое и фактура корректно проработана? Ответ простой:
На заданном периоде наблюдения должны быть учтены все изменяющиеся признаки в случающихся событиях
Это, опять же, часть фреймворка UX-рефакторинга, но тем не менее давайте рассмотрим относительно фактуры. Представьте себе лифт. Вы встали у него и начали наблюдать.
Выбор этажа. Человек выбирает куда ехать и нажимает кнопку. Одна поездка.
Период шире. От вызова лифта до выхода пассажира из лифта.
Несколько поездок — появляются события совместных поездок и конкуренции за ресурс.
Один день — утром и вечером пики нагрузки. Появляются события долгого ожидания, опоздания, неоптимального маршрута лифта и перегрузок.
Одна неделя. Кто-то застревает в лифте — ремонтные рабочие приходят чинить. Уборщица приходит мыть пол в лифте и протирает стены-кнопки. Один из арендаторов завозит новую мебель и перевозит ее на этом же лифте. На улице жара под 40, перегорает лампочка в лифте или из-за наплыва клиентов в офисе появляются долгие скучные поездки с первого на последний этаж с остановкой на каждом. Появляется рекламодатель, который хочет клеить объявления в лифте или проигрывать аудиорекламу.
Прошли года. Пришло время демонтировать этот лифт и поставить новый.
Это разные события с разными признаками. Каждый из которых влияет в свой момент. Каждый из которых влияет на то как вы будете проектировать лифт во всех аспектах — интерфейс кнопок, освещения, звука, надежности, управления вызовом, уборки, грузоперевозки. Утилизации, наконец.
И, наконец, вишенка на торте — эти события влияют друг на друга. Вы не можете их изолированно рассматривать. Уборка лифта летом и зимой сильно разнится. А если еще перевозили что-то пачкающееся или поцарапали стены — то надо ли вызывать уборщицу или уже пора ремонтников? А может администратора здания, чтобы он принял решение? А кто об этом сообщит — пассажиры?
Тут проявится эмерджентность. Одни события могут вызывать или блокировать другие. Все комбинации вы не переберете — это будет комбинаторный взрыв. Поэтому критерием того, что закладываем при проектировании в фактуру — это меняющиеся признаки на периоде. Если они неизменны во всех событиях, то это элементы конструкции. Фиксируем и работаем дальше.
Все полностью соотносится с определением UX по Дону Норману. От использования до утилизации, во всех аспектах.
Чем больше вы учтете признаков , тем более универсальная и устойчивая к различным воздействиям конструкция получится
Образно говоря, если достаточно долго наблюдать — вы переловите всех черных лебедей Талеба. Заложите “антихрупкость”, используя его же термин.
Примеры применения фактуры
Широко распространенное понятие омниканальности (omnicommerce) — это и есть хорошо проработанная фактура. Когда клиент начинает действовать в одном канале, а заканчивает в другом. И его история, данные, заказы — все корректно передаётся между каналами.
Классический мем “Где карту получали — туда и идите!” — это пример непроработанной фактуры. Пользователь хочет достичь цели, которая недостижима в данных условиях. Недостаток второго типа.
Вообще, можно говорить о следующих правилах:
Плохо проработанная фактура ведет к недостаткам второго типа. Избыточно проработанная фактура — ведет к недостаткам первого типа.
Фактура в корпоративном обучении например, это кейс, когда сотрудник закончил курс, значит он получит новый грейд, прибавку к зарплате и у него изменятся задачи и обязанности. Он может выбирать какой курс проходить исходя из этих параметров, а не только из названия и программы курса. И пройдя один, он получит картину по новым, открывшимся курсам. Идеально, как в компьютерных играх — дорожки развития отобразить на картинке сразу (привет геймификации).
Батарейка в телефоне — это индикатор заряда станадартно. Но почему при нажатии на этот индикатор нельзя увидеть какую долю заряда потребляет каждое приложение? И сколько осталось времени в текущих условиях? И, например, если выключу wi-fi — насколько увеличится время работы на оставшемся заряде? Некоторые производители уже начинают реализовывать приложения с подобным функционалом и часть признаков работы телефона становится доступна.
Аналогично wi-fi индикатор в телефоне. При нажатии на него можно показывать куда сместиться, чтобы сигнал был лучше. Или куда вернуться, где был хороший сигнал. Отключили wifi — как изменился уровень оставшегося времени на оставшемся заряде.
Фактура — дает возможность автоматического определения где дом, а где офис. Например, исходя из времени пребывания в той или иной точке (признак того события, что геокоордината не меняется) можно закладывать время на дорогу в календарь, если встреча не в офисе.
Фактура есть и здесь, на медиум. Читатель может оставлять комментарии (внизу), а может ставить их прямо по тексту. Признаками тут будут: само наличие комментария, в каком месте он дан, его автор. Эти комментарии влияют на всех, кто будет читать дальше, даже на автора статьи — вполне возможна корректировка текста после ценного замечания. На этом, кстати, можно попробовать монетизировать сообщества в соцсетях.
Фактура на дороге, в ранее разобранном примере с навигацией. Отображение расстояния до цели прибытия, сами названия целей — это тектоника. Но, то что названия пунктов меняются, пропадают с указателей те, которые проехали и появляются новые пункты, да и расстояния до них изменяется в зависимости от проезжаемого места — это фактура.
Светофор. Загорается красным и зеленым. Это отображение состояния. Современные светофоры ведут отсчет до того момента, как переключатся. Вот то, что есть эти меняющиеся цифры как факт, как отдельное табло на сфетофоре — это тектоника. Признак цели. А то, что они меняются, сами значения цифр отличаются — это фактура.
Вообще, индикаторы — это часть фактуры
Предположим, ваша машина обслуживается в одном автосервисе. Вся история взаимодействия зафиксирована в базе сервиса. Можно сделать наклейку на авто с QR-кодом, по которому вы сможете уточнить всю историю ремонта. Эта же наклейка будет полезна, например, при продаже машины — покупатель легко проверит что машина “не бита, не крашена, дедушка стоматолог по выходным в церковь ездил”. Если автосервис оказывает услугу trade-in, то может сообщать предложения о покупке авто — показать будущую цель “продать машину”, основываясь на истории обслуживания.
Академические шарфы, галстуки выпускников колледжей, значки на лацкане пиджака — это признаки пути, по которому прошел или еще идет его обладатель. Учёба конкретного учебного заведения меняет свойства человека — знания, образование. По окончании получает диплом, подтверждение знаний. Но вместе с этим меняется и поведение — признаки полученного образования, кругозор, круг общения, лексикон. Это фактура, проявленная в нескольких признаках одежды.
Военные ордена, медали и знаки почета — это фактура. Они даются за заслуги и отображают опыт человека. А знаки отличия военных, погоны — тоже фактура, но уже показывающая не только прошлое, что солдат дослужился до генерала, но и право в будущем командовать в данном чине.
Фактура в приложении о погоде, которое мы начали рассматривать в статье о Тектонике: положение солнца, осадки, ветер, как одеваться — это все можно отображать мини-мультиком от момента просмотра и на глубину прогноза. А если учитывать историю взаимодействий, то получим ту самую персонализацию: есть ли у вас дети или вы автомобилист, куда катаетесь на работу и открыли ли дачный сезон и нужна погода на выходные на даче, а не дома.
Предложение текстового редактора начать редактирование с того места документа, где вы остановились. Или возможность продолжить просмотр сцены кинофильма в онлайн-кинотеатре с того момента, до которого вы досмотрели прошлый раз — это все применение принципа фактуры. Свойства редактора (или онлайн-кинотеатра) учитывают вашу историю взаимодействия с ним.
UX рефакторинг и фактура
Фактура без тектоники — это когда в лабиринте много указателей, но непонятно какой из них ведет к цели, да и вообще к какой цели ведет. Яркий пример — командировочный в фильме “Чародеи”, который искал выход из здания. В каждый момент понятно где находишься и куда двигаться далее, но непонятно там ли цель.
Фактура без UX-рефакторинга даст много избыточности и изолированные части в конструкции. Каждый раз, когда что-то меняется или пользователь производит действие, фактура имеет частное решение для этого. Как правило, такое плохо реализуемо, потому что дорого — надо каждое состояние системы спроектировать и поддерживать. На каком-то этапе усложнения и недостатки превысят выгоды. Ярким примером является локализация сайтов. Когда нужен второй язык под новый рынок, то можно поднять полную копию сайта, перевести контент на второй язык и существовать с двумя копиями сайта на разных языках. Но если выходите на третий, четвертый, десятый рынок, то стоимость поддержки такой архитектуры резко возрастает. И эффективнее текст убирать в базы данных, где для каждого варианта написания контента прописан признак соответствующего языка. Это решение как раз и будет фактура с UX-рефакторингом на уровне архитектуры.
Такой конструкцией удобно пользоваться, нет избыточных действий, понятно что можно делать далее и как откатиться к предыдущему состоянию. Плюс, учитывается полезная информация с предыдущих состояний и пути, который прошел пользователь. Конструкция перестраивается под каждое действие, как детский калейдоскоп. Элементы складываются в стройную, целостную картинку.
Рассмотрим мой любимый комод ХЕМНЕС из IKEA. Он существует в четырех разных расцветках. И каждая расцветка имеет свою цену.
Применяя тектонику, кроме других расцветок комодов можно в выпадающем списке отображать и цены на них. Так вы сдвигаете признак цели (сколько стоит комод нужной расцветки?) на шаг ближе к пользователю.
Справа внизу показана карточка белого комода. Обратите внимание, что ценники (и фотографии комода) сменились. Это применение принципа фактуры “все признаки равноправны”.
Отдельно показано смещение еще на один шаг ближе к пользователю. Один лишний клик убран. В полном соответствии со статьей “Вверх с вершины”, где вы отталкиваетесь от того состояния, в котором находится пользователь.
Следующим шагом можно вообще сделать цветовую шкалу доступных расцветок этой модели, упорядоченных по цене. И получим одну карточку товара, где фильтр цвета-цены встроен в интерфейс.
Аналогично, для одеял РОДТОППА есть признак “теплое” или “очень теплое”. И это разные товары. Их также можно совместить на одной карточке, давая пользователю более удобный выбор. Более того, можно под размер конкретного одеяла в карточке товара предлагать постельное белье соответствующего размера.
Заключение
Фактура включает в себя признаки цели тектоники и статичные элементы конструкции. Геймификация, дизайн-системы и многие другие вещи получаются автоматически. Фактура, как и тектоника с конструкцией относится и к продуктовой разработке, и к живым системам, и бизнес-процессам, и к архитектуре, и ко многим другим отраслям.
Facebook: facebook.com/lessplusmore
Telegram: t.me/lessplusmore
VKontakte: vk.com/lessplusmore
Twitter: twitter.com/lessplusmore
Если вам понравилась статья — не стесняйтесь апплодировать!
Отдельное спасибо Wova Roodnyy за идеи, методику и консультации.
