A/B-тестирование UX для компонентных фреймворков

Знакомство с программированием может принести большую пользу дизайнерам. Следовательно, многие окунулись и научились работать с кодом (или, по крайней мере, в какой-то степени говорить на его языке), чтобы повысить эффективность сотрудничества с инженерами. JavaScript, возможно, любимый язык сценариев в Интернете, имеет сильное сообщество, которое формирует будущее Интернета с помощью фреймворков, которые он создает.

Из-за своей структуры и технических ограничений такие фреймворки, как Vue.js, React.js и Material UI, важны для дизайнеров, поскольку они служат строительными блоками для надежных систем проектирования. Кроме того, знание того, как работает код, также пригодится при использовании методов проектирования на основе данных в среде разработки, такой как A/B-тесты.

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

Обсудив проект с техническим руководителем, было установлено, что в принципе приложение достаточно простое: клиницистам нужна возможность создавать и редактировать профили пациентов, просматривать библиотеку оздоровительных мероприятий и назначать уроки пациентам.

Команда решила привести дизайн проекта в соответствие с фреймворком пользовательского интерфейса материалов, используя базовые элементы, такие как всплывающие окна, карты отображения, активные/неактивные кнопки, списки аккордеонов, а также серию уведомлений об успешном выполнении и предупреждений. После определения компонентов, которые должны были составить базовые элементы, команда разработчиков высказала различные мнения по поводу макета приложения.

Во время обсуждения дизайна пользовательского интерфейса проекта разработчик объяснил разницу между функциональными компонентами и компонентами отображения и то, как функциональные компоненты управляют потоком данных приложения, в то время как компоненты отображения имеют отношение к пользовательскому интерфейсу и макету.

Проще говоря, компоненты отображения определяют визуальный язык приложения, а функциональные компоненты помогают воплотить их в жизнь .

Эта структура предлагает дизайнерам уникальные возможности, поскольку обычно код, связанный с управлением логикой приложения, изолирован в файле, отдельном от файла, управляющего макетом пользовательского интерфейса. При правильном выполнении такой подход к проектированию программного обеспечения обеспечивает модульную и надежную кодовую базу , которая позволяет осуществлять процесс, основанный на тестировании.

Можно ли протестировать идентичные функции в альтернативных макетах с минимальными инженерными усилиями? Ответ «Да», и если использовать метод A/B в самом начале процесса, он будет встроен в жизненный цикл разработки бережливого продукта. (Бережливая разработка продукта является побочным продуктом японской концепции кайдзен, бизнес-философии постепенного улучшения рабочих процессов, практик, методов и, в данном случае, продуктов.)

Эрик Рис, серийный предприниматель и писатель, обсуждает практическое руководство по жизненному циклу разработки бережливого продукта в своей книге «Бережливый стартап ». Метод следует рабочему процессу создания продуктов с четкой гипотезой, тестированию того, что было создано, и итерации на основе того, что было изучено.

Метод бережливого стартапа

Определение подхода к A/B-тестированию

A/B-тестирование является основным компонентом набора инструментов любого опытного UX-профессионала. Его роль в жизненном цикле разработки программного обеспечения заключается в повышении удобства использования приложений. В сочетании с данными тепловой карты команды могут получить ценную информацию о поведении пользователей, особенно когда речь идет о точках трения в потоке приложения.

Перед началом A/B-тестирования задайте несколько вопросов, чтобы сфокусировать процесс:

• Как A/B-тестирование используется в UX?
• Какие методы A/B анализа доступны?
• Зачем разрабатывать A/B-тесты во время вайрфрейминга?
• Что мы тестируем?

Самый распространенный метод масштабного A/B-тестирования — это сплит-тест , который обслуживает несколько разных версий приложения или веб-сайта для реальных пользователей. Сплит-тест часто выходит за рамки возможностей и/или бюджета стартапа или малого бизнеса. Однако существуют более доступные альтернативы широкомасштабному сплит-тестированию, в том числе: личные интервью, фокус-группы и онлайн-сервисы, которые соединяют вас с сетью тестовых пользователей.

Дизайн, основанный на A/B-тестировании

В процессе создания макета важно учитывать возможности A/B-тестирования с точки зрения макета и навигации. Простые вариации компонентов дисплея могут легко изменить представление информации. Платформы, основанные на компонентах, дают вам свободу экспериментировать с организацией контента без необходимости переделывать основные функциональные возможности продукта.

