Использование дизайн-системы для улучшения качества дизайна

Транскрипт выступления Ситнии Ромеро, Design Lead из Pinterest, на дизайн-конференции RAUX
Сегодня мы поговорим о том, как повысить качество UX-дизайна, а также обо всем, что касается дизайн-систем.
Для начала представлюсь. Меня зовут – Синтия Ромеро и вы можете обращаться ко мне в 3-ем лице. Я работаю продуктовым дизайнером в системе Pinterest, которую мы называем Gestalt. Не знаю, слышали ли вы о нашей дизайн-системе, но если нет, то я поделюсь ссылкой, чтобы вы могли найти и опробовать ее. Это все достаточно интересно.

Как я уже упомянула, Gestalt – это дизайн-система Pinterest. Если вы не знаете, что это, посетите наш сайт и посмотрите, как она работает. Однако прежде, чем мы начнем говорить о качестве и о том, как, в частности, дизайн-системы улучшают качество продукта, я бы очень хотела, чтобы вы уделили одну минуту и подумали о том, как вы влияете на качество дизайна продукции, производимой вашей организацией. Неважно работаете ли вы в дизайн-системе или непосредственно в команде разработки продукта. Уделите одну минуту на то, чтобы подумать, существует ли в вашей повседневной жизни что-то, что поможет повысить уровень качества продукта? Не стесняйтесь также написать свои мысли в чат. Давайте сократим время до 30 секунд. Понимаю, что вы, должно быть, устали каждый день следить за конференцией, однако согласитесь, всегда полезно поразмыслить над тем, что я, как дизайнер, могу сделать, чтобы улучшить качество работы моей команды. Такова тема нашего сегодняшнего разговора. Это была небольшая разминка перед тем, как мы начнем.

Мне хотелось бы, чтобы после сегодняшнего выступления вы вынесли для себя несколько основных моментов. Во-первых, как сформировать опыт, который будет вдохновлять других людей, а так же как стать примером для своей организации. Мы поговорим о том, как создать эффективную дизайн-систему, что нам понадобиться в качестве основы и как можно влиять на качество вашего продукта с помощью дизайн-систем. И, конечно же, я хотела бы затронуть тему инклюзивного дизайна. Инклюзивный дизайн и как с его помощью мы можем понять нашу аудиторию – это одна из тем, с которыми мне очень интересно работать. Итак, это основные моменты, которые будут затронуты во время сегодняшнего выступления.
Мне следует пояснить, что такое дизайн-система. Представьте себе конструктор Lego с множеством деталей различных форм и цветов. Соединив эти маленькие части вместе, вы можете построить замок. Дизайн-система работает по такому же принципу. Думайте о составных в дизайн-системе, как о деталях в Lego. У вас есть несколько элементов UI: C-цепочки, текст, формы и т.д. Объединив их все, вы сможете создать красивый пользовательский интерфейс, словно замок из Lego. При построении, задавайте себе вопросы: «Каким я хочу видеть интерфейс? Какие цвета понравятся пользователям? А что насчет людей с ограниченными возможностями или дальтонизмом? Как им увидеть цвета? Как в таком случае у меня получится вдохновить их?» Здесь много нюансов, но по сути все как в конструкторе Lego: множество маленьких деталей разных цветов, форм и размеров, из которых вы можете построить совершенно новый мир.
Думаете о дизайн-системе, как об интернациональном языке, который позволит каждому воспользоваться преимуществами доступного и эффективного интерфейса. Прямо как здесь, на нашей конференции: я говорю по-английски, также у нас есть люди, говорящие по-русски, а также несколько человек, говорящих на других языках. Я из Бразилии, но говорю по-английски. Сравните это с дизайн-системой: независимо от области применения, она должна «говорить на одном языке». Точно так же все должны понимать, что такое дизайн-система, как она помогает улучшить качество продукта. Наша цель в том, чтобы она стала единым исходным источником. Мы также хотим использовать дизайн-системы для того, чтобы подарить членам организации чувство принадлежности и поддержать других людей. Поэтому мне нравится думать о дизайн-системе как о языке: мы можем научиться его использовать, на нем говорить и его понимать. Здорово думать о дизайн-системе в таком ключе.
Еще одна особенность дизайн-системы – это отношения между ней и командой разработчиков. Даже если мы называем ее дизайн-системой, мы вовсе не команда дизайнеров. По крайней мере, в Pinterest. В моей команде я являюсь продуктовым дизайнером, но у нас так же есть специалисты занимающиеся шрифтами, инженеры обеспечивающие контроль качества, а так же специалисты IOS и Android систем. Чтобы создать всю эту систему со мной работает множество разных людей, например, продакт-менеджер или программный менеджер. Мы говорим о коммуникации между разными областями. Даже если в названии есть только слово «дизайн», сюда включены все команды, участвующие в производстве продукта.
Вот несколько примеров того, как дизайн-система вносит свой вклад. Во-первых, когда вы создаете свой дизайн, особенно если это что-то новое, вы можете воспользоваться дизайн-системой для оценки предстоящего процесса проектирования. Например, мне нужно создать новую главную страницу. Все ли смогут получить ней доступ? Сможет ли она правильно функционировать? Какой рисунок здесь подойдет? Как мне следует ее оформить? Точно! Я просмотрю на нее с помощью дизайн-системы, чтобы оценить процесс проектирования и определить, в правильном ли направлении я двигаюсь.
Дизайн-система служит вам в качестве карты. Допустим, есть функция, которую вам нужно создать, – что-то новое для вашего приложения или веб-сайта. Дизайн-система сможет имитировать процесс введения новой функции, рассчитать пользовательский поток, показать есть ли какие-либо компоненты, которые ускорят рабочий процесс. Таким образом, она помогает построить план действий, а также предлагает лучшие опции для того, чтобы увеличить доступность продукта.
Говоря о доступности: если вы делаете все свои компоненты доступными для других, вы так же способствуете успеху своей компании. Допустим, каждый ваш компонент доступен. Если при создании других продуктов используют ваши компоненты, есть шанс, что эти продукты внесут вклад в формирование положительного опыта ваших пользователей.
Что такое управление продуктом?
Дизайн-система также помогает в построении блоков. Она повторяет компоненты из разных интерфейсов различных продуктов. Объединив все эти маленькие элементы, вы сможете создавать большие блоки. Их использование ускоряет рабочий процесс, а вы тратите меньше времени на кодирование. С готовыми компонентами вам не нужно создавать их с нуля. Это помогает и дизайнерам. Мне не нужно заботиться о создании шкалы прогресса, если я могу зайти в дизайн-систему и взять его оттуда. Можно использовать ее в готовом виде, но, если мне нужно что-то изменить, я могу связаться с тех. поддержкой дизайн-системы и запросить обновление, которое бы подходило как для моей команды, так и других. Мне нравится таким образом помогать дизайнерам и инженерам.

