Глава 4: Атомарная разработка (часть 3)
← Предыдущая часть | Следующая часть →
Перед вами перевод книги Atomic Design Брэда Фроста, разработчика интерфейсов, поклонника мобильного интернета и создателя методики «Атомарный дизайн».
Если вы здесь впервые, то лучше начните сначала.
Задаем общее направление работы
Часто разработчики прыгают с места в карьер и сходу начинают детализировать дизайн. Да и заказчикам нравится возможность поскорее оценить результаты кропотливого труда. Однако, результат такого подхода — рассеивание внимания, различные заблуждениям и описанные в предыдущей части ошибочные ожидания. Крайне важно предварительно согласовать общее направление дизайна и нарисовать приблизительные эскизы, и только потом приступать к детализации и дальнейшей разработке. Это требует сдержанности и работы с ожиданиями, но в итоге ведет к более осознанному принятию решений и более реалистичному результату.
Что из себя представляют недетализированные эскизы? Давайте рассмотрим некоторые методы, с помощью которых UX-дизайнеры, графические дизайнеры и фронтенд-разработчики задают общее направление работы при создании систем дизайна интерфейсов.
# Определяемся с паттернами для контента и изображений
Есть масса стратегических и исследовательских задач, которые можно и нужно решить до начала проекта. UX-дизайнеры (их еще называют дизайнерами информации, информационными архитекторами, дизайнерами взаимодействия и т. д.) отвечают за синтез всей жизненно важной для продукта информации и ее передачу через пользовательский интерфейс. Интерфейс должен соответствовать целям проекта и пользователя.
Многие UX-дизайнеры, которые придерживаются традиционной каскадной методологии, решают эту задачу путем создания детализированных вайрфреймов, которые иллюстрируют каждый экран интерфейса. Эти вайрфреймы состоят из черных прямоугольников с пояснениями о функционале элементов интерфейса. Такие документы используются, чтобы получить зеленый свет от заказчиков. И хотя они полны деталей, их содержание далеко от реальной общей картины. При этом часто на их основании делаются ложные предположения о визуальной компоновке и будущей технической функциональности интерфейса.
Вместо того, чтобы сразу создавать такие супер-проработанные документы, лучше начать с менее детальных эскизов. Они помогут вам продумать, что и в каком порядке будет появляться на каждом экране. Базовую информационную архитектуры UX можно заложить с помощью обычного маркированного списка и пары обсуждений. В проекте для Greater Pittsburgh Community Food Bank я начал с того, что спроектировал основную информационную архитектуру для одной страницы сайта.
Естественно, никто в здравом уме не считает, что этот эскиз из заглушек в серых тонах — финальная версия. При этом в нем содержится вся нужная информация для дальнейших обсуждений структуры страницы и иерархии.
Когда вы создаете слабо детализированные, ориентированные на мобильные устройства вайрфреймы, вы работаете в ограниченных рамках небольших экранов, и таким образом команда вынуждена сосредоточиться на ключевых элементах и их иерархии. Спрашивайте себя: «Этот экран содержит все необходимые элементы?» «Они представлены в правильном порядке?»
Такие блочные серые эскизы помогают задать необходимые паттерны отображения контента на каждом конкретном экране. Однако, UX-дизайнеры могут разработать и паттерны для дальнейшего повсеместного использования на всех страницах. При редизайне сайта TechCrunch дизайнер Дженнифер Брук создала несколько паттернов интерфейса, которые можно было использовать где угодно на сайте:
Компонент «Featured Island» из примера выше предназначен для отображения контента. Обратите внимание: этот эскиз весьма общий и не дает какой-либо конкретной информации о будущем дизайне или функциональности. Детали того, как этот паттерн будет выглядеть и работать, появятся позднее. В начале же проекта полезно просто обозначить его существование и определить, где его можно применять.
По своему опыту скажу, что контент и паттерны для его отображения можно эффективно зафиксировать в еще более простом формате — таблице Excel.
В нескольких столбцах таблицы можно зафиксировать, какие варианты отображения контента войдут в определенный паттерн, и какой именно контент они будут содержать. Что еще более важно, мы можем определить относительную иерархию каждого паттерна и его роль. А если вертикально читать левый столбец, то перед нами возникает возможная мобильная версия интерфейса.
«Какие паттерны для контента и его отображения используются на этой странице? В каком порядке?» — это ключевые вопросы, которые нужно задать. А с помощью предложенных методов вы сможете продуктивно обсуждать дизайн, не расходуя время на проработку макетов и не делая предположений о технических функциях.
# Определяемся с визуальным направлением
Задача графического дизайнера — создать визуальные образы и воплотить их в интерфейсе так, чтобы он соответствовал целям проекта. Для этого важно понять, в чем заключаются эстетические предпочтения заказчиков.
Исторически сложилось, что дизайнеры начинают работу по определению эстетических предпочтений заказчиков с создания полноценной композиции, а иногда многих вариантов композиций. Они развешивают макеты по всей стене и прикидывают, что «зайдет». Очевидно, разработка множества детальных макетов с нуля требует много времени и усилий, и, к сожалению, большая часть этой работы окажется в мусорном ведре. Должны существовать более эффективные способы!
И, действительно, такие способы есть. Давайте остановимся на них подробнее.
20-секундный тест
20-секундный тест — замечательный способ для быстрого выявления эстетических предпочтений. Обычно его проводят на одном из первых собраний по проекту. Тест заключается в демонстрации заказчикам нескольких вариантов страниц близкой тематики (всего 20–30 штук), по двадцать секунд на каждую. В подборку сайтов для теста должны входить отраслевые сайты и визуально-интересные примеры сайтов из других отраслей. Для большей наглядности вместо фактических логотипов сайтов можно «прифотошопить» логотип заказчика.
Каждой представленной странице представители со стороны заказчика выставляют баллы от 1 до 10. Оценка 1 значит: «Если у нас будет такой сайт, я уволюсь и буду рыдать всю ночь в подушку», а 10: «Будь это нашим сайтом, я бы визжал от восторга».
Спросите участников, какие визуальные характеристики кажутся им интересными: может быть выбор шрифтов или цвет? А может яркость, компоновка, стиль иллюстраций или общее настроение?
Когда вы закончите, быстро подсчитайте баллы и обсудите полученные результаты. Поговорите о пяти сайтах, которые получили наименьшее число баллов, о пяти сайтах с наивысшими баллами и о тех, что получили неоднозначную оценку (некоторые оценивали эти сайты очень высоко, а другие очень низко). Пусть участники объяснят, почему их привлекают или отталкивают те или иные сайты, и подумайте вместе о причинах расхождений во мнениях.
Проведение такого теста на раннем этапе работы продемонстрирует заказчикам разнообразие визуальных направлений, позволит им преодолеть вкусовые разногласия и (если повезет) поможет достичь единства в пожеланиях к визуальной составляющей. На основе полученной информации дизайнер начнет воплощать идеи в графике для проекта.
Плитки стиля (style tiles)
И вновь первый порыв дизайнеров — поскорее приступить к созданию детальных макетов, чтобы выразить визуальное направление проекта. Безусловно, эта кропотливая работа поможет пониманию, но при этом вы рискуете потратить уйму времени и усилий, если макет не понравится заказчику.
Кроме того, следствие создания высоко-детализированных макетов — неверные предположения о технической функциональности. Это приводит к нереалистичным ожиданиям у заказчиков и конфликтам с фронтенд-разработчиками.
Крайне важно заложить однозначное визуальное направление для проекта. Как сделать это и не потратить уйму времени на создание высоко-детализированных композиций? На этот вопрос ответила дизайнер Саманта Уоррен, когда создала плитки стиля (style tiles). Плитки стиля дают нам куда больше информации по сравнению с доской настроения (mood board), но при этом в отличии от полностью проработанных макетов не нуждаются высокой детализации .
Плитки стиля (и прототипы стиля, их браузерные аналоги) позволяют дизайнерам подобрать цвета, типографику, текстуры, иконки и другие элементы дизайна без подталкивания к неверным предположениям о макете и излишней полировки деталей. Плитки стиля можно очень быстро собрать, ведь от них не требуется быть супер-реалистичными. Это значит, вы получите обратную связь раньше.
Плитки стиля помогают выяснить, что заказчику важно, а что нет. «Почему вы предпочли этот элемент, а не тот?», «Почему вам не подходит эта цветовая схема?», «Почему вам нравится именно этот шрифт?». Все это вы сможете обсудить без необходимости создавать полноценные макеты страниц.
Что также важно: плитки стиля укрепляют атомарное мышление и обучают заказчиков мыслить категориями систем, а не страниц. С помощью наглядной демонстрации образцов цветовых схем, шрифтов и текстур вы знакомите заказчика с базовыми ингредиентами, из которых сможете приготовить что угодно.
Коллажи из элементов
Плитки стиля отлично подходят для передачи настроения дизайна, но все же они несколько абстрактны. Чтобы понять, как подборка дизайнерских компонентов будет работать в живом интерфейсе, важно быстро перейти к чему-то более предметному. Означает ли это, что дизайнеры, поработав с плитками стиля, должны перескакивать к созданию полноценных детализированных макетов? Отнюдь.
Между этапами по созданию плиток стиля и детализированных макетов есть этап создания коллажа элементов — коллекции вариантов применения компонентов UI. Такие коллажи дают дизайнерам возможность поработать в «песочнице» и узнать, как их задумки будут смотреться «на живом», но при этом не заморачиваться излишней полировкой.
Как и плитки стиля, коллажи элементов нужны для обсуждений визуального направления проекта. Очевидно, что такие коллажи не являются итоговым дизайном сайта, но при этом заказчик может понять, как он будет выглядеть. Обсуждения коллажей могут натолкнуть дизайнеров на идеи относительно того, в каком направлении развивать дизайн дальше, а их низкая детализация поможет быстрее совершать итерации и развивать идеи.
Несомненно, существуют и другие способы задать визуальное направление вашим проектам, и то, какие методы вы решите использовать, будет меняться от проекта к проекту. Смысл в том, чтобы обрисовать общие очертания, прежде чем потратить много времени и усилий на проработку деталей.
К тому же совместная работа с заказчиками на этом этапе приносит лучшие плоды, чем когда они просто утверждают или не утверждают результат.
# Фронтенд-разработчик в роли помощника шеф-повара
Как я говорил ранее, фронтенд-разработчикам часто отводится роль послушных исполнителей, которые вступают в дело после принятия всех решений касательно дизайна. Такой архаичный подход мешает членам команды синхронизироваться друг с другом и продуктивно сотрудничать. Это огромная ошибка.
Чтобы начать подходить к фронтенд-разработке как важному этапу проектирования, потребуются изменения в структуре проекта и в убеждениях самих членов команды.
В ресторанном бизнесе важным, но невоспетым героем является кухонный работник. Он крошит овощи, маринует мясо и делает заготовки салатов на следующий день. Благодаря предварительно подготовленным ингредиентам, повара могут сосредоточиться на приготовлении пищи, а не на грязной работе. Без него рабочий процесс ведущих поваров нарушится и работа на кухне встанет.
Фронтенд-разработчики выполняют сходную задачу только не на кухне, а в сфере веб-дизайна. Если разработчики не пишут код с самого первого дня работы над проектом, что-то идет не так. «Но Брэд», — слышу я вопрос. — «Как мне начать писать код, если я не знаю, что от меня требуется?»
Уж поверьте, даже если вы совсем ничего не знаете о структуре или дизайне будущего продукта, для вас все равно найдется работа. Помимо настройки среды разработки (создания репозиториев Git, настройки серверов, CMS и инструментов разработки), разработчики могут погрузиться в код, начав с разметки паттернов. Как это возможно, если вы ничего не знаете о будущем дизайне? Зависит от типа проекта, над которым вы работаете.
Вы делаете интернет-магазин? Тогда можно настроить поиск по сайту, корзину, карточки с подробным описанием товаров, создать стартовую страницу и страницу покупки.
Создаете онлайн-сервис? Начните с форм регистрации и авторизации, страницы для забывших пароль пользователей и дэшборда.
И, конечно же, на большинстве веб-сайтов присутствуют хедер, футер и область для основного контента. Настройте шаблоны оболочки и напишите базовый код для паттернов, которые вы предполагаете использовать. На первых порах этот код будет сырым, но он станет важной отправной точкой для дальнейшей работы и итераций.
Благодаря подготовительной работе фронтенд-разработчик сможет продуктивно сотрудничать с дизайнерами, а не приступать к работе только тогда, когда дизайн уже готов и согласован. Имея заготовки, разработчики могут помочь дизайнерам принять верные решения по UX при обсуждениях и просмотре рабочих прототипов. Они могут помочь дизайнерам лучше понять принцип работы платформы и веб-макетов, могут быстро создать первичную базу кода, которая впоследствии превратится в конечный продукт.
Давайте вкратце резюмируем, в каких направлениях ведется проектирование дизайна:
- UX-дизайнеры создают недетализированные эскизы, чтобы задать базовую информационную архитектуру и основные паттерны UI.
- Графические дизайнеры определяют визуальное направление, проводя 20-секундный тест, затем создают плитки стиля и коллажи элементов для того, чтобы удостовериться, что выбрано верное направление.
- Фронтенд-разработчики устанавливают проектные зависимости, прописывают основные шаблоны и делают структурную разметку для паттернов, которые предполагается использовать в проекте.
Работа по этим направлениям может происходить параллельно, но никогда — изолированно. Разумеется, на каждое направление нужно выделить какое-то первоначальное установочное время. При этом все члены команды должны знать, что происходит у коллег, и ожидать начала совместной работы над дальнейшим развитием идей.
Идеи должны быть неказистыми. ~Джейсон Санта Мария
На этом раннем этапе важно подчеркнуть важность исследований, мозгового штурма и генерации идей. Незацикленность на деталях, о которой мы говорили ранее, поможет членам команды развивать интересные им идеи. Иногда эти идеи наиболее наглядны в виде рисунков на салфетках, иногда в виде прототипа в CodePen, Sketch, Balsamiq, концепции движения в After Effects или любой другой комбинации медиа и инструментов. Смысл в том, что команда должна генерировать идеи и решать проблемы, а не следить за четким соблюдением порядка действий. Взяв на вооружение кросс-дисциплинарный подход к разработке дизайна, вы обретете баланс между эстетикой, технической реализацией, удобством использования и функциональностью.
Над переводом работают Ольга Кокоулина и Ринат Шайхутдинов.
Если вам понравился перевод, дайте нам знать — нажмите кнопку Clap в левой части экрана.
Видеокурсы и практика по дизайну интерактивных систем: ux/ui, веб-дизайн и бренд-дизайн
Вас ждет плотная проектная практика по анимации интерфейсов, дизайну сайтов, а также мобильных и веб-приложений. Под руководством наставников в стиле «смотри и повторяй»!
Breezzly — это среда для тренировки digital-навыков. Здесь вы встретите комплекты видеокурсов в актуальных инструментах интерактивного дизайна, среди них Figma, Principle и Invision Studio. А каждый проект — это живой кейс с историей, собранной по горячим следам!
