Tabula Rasa – страница отображения списка, в котором ноль элементов. Пример эмоциональных иллюстраций для состояния tabula rasa в «Ак Барс Онлайн».
Иллюстрации – фактор, очень сильно влияющий на опыт. Для их создания нужен профессионализм рисовальщика и натренированный глаз. Так что быстрых способов улучшить опыт, используя иллюстрации, скорее всего, нет. Это практическое ремесло.
В дизайн-системе Atlassian (известный производитель цифровых продуктов для автоматизации разработки) описана роль иллюстраций и цель их применения
Чтобы получить актуальные навыки, я рекомендую пройти курсы создания иллюстраций. Их существует огромное множество, офлайн и онлайн, разной продолжительности, на русском и на английском. Вы без труда найдете то, что подойдет вам.
Если вы или член вашей команды имеете художественное образование, знаете теорию композиции, владеете техникой светотени и т. д., для быстрого погружения в визуальную культуру можно прибегнуть к агрегаторам, например Pinterest, введя запрос «interface illustrations».
Анимация элементов
В дизайн-системе Google Material Design раздел, посвященный движению, можно назвать, помимо прочего, потрясающей поэмой об анимации интерфейсов. Своим студентам я рекомендую начинать развиваться в этом направлении как раз с него.
Раздел Easing («Замедление») в дизайн-системе Google Material Design содержит прекрасный дидактический материал. В жизни мы практически не сталкиваемся с равномерным движением; объекты материального мира, имеющие инерцию, ускоряющиеся в начале пути и замедляющиеся в конце, преодолевающие силы притяжения, гораздо комфортнее для восприятия
• Анимация – эффективный инструмент управления точкой фокуса. Мы можем привлечь внимание пользователя при помощи движущегося объекта.
• Анимация помогает ориентироваться в маршруте следования. Благодаря анимации мы понимаем, что вошли внутрь элемента списка, гораздо лучше, чем при резком переходе в формате обычной склейки.
• Анимация придает характер и вызывает восторг. Поведение элементов отражает особые моменты в путешествии пользователя и «оживляет» бренд.
Код
Современная дизайн-система – это уже нечто больше, чем просто руководство по оформлению интерфейсов. Это инфраструктура, направленная на повышение эффективности не только дизайн-процесса, но и всего производства. Недаром в последнее время набирает популярность термин DesignOps.
DesignOps (калька с DevOps) – совокупность инженерных практик и инструментов, призванных оптимизировать процессы производства программного обеспечения.
Практики DesignOps направлены на сокращение перечисленных ниже издержек, которые так хорошо были сформулированы в концепции бережливого производства.
• Потери из-за перепроизводства – вид потерь в разработке ПО, связанный с производством избыточных артефактов. Есть французская пословица – натирайте пармезан перед обедом. Каждый лишний макет, интеллектуальная карта или вайрфрейм, который не был «утилизирован» в релизе, представляет собой законсервированные затраты рабочего времени. Ретроспективно оценив суммарные затраты на артефакты, которые были произведены, но до сих пор не пригодились, можно представить, сколько времени освободилось бы для правильных дел.
• Потери времени из-за ожидания – в производственном процессе образуются «бутылочные горлышки», часто связанные с избыточными согласованиями артефактов. Некоторые люди боятся брать на себя ответственность за результат и запускают «механизм комитета», что отдаляет время поставки и отвлекает участников от работы.
• Потери при ненужной транспортировке – это касается широковещательной рассылки по почте. Помимо засорения папки с входящими письмами, они просто отвлекают участников.
• Потери из-за лишних этапов обработки – во многих компаниях многочисленные экспертные сферы объединяют в одном человеке, чтобы устранить эффект микроводопада. В частности, должности UX- и UI-дизайнера сливаются в одну – Product Designer. В результате прекращается игра в пинг-понг артефактами между этими ролями.
• Потери из-за лишних запасов – для большого склада неизбежно потребуется внутренняя система учета и навигации. Чем «старше» артефакт, тем сложнее его найти, в частности поэтому иногда команды делают выбор в пользу коротких итераций, они позволяют не «захламлять» склады артефактов.
• Потери из-за выпуска дефектной продукции – в производстве цифровых продуктов это потери, связанные со складированием, логистикой и утилизацией записей bug issues, описаний багов в системах отслеживания багов.
Современные дизайн-системы глубоко интегрированы в производственный процесс и включают в себя не только описания стилей или анимации в формате CSS[63], но и непосредственно код интерфейсных компонентов.
Дизайн-система Audi содержит не только описание анимации эффекта от нажатия на кнопку, но и код – пример использования этого объекта
На высокой стадии организации дизайн-систем вводится фаза разработки и внедрения инструментов для автоматизации процесса дизайна и программирования.
В своей лондонской штаб-квартире дизайн-команда Badoo показала инструменты для автоматизации конвейера между дизайнерами и разработчиками. Плагин для Sketch позволяет выбирать готовые компоненты из коллекции и кастомизировать их. Соответствующие элементы уже реализованы в коде и могут быть бесшовно интегрированы разработчиками
Глава 7
Процессы UXD
User Experience Design (UXD, UX-дизайн) – часть процесса разработки продукта.
Американский предприниматель Эрик Рис стал законодателем мод в области разработки ПО, когда в своей книге «Бизнес с нуля. Метод Lean Startup»[64] предложил заменить тяжеловесные методологии PMBOK (Project Management Body of Knowledge) и RUP (Rational Unified Process) своей шустрой моделью Lean Cycle. В то время начали появляться компании-разработчики, не имевшие за плечами опыта ведения корпоративных процессов, им была чужда и незнакома эта тяжеловесная инженерная культура с обилием документации и многолетним планированием.
В основе подхода лежат основные тренды современного производства ПО:
• дизайн, в центре которого находится пользователь (User Centered Design);
• гибкость (Agile);
• бережливость (Lean).
Главная идея подхода заключается в максимально быстром и экономном переходе между фазами цикла:
1) генерация идей;
2) разработка;
3) анализ результатов;
4) генерация идей…
Очевидно, что процессы UX-дизайна включены в каждый этап производства. Как уже было описано выше, команда может начать генерацию идей как с нуля, так и имея на руках результаты предыдущих итераций.
Мы рассмотрим UXD-процессы, начиная с самого старта продукта.
Популярные процессы UX-дизайна, наложенные на Lean Cycle
Процессы растут и развиваются вместе с продуктом, людьми, организацией. Они рождаются, живут и умирают. Очень важно не пропустить момент, когда необходимо запустить тот или иной процесс или исключить, если он превратился в бессмысленный ритуал. Хорошей практикой будет периодически проводить «ретроспективы» – встречи, на которых команда принимает решение прекратить/продолжить/начать конкретные процессы.
Многие популярные дизайн-процессы уже упоминались ранее. Далее рассмотрим их подробнее.
Дизайн-мышление и его производные
Дизайн-мышление – когнитивный процесс, в результате которого появляются дизайн-концепции.
Термин развивался с 1950-х годов, а широкую популярность получил благодаря компании IDEO – ее основатели агрегировали опыт, накопленный ведущими дизайн-командами, и в начале 1990-х начали активно консультировать корпорации. Именно их интерпретация процесса и подразумевается под дизайн-мышлением, связанным с созданием цифровых продуктов.
Популярности процесса способствовало несколько факторов. Постепенно технологические патенты и ноу-хау стали давать меньше преимуществ, и производители сосредоточились на определении текущих и создании новых потребностей клиентов. Индустрия менялась все стремительнее, так что компаниям требовалось найти более быстрые способы не только производства, но и генерации идей.
В дизайн-мышлении объединились лучшие на тот момент практики генерации идей и принятия решений – мозговой штурм, латеральное мышление[65], циклы «создай-протестируй-повтори» и многие другие.
Процесс происходит в несколько этапов:
• эмпатия – концентрация на переживаниях пользователя и запись откровений;
• фокусировка – оформление разрозненных находок в виде артефактов: персон, карт следования, гипотез в формате «Как мы можем помочь» (HMW, How Might We);
• генерация идей – поиск решений для выявленных проблем и пользовательских контекстов;
• приоритизация идей – коллективное принятие решений с применением лучших практик;
• прототипирование – быстрое создание прототипов решений с помощью разных способов;
• тестирование прототипов – проверка прототипов, по результатам которой возможен возврат на один из предыдущих шагов с последующей корректировкой.
Этапы дизайн-мышления
Сессия дизайн-мышления может занимать от нескольких часов до нескольких дней.
Цель коротких сессий на несколько часов – трансформировать мышление