С помощью дизайн-системы вы можете получить единый дизайн и шаблоны для всех продуктов. Если вы следуете всем этим шести пунктам на экране, значит, вы помогаете оказывать влияние на качество продуктов в вашей компании. Ведь если ваша дизайн-система доступна для других, помогает ускорить рабочий процесс, вносит постоянство в дизайн, а люди используют вашу дизайн-систему, то продукт точно обладает всеми этими характеристиками. Соответственно, качество улучшается.
К тому же, дело не только в качестве, но и в деньгах. Все, что мы создаем… В том числе, когда у вас есть цепочка дизайн-систем, и вы думаете: «Мне нужно нанять больше инженеров, чтобы создать больше компонентов». Почему в такой момент мне нужно подумать о дизайн-системе? Почему мне следует в нее инвестировать? Это цитата от архитектора проекта, который упомянул, что дизайн-система сэкономила его время и деньги, ведь с помощью устранения избытков кода, можно более чем на 20 процентов уменьшить время работы разработчика. Для команды из 100 разработчиков это сэкономит около 2 миллионов долларов в год. Подумайте, как здорово экономить время людей, создав хорошо работающую дизайн-систему и ускорив их рабочий процесс. У вас появится намного больше времени для создания и инвестирования в продукты. К тому же, вы сэкономите много денег. Таким образом, дизайн-система – это не только качество, но и экономия времени. А за счет экономии времени вы также экономите деньги, которые можете инвестировать в другие вещи.
Для того чтобы повысить качество продукта, необходимо иметь прочную основу. Дизайн-система – это основа всего. В Pinterest наша команда является частью организации, которая создает эту основу, потому что мы обеспечиваем контроль качества. Мы хотим, чтобы все было крепким и прочным. Мы сравниваем дизайн-систему со зданием. Без прочного фундамента у вас не получится хорошей конструкции. Все как в строительстве: если вы используете дерево вместо бетона, конструкция не будет прочной. Стоит появится буре, – очень ветреной буре, – и без прочного фундамента все разрушится. Так и в дизайн-системе. Она является более обширным понятием чем просто «Руководство по стилю» или «Библиотека компонентов».

Это изображение из Twitter, которое они показали, когда представляли свою дизайн-систему. Оно мне очень нравится, поскольку хорошо резонирует с Pinterest. Дизайн-система связана с информационной архитектурой. Подумайте об ее принципах, наполнении, работе, доступности и всех их возможных комбинациях. У нас есть Библиотека компонентов, напоминающая «блоки» – детали Lego для создания интерфейса. Это галерея с кучей UI-элементов, которыми люди могут пользоваться. Так же вам понадобится Руководство по стилю. С помощью него устанавливается: как именно вы собираетесь показать свой бренд с помощью дизайн системы; какое оформление вы станете использовать; добавите ли вы сетку; если ли у вас цветовая палитра. Все это составляет основу дизайн-системы.

