Тестирование UI в мобильных приложениях

Процесс разработки макета и продукта (например, мобильного приложения) начинается с CX (Customer Experience) — и постепенно сужается к UX (User Experience) и UI (User Interface). Иными словами, сначала формируется стратегическое видение, затем — удобство использования, и в конце — визуальная реализация.

Разберёмся подробнее.

1. CX (Customer Experience) – определение общей стратегии

• Разработка начинается с понимания потребностей клиента и его опыта взаимодействия с брендом. Это включает определение целей продукта и бренда.
• Разрабатывается маркетинговая стратегия.
• Рассматриваются все точки взаимодействия клиента с продуктом: от обслуживания клиентов до продаж.
• На этом этапе разрабатывается концепция, которая должна учитывать не только цифровой опыт, но и не диджитальные аспекты (например, сопутствующие товары или услуги).

2. UX (User Experience) – взаимодействие пользователя с продуктом

• На этом этапе создается структура и логика взаимодействия пользователя с продуктом, а именно происходит формирование информационной архитектуры (IA) для упрощения навигации в приложении.
• Здесь разрабатываются пользовательские сценарии и прорабатывается весь путь пользователя от первой точки взаимодействия до достижения цели (например, покупки или оформления подписки в приложении).

3. UI (User Interface) – этап проектирования интерфейса

• Финальный этап связан с созданием визуала (тут проектируется дизайн, элементы интерфейса).
• Разрабатывается анимация для улучшения восприятия интерфейса.
• Идет проработка интерактивных элементов, таких как кнопки, переходы, свайпы и т.д.
• В итоге должен появиться макет, готовый к реализации в разработке.

Давайте остановимся и подробнее разберемся с двумя из этих определений подробнее.

UI (User Interface) — это, как мы уже поняли, пользовательский интерфейс, то есть то, с чем взаимодействует пользователь при использовании любого приложения, сайта или другого цифрового продукта. Он включает в себя все визуальные и интерактивные элементы, которые позволяют пользователю выполнять задачи, такие как кнопки, формы, меню, иконки, цвета, шрифты и общую структуру экрана.

Многие QA сейчас подумают: «Так ведь мы это и проверяем каждый раз», — и будут абсолютно правы. Однако степень вовлечения в тестирование UI может значительно варьироваться от компании к компании. В одних организациях ответственность за соответствие макетам полностью возлагается на QA, тогда как в других часть проверок выполняется QA, а финальная проверка осуществляется в рамках дизайн-ревью.

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

В своей работе QA тесно взаимодействуют с UX/UI-дизайнерами, чтобы находить и устранять проблемы, которые могут повлиять на пользовательский опыт. А что же такое UX/UI-дизайн?

UX/UI-дизайн — это область, которая занимается созданием удобных, интуитивно понятных и эстетически привлекательных интерфейсов для пользователей.

В определении выше вы можете увидеть сразу две аббревиатуры: UX и UI.

UX-дизайн (User Experience) фокусируется на том, как пользователь взаимодействует с продуктом: насколько легко и приятно выполнять задачи, достигаются ли цели пользователя и насколько эффективен сам процесс. Задача UX-дизайнера – исследовать потребности пользователей, проектировать структуру и логику интерфейсов, создавать прототипы и тестировать их.

В некоторых компаниях существуют даже целые лаборатории UX, где специалисты проводят исследования, тестируют гипотезы и оценивают взаимодействие пользователей с продуктом. Например, в Москве открыт офис Alfa Research Center – своего рода пространство для тестирования и изучения пользовательского опыта. Аналогичные лаборатории есть и у Google, VK и многих других компаний.

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

Сравнение макетов с реализацией

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

Скачайте и установите десктопную версию Figma.

Откройте нужный проект в Figma и выделите требуемый фрейм (это базовый контейнер или область, в которой размещаются элементы дизайна, такие как кнопки, текст, изображения и другие компоненты).

Нажмите CMD+C (для Mac) или Ctrl+C (для Windows) для копирования фрейма.

Создайте новый проект, зайдите в ваш документ, затем вставьте скопированный фрейм с помощью CMD+V (для Mac) или Ctrl+V (для Windows).

Размеры скриншотов

Убедитесь, что размеры скриншотов соответствуют следующим параметрам:

iOS:

• Разрешение: 1125×2436
• Устройства: iPhone X и iPhone 11 Pro в симуляторе.

Android:

• Разрешение: 1080×2280
• Устройство: Pixel 3a в симуляторе.
• Важно: в настройках разработчика (Developer options) установите ширину экрана на 360 dp.

Примечание: высота скриншота может незначительно отличаться, но ширина должна быть точной:

• 375 px для iOS.
• 360 px для Android.

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

Разрешение 1125×2436 соответствует экранам iPhone X и iPhone 11 Pro с шириной 375 px в точках (points), что является стандартом для iOS-разработки.

Для Android разрешение 1080×2280 и ширина 360 dp обеспечивают соответствие экрану Pixel 3a, одного из референсных устройств для тестирования, где 360 dp является минимально рекомендуемой шириной для адаптации интерфейса.

Такой подход гарантирует корректное отображение UI на устройствах с разным dpi и обеспечивает унифицированные проверки дизайна.

А что это тогда за обозначения px, dp и dpi?

px (пиксели) – это единица измерения, которая используется для обозначения точек на экране. Она представляет собой минимальную единицу, которая может быть отображена на экране. В контексте мобильных устройств пиксели зависят от разрешения экрана (например, 1125x2436 пикселей — это разрешение экрана).

dp (density-independent pixels) – это относительная единица измерения, которая берёт за основу плотность экрана устройства.

dpi (dots per inch, точки на дюйм) – плотность пикселей на экране, показывает, сколько пикселей помещается в одном дюйме. Чем выше dpi, тем четче экран. В контексте мобильных устройств dpi используется для обозначения плотности пикселей и позволяет классифицировать устройства по категориям, таким как "mdpi" (160 dpi), "hdpi" (240 dpi), "xhdpi" (320 dpi), "xxhdpi" (480 dpi), и так далее. Чем выше значение dpi, тем больше пикселей на экране, что влияет на четкость и детализацию изображения.

Подробнее об этом можно узнать в отличной статье — руководстве для дизайнеров по DPI.

Вставьте скриншот на канву (справа).

Наложите скриншот на соответствующий фрейм макета.

Настройте прозрачность наложенного скриншота, чтобы были видны оба слоя (макет и скриншот).

Проверьте расхождения между макетом и разработкой, анализируя наложенные элементы.

Полезные хоткеи в Figma

• CMD+SHIFT+K (MAC) или CTRL+SHIFT+K(Windows) — вставка изображения.
• SHIFT+2 (MAC/Windows) — масштабирование канвы так, чтобы весь контент был виден.
• SHIFT+0 (MAC/Windows) — зум до 100% (оригинальный размер экрана).
• CMD+скролл мыши (MAC) или CTRL+скролл мыши — плавное масштабирование.
• CMD+ (MAC) или CTRL+\ (Windows)— скрытие интерфейса Figma.

Обсудить статью, узнать больше можно в телеграм канале «Тестировщики нужны».