Алгебра дизайна: II. Тектоника
Что такое тектоника и цели пользователя? Это признаки целей наружу плюс UX рефакторинг. Применять тектонику для UX и в продуктовой разработке просто.
Другие части этой серии публикаций:
Представьте себе приложение о погоде, в котором вы видите:
- Как лучше одеться перед выходом на улицу. Брать ли шапку или зонт? Использовать ли мазь от солнца или от обморожения?
- Если вы автомобилист — будет ли сегодня гололедица? Или же будет ветер и не стоит парковаться под деревьями и рекламными щитами. Если же днём будет жара, то приложение предупредит, что не стоит оставлять бутылки с водой в салоне, чтобы не вызвать пожар.
- Достаточно ли прогрелась вода в ближайших водоемах для купания? А может, сегодня будет липкий снег и время строить с детьми снежную крепость и снеговика?
- Давление сегодня скачет, так что гипертоникам надо выпить свои лекарства. И вообще в этот временной промежуток может болеть голова. Лучше проверьте аптечку и сходите за таблетками пока давление стабильное.
Причем, изображаются эти ситуации на экране приложения не набором параметров, а одной картинкой.
Это и еще кучу вещей вы спроектируете, используя один принцип — Тектонику.
Слово Тектоника имеет значения, относящиеся как к геологии, так и к искусству. Смежным по смыслу является термин архитектоника (слово архитектор произошло от него). Преимущественно, все значения употребляются применительно к архитектуре и несут смысл “зримое воплощение внутренней конструкции”. Показать наружу как некоторое произведение искусства устроено внутри. Классический пример тектоники в архитектуре — Эйфелева башня в Париже. Тектоника нашла отображение во многих направлениях искусства. В частности в живописи, графике, скульптуре, литературе, музыке.
В 1922 году советсткий художник и искусствовед Алексей Ган, выпустил статью-манифест “Конструктивизм”. В ней понятие тектоника определяется как синоним органичности, взрыва из внутренней сущности.
Базируясь на этих определениях тектоники, а также на концепции признаков и свойств, мы дали тектонике более практичное, формальное определение, которое позволит применять ее в самом широком смысле и многих отраслях.
Тектоника — это отображение признаков цели
Что такое цель
Целью будем считать то конечное состояние, ситуацию, в которой окажется пользователь при работе с интерфейсом, продуктом, инструментом, процессом. Цель — это то, что хочет получить пользователь на выходе. В JTBD — работа, для которой пользователь нанимает продукт и приведет его к желаемой цели.
Еще раз.
Цель — это цель ПОЛЬЗОВАТЕЛЯ, не ваша. Она вообще может лежать вне сценария взаимодействия с вашим интерфейсом, сервисом или продуктом.
Для пользователя это все может быть “необходимым злом”, потому что нет другого способа достичь нужной ему цели.
Примеры целей:
- Заказ в интернет-магазине. Имеет признаки: количество товаров, их стоимость, общий вес и объем, сумма скидки, дату и время доставки, наличие товаров (или ожидаемый срок появления в наличии) и другие.
- Блинчики, которые вы жарите с утра. На выходе получите стопку блинчиков с признаками: высота стопки, толщина и размер каждого блина, вкус и цвет блинчика.
- Походы в спортзал. Признаки конечной цели: вес, рельефность мышц (количество кубиков пресса, диаметр бицепса), количество повторений жима штанги и ее вес, длительность пробежки на беговой дорожке, частота пульса после конкретной нагрузки и прочие. Вот как раз спортзал и упражнения — то самое необходимое зло по пути к желаемой фигуре и спортивным результатам.
Цель может быть как конечная (см. примеры выше), соответствующая итоговой ситуации, так и промежуточная. Например, состояние теста для блинчиков — промежуточная цель.
В приведенном в начале примере, целью информации о погоде являются не градусы, скорость ветра или атмосферное давление, а те ситуации, где эти данные будут применяться. Они необходимы, чтобы лучше подготовиться к вариантам развития событий. Сами по себе они не несут смысла или пользы. Нас интересует их трактовка, влияние на нашу жизнь. Дождь — это признак цели (ситуации), в которой я могу промокнуть, а впоследствии и заболеть. Солнце и жара — признак цели, где я либо получу ровный красивый загар, либо солнечный ожог и тепловой удар, если не возьму панамку.
Вытаскивайте признаки наружу
Первый ключевой момент:
Признаки цели должны быть отображены пользователю как можно раньше
Тогда в начале взаимодействия будет понятно какое действие приведет к желаемой цели. Да, цели могут меняться по ходу действия пользователя. И да, целей может быть более одной.
Признаки цели — как кончики нитей в лабиринте интерфейса, сквозь который необходимо пройти пользователю, чтобы добраться до своей цели.
Чем раньше покажете пользователю признаки его конечной цели, тем проще ему будет сориентироваться. Поэтому как раз и следует смотреть на ситуацию в целом. От начала взаимодействия до конца. В полном соответствии с определением UX по Дональду Норману.
Кстати, у Norman Nielsen Group в статье “UI Copy: UX Guidelines for Command Names and Keyboard Shortcuts” проскакивают верные моменты касательно того, что надо выдавать пользователю указание на его последующее состояние: “Describe the consequent state, not the current state”.
Принцип тектоники также можно определить двумя словами: Признаки наружу
Если целей несколько и их признаки похожи или даже неотличимы — пользователю трудно выбрать какое действие совершить, чтобы достичь конкретную цель. Так получаются недостатки первого типа. В статье про признаки и свойства мы подробно разбирали пример с двумя одинаковыми стаканами. Какой вы купите, если один стоит тысячу, а второй — пять тысяч?
Если признаков цели мало и они не напоминают пользователю о цели — он считает, что на данном этапе нет возможности продвинуться к ней. Это недостаток второго типа. Мы рассказывали про них в статье “UX рефакторинг. Что это такое и чем отличается от редизайна”.
Например, в списке найденных отелей на желаемые даты, вы хотите посмотреть варианты цен на номер в конкретном отеле, но на кнопке надпись “Забронировать номер” — вы считаете, что это уже следующий этап, именно бронирования, а цену надо искать где-то еще. И либо начинаете перебирать варианты, либо уходите с сайта.
UX рефакторинг или мехом внутрь
Второй ключевой момент:
Тектоника дает максимальные результаты только при проведении UX рефакторинга
При проведении UX рефакторинга несколько этапов интерфейса или процесса совмещаются в один. Убирается избыточность элементов (правило Оккама, как всем известный принцип) и появляется гибкость в использовании.
Образно говоря, представьте воронку по которой идет взаимодействие пользователя, в которой вы взяли последний этап за хвостики признаков целей и потянули на себя, в начало. Как будто выворачивая её мехом внутрь. Все этапы воронки соберутся к началу и признаки целей будут у вас в начале.
Без UX рефакторинга тектоника, безусловно, тоже даст полезный эффект — особенно в устранении недостатков второго типа, когда пользователю недостаточно информации какое действие приведет к желанной цели. Признаки целей на более ранних этапах интерфейса как раз помогут пользователю определиться. Ему будет проще принимать решения. Но если увлечься и вытащить слишком много, то вы получите классический “интерфейс от программиста”. Когда миллион кнопок и параметров, позволяющих делать что угодно с конструкцией, но непонятно что же конкретно надо делать сейчас.
Более формально говоря — как только вы устраните недостатки второго типа, связанные с нехваткой признаков и продолжите добавлять избыточные признаки целей, вы начнете порождать недостатки первого типа. Когда непонятно что делать, так как слишком много информации.
Примеры применения тектоники
Навигация
Рассмотрим обычную навигацию на дороге. В ней постоянно применяется тектоника. Предположим, вы едете из Санкт-Петербурга в Москву. На выезде из Питера даются признаки трех целей (точек прибытия), где вы можете оказаться следуя этой дорогой: Москва, Тверь, Новгород. И расстояние до каждой (кстати, изменяющийся признак — это фактура. Потом расскажем). Название и расстояние являются признаками конкретной цели.
При подъезде к платной автодороге появится указатель для выбора по какой дороге ехать — платной или бесплатной (локальная, промежуточная цель). Причем, оба варианта приведут в Москву (большая конечная цель).
Ну и при въезде в столицу России будет указатель с одним-единственным признаком — названием города “Москва”.
Следуя по указателям можно доехать даже не зная дороги и не заглядывая в навигатор. Признаки буквально выводят на верный маршрут. Ровно этот же принцип применим к любому интерфейсу и взаимодействию.
Аналогично, тектоника может применяться в навигации по помещениям. Если есть дверь в коридор, за которым находится десяток кабинетов — повесьте на дверь указатель с диапазоном номеров этих комнат. В отелях этот принцип видим на каждом этаже, когда выходим из лифта. Вы сразу видите признак конечной цели — вашего номера.
Интернет-магазины
На сайте интернет-магазина компании Lego продаются конструкторы. Но в карточках товаров на иллюстрациях показаны не детали россыпью, а уже собранные модели домиков и космических кораблей.
Ребенок, выбирая заветную коробку с конструктором, выбирает не количество деталей, сколько времени он будет его собирать или ценник (эти признаки цели “купил подарок ребенку” больше важны для родителей). Он выбирает продолжение сказки. Для него конструктор — часть игрушечного мира. С этим представлением он заходит в магазин. Так покажите картинку из этой сказки в самом начале! Lego, как и большинство производителей детских конструкторов, именно это и делает, показывая на коробке картинку уже собранного набора.
Кстати, а почему бы компании Lego не сделать шаг вперед? Торговать не отдельными наборами в серии, а объединять их в подборки. Представьте, что вы можете купить дюжину наборов и собрать полную картинку, как это представлено в фильме!
Например, совет джедаев, как он изображен в картине. Или эпичную сцену побоища на песчаной арене. Или подборку наборов для гонки на зведолетах на Татуине. Это тоже цели, только не ребенка с отдельным набором-звездолетом, но ребенка, который хочет получить что-то, чтобы расширить свою игру. Причем речь не об одном громадном наборе со всеми звездолетами. Достаточно на коробке одного звездолета написать какие еще коробки его дополняют до сцены гонок на Татуине. А ведь этот звездолет может участвовать во многих других сценах. И покупая одну коробочку Гензель получит крошки ведущие к покупке десятка других наборов для трех разных сцен.
А мы всего лишь расширили цели на один шаг.
Компания IKEA половину площади своих магазинов отводит под выставочный зал, где вы видите уже конечную ситуацию — как будет выглядеть конкретный предмет в общем интерьере. Вы УЖЕ там, внутри своей новой комнаты, можете посидеть на стуле, полежать на кровати, полазить по шкафчикам. Все признаки ситуации, когда вы живете с этими предметами, вытянуты к вам, на самый первый этап, когда вы только подбираете себе что-то.
Аналогично и на сайте — иллюстрации в каталоге показывают интерьеры с продаваемыми товарами. К сожалению, этот принцип не выдержан до конца в конечных карточках товарах — например, основное изображение комода изолированно, на белом фоне, хотя среди других изображений товара он представлен и в интерьере.
Кстати, навигация по тому же магазину IKEA полностью аналогична навигации на трассе описанной выше и соответствует тектонике: вы видите куда пройти на выход и на указателях показаны отделы.
Как применять тектонику
Чтобы применять принцип тектоники в ежедневной работе придерживайтесь следующей последовательности шагов:
- Определите цели пользователя. Не персоны, не сценарии, а конечные ситуации, в которой хочет оказаться клиент. Зачем он пришел к вам на сайт? Что получит в конце, когда воспользуется вашим приложением, интерфейсом, товаром? Цели могут быть как конечные, так и промежуточные. Чем далее от начала взаимодействия и ближе к его концу, тем длиннее будет путь, по которому вы рассыпете хлебные крошки признаков, чтобы Ганзель и Гретель могли выйти из леса.
- Определите признаки целей. Для каждой цели определите набор признаков, которые соответствуют её свойствам.
- Проведите UX рефакторинг вашего интерфейса или процесса. Устраните ненужные этапы воронки.
- Вынесите признаки целей на весь оставшийся путь взаимодействия пользователя с интерфейсом.
Идеально, если еще примените принцип обратной перспективы: чем дальше цель от данного этапа, тем четче и яснее должны быть показаны ее признаки.
Расширение системы
А теперь немного практических примеров с тектоникой.
Каждую неделю я заказываю продукты в онлайн-магазине. Так вот корзина с набранными продуктами отображается справа сразу.
Очень немногие магазины делают такое. Кто-то делает распахивание окошка с содержимым корзины при наведении. Кто-то только при нажатии на иконку корзины покажет содержимое. Но большинство интернет-магазинов перебрасывают пользователя на страницу корзины, пытаясь так подтолкнуть к оформлению заказа.
Далее, в мобильном приложении этого интернет-магазина можно заказать продукты в соответствии с более чем сотней рецептов блюд. Если вы не сильно привередливы в выборе блюд, то это очень неплохое решение. Ваша цель уже не просто “заказ” (как мы приводили в примерах целей, в начале статьи), но “блюдо”. Признаки этой цели (ингредиенты) протянуты в начало — на этап заказа продуктов в магазине. Кстати, если вы все же привередливый гурман — симметричное решение: загрузите ваш рецепт в базу интернет магазина и пусть он будет доступен всем покупателям.
Симметричные решения, как правило, дают очень эффективные результаты
А что будет, если вы домохозяйка и надо оставить мужа с сыном на неделю дома, а самой уехать к маме? В этом случае одним блюдом не отделаешься. Надо на всю неделю, да еще и первое-второе, плюс компот. Тут целью становится “питание на неделю”. Ситуация полностью аналогична звездолетам на Татуине, рассмотренным выше. Набор рецептов на каждый день, на двух человек. Такую программу можно проработать на стороне магазина и выложить рядом с рецептами.
А теперь шагнем еще дальше. Цель “званый ужин” у бабушки. На 70-летнем юбилее будут все ее подружки. Нужно не только закупить продукты, но и приготовить их так, чтоб ни одна бабушка не могла придраться. В этом случае, магазин кроме продажи и доставки продуктов, может оказывать услугу шеф-повара. Приезжает специалист от магазина, который готовит качественные блюда на вашей кухне. Это дополнительная услуга, которая дает ценность — качество готовки и подачи. Цель изменилась — изменились и её признаки, и способ решения. Альтернатива этому — доставка готовых блюд. Локально, в магазине, у данного продавца это уже реализовано.
Ну и напоследок еще шажок сделаем. Вы же продукты не сразу кушаете. Их надо где-то хранить. Что мешает магазину давать вам холодильник бесплатно на много лет пользования, а вы при этом становитесь постоянным покупателем именно этого магазина? Тут цель: “употреблять продукты”. Признаки — они в доступности и сохраняются долгое время. Будьте проще.
Заключение
Посмотрите на первый абзац этой статьи. В нем собраны основные тезисы, которые вы встретили по тексту. Это признаки того состояния в котором вы оказались, прочитав до конца. В технике написания текстов данный принцип называется Пирамида Минто. В принципе, это та же тектоника, но в копирайтинге.
Вы сталкиваетесь с принципом тектоники везде, каждый день:
- В проектном менеджменте — цели проекта по SMART изначально формируются и утверждаются.
- В правильной разработке — сразу же пишется тест, который должен пройти разрабатываемый код (TDD).
- Планируя ваш отпуск вы изначально знаете в каком отеле будете отдыхать и каким самолетом полетите.
- Покупая одежду вы сначала думаете как она будет на вас сидеть и примеряете ее.
Постоянно, во всех сферах вы, как пользователь и дизайнер своей жизни в одном лице, представляете себе свою цель и какими признаками она должна обладать.
Facebook: facebook.com/lessplusmore
Telegram: t.me/lessplusmore
VKontakte: vk.com/lessplusmore
Twitter: twitter.com/lessplusmore
Если вам понравилась статья — не стесняйтесь апплодировать!
Отдельное спасибо Wova Roodnyy за идеи, методику и консультации.