Если у вас нет четкого плана и хорошей основы, то вы запутаетесь. Вы не будете знать, куда двигаться. Если у вас нет плана действий, согласованного оформления, цветовой палитры, продуманной доступности, то продукт будет очень нестабильным. На одном и том же продукте вы будете наблюдать разные цвета, шрифты и поведение на разных устройствах. У ваших пользователей это может вызвать проблемы с когнитивным восприятием и доступностью. Таким образом, вам нужен план действий, чтобы вы могли развиваться и в конечном итоге установить согласованность и единообразие элементов внутри своего продукта.
Как же мы строим крепкую основу в Pinterest? У нас есть куча разных ресурсов доступных к использованию. С помощью них мы стараемся улучшить качество нашего продукта. У нас есть «Библиотека дизайна». В нашем случае используется Figma с набором компонентов, которые команда дизайнеров может постоянно воспроизводить и использовать в разных продуктах. У нас также есть Библиотека компонентов на кодовой базе. С помощью нее инженеры получают тот же компонент, но в кодовом формате. Они могут воспроизводить, настраивать и модифицировать нужные им файлы, разумеется, следуя рекомендациям.
Что такое управление продуктом?
Нас так же заботит доступность наших продуктов. Мы хотим быть уверены, что наши клиенты, независимо от их способностей, могут пользоваться нашими продуктами. Pinterest – это компания, делающая основной упор на визуальную часть. Мы используем визуальный поиск, но как нам сделать его доступным для людей с нарушениями зрения? Например, для нас важно создать alt-теги к фотографиям и субтитры к видео. А как нам улучшить дизайн для более широкого круга пользователей? Все наши компоненты должны обладать хорошей локализации и пройти тесты на доступность. У нас также есть библиотека иконок, созданная для того, чтобы не перегружать ими продукт. Так у людей есть все нужные иконки, а если нет, то они смогут сами безопасно создать их. Стараниями наших дизайнеров и инженеров во время разработки мы обеспечиваем пользователей всеми основными элементами. С ними люди могут создавать продукты и по-прежнему следовать тому же визуальному шаблону, не нарушая наши стандарты качества.

Еще на ранней стадии продукта мы задумываемся о пользовательском интерфейсе и дизайнерских решениях. Каким образом? Каждую неделю мы выделяем несколько часов для обсуждения. Допустим, вы – новый дизайнер или инженер, и вы не уверены понравится ли клиенту наше решение. С помощью обсуждения мы хотим убедиться, что все сотрудничают ради одной цели – уже на ранней стадии создать подходящий пользователю дизайн. Нам не нужно будет тратить время на тесты, если мы изначально будем думать обо всех погрешностях на этапе проектирования. Это очень помогает.
Мы также выявляем желания пользователя еще до начала работы над цифровым дизайном. Здесь важна визуальная составляющая, на которой и сфокусирована наша компания.

Поскольку я сама являюсь дизайнером, мне нравится смотреть на красивую картинку, однако прежде чем думать о визуальной части, мне нужно убедиться, что взаимодействие с продуктом и его поведение меня удовлетворяют. Например, как пользователю получить доступ к этой информации? Этот элемент закроется или нет? А может он встанет поверх остальных? А как этот элемент будет себя вести? Здесь будет Drag-and-Drop оперирование? А подойдет ли оно пользователям с нарушениями двигательного аппарата? Как они смогут перемещать объекты по экрану? Следует ли поменять шрифт? Нравится ли мне это поведение интерфейса? Как только у меня появятся ответы на все эти вопросы, я стану думать о визуальном воплощении.
Также мне нужно описать состояние продукта, взаимодействия его элементов и сам контент. Поговорите с контент-дизайнером, чтобы убедиться, что все в порядке. Это поможет создать единый шаблон для всех команд, а также получить дизайн-систему, которая точно обеспечит вас качественным продуктом. Таким образом, вы организуете совместную работу и создадите «прозрачность», чтобы все знали о вашей работе и могли сотрудничать с вами.
Перед тем как мы подробнее поговорим о сотрудничестве, я хочу вам кое-что показать. Если вы наберете «Gestalt Pinterest Design System» в Google, вы увидите наш веб-сайт. На сегодняшний день у нас есть много информации для дизайнеров-новичков, с помощью которой они узнают, как начать использовать Gestalt, а также получат доступ к руководящим принципам нашего бренда. Здесь есть как информация для новых членов команды, так и средства для работы. Нам важно убедиться, что люди получили нужные инструменты для создания качественных продуктов.

У нас также есть отдельная страница с информацией о сотрудничестве. Дизайн-система не должна быть закрытым клубом, здесь важно общение и связи. Мы хотим, чтобы люди сотрудничали с нами, поэтому создали эту страницу. Ладно, если вам нужно поделиться идеями, что же делать? Придите в офис во время специальных часов обсуждения, чтобы мы вместе провели критический анализ дизайна и нашли способ сотрудничать с вами в этом проекте. У нас также есть ряд компонентов, основные принципы (например, касающиеся цветовой палитры, оформления, иконок и т.д.). Мы хотим, чтобы вся наша работа была для вас прозрачной, потому что прозрачность – это залог качества.