Как и любое дизайнерское мероприятие, эффективное A/B-тестирование должно следовать четко определенной методологии. Во-первых, решите, какую переменную вы тестируете. Затем определите, что представляет собой успех. Закончите оценкой данных и определите, каким должен быть следующий шаг.

Например, в одном случае тестировалась иерархия макетов. Макет A состоял из сетки из двух столбцов, в которой компонент списка пациентов находился в левой части экрана, а компонент профиля пациента — в правой части. Макет B имел список пациентов в один столбец, по которому можно было перейти к компоненту профиля пациента.

Наш первый тест был на ясность. Во время интервью мы спросили клинических консультантов, какой из двух дизайнов показался нам наиболее организованным. Вопреки внутренним предположениям, одноколоночная сетка была настоятельно рекомендована как более интуитивно понятное дизайнерское решение. Наши консультанты сочли, что комбинация списка пациентов и профиля на одном дисплее казалась «занятой» и «беспорядочной». Напротив, слова, используемые для описания макета сетки с одним столбцом, были четкими и «чистыми».

«Компонентная модель коробки»

Для этого веб-приложения мы использовали React — фреймворк, основанный на концепциях управления состоянием и модульных компонентах. React — это декларативная, эффективная и гибкая библиотека JavaScript для создания пользовательских интерфейсов. Он позволяет создавать сложные пользовательские интерфейсы из небольших изолированных фрагментов кода, называемых «компонентами». Эта модульность обеспечивает гибкость при работе над продуктом с участием как разработчиков, так и дизайнеров.

Я пришел к пониманию этой структуры, вдохновившись блочной моделью HTML+CSS. Блочная модель компонентов предлагает организационную модальность для создания строительных блоков для приложения. Он особенно хорошо подходит для разработки системы дизайна для быстро развивающихся проектов.

Чтобы дизайн-мышление оставалось гибким, можно следовать набору принципов проектирования, особенно хорошо подходящих для жизненного цикла бережливой разработки продукта.

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

Группировка похожих контекстов

Рассмотрите ментальную модель ваших пользователей — сгруппируйте похожие результаты и действия на основе их «контекста использования». Подумайте, нужно ли пользователям создавать, читать, обновлять и удалять элементы в каждом контексте, и нужно ли вам предоставлять какие-либо отзывы об их действиях. При определении A/B-теста для конкретного сценария использования учитывайте макет, способ доступа к входам и методы навигации.

Упростите поток взаимодействия «состояния»

В React поток «состояния» относится к тому, как информация перемещается по приложению, как компоненты помогают организовывать данные и как они отображаются. Как правило, состояние перетекает в компоненты отображения из функциональных компонентов, действующих как контейнеры. Дизайнеры могут подготовиться к A/B-тестам, заранее наметив, как функциональные компоненты могут изменить макет приложения, изменив способ оценки компонентов дисплея.

Разработка надежных систем проектирования

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

Резюме

Успех дизайна, основанного на A/B-тестировании, связан с синергией между продуктовой и технической командами. Дизайнеры, желающие внедрить этот метод, должны точно знать, где и как проводить тестирование. Потратьте время на разработку гипотезы и определение того, что вы надеетесь узнать. Не отвлекайтесь. Придерживайтесь этого — очень легко отклониться от вашего метода.

Этот процесс никогда не заканчивается и развивается по мере роста продукта. Разработчики, использующие стратегию разработки продукта на основе тестирования, должны использовать возможности для обучения, возникающие на протяжении всего жизненного цикла разработки продукта.

Компоненты, как и дизайн-системы, связаны с модульностью и возможностью повторного использования шаблонов, а не с компоновкой или стилем. С точки зрения дизайнера, возможность тестировать, уточнять и улучшать продукты с помощью A/B-тестирования может помочь в разработке продуктов, более ориентированных на пользователя, что в конечном итоге приведет к их большему успеху.

•••

Дальнейшее чтение в блоге Toptal Design:

• Использование ментальных моделей в UX-дизайне
• UX-тестирование для масс: сделайте его простым и экономичным
• Фундаментальное руководство по удобству использования мобильных устройств
• Ценность исследования пользователей
• Понимание систем дизайна и шаблонов