Как дизайнеру с помощью макетов оптимизировать процессы и сэкономить время
Привет! Я Влад — старший дизайнер в Альфа-Банке, занимаюсь фичами в «Платежах и переводах». Я неровно дышу к улучшению внутренних процессов в компании, поэтому часто выступаю с различными инициативами. Одна из таких инициатив — разработка стандарта оформления макетов для мобильного банка.
В статье расскажу о Хэлперах — стандарте и блоках для оформления сценариев, которые помогают сотне дизайнеров не путаться в своих и чужих макетах. Покажу, как они эволюционировали до текущего вида и какую ценность несут команде.
Предпосылки создания
На момент моего прихода в банк не существовало единого стандарта оформления сценариев, каждый дизайнер оформлял макеты по-своему. Это усложняло работу с чужими макетами, особенно по мере роста команды дизайнеров.
Поэтому я разработал собственную систему оформления, которая показалась мне удобной, и решил предложить её коллегам. Основные цели были такими:
Сделать макеты более предсказуемыми.
Упростить передачу макетов между дизайнерами.
Уменьшить время на чтение макетов.
Сформировать сценарный подход к проектированию.
Обеспечить удобные компоненты для повседневной работы.
Этот набор правил и блоков для оформления я назвал Хелперами, опубликовал в качестве библиотеки и начал экспансию. Использование было добровольным, но благодаря «сарафанному радио» они стали популярными, и за пару лет десятки дизайнеров начали с ними работать. Хелперы прошли три мажорные версии, а в этом году легли в основу общебанковских требований к оформлению сценариев.
Как создать свои Хелперы
Вот какие активности помогли мне разработать систему оформления макетов.
Опросы
Чтобы понять, какие возможности добавить, а какие убрать, я проводил опросы в рабочих чатах и Google-формах. Главное правило — краткость, так как никто не любит тратить время на длинные анкеты.
Анализ чужих макетов
Изучение существующих макетов помогло выявить распространённые паттерны оформления, популярные компоненты и недочёты.
Самостоятельное тестирование
Перед тем как предлагать новую систему коллегам, тестировал её на собственных задачах. Если собирать сценарий было удобно, значит, можно переходить к следующему этапу.
Тестирование на коллегах
Дизайнеры использовали Хелперы на реальных задачах, после чего давали обратную связь. Это помогло скорректировать правила и улучшить систему.
Анализ опыта других компаний
Я изучал, как оформляют макеты в других компаниях, и при возможности спрашивал коллег о принятых у них стандартах (с учётом NDA).
Как работают наши Хелперы
Хелперы прошли множество итераций и стали удобным инструментом для дизайнеров Альфа-Банка. Их устройство может не подойти всем, но идеи из этой статьи наверняка наведут вас на интересные решения.
Цвет фона рабочей области
Как показал внутренний опрос, дизайнеры работают в светлом и тёмном режимах своих инструментов примерно поровну. Любители тёмных фонов будут злить людей в светлом режиме, а светлые фоны будут ослеплять первых. Поэтому было важно подобрать такой цвет фона рабочей области, чтобы он подходил всем, независимо от режима.
Чтобы фон был комфортным для всех, я протестировал разные оттенки и пришёл к оптимальному цвету — #6B6B6F (40–50% серого). Он достаточно светлый для светлого интерфейса и достаточно тёмный для тёмного.
Данный цвет накладывается на фоновую область. Макеты при этом лежат внутри блоков-секций, цвет которых выбирается под светлый или тёмный режим. Всё, что требуется от фона рабочей области, — быть нейтральным и не отвлекать излишней контрастностью.
Цвет элементов оформления
В сценариях главное внимание должно быть направлено на экраны и переходы между ними, поэтому вспомогательные блоки оформлены в нейтральных серых тонах. Яркие цвета используются только для сигнальных элементов.
Блоки-сценарии
Сценарий разделяется на независимые блоки-секции с краткими названиями. Секции делятся на два типа:
Основной путь — ключевой сценарий с минимальным количеством ответвлений.
Вспомогательные состояния — ошибки, загрузки и альтернативные состояния экранов.
В основном пути показываются центральный сценарий и ключевые развилки — «хеппи-путь», не отвлекаясь на отображение вспомогательных состояний. Чем линейнее отображение, тем лучше.
Дополнительные состояния и ошибки выносятся в отдельные секции. Внутри основного пути можно давать сноски на эти секции.
Крупные сценарии можно разбить на логические части, чтобы всё не ютилось в одной секции. Такие части удобно выносить в отдельные блоки и соединять стрелками. Таким образом, центральный сценарий не перегружен второстепенной информацией, а всё вспомогательное аккуратно лежит рядом.
Нумерация и порядок экранов
Мы используем двухуровневую нумерацию:
Уникальные экраны нумеруются мажорно: 1.0, 2.0, 3.0.
Смена состояния экрана — минорно: 3.1, 3.2, 3.3.
Экраны располагаются слева направо, а их изменения — сверху вниз.
Если требуется больше уровней, значит, сценарий нужно декомпозировать. Сценарии-«микросхемы», где все возможные развилки и состояния плотно упакованы друг около друга, выглядят круто, но пользоваться ими не так удобно.
Нумерация нужна не всегда — иногда достаточно и просто названия для экрана. Например, нумерация не нужна, если между экранами в блоке-секции нет переходов или если это перечисление альтернативных состояний интерфейса или ошибок.
Стрелки для движения по сценарию
Стрелки соединяют экраны в сценарий, показывают направление движения и элемент, с которым нужно провзаимодействовать, чтобы пройти дальше.
Стрелка всегда выходит из места, с которым пользователю нужно провзаимодействовать. Начало стрелки размещается поверх объекта взаимодействия. Лучше не размещать начало стрелки около экрана — это может быть неверно интерпретировано, непонятно, куда именно должен нажать пользователь.
Если взаимодействия с интерфейсом нет, то стрелка выходит из центра нижней части экрана. Например, если происходит загрузка или что-то автоматическое.
Стрелка может входить в следующий экран с любой стороны. Лучше выбирать нейтральное место для входа.
Нейтральные серые стрелки используются для движения по сценарию, а зелёные и красные — для индикации, в какую ветку на развилке пошёл сценарий. Цвет поможет немного дифференцировать эти ветки.
Не стоит допускать большого количества пересечений стрелок, так как это ухудшает читабельность. Если возникло много пересечений, значит, макет превращается в «микросхему» — нужно декомпозировать.
Заголовки экранов
Каждый экран сопровождается заголовком, поясняющим, что происходит, например:
Экран оплаты.
Клиент выбрал опцию рассрочки.
Процесс оценки рисков.
В блоке-заголовке есть дополнительные полезные опции, помогающие дизайнерам, разработчикам и редакторам.
Если экран внутри сценария уже разработан, его можно пометить тегом Prod.
Есть возможность оставить дополнительный комментарий для экрана.
У нас в Альфа-Банке используется множество технологий для построения экранов, например SDUI, натив или веб-вью.
Сценарии содержат в себе экраны на разных технологиях, а иногда даже один экран может быть сделан на смеси технологий. Чтобы другим дизайнерам и разработчикам было легче разобраться, в блоке-заголовке можно добавлять теги с указанием технологии.
Ещё один тег помогает редакторам отыскать нужные экраны, им мы помечаем места, где требуется редактура. После внесения финальных текстов тег убирается.
Блоки-заголовки могут быть нескольких цветов. Статусные цвета используются, чтобы показать экраны с ошибками или с важными ситуациями. Цветные заголовки без лишней надобности не используются, лучше оставить их для отражения реального состояния сценария.
Логические развилки
Для ветвлений сценария используются блоки-развилки с вопросами вроде: «Ошибок нет, можем продолжать?». От них отходят зелёные (положительный исход) и красные (отрицательный исход) стрелки.
Если отрицательный исход ошибки только один, то можно добавить соответствующий экран сразу в сценарий. Если отрицательных исходов много — проводится красная стрелка к красному заголовку-отсылке, а сами экраны ошибок выносятся в отдельный блок-секцию рядом с основным сценарием.
Заголовок и секция называются одинаково, например, «Ошибки на этапе загрузки экрана», «Ошибки оплаты». При желании в заголовке-отсылке можно оставить прямую ссылку на соответствующий блок, так будет легче найти нужный.
Таким образом, основной путь упрощается, ветки сценариев не путаются друг с другом, места появления ошибок явно видны, а сами ошибки не замусоривают «хеппи-пасс».
Отступы и единообразие
Мы используем систему отступов с 4 или 8 в основании, поэтому для отступов между элементами оформления используются числа, которые делятся на 8, — так их легче запомнить.
Единые правила для расстояний помогают воспринимать любой макет быстрее.
Шаблоны для копирования и дополнительные блоки
Хелперы содержат настроенные блоки и шаблоны, с которых можно быстрее начинать проектирование, а в процессе копировать и вставлять нужный блок:
пустые экраны для разных платформ,
комментарии,
заготовки экранов,
заготовки блоков-секций для светлого и тёмного режима,
стрелки,
платформы,
развилки,
рулетки для измерения расстояний.
Помимо этого, у Хелперов есть подробный гайд, а также примеры оформления. Данная статья как раз является пересказом этого гайда.
Ценность хелперов
Система оформления макетов — это не просто способ сделать макеты аккуратнее, но и мощный инструмент для оптимизации процессов, экономии времени и повышения качества работы всей команды.
Предсказуемость
Единый стандарт делает макеты понятными для дизайнеров, разработчиков, редакторов и тестировщиков. Независимо от автора, структура остаётся одинаковой.
Экономия времени
Вследствие предсказуемости макетов пользоваться ими становится просто, быстрее, меньше времени уходит на изучение и привыкание к очередным правилам. Чёткие правила ускоряют работу и упрощают проверки макетов.
Системный подход
Правила естественным образом позволяют дизайнеру не забывать о корнер-кейсах типа ошибок, загрузок, логических развилок и т.п. Остальной команде единообразные макеты тоже идут на пользу — меньше фичей теряется при разработке.
Продуктовая польза
И самое главное — Хелперы помогают дизайнерам думать о сценариях, а не о разрозненных экранах, что улучшает пользовательский опыт.
Статьи, которые могут быть интересны:
Панк не сдох
Три паттерна в дизайне, которые ведут себя не так, как кажется
Найм дизайнеров глазами лида
Работа продуктовым дизайнером в бигтехе — тупик карьеры?
«Нам нужен дизайн»: как сплотить большую команду на пути к продукту
Как мы сокращали размер JSONʼа в SDUI
SDUI, или Как backend-разработчику почувствовать себя frontend«ером
BDUI — это спасение от релизов: «Какие ваши доказательства?»
Подписывайтесь на Телеграм-канал Alfa Digital — там мы постим новости, опросы, видео с митапов, краткие выжимки из статей, иногда шутим.