Итак, на сайте вы сможете узнать наш план действий, в котором мы перечисляем все, над чем работаем прямо сейчас, и чем планируем заняться в будущем. Мы хотим убедиться, что все знают, чем мы занимаемся и как стать частью всего этого. Кстати, мы являемся дизайн-системой с открытым исходным кодом, поэтому все, что вы наблюдаете на экране, вы можете легко найти в Интернете. Это довольно круто.
Таким образом, установленные вами принципы помогают контролировать качество всего, что вы делаете в дизайн-системе. Например, когда мы говорим о цветах, мы не просто показываем цветовую палитру, мы также говорим о принципах, лежащих в основе цветовой палитры. Мы хотим, чтобы пользователи знали, почему мы выбрали именно эти цвета и почему они так важны для продукта. Допустим, мы хотим, чтобы вся палитра была простой. Мы не хотим иметь очень большой диапазон цветов в пользовательском интерфейсе продукта, потому что мы знаем, что у некоторых людей это вызывает тревогу. У некоторых возникают проблемы с восприятием высокой контрастности, они теряются и устают. Поэтому нам не нужна большая цветовая палитра, и мы всегда можем ее сократить для удобства визуального восприятия.
Что такое управление продуктом?
Кроме того, мы хотим, чтобы наши цвета были согласованными. У нашего сайта есть светлый и темный режим. Нам нужно убедиться, что цвета соответствуют заданной палитре как в светлом, так и в темном режиме, и пользователи могут без проблем наслаждаться работой на сайте.

Как я упоминала ранее, нам важно, чтобы все цвета соответствовали стандартам доступности. Контент должен быть разборчивым, соответствовать всем приписанным стандартам, чтобы иконки не вызывали проблем с восприятием контрастного изображения. Мы продумываем принципы, которые лягут в основу всех продуктов, созданных с помощью нашей дизайн-системы. Наша цель – создать основу на базе этих принципов. Так, с помощью крепкой основы, вы контролируете качество продуктов.

Кроме того, с помощью нашей дизайн-системы мы предоставляем услуги. Мы не только дизайнеры, инженеры и продакт-менеджеры. Мы – это та часть Pinterest, которая помогает людям добиться согласованности. Мы в какой-то степени консультанты, поскольку каждый день нам приходит куча вопросов, которые, как каналы, мы переключаем между членами нашей команды. Так что каждую неделю мы назначаем человека, который будет отвечать на вопросы, встречаться с людьми, чтобы убедиться, все могут использовать нашу дизайн-систему. Мы хотим внедрить наши услуги, потому что если команда, использующая дизайн-систему ухудшит ее качество, то и качество самого продукта тоже пострадает. Нам нужно убедиться, что та работа, которую мы проделали внутри команды, повлияет и на наш продукт. Мы существуем, чтобы сделать работу людей проще и эффективнее, помогая им сосредоточиться на всей картине, а не на мелких пикселях. Мы там, где в нас нуждаются.
Хорошо, мы поговорили про услуги, стандарты, основу, но что насчет качества? Многие команды разработчиков следуют похожему сценарию, который вы видите на экране. Часто продукт имеет несогласованные стили. Например, перейдя в ленту, вы видите подчеркнутые ссылки, а на интерфейсе приборной панели, вы заметите те же ссылки, но уже цветные. Они разных стилей. Мы часто наблюдаем такое в продуктах: элементы выглядят по-разному на всех страницах.
Нередко команды разработчиков допускают определенную ошибку. Поговорив с продакт-менеджерами, вы заметите, что они больше думают о пользовательском интерфейсе, а не о том, как сделать компонент лучше. Как он должен двигаться или себя вести? Вы часто можете заметить, как дизайнеры и инженеры задают один и тот же вопрос снова и снова. Это довольно распространено во всех компаниях.

Иногда требуются месяцы, чтобы нанять новых инженеров, дизайнеров или менеджеров по продукту. Людям требуется очень много времени, чтобы научиться дизайнерскому делу. Вам хочется иметь возможность что-то пробовать и учиться быстрее, но вы часто сталкиваетесь с нехваткой времени. Дизайн-система может помочь с этим.
Что такое управление продуктом?
Например, я люблю сравнивать дизайн-систему с соединительной тканью, которая скрепляет всю платформу. Думайте о дизайн-системе как о чем-то, что собирает воедино все элементы и содержит в себе весь спектр продуктов.

