Для чего используется прототипирование
Прототипирование продукта
Во всем многообразии продуктовых терминов, прототип кажется одним из самых понятных и безобидных. Но как определить его качество? В какой момент нужно задуматься о прототипировании продукта и нужно ли вообще?Какие инструменты для этого использовать? Перейти к реальным действиям часто оказывается сложно. Поэтому мы решили собрать небольшой мануал по использованию прототипов в продуктовой разработке.
Все мы прекрасно понимаем, что строительство нового здания всегда начинается с его уменьшенного макета, чтобы архитектор мог убедиться в целостности ансамбля, а при проектировании космического шаттла сначала создается его прототип, чтобы провести необходимые исследования и расчеты. Однако при разработке технологического продукта стадия прототипа часто либо осознанно опускается, либо просто игнорируется. Такой подход чреват увеличением затрат на разработку или вообще выпуском не того продукта, который необходим пользователю. Поэтому давайте последовательно разберем: что такое прототип в разработке продукта, зачем и в какой момент он необходим, какие принципы нужно соблюдать, чтобы создать качественный прототип и какие инструменты нам могут в этом помочь.
Что такое прототип?
Для начала стоит дать определение. Прототип — это простая экспериментальная модель предполагаемого решения, используемая для тестирования идей, проектирования предположений и способов использования продукта быстро и дешево и позволяющая вносить необходимые уточнения и изменения в направление развития продукта. Иными словами прототип позволяет вам:
Чем прототип НЕ является:
Можно выделить два основных вида прототипов технологических продуктов:
Выбор типа зависит исключительно от гипотезы, которую вы тестируете.
Какую цель преследуют прототипы?
Окей, прототип — это модель, которую мы собираем из подручных средств (в оффлайне или онлайне), чтобы проверить какую-то идею. Какие глобальные цели мы при этом преследуем? Их можно разделить на 4 категории:
Один из лучших способов увидеть сильные и слабые стороны вашего будущего продукта — начать что-то делать, экспериментируя с потенциальным решением. Прототипируя, вы облекаете свои идеи в осязаемую оболочку, которая дает возможность вам и вашей команде увидеть и обсудить все за и против, услышать обратную связь от пользователя и продемонстрировать свою уникальность потенциальным инвесторам.
На какой стадии создания продукта пора думать о прототипе?
Допустим, мы убедили вас, что прототип — это круто и он вам очень нужен. Но в какой момент стоит о нем задуматься? В классической концепции дизайн мышления предполагается следующий порядок действий:
Таким образом, к созданию прототипа необходимо приступать, когда вы уже погружены в контекст пользователя, осознаете его боли и проблемы и у вас есть четкая продуктовая гипотеза для решения этих проблем. Иными словами, это момент, когда вы уже готовы собирать команду продуктовой разработки и пилить самый классный революционный продукт 🙂 Вот ровно в этот момент лучше остановиться, выдохнуть и собрать прототип для проверки своих идей.
Основные принципы прототипирования
Разобрались что, зачем и в какой момент времени мы хотим делать. Остался главный вопрос: как же сделать прототип качественным? Для этого нужно держать в голове ряд основных принципов:
Вы можете пройтись по этому списку как по чек-листу после того, как ваш прототип будет готов, задавая себе вопрос: отражен ли этот принцип? Если галочки стоят во всех пунктах — можно смело переходить к следующей стадии и тестировать прототип на пользователях, инвесторах и стейкхолдерах (этому процессу мы посветим отдельную статью).
Инструменты для создания динамических прототипов
Прекрасно, вроде бы все стало более ли менее понятно. Но теперь вы стоите перед проблемой чистого листа: что делать известно, а вот как начать? Для создания кликабельных прототипов существует много различных инструментов. Вот некоторые их самых популярных:
Прототипирование – это, если говорить кратко, упрощенная версия конечного продукта, которая позволяет выявить возможные недостатки, фактически даже не приступая к процессу его создания. Таким способом удается устранить возможные проблемы заранее, что в конечном счете сокращает затраты. Ведь переделывать с нуля конечный продукт значительно сложнее и дороже, чем использовать прототипирование. Это возможность с минимальными затратами создать образец.
Актуальность
Любая современная технология может оказаться полезной. Благодаря ее применению удается сократить расходы на производство и таким способом снизить конечную цену продукта. Прототипирование – это вовсе не исключение в списке современных технологий, открывающих потрясающие новые возможности. По сути, это визуализация готового продукта, позволяющая оценить дизайн, функциональность и другие основополагающие элементы.
Применяется в разных сферах деятельности, начиная с машиностроения и заканчивая разработкой интеллектуальных продуктов, в частности всевозможных программ и сайтов.
Некоторые разработчики уверены, что прототипирование – это важный этап в процессе разработки конечного продукта, которым не стоит пренебрегать. Ведь это позволяет на ранних стадиях выявить недостатки и при минимальных затратах на создание образца внести корректировки в проект. А затем протестировать его аналогичным способом. Создание прототипа обходится значительно дешевле, чем изготовление финальной версии продукта.
Особенности
Нужно понимать, что прототипирование изделий – это быстрая возможность получить образец конечного продукта. На его основе можно сделать обзор, выявить слабые места и, используя полученную информацию, вносить корректировки в техническое задание для специалистов.
Те, кто сталкивался с созданием прототипов, понимают, насколько это полезная и актуальная практика, которая сокращает сроки создания готового продукта, не имеющего недостатков. Ведь они должны быть выявлены и устранены еще на этапе тестирования. Именно с этой целью создают образцы еще до начала реализации проекта и получения готового продукта.
Виды прототипов
Услуга прототипирования в Москве пользуется популярностью, когда запускают в серийное производство новые детали, оборудование, инструменты и т. д. Кроме того, оно актуально при проведении выставок и презентаций, переговоров с инвесторами, согласовании концепции и т. д.
Итак, в каких сферах и какие виды прототипов наиболее востребованы?
На основании созданного прототипа принимают решения относительно дальнейшей возможности и целесообразности реализации проекта. Вот почему при создании образца особое внимание уделяют точности и реалистичности.
Требования
Чтобы эффект от прототипирования моделей был максимальным, образец должен соответствовать некоторым требованиям.
Таким образом, процесс создания и проверки прототипа должен быть максимально простым и ускоренным. Ведь конечная цель состоит в создании конечного продукта, лишенного недостатков. Создание образца – лишь промежуточный этап, направляющий к достижению этой цели. Эта особенность должна быть известна сотрудникам специализированных центров прототипирования. Привлекая потенциальных клиентов, нередко ставку делают именно на скорость выполнения заказов.
К кому обращаться?
Иногда создание прототипов доверяют дизайнерам. Талантливый человек, который умеет создавать рисунки, прекрасно справится с этой задачей. Конечно, ему не обойтись без помощника. Необходим также специалист, отвечающий за техническое решение графические задачи. Крайне редко дизайнеры владеют навыками непосредственно создания модели. Обычно они лишь предлагают варианты технического решения, воплощает его кто-то другой.
Однако, как правило, 3D-прототипирование – это задача для целой команды, которая должна включать не только дизайнера и изготовителя, но и других специалистов. В частности тех, кто будет в дальнейшем тестировать образец и отвечать за конечную реализацию проекта.
Варианты прототипов
По точности образцы можно разделить на те, которые имеют низкую, среднюю или высокую точность.
Существует классификация по способу реализации.
Этапы создания
Если речь идет о трехмерном образце, то процесс его создания будет включать несколько стадий.
При выявлении недостатков в исходную модель вносятся корректировки.
В результате всех вышеописанных действий получается визуализированный трехмерный объект. Далее его можно вытачивать на фрезерном станке или распечатать на 3Д-принтере с целью получить физический объект.
После того как прототип удалось согласовать и устранить недостатки, проект запускают в серийное производство.
Технология
Трехмерная печать позволяет использовать разнообразные материалы для создания объектов. Какой из них выбрать, обычно решает специалист. Ведь любое исходное сырье обладает преимуществами и недостатками. Их нужно учитывать, чтобы на выходе получить желаемый результат.
Изготовление прототипа – это комплексный процесс, в котором, как правило, задействуется целая команда специалистов. Именно таким способом удается решить важную задачу – протестировать объект еще до реализации проекта. Таким способом выявляются и сразу устраняются недостатки. Только после этого объект запускают в серийное производство, получая на выходе качественный продукт.
Прототипирование на продакшн-технологиях
В Яндекс.Деньгах мы сделали БЭМ-платформу основным инструментом дизайнеров для построения интерфейсов, дополнив ее всем необходимым арсеналом для масштабирования.
Недостающее звено, или Предпосылки для прототипов
Обостренная необходимость в прототипах
Осмысленный и кастомизируемый UI
В Яндекс.Деньгах мы руководствуемся простой идеей, что UI должен легко и быстро генерироваться под нужную структуру по заданным параметрам, поэтому для создания масштабируемых и кастомных интерфейсов мы внедрили прототипирование в дизайн-процесс. Для прототипов мы используем БЭМ-технологии, переиспользуем разработческую библиотеку блоков и визуализируем интерфейсные решения, опираясь на конструкции паттернов, в основе которых лежат «живые стайл-гайды» (CSS стайл-гайды).
В соответствии с этим макеты нельзя воспринимать как законченное дизайн-решение. Это скорей черновые наброски: если они и делаются, то лишь для быстрого «поиска» новых визуальных решений. Их впоследствии нужно приземлять на браузерные технологии, иначе интерфейс потеряет свою ценность, как только появятся первые намеки на изменение визуала или сценариев взаимодействия.
Макет провоцирует на бомбардировку вопросами со стороны разработки и заказчиков, ведь по нему не всегда понятно, как это должно работать и как лучше реализовать. К тому же макет принято оценивать как кропотливый результат дизайнерской работы.
В то время как сверстанный прототип — это просто итерация, в результате которой мы получаем UI определенной версии на основе определенных параметров. Плюс интерфейс становится восприимчив к изменениям на лету и рассказывает про себя сам.
Тестирование на раннем этапе
Тестирование — еще одна из многих причин реализации прототипов. При разработке продукта есть острая необходимость получить интерфейс, близкий к реальному, на самых ранних этапах.
Это нужно для внутреннего тестирования: чтобы обкатать первую концепцию, допиливая ее и пробуя различные связки. И для внешнего: чтобы проверить первоначальные гипотезы на пользователях, подсовывая им разные ветки сценариев.
Посылка от разработчиков, или Что под капотом у Brickbox
БЭМ-технологии в дизайне
Нельзя сказать, что вначале мы делаем визуал, а потом дробим его на блоки и элементы в различных модификациях. На деле мы не подстраиваемся искусственно под БЭМ. Это скорей естественная, фундаментальная часть нашего дизайн-процесса.
Мы по умолчанию думаем в этих терминах, описываем смысловую структуру блока, затем преобразуем (стилизуем) ee в наглядный вид. Поэтому при прототипировании используется практически тот же стек технологий, что и при разработке. В нем мы чувствуем себя естественно и органично.
Внешние библиотеки и уровни дизайна
Все собрано в один stub Brickbox, который может развернуть у себя любой участник команды (не обязательно дизайнер) и начать прототипировать. Это позволяет описывать структуру страниц в терминах компонентов (BEMJSON) и смотреть результат в браузере. Вся магия по сборке происходит «под капотом».
В Brickbox подтягиваются все необходимые библиотеки:
От прототипов к дизайн-системе
Зачистка
Несмотря на то, что дизайн-система должна быть не сводом правил, а естественным подспорьем при прототипировании, без наведения первоначального порядка не обошлось. Нужно было исключить инстинктивные решения, которые делали всю систему уязвимой.
Для того чтобы не расползтись стилистически при синхронной работе, мы отстрелили вкусовщину и причесали базовые значения, на которых будет основываться UI.
Мы отобрали минимальный набор необходимых параметров, но при этом не скатились в примитив. Сконцентрировались на возможных состояниях и на правилах соотношения блоков между собой и убрали инстинктивные значения, которые были сделаны на глаз. Затем зафиксированный результат перевели в код.
Визуальный язык в коде
Вычисление цвета
Для того чтобы цвета разных интерфейсных сущностей (блоков, компонентов, типографики) не существовали в вакууме, их значения наследуются от базовых цветов.
Вычисление цвета.
Дальнейшие манипуляции с цветами проводятся через Hue/Saturation/Lightness. Оттенки серого задаются с прозрачностью от чёрного (это дает больше гибкости при изменении заднего фона блоков).
Названия цветовых переменных не приклеиваются к конкретным значениям, а учитывают интерфейсные состояния блоков и типографики. В переменные вынесены все возможные состояния, этого хватает для того, чтобы покрыть основные интерфейсные потребности.
Цветовые переменные сделаны по следующему принципу:
На практике в стилях любого блока ни один цвет не пишется руками, используются только переменные. Это делает блок по умолчанию кастомным и готовым к изменениям.
Структура сложных компонентов
Отступы используются не только для визуального ритма, а в большей степени для обозначения уровней вложенности и разделения смысловых блоков и элементов. Также система отступов подчеркивает информационную иерархию.
Система отступов.
Типографика, или Как покрыть значительную часть визуала
Текст — фундамент практически любой визуальной сущности. Поэтому для ускорения прототипирования и более легкой манипуляции внешним видом блоков любой текст в интерфейсе выводится в блоке text. Мы вынесли блок text с модификаторами для цвета, размера, регистра, жирности, межбуквенного интервала. Их можно использовать в различных комбинациях. В итоге мы получаем все необходимые вариации текста при помощи небольшого количества комбинаций.
Типографика.
В интерфейсе встречается типографика двух типов:
В первом случае мы ко всем текстовым элементам примиксовываем блок text (добавляется класс текстового блока) с нужными модификаторами.
Во втором — к текстовым блокам добавляем еще один модификатор —type. (с учетом семантики), для которого прописаны относительные отступы (они высчитываются с учетом заложенных типографических правил для удобного восприятия текста).
Графика
Вся интерфейсная графика разделяется на три типа:
Библиотека логотипов.
Для использования в интерфейсе любой графической сущности достаточно указать название блока и необходимые модификации.
Вынесение графики в БЭМ-блоки и использование их в интерфейсе позволяет безболезненно и легко экспериментировать с различными библиотеками, просто заменяя SVG-файлы, и мгновенно наблюдать их новое отображение в интерфейсных сущностях.
Паттерны
Вырезаем дублирование стилей
После того как разобрались с базовым параметрами интерфейсных сущностей (цветами отступами, текстом и графикой), самое время задуматься о принципах визуализации — о том, как превратить структуру блока в осмысленную форму. Компонентность, конечно же, дело привычное, но описывать стили каждого нового блока, игнорируя закономерности, становится трудозатратно, а полная изоляция хороша ровно до того момента, пока не началась кастомизация.
Для решения этой задачи у нас появляется фундаментальный уровень — паттерн.
Качественный UI по умолчанию, или Как не думать о стилях
Паттерн — это конструкция с возможными модификациями, которая примиксовывается к блоку и его элементам и определяет его визуальную структуру. Использование паттернов позволяет ускорить (и даже автоматизировать) процесс визуализации. Паттерны с каждым новым прототипом обрастают правилами, по которым генерируются схожие сущности.
Пример блоков на основе паттернов.
70% из коробки, или Как наследовать внешний вид
Все бесконечное многообразие окружающих нас интерфейсных множеств сводится к числу понятных/базовых/фундаментальных конструкций, на основе которых можно получить практически любой визуал (приемлемый для веба).
Сейчас библиотека состоит из восьми основных паттернов:
Этот список расширяется.
Декоратор
Локальная инъекция, или Как победить избыток классов
При прототипировании не всегда нужно строить фабрику блоков, иногда достаточно просто примерить визуал на структуру.
Декоратор выполняет роль контролируемых (ограниченных) инлайн-стилей, относительно которых еще нет понимания по классификации.
Он не несет логического смысла. Это больше косметика, которая нужна для визуальной «подпорки». Декоратор помогает понять, какие локальные стили чаще всего используются, и в каких конструкциях. Вдобавок декораторы являются индикаторами для переноса свойств в модификаторы паттернов.
Сборка интерфейса
UI как комбинация параметров, или Закономерность наслаивания смысла
Блок в дизайнерском понимании — это составная сущность, которая может содержать в себе блоки из других библиотек, основываться на каких-либо формах и иметь собственные уникальные стили.
Глобально у блока есть содержимое и представление.
Интерфейсные слои.
Содержимое:
Представление:
Всё базируется на переменных. У переменных могут быть разные значения, которые в совокупности дают новую тему. Процесс визуализации проходит следующим образом:
1 шаг: в BEMJSON описывается основная структура блока;
2 шаг: контролы берутся из внутренней библиотеки компонентов Lego;
3 шаг: любая графика, кроме контентной, берётся из дизайнерской библиотеки;
4 шаг: к узлам блока миксуется паттерн;
5 шаг: дописываются уникальные стили.
Если уникальные стили начинают повторятся, они выносятся на уровень паттернов. Через несколько итераций паттерн начинает покрывать большинство визуальных потребностей, а в стилях самого блока (на уровне CSS) описываются только косметические особенности.
Процесс визуализации блока.
«Околодизайна», или Бытовуха вокруг нового процесса
Вход в дизайн-систему
Адаптация новых участников и Что делать с неизбежно растущим порогом входа
Без малейшего преувеличения, технологии сильно помогают поднять дизайн-процесс на новый уровень, при условии, что они естественны для дизайнера и не блокируют выполнение задач.
Поэтому новый участник может оперировать высокоуровневыми понятиями или конструкциями для визуализации своего интерфейса, постепенно погружаясь в тонкости. Таким образом, решение любой визуальной задачи становится просто очередной итерацией на основе новых параметров.
Точечное внедрение
По сути нужно выделить несколько инициативных участников, которые сделают всю фундаментальную работу, затем проходить по проектам и сводить все бесконечное многообразие интерфейсных множеств к числу понятных/базовых/фундаментальных конструкций.
Дальше порционно (по мере готовности) добавлять дизайнеров для последующего масштабирования.
Внутренняя экспансия
Как перевернуть игру, или Интеграция в бизнес-процесс
Дизайн — самая несистемная часть процесса, поэтому ее хоть как-то хотят контролировать люди со стороны (менеджеры, владельцы бизнеса и другие люди, отвечающие за сроки).
Под какой бы оболочкой ни продавались дизайн-спринты, это не дизайнерский инструмент, а больше менеджерская уловка, с помощью которой есть возможность более или менее равномерно вытаскивать из дизайнеров результат (какой бы он ни был).
Пока механизмы не выстроены, вы будете играть по тем правилам, которые придумали за вас. Развлекаясь со спринтами, перекладывая листочки с одного края доски на другой и измеряя результат своей работы количеством отрисованных макетов.
Но на самом деле людей успокаивает не тотальный контроль, а системность и предсказуемость. Соответственно, при разработке продукта дизайнер может работать эффективно только после того, как сделает прозрачным процесс своей работы и, при необходимости, сможет погрузить в него любого участника команды (включая менеджеров).
Открытый доступ для всех участников проекта к дизайн-материалам, в которых показывается вся инженерная красота конструкций, включающая в себя составные части и правила, по которым визуализируется интерфейс, здорово помогает в принятии тяжелых решений на любых этапах.
В конечном счете всё направлено к банальному сокращение издержек, увеличению скорости и к стремлению сделать дизайн-процесс открытым и быстрым. Так как зачастую в тот момент, когда вы ввязались в обсуждение новой задачи с внутренним «заказчиком», как правило, вы уже отстаете от сроков. К сожалению, такова реальность, которую нужно менять. Соответственно, для балансировки процесса нет другого варианта, кроме как забирать инициативу на сторону дизайна и выдавать концепты на опережение, по возможности — частично или полностью заготавливая решения заранее.
В процессе решения всех этих вопросов у нас естественным образом появляется дизайн-среда, которая с одной стороны использует коллективный опыт, а с другой — позволяет точечно себя модифицировать под решение конкретных задач и сценариев, оставляя зазор для экспериментов.
С каждым прототипом растет число смысловых и визуальных зависимостей, что в дальнейшем позволяет реализовывать более умные и осмысленные дизайн-решения. У прототипа нет конечной точки и то, что мы видим в продакшене, это состояние, которое замораживается и отправляется в разработку.
По сути мы стремимся к максимально автоматизированной генерации интерфейса, и дизайн-система способствует этому, сильно сокращая рутину, но тем не менее мы оставляем возможность подкрутить все руками, полностью контролируя весь машинный процесс.
Дальнейший вектор
Мы поймали тот вектор, который позволяет эффективно прорабатывать визуальную часть проектов. И в дальнейшем будем бить в два направления.
Во-первых, будут вычленяться принципы и библиотеки, которые можно использовать как дизайн-фундамент для реализации различного типа проектов.
Во-вторых, будет продолжаться непрерывный процесс более плотной оптимизации дизайн-системы под конкретные проекты, с фиксированием всех особенностей и закономерностей, которые можно систематизировать и переиспользовать.
Что касается экспансии и опенсорса, то этот вектор нам интересен. А если говорить начистоту, то мы считаем, что просто эгоистично держать внутри весь опыт и нет причин не делиться лучшими практиками, помогающими системно решать дизайн-задачи любого уровня.