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

Для начала, кратко, что такое коридорное тестирование (с англ. Hallway testing, Five-Second Testing) — это один из наиболее простых видов тестирования, при котором продуктовая команда может проверить макет или прототип своей программы на людях, которых встретили в коридоре или на улице. Применяется на ранних этапах проектирования. Как правило, к процессу привлекаются всего несколько человек.

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

Здесь я поделюсь с вами своим опытом, в применении коридорного тестирования, и отвечу на вопрос — «Каким образом метод помогает минимизировать ошибки продуктового дизайна?». 

И да, меня зовут Армине. Я  продуктовый дизайнер MyQRcards.

Ранее при проектировании продукта я допускала типовые ошибки, которых можно было бы избежать. После внедрения на регулярной основе коридорного тестирования количество таких типовых ошибок сократилось в разы. Что, в свою очередь позволило минимизировать доработки интерфейса и переделывание продукта, не затрачивая время и ресурсы команды на масштабное UX-тестирование.

Расскажу на конкретном примере, как мы сделали редизайн нашего продукта — популярного сервиса электронных визиток MyQRcards. 

Для начала, что такое MyQRcards?

MyQRcards - российский online-сервис, позволяющий создавать электронные умные визитки.

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

Корпоративным пользователям доступен личный кабинет, в котором можно централизованно выдавать визитки сотрудникам компании. Помимо программных продуктов, в экосистему MyQRcards входят NFC карты-визитки, пропуска для доступа в офис, совмещенные с электронной визиткой, и различные SMART-аксессуары.

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

Мои продуктовые задачи в проекте  на примере редизайна основной страницы мобильного приложения MyQRcards

Задача: сделать редизайн основной страницы продукта MyQRcards.

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

1 этап: Анализ текущей ситуации

Взаимодействие пользователя с приложением начиналось с первой страницей (рисунок 1): пользователь мог поделиться QR-кодом визитки, также он имел возможность посмотреть на свою визитку в веб-версии и при нажатии на троеточие у пользователя была возможность редактировать или удалить визитку.

На основе опыта более 2 000 активных пользователей нашего приложения я выделила основные боли пользователей. Также было предложено более 5 новых фич, актуальных для юзеров.

Основные проблемы или боли пользователей при использовании приложения MyQRcards:

• Пользователь визуально не видел свою визитку при открытии приложения.

• Пользователь не мог быстро и без когнитивной нагрузки понять какая информация заполнена в его визитке.

• Было затруднено быстрое редактирование визитки при необходимости.

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

• Появилась возможность получить карту бесплатно (добавленная фича).

• Появилась возможность скачать свою визитку (добавленная фича).

• Аналитика по использованию визиток (добавленная фича).

• Привязка QR-кода.

• Визуально различать свои визитки, если их несколько. 

2 этап: Проектирование

После выявленных болей пользователей я начала проектировать первую страницу мобильного приложения сервиса электронных визиток MyQRcards в новом дизайне. Не буду подробно углубляться в user flow, покажу только результат, и вот что получилось.

Какие улучшения я сделала в первом варианте дизайна:

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

2. Также на визитке видно, какие поля заполнял пользователь, присутствие фото, какие социальные сети есть у пользователя и другие дополнительные поля.

3. При клике на визитку она поворачивается, и пользователь видит QR-код визитки и может им поделиться.

4. Кнопку QR-кода на основе собранной статистики я решила продублировать также внизу экрана, т.к. было ясно, что пользователи не сразу поймут, что можно кликать на карточку визитки.

5. В нижней части экрана я расположила следующие кнопки: «редактировать визитку», «посмотреть визитку в веб», «привязать QR-код» и кнопку «поделиться визиткой», при нажатии которой, пользователь может выбрать один из нескольких способов, с помощью которых можно делиться своей визиткой — ссылка, .vsf визитка или же QR-код.

Теперь, после первого варианта дизайна необходимо протестировать интерфейс, понять все ли потребности я учла и на сколько юзерфрендли получился интерфейс. 

3 этап. Коридорное тестирование

1 шаг:

Я как правило, провожу сперва коридорное тестирование с QA-инженерами, далее с менеджерами по внедрению, и уже только потом, в самом конце провожу тест с разработчиками. Отвечу на вопрос — «Почему»?

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

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

2 шаг:

Далее провожу тестирование с менеджерами по внедрению, они тоже важные герои моего рассказа. Они часто общаются с клиентами, знают их боли и смотрят на продукт зачастую глазами клиента.

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

3 шаг:

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

Какие изменения предложил разработчик:

1. Мы перенесли иконку «редактирование» на верхний правый угол, расположили рядом с названием визитки, вместо иконки добавления визитки.

2. Иконку «посмотреть визитку» мы также расположили на карточке визитки.

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

Вот такой простой прием, который из себя представляет гибридное коридорное тестирование, я придумала и применяю при разработке дизайна интерфейсов.

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

Надеюсь, прием будет полезным, применяйте, пишите обратную связь!

Буду рада вашим вопросам!