Так как поднять планку качества с помощью нашей дизайн-системы? Вы можете использовать дизайн-систему, чтобы помочь командам оценить свою работу. Например, наша дизайн-система содержит рекомендации по правильному хранению файлов. Мы поместили Handoff Kit, чтобы дизайнеры смогли использовать инструменты оттуда как для оценки командного процесса, так и в своей повседневной работе.

Дизайн-система также помогает бросать друг другу вызов. Допустим, вам захотелось добавить наложение, но, подождите, оно не подходит вашему продукту, поэтому вы не сможете использовать этот компонент. Перед вами задача: как мне переделать его под свой продукт и как передать команде дизайн-системы свои пожелания, чтобы, в конечном итоге, создать тот вариант компонента, который будет полезен всем.

Таким образом, дизайн-система помогает вам стремиться к лучшему результату, а также стимулирует дебаты внутри компании. Если вы не согласны с тем решением, которое приняла фирма, у вас есть возможность прийти и присоединиться к обсуждению с ребятами, работающими в дизайн-системе: «Как нам улучшить продукт?» С помощью оценки и обсуждения вы можете улучшить качество и установить рекомендации по использованию продукта. Вы можете обеспечить эффективную работу и создать шаблоны. Во время сотрудничества с командой разработчиков внутри дизайн-системы происходит множество изменений, которые, в конце концов, поднимают планку качества конечного продукта.

На фото я провожу презентацию и говорю о том, что дизайн-система является единым исходным источником. Информация с нашего веб-сайта – это отправная точка для всех дизайнеров и инженеров, когда они только начинают свою работу. Она может повысить эффективность и согласованность команд, помогая компании создавать продукты в больших масштабах. Также она поддерживает цели самого продукта. Дизайн-система будет работать вам на руку, если вы объедините заинтересованные стороны и подумаете о стратегически выгодном и долгосрочном будущем продукта. Это совместная работа по достижению общей цели. Дизайн-система также способствует общению, ведь она создает интернациональный язык между заинтересованными сторонами, которые концентрируются для решения общих задач. Она становится единым источником, который используют для поиска информации и руководства. Это ресурс, который помогает сразу получать нужные элементы, а не создавать их с нуля.
Такая модель довольно распространена. Первый шаг для создания нужного компонента: определить цели. Зачем он нам нужен? В нашем случае создавая компонент, мы хотим убедиться, что он будет полезен сразу нескольким командам. В противном случае в его существовании нет никакого смысла.
Нам нужно провести несколько аудитов для этого компонента. Если после аудита мы видим, что он работает хорошо, иногда нам нужно провести тесты на удобство использования. Иногда мы сотрудничаем с исследовательской группой, чтобы убедиться, что нужные нам компоненты, прошедшие проверку, будут работать нормально. Мы даем описание этой модели и определяем ее принципы («Я знаю, что требуется этому продукту!»).

Во время четвертого шага – обсуждения, – мы обычно проводим критический анализ дизайна с дизайнерами из других команд. Мы говорим: «Вот, это руководство, разработанное только на прошлой неделе. Как вы считаете, подходит ли оно вашему продукту? Соответствует ли оно заданным целям? Как мы можем его улучшить?» Благодаря обратной связи, которую мы получаем на этапе обсуждения, вы совершенствуете компонент и улучшаете продукт.

С обратной связью и доработками вы можете спроектировать дизайн, создать продукт и установить для него руководство. Создайте компонент в Figma, сделайте его доступным для дизайнеров, представьте компонент в виде кода, а также опишите его руководство. В этом руководстве напишите рекомендации по использованию, передовые методы проектирования и доступности. Сделайте все это доступным для дизайнеров и инженеров.
У нас также есть этап обзора. Когда вся информация о компонентах составлена, мы тестируем код, чтобы убедиться в отсутствии ошибок и в том, что люди могут сами воспроизводить эти компоненты. Иногда после этого этапа мы находим вещи, которые нужно исправить. Так мы снова возвращаемся к четвертому шагу. «Ладно, давайте еще раз обсудим продукт с дизайнерами и покажем, что мы исправили». Проводя этот этап снова и снова, чтобы убедиться, что все хорошо, мы обеспечиваем высокий контроль качества. В конце концов, мы готовы разместить компонент в общий доступ.

Как вы заметили, я много говорила о доступности, потому что это важно для нас. Мы считаем, что доступность и инклюзивный дизайн – это залог качества. Нельзя считать продукт хорошим, если люди с разными возможностями испытывают проблемы с использованием и просмотром наших продуктов. Мы гарантируем качество. Для нас важно убедиться, что наш продукт является инклюзивным.
Что такое управление продуктом?
Как дизайнер… Я не уверена, что все на этой конференции дизайнеры, но, по крайней мере, я, как дизайнер, хочу убедиться, что каждый может получить доступ к моим продуктам независимо от их опыта, базы знаний или способностей. Мои продукты должны быть просты в использовании.
Вы видите человека со служебной собакой. Иногда людям с нарушениями зрения нужна собака, чтобы, например, совершать прогулки. Как им в одной руке держать собаку, а во второй – телефон? Как им пролистывать экран? Допустим, вы мама или папа, и вы держите ребенка. Вы едете в транспорте (например, на поезде) с ребенком на руках. Если вам нужно воспользоваться телефоном, как вы собираетесь пролистывать экран одной рукой?

