company_banner

Тестируем и визуализируем с помощью Mind Map

    Hello, Хабр!

    Меня зовут Андреев Александр, я инженер по качеству в Quadcode, и повествование полученного опыта буду вести на примере внедрения такого метода как Mind Map в команде тестирования Android приложения.

    О методе, кратко

    Итак, ментальная карта, интеллект-карта, карта мыслей, диаграмма связей или – Mind Map. Самые ранние упоминания о графических записях такого вида датируются 3 веком н. э. А в современном представлении, методика была разработана психологом Тони Бьюзеном в конце 1960-х годов (по ссылке на Википедию больше исторических подробностей). Для себя же, понятие/определение вывел в следующем виде:

    Mind Map – это метод/инструмент визуального отображения информации, который позволяет эффективно структурировать, декомпозировать, и, соответственно, визуально эффективнее обрабатывать сформированную этим методом информацию.

    Забегая немного вперед, хочется сказать, что мы, естественно, полностью не перешли на использование Mind Map и продолжаем пользоваться тест-кейсами и чек-листами в рабочем процессе. Но! Использование Mind Map однозначно помогает сформировать четкую картину взаимодействия функциональностей, различных и возможных исходов. Об этом расскажу ниже.


    По ссылке выше на Вики, автор этой методики указан Тони Бьюзен. В процессе изучения информации о его личности, в рекомендациях упоминаются его книги.  Книга “Интеллект-карт: разветвленное мышление” именно про составление Mind Map. У Бьюзена также есть много работ, касающихся мозга, духовного интеллекта, памяти, креативности, скорости чтения, и прочее. Сам я в процессе покупки нескольких его книг. Судя по отзывам, они стоящие для изучения/прочтения/впитывания информации, поэтому советую обратить внимание. Возможно, вас что-то зацепит, и книга станет знаковой в вашей жизни (у меня такое было, поэтому делаю акцент =) ).

    О том, как составляли Mind Map

    После прочтения нескольких статей на тему Mind Map’ов и просмотра видеороликов, было принято решение “не ждать у моря погоды”.

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

    В центр мы поместили название функциональности – Proof of Identity и Proof of Address (далее по тексту и на самой Mind Map – POI/POA) – и начали отводить ветви по категориями, ориентируясь на документацию и макеты:

    • Общий начальный экран POI & POA (так как он относится к обеим функциональностям и на нем есть незначительные изменения, мы вынесли его в отдельную категорию);

    • Функциональность POI;

    • Функциональность POA;

    • Feature Name;

    • UI (user interface);

    • Mobile Device Specific Case;

    • QA Check Flow;

    Далее, от этих категорий ещё раз отвели ветви по категориям, и уже эти категории декомпозировали подробнее, соблюдая то, что для нас важно учитывать/проверить/понять при взгляде на эту категорию:

    • категории “Функциональность POA” и “Функциональность POI” декомпозировали на названия новых экранов, и, далее, в них последовательно добавляли нужные нам ветви, и + добавили ветви “Special cases” (не для всех категорий, а там, где нужно, что удобно);

      Категории “Функциональность POA” и “Функциональность POI”. Этот скрин и скрины далее, сделаны в сервисе Miro. О самом сервисе будет отдельный абзац ниже.
      Категории “Функциональность POA” и “Функциональность POI”. Этот скрин и скрины далее, сделаны в сервисе Miro. О самом сервисе будет отдельный абзац ниже.

    (по ссылке, доступно увеличенное изображение для просмотра)

    А нижеперечисленные категории назвали так, чтобы их можно было просто скопировать для следующих Mind Map, так как они будут использоваться при каждом тестировании:

    • Feature Name. В комментарии указываем название фичи (удобно, так как не нужно менять название категории при каждом копировании);

      Категория Feature Name. Пример отображения комментария.
      Категория Feature Name. Пример отображения комментария.
    • UI. Добавляем ссылку на макеты и декомпозируем на пулл проверок, который нам нужен;

      Категория UI
      Категория UI
    • Mobile Device Specific Case. Декомпозировали в рамках функциональности фичи;

      Категория Mobile Device Specific Case
      Категория Mobile Device Specific Case
    • QA Check Flow. Тут мы договорились, что на уровне команды, будем составлять пулл вариантов для проверок, которые 100% должны проходить, чтобы считать что ревью пройдено успешно, и + как будем отслеживать;

      Категория QA Check Flow. Пример “легенды” для отслеживания успешности прохождения тестов.
      Категория QA Check Flow. Пример “легенды” для отслеживания успешности прохождения тестов.

    Далее, добавили стрелки с названием кнопок (можно видеть на итоговом виде Mind Map’a), чтобы визуально понимать, на какой экран юзеры должны попадать при нажатии с конкретного экрана, и какой экран за каким следует. У нас получилось не так много стрелок и это хорошо, потому как их большое количество может только отталкивать или просто путать человека еще в начале “прочтения” вашей Mind Map. Кстати, для того, чтобы стрелок было меньше, мы использовали link’и. При тапе выполняется навигация к той категории, которую мы указали в link’е. Например, в тех местах, где видно, что это не часто используемый кейс, стрелка может показаться лишней, а вот зацепить link лишним не будет.

    Пример link’a по переходу к нужной категории.
    Пример link’a по переходу к нужной категории.

    После выполнения всех шагов выше, а также, внесения изменений на карту в процессе уточнения деталей по документации и дизайну, мы получили наш великолепный Mind Map по тестированию POI/POA во всей его красе.

    Итоговый вид Mind Map для функциональности POI/POA
    Итоговый вид Mind Map для функциональности POI/POA

    (по ссылке, доступно увеличенное изображение для просмотра)

    Личное впечатление

    Если хотите воспользоваться методом Mind Map, то главное поместите в центр идею, например, про развитие вашего стартапа или, например, повседневную задачу – купить билеты в Париж =). И далее уже визуализируйте возможные варианты/категории для их дальнейшей декомпозиции. Всё это будет находиться в поле вашего зрения, и мыслительные процессы, которые вы будете производить в ходе визуализации, и будут ключом к тому, что вы будете воспринимать n-ый объем информации гораздо качественнее, точнее и структурированнее.

    О плюсах:

    • Скорость считывания информации;

    • Видно всю “картину” шаг за шагом;

    • Удобная оценка возможных взаимосвязей;

    • Возможность моментально оценить итог по отдельно взятой категории;

    • Расположение всей нужной информации в одном месте;

    • Команда в онлайне может работать над созданием набора пула категорий для своих User Story на одной доске;

    • Название любой категории можно сделать в виде ссылки (например: ссылка на User Story в Bug Tracker. Сразу открываем и заводим баг, если что-то нашли на экране конкретной US. Или ссылка на макеты в Figma);

    • Каждой ветке можно присваивать цвета (например: при проверке, шаг за шагом отмечать, что проверено, и наоборот, если где-то баг, то сразу при входе на доску, это будет видно);

    • Для создания следующих Mind Map’ов уже готова заготовка с категориями, которые проверяются всегда, просто делаем “Ctrl-C ---> Ctrl-V” (в нашем случае, мы проводим пулл определенных проверок для тестирования на мобильных девайсах).

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

    О минусах/нюансах:

    • Данный метод может подойти не каждому, так как все люди достаточно разные, и кому-то удобнее/эффективнее воспринимать информацию в привычном линейном виде;

    • Есть вопросы об использовании Mind Map, для описания большИх функциональностей (огромный “клубок ниток” может ввести только в заблуждение). В связи с этим, не самый лучший метод, если всё-таки задачу нужно описывать максимально подробно;

    О софте

    Для составления Mind Map мы пользовались сервисом Miro. Так как внутри компании Miro используется и для ретроспектив, и для построения Road Map’ов, а также в нем есть возможность построения Mind Map’ов, мы решили попробовать именно этот сервис, в рамках нашего первого опыта. Функциональность и скрины, описанные выше сделаны в рамках этого сервиса.

    При создании Mind Map в Miro, столкнулись с одним непонятным моментом. При копировании отдельной ветки с категорией и ее последующее присоединение к другой ветке невозможно. То есть, нельзя скопировать ветку и присоединить её к этой же Mind Map. Возможно, кто-нибудь знает, как это делается, но мы не поняли. В остальном– всё максимально функционально, удобно и понятно.
    На момент выхода текста в публикацию, уже стало возможным. Нужно скопированный элемент поднести к категории, к которой хотим добавить скопированную ветвь, и Miro автоматически будет предлагать зацепление к категории, которая рядом.

    В целом, сервисов для составления Mind Map достаточное количество на любой “вкус и цвет”. Их можно легко найти в поиске по запросу “составить mind map”, например, почитать о каждом, попробовать, посмотреть предложения и выбрать для себя подходящий.

    Итог

    Опыт работы с методом Mind Map, безусловно, произвел положительные впечатления. Мы однозначно будем продолжать его использовать.

    Есть четкое ощущение, что в разных сферах, и при решении других задач, наша “подопытная” Mind Map, может быть совершенно разной, и нужно оценивать ситуацию перед её использованием: а не будет ли она, наоборот, только тормозить рабочий процесс и восприятие информации? Если бы описанная выше фича имела бОльший функционал, то была бы Mind Map логичной для использования? Это важный момент и вопросы.

    В плане рабочего процесса, пришли к идеи создания Mind Map’a с набором категорий по функциональностям, которые проходят обязательные проверки перед публикацией приложения в Google Play Store. Посмотрим, что получится.

    Так как тема довольно интересная, буду рад, если поделитесь своим опытом использования Mind Map, или полезными материалами на эту тему :)

    Спасибо за внимание! 

    Quadcode
    Финтех-компания

    Комментарии 7

      0
      нет ли какого либо скрипта или программы для генерации карт памяти по тексту?
        0

        graphviz.org

          0
          Спасибо, что поделились!
          0
          Мы, в рамках опыта описанного выше, не использовали такой подход.
          А вот ссылкой, которой поделился eaa, по заявленному в “Features”, как раз про Ваш запрос!)
          0
          я обычно использую майнд мапы для хранения доки и записей по проекту в коде самого проекта (плагин для idea и netbeans присутствует), чеклисты и разборы таск в них хорошо делать ну и вообще вести своего рода конспекты
            0
            Интересные варианты применения, спасибо, что поделились своим опытом и материалами!)

            Да, про плагин для IDEA читал, что существует и используют, когда первоначально изучал материал по mind map, выглядит очень удобным инструментом.
            («плагин для idea и netbeans присутствует» по этой ссылке ведет на sciatreto.org, но сайт на данный момент недоступен)
              0
              опечатался в ссылке, правильная sciareto.org

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

          Самое читаемое