И неожиданные преимущества использования инструмента воспроизведения сеанса
Приложения все время терпят неудачу, мы, разработчики, знаем это, и мы единственные, кто действительно принимает этот факт. Но мы также знаем, что у каждой проблемы есть решение. Конечно, эти решения не всегда легко найти или создать, но мы можем их достичь.
На самом деле проблема заключается не в том, чтобы найти решение, а скорее в том, чтобы понять первопричину наших проблем, чтобы затем мы могли их решить. Иногда ошибки бывают простыми, иногда это просто отсутствие точки с запятой или + вместо -. Но в других случаях проблемы настолько сложны, что мы не можем их найти, пока реальные пользователи не начнут взаимодействовать с нашими приложениями.
И даже в этом случае традиционные способы решения этих проблем не оптимальны, поэтому давайте посмотрим, как мы можем изменить это, используя очень специфический тип инструмента.
Проблема с традиционным подходом
Что вы обычно делаете, когда получаете отчет об ошибке? Вы пытаетесь воспроизвести это, не так ли? Вы читаете свои шаги воспроизведения (если вам повезло, что они у вас есть) и выполняете их один за другим.
В конце концов, вы обязательно найдете ту же проблему, и, покопавшись еще немного, вы сможете добраться до причины своих бессонных ночей.
Может быть.
В других случаях в отчетах об ошибках говорится, что «пользователь жалуется на то, что приложение не работает» или, что еще хуже, «приложение иногда работает, но когда я нажимаю красную кнопку, оно перестает работать». И вам остается только гадать, о какой из 10 красных кнопок во всем вашем приложении говорит пользователь, например
Конечно, есть инструменты, которые вы можете использовать, чтобы связаться с ними, звонки, которые вы можете сделать напрямую, чтобы поделиться своим экраном (если они могут понять, как это сделать через Zoom), чтобы вы могли видеть, что они делают.
Ключевая проблема здесь в том, что вы имеете дело с ошибкой, возникшей не в вашем коде, а в поведении вашего пользователя. Они взаимодействуют с вашим приложением так, как вы этого не ожидаете, и это убивает вашу бизнес-логику.
Это их вина? Неа. Но найти решение в этих случаях непросто, если только вы не сможете точно увидеть, что они делают, ошибку, которую они видят, когда они это делают, и проверить окно их браузера на детали DevTools, когда это произойдет.
Проблема в том, что для этого вам нужно быть рядом с ними, когда это произойдет. Верно?
Неправильный.
Воспроизведение сеанса для спасения
Повтор сеанса — это возможность точно просмотреть, что происходит в чужом браузере, но позднее. И нет, я не говорю о записанном снимке экрана, этого было бы недостаточно, потому что это не позволило бы вам поиграться с деталями, изучить инструменты разработчика и посмотреть, какие всплывающие ошибки JavaScript, которые были невидимы для пользователя.
Я говорю о прямом воспроизведении реального DOM, изменяющегося каждую секунду.
Как это круто?
Есть несколько инструментов, которые уже позволяют это сделать:
- SmartLook, например, позволяет фиксировать сеансы для Интернета и мобильных устройств.
- Dyantrace также имеет встроенный инструмент мониторинга сессий.
И есть много других, но сегодня я хочу поговорить об OpenReplay. Почему именно этот? Потому что это единственное, что я нашел, которое предоставляет полностью работающую версию с открытым исходным кодом, которую вы можете скачать и установить для себя.
У них также есть версия SaaS, которая совершенно бесплатна, если вы регистрируете менее 1000 сеансов в месяц. Вам не нужна кредитная карта для регистрации, и вы можете начать работу всего за несколько кликов.
Но тот факт, что вы можете бесплатно установить себе программное обеспечение, означает, что у вас есть полный контроль над данными, сохраняемыми от ваших пользователей. В конце концов, вы фиксируете их ввод, и хотя у вас есть возможность очистить эту информацию, чтобы избежать захвата нежелательных данных, вы все равно будете уверены в том, что делается с остальной захваченной информацией. Это, учитывая сегодняшние проблемы безопасности, бесценно.
Итак, что вы получаете при регистрации?
Чем хорош OpenReplay?
После регистрации вам будет предоставлен фрагмент кода JavaScript, который необходимо добавить в свой код. Он работает так же, как фрагмент Google Analytics, вы копируете и вставляете его туда, и он просто работает.
Конечно, у вас есть полный SDK для добавления пользовательских событий, задач и многих других опций. Но только с фрагментом вы уже готовы начать.
На следующем изображении показан основной пользовательский интерфейс воспроизводимой записи:
Обратите внимание, как на этом снимке экрана вы видите приложение вверху и вкладку «Сеть» под ним. Вы видите запись того, как я тестирую свое тестовое приложение. Вкладка «Сеть» полностью динамическая и обновляется в режиме реального времени данными, записанными как часть сеанса.
А вот запись того, как я играю одну из своих сессий:
Обратите внимание, как через несколько секунд после того, как я нажму кнопку для воспроизведения, черный указатель мыши начнет двигаться (это исходная мышь двигалась так, как я двигал ее во время записи сеанса). Когда это происходит, начинают двигаться несколько вещей:
- Вы можете видеть на главном экране, как мышь начинает двигаться, и мой ввод начинает волшебным образом появляться в каждом поле.
- С правой стороны вы можете увидеть пользовательские события (мои клики и входы). Они выделяются по мере их возникновения. Вы можете щелкнуть их и перейти к метке времени каждого события.
- Прямо под основным экраном вы можете увидеть временную шкалу, как у видео. Вы можете щелкнуть ее, чтобы перейти из одного места в другое в сеансе.
!есть проблемы, обнаруженные во время записи. Имейте в виду, что это проблемы не с сеансом, а с моим приложением (ужасно!)
Поскольку мое приложение имеет очень простую форму, единственные проблемы, которые обнаруживает OpenReplay, — это мертвые клики, когда пользователь щелкнул где-то на моей странице, и ничего не произошло. Это не ошибка сама по себе, но указывает на то, что пользователь, возможно, пытается сделать что-то, что невозможно сделать (например, щелкнуть неработающую ссылку).
Теперь для своих тестов я использую это базовое приложение, которое предоставляет только простую форму, встроенную в React. В целях тестирования я добавил случайный оператор throw при отправке формы. После записи нового сеанса и попытки отправить форму 4 раза вы можете увидеть эти незавершенные исключения, показанные на повторе:
Временная шкала показывает ошибки при каждом нажатии кнопки «Отправить». Вы даже можете видеть, что на момент скриншота я уже 3 раза попал в него, и был еще один, но он все еще не засеян на нижний раздел, потому что этого не произошло.
Если бы я нажал на эти ошибки, перечисленные там, я бы получил подробную информацию об исключении, как вы можете видеть ниже:
Вы получаете трассировку стека и подробности ошибки. Если бы вы загрузили сопоставление для сгенерированного кода, вы также получили бы подробные сведения о проблеме на уровне строк.
Вы не можете получить это, используя захват экрана.
Сколько у вас пользователей?
Не то чтобы это было проблемой, но мысль о хранении и прохождении бесчисленных сеансов воспроизведения может быть пугающей.
К счастью для нас, команда OpenReplay подумала об этом и создала очень мощную функцию поиска, которая позволяет пользователям создавать сложные поиски с помощью механики «укажи и щелкни».
Посмотрите на следующий поиск, который я настроил:
Заметил, как ищу сеансы, в которых вводил слово «комментарий» с последующим нажатием на кнопку «Отправить». Вы также можете добавить условия И и ИЛИ, чтобы сделать его еще более интересным.
Если вы случайно знаете, что существует определенный набор действий, вызывающих ошибку или неожиданное поведение, вы можете напрямую найти его здесь и проходить только те сеансы, которые следуют шаблону.
Неожиданное преимущество инструмента воспроизведения сеанса
Поработав некоторое время с этими инструментами, вы поймете, что это не просто инструмент для вашей команды разработчиков.
Эти типы инструментов дают вам представление о сознании конечного пользователя, которое хотели бы иметь многие другие отделы.
Повторы сеансов для анализа взаимодействия с пользователем
Возможность посмотреть, как ваши пользователи взаимодействуют с вашим приложением, — это то, за что ваша команда UX готова убить.
Хотя их может не интересовать содержимое вкладки «Сеть» или вкладки «Производительность», им будет очень интересно посмотреть на такие проблемы, как эпизоды Dead Clicks или Click Rage (когда пользователь щелкает несколько раз в одном и том же элементе). Это, например, очень красноречивые индикаторы, которые либо подтверждают результаты первоначальных предположений UX, либо предоставляют данные, необходимые для корректировки первоначального плана.
Поддержка ваших пользователей с помощью повторов сеансов
Это относится и к специалистам службы поддержки. Если у ваших клиентов возникают проблемы с выполнением определенных действий с вашим приложением, они могут обратиться к специалистам онлайн-поддержки и попросить их проанализировать повтор сеанса, чтобы понять, делают ли они что-то не так. Это очень мощный инструмент поддержки L1. Тем более, если вы можете заниматься этой жизнью, пока пользователь активно использует систему (что, кстати, и делает OpenReplay Assist).
Воспроизведение сеанса — это мощный инструмент для групп разработчиков, работающих над продуктом, ориентированным на пользователя. Но он также — возможно — в равной степени актуален и важен для других отделов, не связанных с разработкой, таких как поддержка и взаимодействие с пользователями, поэтому, если вы можете влиять на решения своей команды, подумайте о том, чтобы добавить этот инструмент в их арсенал.
Многие из них полюбят вас за это, но самое главное, ваши пользователи получат от них максимальную пользу.
И если мне удалось убедить вас попробовать, попробуйте OpenReplay, это бесплатно, и все функции включены по умолчанию.
Вы пытались воспроизвести сеанс в прошлом? Ты нашел это полезным?