Задайте себе вопрос: во время создания продукта думаю ли я о людях с разными способностями и ограниченными возможностями? Как они будут им пользоваться?

Я приведу пару примеров. Вы должны понимать, что инвалидность может быть не на всю жизнь. Иногда вы видите человека и думаете: «О, этот человек слеп – это навсегда. Тут ничего не изменишь.» Но иногда… У меня есть травма глаза. Она не навсегда, но в данный момент я им не вижу. Поэтому сейчас мне нужно полагаться на дополнительные технологии, помогающие мне пользоваться продуктом.

Иногда пользователи отвлекаются. Вокруг нас постоянно происходит куча вещей, которые не позволяют сосредоточиться на чем-то одном. Итак, как я могу помочь этим людям? Это не такая уж редкость: вы можете сломать руку и стать инвалидом на несколько месяцев. Как в таком случае делать повседневные дела и читать информацию в телефоне?
Нам нужно позаботиться о вспомогательных технологиях. Как людям получить доступ к продукту, несмотря на инвалидность или их особенности? Как дизайнер в команде разработчиков дизайн-системы я хочу стать посредником и помогать распространять доступность, разнообразие и инклюзивность. Как сейчас. Я из Бразилии, у меня есть характерный акцент. Иногда мне трудно что-то сказать, даже что-то понять, потому что это не мой родной язык. Как с моей позиции я буду относиться к людям с разным прошлым? Как мне учесть желания всех, разрабатывая продукт? Их различия, культуру, взгляды на вещи. Все люди разные, поэтому нам нужно убедиться, что мы учитываем это, когда разрабатываем новый продукт. Как заставить людей любит наш продукт?
Приведу пример из нашей работы в Pinterest. Это человек, которого мы изучали на одном из наших семинаров. Допустим, у нас есть Санджай, который очень импульсивен. Ему 30 лет, и он страдает дислексией. Чтобы спроектировать дизайн для такого типа пользователей, мне нужно учитывать, что некоторые люди склонны всегда давать только положительную обратную связь из-за своей импульсивности. Они всегда говорят, что довольны работой. Важно не забывать о людях с дислексией. Если мы создадим страницу с кучей информации и не подумаем о ее распределении, мы ухудшим их представление о нашем продукте, потому что таким людям сложно сосредоточиться на чем-то одном среди всего этого контента.
Что такое управление продуктом?
Итак, вопрос: как нам улучшить продукт для такого типа пользователей? Допустим, у нас есть множество элементов, которые мы разместили с помощью выравнивания по центру. Из-за этого будет очень сложно совершать поиск. Они подумают: «Мне так тяжело это читать! Я испытываю тревогу! Я не могу сосредоточиться на таком количестве текста!» Чтобы избежать этого мы убрали выравнивание по центру и сделали так, чтобы элементы располагались слева направо. Людям будет проще ориентироваться в содержании и сообщении, которое мы пытаемся донести.

Что касается пользователей с нарушением зрения: во время работы с оформлением я могу очень затруднить им доступ к продукту. Как же мне убедиться, что оформление им подходит, а встроенный мною текст виден? Нам нужно обращать внимание на эти детали и проводить пользовательские тесты, чтобы пронаблюдать, как люди взаимодействуют с нашим продуктом. Мы стараемся проделывать это с каждым компонентом. Не только на функциональном, но и на компонентном уровне, потому что, если наш компонент является общедоступным и инклюзивным, то же самое можно сказать и про части продукта, потому что в их создании участвуют эти самые компоненты.

Через пару секунд я покажу вам видео, чтобы вы могли понять, как люди с ограниченными возможностями ориентируются в цифровом мире. Мне бы хотелось, чтобы вы подумали об инновациях, которые расширяют доступность продукта. Например, многие из нас используют субтитры. Допустим, вы находитесь в очень шумном месте и пытаетесь посмотреть видео. Вам не очень хорошо слышно, поэтому вы включаете субтитры, чтобы они смогли помочь вам понять видео. Например, я, как человек из Бразилии, нахожусь на русском мероприятии, и кто-то говорит по-русски. Я включаю субтитры, и с помощью перевода я могу понять, о чем говорят спикеры. Я не инвалид и у меня нет проблем со слухом, однако тоже пользуюсь субтитрами. Такие инновации помогают многим людям, и не только с ограниченными способностями.
Когда вы думаете о вещах, которые должны помочь людям с разными возможностями, вы на самом деле думаете обо всех, а не только об инвалидах. Вы думаете обо всех. Доступность выгодна всем.
Я тоже человек с ограниченными возможностями. Меня называют слепой, потому что многое, что я вижу, отлично от того, что видят другие. Я очень ценю, когда разработчики продукта умеют подбирать цвета, и, перемещаясь по веб-сайту, у меня не возникает проблем с пониманием контента. Мне нравится, когда люди не полагаются только на цвета, чтобы передать информацию, но также думают над разными альтернативами, чтобы контент был доступен для всех.

