Глава 4: Атомарная разработка (часть 1)
Люди, процессы и претворение системы дизайна в жизнь
← Предыдущая глава| Следующая часть →
Перед вами перевод книги Atomic Design Брэда Фроста, разработчика интерфейсов, поклонника мобильного интернета и создателя методики «Атомарный дизайн».
Если вы здесь впервые, то лучше начните сначала.
До сих пор мы довольно много говорили о теории. Как говорится, болтать — не мешки ворочать. Конечно, это были полезные разговоры, ведь мы обсуждали модульное мышление, изучали методологию создания последовательных систем дизайна UI и разбирали инструменты разработки эффективных библиотек паттернов.
Сейчас мы наконец-то займемся делом и применим теорию на практике. В этой главе мы рассмотрим вопросы, связанные с позиционированием, разработкой и поддержкой эффективных систем дизайна. Готовы? Поехали.
Люди
Есть небольшой секрет создании эффективных систем дизайна (или выполнения любой другой важной работы): все сводится к тому, что людям необходимо взаимодействовать и общаться друг с другом.
Казалось бы, это очевидно. Почему же тогда мы не слышим тысячи историй успеха со всего мира? Позволим Марку Боултону объяснить это:
Разработка дизайна — странный и сложный процесс, потому что сами люди странные и сложные. ~ Марк Боултон
У вас могут быть лучшие технологии, новейшие инструменты и необычайно талантливая команда, но если все ее члены не взаимодействуют и не общаются друг с другом, успеха не ждите. Вот так. Это не значит, что вы в принципе не можете создать хорошую работу, но скорее всего у вас получится одна из вариаций на тему разочарования и посредственности.
Создание и поддержка успешной системы дизайна интерфейсов требует коллективных усилий. В этой главе мы поговорим о том, как преодолеть сложности, связанные с людьми.
Когда создавать систему дизайна
Итак, когда же лучше всего приступать к разработке системы дизайна? Правильный ответ: сейчас.
Системы дизайна и сопутствующие им библиотеки паттернов часто разрабатываются при запуске нового проекта, редизайне, переходе на новую платформу и другим событиям в том же духе. Зацепиться за хвост другого проекта — отличный способ начать использовать библиотеку паттернов в вашей компании.
Однако, создание системы дизайна и библиотеки паттернов необязательно должно совпадать с разработкой других проектов. Если вы сможете убедить клиентов и заинтересованные стороны выделить ресурсы на проект по созданию системы дизайна, это идеальный вариант!
Как именно преподнести систему дизайна клиентам, руководителям и коллегам? Наденьте свою лучший деловой костюм, ведь в следующем разделе мы будем «продавать» ее заинтересованным сторонам!
Как преподносить идею
Начать вести дела по-новому — непростая задача, которая требует изменения существующих подходов и моделей поведения. Привлечение заинтересованных сторон к созданию системы дизайна предполагает постоянное образование и использование некоторых маркетинговых фишек.
Первым делом нужно донести саму концепцию системы дизайна интерфейсов клиентам, коллегам и всем заинтересованным. Необходимо объяснить, что из себя представляет такая система и чем она будет полезна. Об ее преимуществах мы говорили ранее, так что вы сможете аргументированно доказать, что система дизайна способствует согласованности и последовательности, увеличивает производительность команды, улучшает взаимопонимание, дает единый лексикон, снабжает полезной документацией, облегчают тестирование и служит отличным фундаментом для будущих свершений. Кто сможет устоять перед этим?!
Увы, руководство компаний не всегда смотрит на вещи под тем же углом, что и вы. Иногда вместо того, чтобы до посинения расхваливать системы дизайна, достаточно всего лишь переформулировать вопрос и спросить: «Вы хотите сэкономить время и деньги? Да или нет?» Если вы ответ вы услышите «нет», боюсь, у вас есть более серьезные проблемы, нежели отстаивание необходимости использовать систему дизайна. А если «да», то можно преподнести ее преимущества через призму времени и денег. Стоит попробовать, не так ли?
- Использование системы дизайна ведет к согласованности и последовательности пользовательского опыта. Это значит, что пользователи быстрее осваивают ваш UI, у вас выше конверсия, больше прибыли и лучше показатели метрик.
- Система дизайна увеличивает производительность команды. Вместо того, чтобы заново изобретать колесо каждый раз при новой задаче, вы можете повторно использовать уже созданные элементы интерфейса. Так вы сможете выкатывать новые страницы и фичи быстрее, чем когда-либо прежде.
- Централизация компонентов UI в библиотеке паттернов обеспечивает единое информационное пространство и улучшает совместную работу специалистов разных направлений. Когда все говорят на одном языке, вы тратите больше времени не непосредственно работу, и меньше на излишние обсуждения и встречи.
- Система дизайна упрощает тестирование производительности и доступности, а также кросс-браузерное и мультидивайсное тестирование. Это значительно ускоряет разработку и позволяет командам быстрее запускать качественные проекты. Кроме того, интеграция доступности и подобных аспектов непосредственно в систему дизайна распространяет лучшие практики и на другие ваши проекты. Так интерфейсы привлекают больше пользователей, а риск получить иск снижается!
- Как только система дизайна (с сопутствующей библиотекой паттернов) будет создана, она послужит фундаментом для будущих изменений, настроек, расширения и улучшений. Провели А/Б тесты? Внедрите результаты в систему дизайна. Оптимизировали производительность? Внесите улучшения в систему дизайна! «Живая» система дизайна умеет адаптироваться к будущим потребностям компании, таким образом экономя время и деньги.
Аргументация через призму времени и денег помогает людям, ответственным за бюджет, понять, почему они должны потратиться на разработку системы дизайна. Если повезет, от обсуждений вы перейдете к конкретному плану (читайте «получите ресурсы») по созданию системы дизайна.
Показывайте, не рассказывайте; или чем полезна коллекция элементов интерфейса
Ах, если бы для того, чтобы заручиться поддержкой нужных людей, было достаточно нескольких разговоров. Возможно, вы из тех гениев, кому для получения контракта достаточно личного обаяния, но нам, простым смертным, одних обсуждений недостаточно. Иногда приходится идти дальше и заставлять их испытать боль.
Давайте поговорим о коллекциях элементов интерфейсов.
Возможно, вы уже знакомы с этой концепцией. На ранних этапах редизайна веб-сайта обычно проводится аудит существующего контента. Это монотонная задача, для которой нужны таблицы Excel и литры кофе. Но эта работа оправдана. Когда обширная сводка наглядно разложена на столе, это дает команде ценную информацию о том, как подходить к контенту при разработке проекта.
Коллекция элементов интерфейса похожа на инвентарь контента. Только вместо того, чтобы перелопачивать и классифицировать контент, вы оцениваете и классифицируете компоненты, составляющие ваш интерфейс. Коллекция элементов интерфейса — это полный набор компонентов и частей, из которых складывается ваш UI.
# Проведение аудита интерфейса
Как провести аудит интерфейса? Как классифицировать все его компоненты? Самый простой способ — делать скриншоты. Много скриншотов! Для создания коллекции элементов интерфейса нужно сделать целое море скриншотов и классифицировать все уникальные компоненты UI. Это относительно простая работа, однако, следует учесть некоторые важные моменты, чтобы ваша коллекция принесла максимум пользы.
Давайте рассмотрим процесс создания качественного интерфейса.
Шаг 1: всеобщая мобилизация
Я встречал многих амбициозных дизайнеров и разработчиков, которые пытались в одиночку задокументировать паттерны интерфейсов, использовавшихся в их компаниях. Я безусловно поддерживаю это начинание, однако, совершенно необходимо, чтобы абсолютно все члены команды испытали боль от непоследовательности существующего UI. Лишь тогда они начнут думать систематически.
Чтобы коллекция элементов интерфейса принесла как можно больше пользы, в ее создании должны участвовать все специалисты, отвечающие за успех сайта. Соберите всех: UX-дизайнеров, графических дизайнеров, фронтенд-разработчиков, бэкенд-разработчиков, копирайтеров, ответственных за контент-план, руководителей проектов, владельцев бизнеса, тестировщиков — всех, кто хоть как-то заинтересован. Чем больше людей, тем лучше! В конце концов, вы будете вырабатывать единый лексикон для всех в в компании. И для этого требуется вся команда.
# Шаг 2: готовимся работать со скриншотами
При создании коллекции элементов интерфейса генерируется тонна скриншотов, поэтому для удобства вам понадобится специальная программа. Возможно, что-то из этого списка будет вам полезным:
- PowerPoint или Keynote
- Photoshop или Sketch
- Evernote Web Clipper
- Google Docs или Microsoft Word
- Google Slides (для примера я создал шаблон коллекции элементов интерфейса Google Slides)
Какой именно инструмент вы будете использовать — неважно. Однако, все члены команды должны пользоваться одной и той же программой, тогда вам будет проще сделать общую подборку из всех скриншотов. Лично мне нравится Google Slides: эта программа позволяет произвольно размещать изображения, разбивать их на слайды для упрощения классификации. К тому же, это веб-сервис, что очень удобно для совместной работы.
# Шаг 3: делаем скриншоты
Приготовьтесь жать prtscrn, потому что настало время для главного шага. Аудит интерфейса заключается в систематизации всех уникальных паттернов UI, из которых складывается пользовательский опыт. А без скриншотов тут никуда. Обратите внимание, что вам не нужно делать скриншот каждого примера использования какого-либо паттерна. Ваша задача — задокументировать по одному примеру каждого уникального паттерна.
Поделите между участниками аудита категории элементов интерфейса. В зависимости от количества участников их можно разбить на пары или, напротив, выдать по несколько категорий на каждого. Повторюсь: чем больше людей принимает участие в аудите, тем более полный результат вы получите.
Какие паттерны скриншотить?
Какие категории элементов интерфейса необходимо задокументировать? Вообще, их набор будет варьироваться в зависимости от проекта, но вот список категорий для ориентира:
- Главные элементы: заголовки, футеры и другие элементы, которые используются на всех страницах или экранах.
- Навигация: основная навигация, навигация в «подвале» (футере) сайта, постраничная навигация, «хлебные крошки», интерактивные кнопки и все, что используется для перемещения по экранам и страницам.
- Разные виды изображений: логотипы, баннеры, аватары, миниатюры, фоны и прочие графические паттерны, которые задействованы в интерфейсе.
- Иконки: их имеет смысл вынести в отдельную категорию. Сделайте скриншоты лупы, иконок соцсетей, стрелок, иконок-гамбургеров, загрузочного спиннера, пиктограмм и всех прочих значков.
- Формы: поля ввода, текстовые области, выпадающие меню, чекбоксы, переключатели, радиокнопки (radio buttons), слайдеры и другие формы для взаимодействия с пользователем.
- Заголовки: h1, h2, h3, h4, h5, h6 и все вариации типографических заголовков.
- Блоки: их цель — призыв к действию. Примеры блоков: врезки, резюме, объявления, баннеры или тизеры. Каждый блок — это комбинация заголовка и/или изображения и/или текста (см. пост Николь Салливан о медиа-объектах в качестве примера блока).
- Списки: ненумерованные, нумерованные, маркированные — любая группа элементов, представленных в форме списка.
- Интерактивные компоненты: меню-«аккордеоны», вкладки, карусели и другие функциональные модули с динамическими элементами.
- Медиа: аудио-, видеоплееры и другие мультимедийные элементы.
- Внешние компоненты: виджеты, теги iframe, биржевые тикеры, социальные кнопки, скрытые скрипты отслеживания и все компоненты, расположенные на сторонних доменах.
- Реклама: любых форматов и размеров.
- Оповещения: предупреждения, сообщения об успешных операциях, ошибки, предупреждения, подтверждения, загрузка, поп-апы, всплывающие подсказки и так далее. Возможно, сделать скриншоты для этой категории будет непросто, так как пользователю, как правило, требуется выполнить какое-либо действие, чтобы получить оповещение.
- Цвета: сделайте скриншоты всех уникальных цветовых схем, которые используются в интерфейсе. В работе с этой категорией вам могут помочь автоматические инструменты для работы со стилем CSS Stats и Stylify Me.
- Анимация: анимация — это базовый компонент интерфейса, поэтому ее следует задокументировать. Используйте программы для записи экрана, например, QuickTime. С их помощью запишите все элементы интерфейса, которые движутся, исчезают, встряхиваются, трансформируются или перемещаются по экрану.
Повторюсь, вам не обязательно использовать все эти категории. Они будут зависеть от конкретного типа интерфейса, с которым вы имеете дело. Набор категорий важно корректировать, чтобы он наилучшим образом соответствовал потребностям вашего проекта.
Установите временные рамки
Важно ограничить время на сбор скриншотов, чтобы весь оставшийся день не провести в полете вниз по кроличьей норе. В зависимости от количества людей, помогающих вам, количество времени может отличаться. На мой взгляд, от 30 до 90 минут для начала вполне достаточно. Установите таймер, включите бодрую музыку и сконцентрируйтесь на сборе скриншотов уникальных паттернов UI.
Копайте глубже
Какие элементы сайта нужно собирать в коллекцию элементов интерфейса? Если вкратце: все. Каждый компонент UI, с которым вы или уже работаете, или теоретически может возникнуть такая необходимость, — должен быть задокументирован.
Это сложно. Обычно мы склонны считать одни компоненты важнее, чем другие. Например, главную страницу. Другой пример: часто разработчики интернет-магазинов фокусируются на покупках, хотя поддержка клиентов, FAQ, таблицы с размерами, страница 404 и пользовательское соглашение — также чрезвычайно важны для пользовательского опыта. Помните: пользователи воспринимают ваш бренд как единое целое, и им безразличны ваша организационная структура, стек технологий и все прочее, что может вызвать проблемы с интерфейсом. Так что побуждайте участников аудита интерфейса выполнять свою работу как можно более тщательно.
# Шаг 4: обрабатываем находки
Сбор скриншотов может быть несколько утомительным, поэтому устройте команде небольшой перерыв, когда закончите. Слопайте что-нибудь вкусное, выпейте кофе и разомните ноги. Когда все отдохнут, обсудите собранный материал.
Пусть каждый участник проведет пяти- или десятиминутную презентацию своей категории интерфейса для остальных. Это самая интересная часть. Благодаря презентациям вы сможете обсудить решения, лежащие в основе существующих паттернов UI, начнете договариваться о названиях элементов и мотивируете команду на создание более согласованного интерфейса.
Давать названия сложно. Удивительно, насколько разнообразные названия дизайнеры, разработчики, руководители и другие заинтересованные лица могут дать одному и тому же шаблону UI. «Мы называем это служебной панелью», «Нет, это навигация админки». «А мы называем это плавающей областью!» Такое упражнение — возможность обнаружить и устранить несоответствия между существующими названиями и присвоить имена безымянным паттернам. Не думайте, будто должны договориться обо всем за десять минут. Задача этого упражнения — дать толчок дальнейшим обсуждениям.
Как только вы обсудите все категории, попросите участников отправить свои слайды руководителю проекта. Он объединит все в один гигантский убер-документ, который вскоре станет главным источником истины и справедливости при работе над вашим проектом.
# Шаг 5: покажите собранный материал и запланируйте дальнейшие шаги
Теперь, когда в нашем распоряжении есть весь материал, пора привлечь всю компанию к разработке системы дизайна интерфейсов.
Вы когда-нибудь хотели увидеть, как ваш директор рыдает? Наглядная демонстрация нестыковок вашего UI — отличный способ этого добиться! Одно из главных преимуществ проведения аудита интерфейса — это то, что вы можете продемонстрировать его результаты всем, не только дизайнерам и разработчикам. И они своими глазами увидят, что непоследовательность в интерфейсе — это проблема. Не нужно быть дизайнером, чтобы признать: 37 уникальных стилей оформления кнопок — неудачная идея. Это ваш шанс донести до всех, что систематичный подход к интерфейсу важен и для ваших пользователей, так и для вашей компании.
И кстати, смысл этого шага — не только «продать» идею лицам, принимающим решение. Результаты проделанной работы и обсуждений, которые шли в ходе первичного аудита интерфейса, должны быть непременно отражены в вашей будущей системе дизайна и библиотеке паттернов.
Возможно, в ходе первичного аудита вы могли упустить какой-нибудь уникальный паттерн UI, и поэтому может потребоваться провести еще один этап аудита. Не обязательно снова привлекать много людей. Достаточно, чтобы маленькая команда специалистов из разных областей перепроверила итоговый документ и запланировала следующие шаги для разработки системы дизайна.
Как только вы устраните пробелы в коллекции элементов интерфейса, следует обсудить дальнейшие шаги. Вот несколько ключевых вопросов для обсуждения:
- Какие паттерны оставить, какие удалить, а какие объединить?
- Какие названия вы в итоге выберете?
- Какой будет дальнейший шаг для того, чтобы превратить коллекцию элементов интерфейса в полноценную библиотеку паттернов?
Над переводом работают Ольга Кокоулина и Ринат Шайхутдинов.
Если вам понравился перевод, дайте нам знать — нажмите кнопку Recommend.
Видеокурсы и практика по дизайну интерактивных систем: ux/ui, веб-дизайн и бренд-дизайн
Вас ждет плотная проектная практика по анимации интерфейсов, дизайну сайтов, а также мобильных и веб-приложений. Под руководством наставников в стиле «смотри и повторяй»!
Breezzly — это среда для тренировки digital-навыков. Здесь вы встретите комплекты видеокурсов в актуальных инструментах интерактивного дизайна, среди них Figma, Principle и Invision Studio. А каждый проект — это живой кейс с историей, собранной по горячим следам!