Я покажу вам трехминутное видео, чтобы вы немного поразмышляли обо всем этом. Это Виктор, у него нарушено зрение и он расскажет вам о своем опыте работы в Google. Все, я запускаю.

Спикер на видео: Привет, меня зовут Виктор Саран, и я работаю программным менеджером в Google. В компании я слежу за тем, чтобы продукты, которые мы создаем, были доступны для всех пользователей, независимо от их возможностей или ограничений.
Из-за особенностей современных веб-технологий разработчик может легко создать веб-сайт, который сложен для незрячего человека. Пользователи с проблемами зрения, вполне вероятно, используют приложение для чтения с экрана, которое представляет собой программное обеспечение, позволяющее слышать информацию, отображаемую на экране, с помощью синтезатора речи. Такие люди также могут использовать шрифт Брайля, который позволяет им читать информацию на экране c помощью дисплея Брайля.
Многие веб-сайты из-за природы своего контента являются визуальными и не имеют возможности навигации с помощью клавиатуры, которая так необходима слепым людям. В целом можно с уверенностью предположить, что людей с нарушениями зрения, которые все же имеют возможность что-то видеть, больше, чем тех, кто потерял зрение полностью. Есть также люди с низкой остротой зрения. Они могут пользоваться крупным шрифтом или функцией увеличения при работе с компьютером. Например, моя подруга Лаура пользуется этим, чтобы преобразовать текст в речь, а также различными вариантами изменения цветового контраста.

Синтезатор речи: Давай встретимся в кофейне. Я тебе что-нибудь закажу. Кофе подойдет?

Спикер на видео: И это мы еще не упомянули людей с дальтонизмом, которые могут испытывать трудности с различением красного и зеленого или синего и желтого. В эту группу входят примерно 9% мужчин и 1% женщин от всего населения. Мы иногда сталкиваемся с такой же проблемой, например, используя компьютер, когда светит солнце, или смотря на изображение со старого проектора. Всякий раз, когда в разговоре заходит речь о доступности продукта, люди склонны думать, что это касается только кого-то, такого же как я. На самом же деле существует намного больше людей, которых нужно учитывать. Существует огромное количество пользователи с нарушениями ловкости и подвижности. Такие люди могут пользоваться только клавиатурой, программным обеспечением для отслеживания поворотов головы или глаз, переключателями, голосовыми командами и т. д. У кого-то может быть сломано запястье, тачпад или же он просто едет в вагоне очень трясущегося поезда. Помогая людям с постоянным нарушением подвижности, мы обеспечиваем хороший опыт для всех.
Есть и пользователи с нарушениями слуха. Например, некоторые могут быть полностью глухими, а другие – лишь частично. Аудио-контент должен предоставлять некую визуальную альтернативу. Например, мессенджеры используют мигающие вспышки, а также визуальные уведомления.

Есть также пользователи с когнитивными нарушениями, например, с СДВ, дислексией или аутизмом. Этим пользователям могут потребоваться различные специальные функции, такие как масштабирование экрана, чтобы облегчить чтение содержимого, или минимальный дизайн, чтобы уменьшить когнитивную нагрузку. Мы все помним ощущение стресса или перегрузки после потребления контента. Таким образом, помогая пользователям с когнитивными нарушениями, мы делаем продукт намного лучше и для всех остальных.
Что такое управление продуктом?
В конце можно сказать, что доступность продукта подразумевает под собой то, что контент и веб-сайты, которые мы создаем, точно могут быть использованы людьми с различными нарушениями или ограничениями.

Синтия Ромеро: Отлично! При просмотре этого видео, какие мысли всплывали у вас голове? Что думаете? Надеюсь, вы подробнее поразмышляете о нем позже, сделаете для себя какие-нибудь выводы. Я о многом узнала, когда впервые посмотрела это видео. Задумываясь о включаемости пользователей с ограниченными возможностями и их видимости в обществе, не все они оказываются заметными для разработчиков. Вы не знаете, что у вашего пользователя есть какие-то ограничения, и он использует вспомогательные технологии. Поэтому подумайте о том, чтобы протестировать свой дизайн на программах для чтения с экрана. Попробуйте использовать устройства для управления и подумайте о том, можно ли масштабировать экран. Допустим, у вас есть иконка: как она будет выглядеть, если вы увеличите ее в четыре раза? Она станет размытой? Если так, то как вы можете ее улучшить? Подумайте: людям, которые используют эти дополнительные устройства, понравится работать с вашим продуктом?

В дизайн-системе если вы думаете обо всех этих деталях, когда создаете компонент, вы помогаете улучшить качество своего продукта. Большему количеству пользователей понравится ваш продукт, если вы продумаете каждую деталь. Все это – основа.
Я приглашаю вас позже убедиться в этом. Как я уже говорила, наша дизайн-система открыта для использования. Вы можете поиграться с компонентами. Они как кучки кода в большой песочнице. Попробуйте.
Мы также говорили о доступности. В нашей дизайн-системе есть страница специальных возможностей. Вы можете чему-то научиться на ее примере. Да, я приглашаю вас протестировать все самостоятельно. Я хотела бы сказать спасибо за возможность немного поговорить о дизайн-системах и качестве дизайна. Я надеюсь, что сегодня вы чему-то научились. Спасибо, и «obrigada» (это тоже спасибо, но на португальском).
Модератор: Obrigada, Синтия, за Ваше выступление. Это было потрясающе, и да, у нас есть один вопрос. Даже два. Пожалуйста, расскажите обо всех этапах создания дизайн-системы на примере вашего продукта. Спасибо.

Синтия Ромеро: Все этапы? Их куча, список огромен. При создании дизайн-системы первое, о чем вы думаете, это: должна ли она быть в общем доступе? Например, в случае компонента он принесет пользу более чем одному продукту. Нам нужно подумать о дизайне контента: каким образом вы собираетесь описывать информацию на сайтах или элементах? Нам нужно подумать о подходящих цветах, поведении компонентов.
Первым делом мы начинаем наше исследование. Мы изучаем дизайн, чтобы понять, как мы хотим использовать этот компонент. После этого мы совершаем первый аудит. Мы проводим его только для того, чтобы команда просмотрела, все ли хорошо работает. Мы разговариваем с инженерами, дизайнерами, иногда с ребятами, которые проводят исследования: «Все ведь хорошо работает?» Только после аудита, мы переходим к этапу проектирования, на котором мы начинаем группировать компоненты и добавлять пространство между элементами. Что насчет оформления? Размеров? Как ведут себя элементы во время работы с ними? Как все выглядит с точки зрения дизайна?
После того, как мы закончили с дизайном, прежде чем что-либо кодировать, мы берем разные части продукта, собираемся командами и проводим дизайн-спринт. «Вот компонент, который мы создаем. Вот поведения всех элементов, спецификации дизайна, принципы, лежащие в основе этого исследования. Что вы думаете? Подходит ли этот продукт для вашей команды?» После получения этих отзывов мы вносим некоторые улучшения. Мы делаем вайрфреймы и файл для инженеров, чтобы они могли приступить к работе над кодами для компонента. После того, как они закончат с кодом, мы собираемся заполнить страницу с руководством, чтобы осветить некоторые моменты: как работает этот компонент, его поведение, его локализация. Например, если я переведу его на арабский язык, то как будут размещены компоненты. Станут ли они занимать слишком много места? Нужно ли мне уменьшить шрифт?

После кодирования мы делаем второй обзор, и если все работает хорошо, мы опубликуем продукт. Да, иногда перед публикацией нам нужно провести пользовательское тестирование. Это зависит от продукта. Иногда вам приходится проводить пользовательские тесты уже после публикации. Например, если обнаружатся какие-либо ошибки после прочтения страницы, они снова проведут тесты и посмотрят, нужно ли вам что-то исправлять. В целом, это все. Я ответила на ваш вопрос?

Модератор: Я надеюсь, что так. Еще один вопрос, но у нас осталось одна минута. Поэтому ответ будет кратким. Поделитесь, пожалуйста, какие вы можете назвать основные элементы дизайн-системы для создания новой линейки продуктов? В том случае, когда вы не ограничены временем и ресурсами.

Синтия Ромеро: Я бы сказала, что обязательными являются рекомендации по использованию. Они описывают как нужно использовать компонент, чтобы убедиться, что все это знают, и когда его использовать нежелательно. Также важными вещами являются наличие информации и доступность. Для Pinterest это просто необходимо, потому что у нас миллионы пользователей, и не у всех одинаковые возможности. Таким образом, для нас доступность это, безусловно, отличная вещь. Она однозначно обязательна. Также важны взаимодействия: как мы взаимодействуем с продуктом? Есть ли какая-нибудь анимация, о которой нам следует знать? А как ведут себя компоненты?

Я бы ответила на Ваш вопрос так: создайте рекомендации по использованию, разработайте лучшие элементы для компонента, проверьте его способность к взаимодействию, доступность и ссылки на код, чтобы убедиться, что он чистый и его будет легче реализовать. И последнее – токены. Обязательно создайте их, потому что если у вас есть дизайнерские токены и вам нужно сделать одно изменение, то вы можете изменить только токены, а все остальное будет автоматически обновлено. Поэтому, да, не забудьте создать их.
Наши контакты
E-mail: info@mymonday.by

Error get alias