Как находить баги на сайтах


Как искать баги начинающему тестировщику? |

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

Что должен знать тестировщик?

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

  • Что необходимо протестировать?

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

  • Как может использоваться приложение?

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

  • Как сломать программу?

Провести тестирование программы с негативной точки зрения. Сюда входит ввод неверных данных и вызов исключительных ситуаций. Сценарии в этом случае направлены на проверку устойчивости системы.

  • Кто будет использовать приложение?

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

Как взаимодействуют с приложением разные пользователи?

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

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

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

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

Менеджер

Менеджер – занятой человек, он работает с приложением между встречами. Он нетерпелив и иногда не сосредоточен, так как все делает в спешке.

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

Ищем баги в процессе заполнения форм, скорости их отправки, адресов, по которым идет отправка, проверяем точно ли описаны этапы заполнения и требования к итоговому варианту.

Хипстер

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

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

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

Осторожный

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

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

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

Проказник

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

Его заинтересуют SQL и JavaScript-инъекции, манипулирование URL-адресами, получение доступа к личной информации, нарушение ограничений на поля ввода и генерация сообщений об ошибках.

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

Путешественник

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

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

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

Взрослый

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

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

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

В заключение

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

Изучайте теорию, практикуйтесь в тест-дизайне. Чтобы стать  QA-инженером, важно желание разбираться в том, как этот продукт работает сейчас и как он должен работать в принципе.

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

Успехов!

27 Советы по поиску ошибок на вашем сайте

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

Тест мобильной готовности

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

  • Создайте список устройств, на которых ваше приложение должно работать безупречно, с помощью Google Analytics.
  • Вы можете использовать расширения эмулятора мобильных устройств в браузерах для тестирования своего приложения.
  • Если бюджет проекта велик, вы можете предоставить своей группе тестирования несколько портативных устройств с различными операционными системами, чтобы можно было проводить тестирование в реальном времени.Так как определенные ошибки часто пропускаются эмуляторами.
  • Убедитесь, что нет горизонтальной прокрутки, шрифты и кнопки удобочитаемы и удобны для сенсорного ввода, а содержимое и изображения достаточно большие, чтобы их можно было разобрать на маленьком экране.

Кроссбраузерное тестирование

Прошли те времена, когда Internet Explorer был единственным браузером, доступным на рынке. Многие новые браузеры вводятся почти ежедневно, и часто веб-приложения, которые отлично работают в Google Chrome, не работают в Opera, Safari или других браузерах

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

Тестирование доступности

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

  • Проверьте, соответствует ли ваш веб-сайт разделу 508, ADA и другим правилам.
  • Выполните тестирование масштабируемости, чтобы убедиться, что веб-сайт доступен для чтения при увеличении изображений или шрифтов.
  • Тест программы чтения с экрана
  • необходимо выполнить, чтобы убедиться, что люди с плохим зрением могут перемещаться по странице с помощью программы чтения с экрана.
  • Сайт должен быть полностью управляемым с использованием только клавиатуры
  • Субтитры должны быть включены в медиа-контент, чтобы люди с нарушениями слуха могли понимать аудио и видео контент.

Общая проверка HTML и CSS

  • Убедитесь, что ваш код HTML или XHTML не содержит ошибок, проверив его с помощью W3C Markup Validation, официального инструмента проверки Консорциума World Wide Web.
  • Существуют и другие инструменты, такие как HTML Tidy, инструменты Google для веб-мастеров и т. Д., Которые могут искать в коде повторяющиеся метатеги, битые ссылки, отсутствующие заголовки или другие ошибки.
  • Служба проверки CSS, предоставляемая W3C, может использоваться для обнаружения любых ошибок или нарушений соответствия в вашем CSS.
  • После проверки кода предлагаемый инструмент, который можно использовать, - это CSS Compressor. Он минимизирует файл, сжав весь код в одну строку. Для большой страницы с тысячами строк CSS этот инструмент может ускорить время загрузки.

Тестирование безопасности для входа на сайт

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

  • Убедитесь, что учетная запись заблокирована после многократного ввода неверного пароля или идентификатора пользователя.
  • Обеспечьте предотвращение автоматического входа в систему с помощью таких методов, как проверка OTP или CAPTCHA при входе в систему.
  • Проверить шифрование файлов cookie и кеша.
  • После выхода пользователя из системы нажмите кнопку «Назад», чтобы убедиться, что сеанс просмотра истек.

Тестирование производительности приложения

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

  • Выполните стресс-тестирование, чтобы узнать, как сайт ведет себя при увеличении рабочей нагрузки.
  • Смоделируйте сеансы входа в систему нескольких пользователей и выполните тестирование параллелизма, чтобы выяснить, нормально ли ведет себя сайт.
  • Выполните тестирование на выносливость, чтобы проверить производительность веб-сайта, когда он сталкивается с чрезмерной нагрузкой.
  • Проверьте время загрузки приложения при слабом покрытии сети.

Бета-тестирование реальными пользователями

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

  • Бета-тестирование очень важно, поскольку пользователи перемещаются по сайту и склонны обнаруживать любые слабые места со своей точки зрения.
  • Ваша группа тестирования следует набору правил для выполнения модульного тестирования. Настоящие пользователи часто думают нестандартно и могут заметить ошибку, которую группа тестирования могла пропустить.

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

Автор Арнаб Рой Чоудхури

Арнаб Рой Чоудхури - разработчик пользовательского интерфейса по профессии и энтузиаст ведения блога. Он пишет контент около 5 лет и имеет большой опыт в технических блогах, путевых заметках и контенте на новейших языках программирования.

.

27 советов по поиску ошибок на вашем сайте

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

Тест мобильной готовности

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

  • Настройте список устройств, на которых ваше приложение должно работать безупречно, с помощью поиска с помощью Google Analytics.
  • Вы можете использовать расширения эмулятора мобильных устройств в браузерах для тестирования своего приложения.
  • Если бюджет проекта велик, вы можете предоставить своей группе тестирования несколько портативных устройств с другой операционной системой, чтобы можно было проводить тестирование в реальном времени, поскольку эмуляторы часто пропускают определенные ошибки.
  • Убедитесь, что нет горизонтальной прокрутки; шрифты и кнопки удобочитаемы и удобны для сенсорного ввода; а контент и изображения достаточно большие для маленького экрана.

Кросс-браузерное тестирование

Прошли те времена, когда Internet Explorer был единственным браузером, доступным на рынке. Многие новые браузеры вводятся почти ежедневно, и часто веб-приложения, которые отлично работают в Google Chrome, не работают в таких браузерах, как Opera, Safari и других.

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

Тестирование доступности

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

  • Проверьте, соответствует ли ваш веб-сайт разделу 508, ADA и другим правилам.
  • Выполните тестирование масштабируемости, чтобы убедиться, что веб-сайт доступен для чтения при увеличении изображений или шрифтов.
  • Тест программы чтения с экрана
  • необходимо выполнить, чтобы убедиться, что люди с плохим зрением могут перемещаться по странице с помощью программы чтения с экрана.
  • Сайт должен быть полностью управляемым с использованием только клавиатуры
  • Субтитры должны быть включены в медиа-контент, чтобы люди с нарушениями слуха могли понимать аудио и видео контент.

Общая проверка HTML и CSS

  • Убедитесь, что ваш код HTML или XHTML не содержит ошибок, проверив его с помощью W3C Markup Validation, официального инструмента проверки Консорциума World Wide Web.
  • Существуют и другие инструменты, такие как HTML Tidy, инструменты Google для веб-мастеров и т. Д., Которые могут искать в коде повторяющиеся метатеги, неработающие ссылки, отсутствующие заголовки или другие ошибки.
  • Служба проверки CSS, предоставляемая W3C, может использоваться для обнаружения любых ошибок или нарушений соответствия в вашем CSS.
  • После проверки кода предлагаемый инструмент, который можно использовать, - это CSS Compressor. Он минимизирует файл, сжав весь код в одну строку. Для большой страницы с тысячами строк CSS этот инструмент может ускорить время загрузки.

Тестирование безопасности для входа на сайт

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

  • Убедитесь, что учетная запись заблокирована после многократного ввода неверного пароля или идентификатора пользователя.
  • Обеспечьте предотвращение автоматического входа в систему с помощью таких методов, как проверка OTP или CAPTCHA при входе в систему.
  • Проверить шифрование файлов cookie и кеша.
  • После выхода пользователя из системы нажмите кнопку «Назад», чтобы убедиться, что сеанс просмотра истек.

Тестирование производительности приложения

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

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

Бета-тестирование реальными пользователями

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

  • Бета-тестирование очень важно, поскольку пользователи перемещаются по сайту и склонны обнаруживать любые слабые места со своей точки зрения.
  • Ваша группа тестирования следует набору правил для выполнения модульного тестирования. Настоящие пользователи часто думают нестандартно и могут заметить ошибку, которую группа тестирования могла пропустить.

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

.

Найдите ошибки веб-сайта на вашей новой странице или сайте: трехэтапная структура

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

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

Шаг 1: просмотрите записи, чтобы найти и определить приоритеты, что нужно исправить

Шаг 2: просмотрите тепловые карты для выявления проблем на отдельных страницах

Шаг 3: выясните, ПОЧЕМУ что-то не работает с отзывами Опросы

Примечание. Эта структура требует, чтобы вы использовали специальное программное обеспечение, такое как Hotjar (которое вы можете использовать бесплатно, ) или любой эквивалентный набор инструментов поведенческой аналитики.

Шаг 1. Просмотрите записи, чтобы найти и определить приоритеты, что нужно исправить.

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

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


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

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

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

Посмотрите подборку пользовательских путешествий по сайту

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

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


В зависимости от того, сколько трафика вы получаете на свой веб-сайт, вы можете обнаружить, что в час (а) после запуска вы получаете десятки или даже сотни записей.Исходя из опыта, вам нужно всего около 5-10 записей, чтобы попасть в хороший поток просмотра. Для начала:

  • Заставьте всех в вашей команде просмотреть 20-30 записей за один раз и отчитаться, или
  • Просмотрите 30-50 записей, если вы один.
  • Пропускайте паузы и / или смотрите с увеличенной скоростью для экономии времени (см. две кнопки ниже, выделенные красным)

Примечания к запуску, который почти не прошел

Вскоре после запуска для ~ 600 пользователей мы получили первый звонок в службу поддержки: что-то ломалось.Итак, мы прошли два или три раунда, внимательно наблюдая за записями и выясняя, где лежат пути отказа. Это довольно пугает, когда пользователь пытается выйти в Интернет и у него проблемы. Мы смогли очень быстро внести множество исправлений, просто внимательно просматривая записи. Я должен сказать, что без записей, я не знаю, могли ли мы даже иметь представление о том, что на самом деле происходит.
(
Полную историю читайте здесь )

Джон Керн - менеджер по стратегическим продуктам, Intelliquip

5 распространенных ошибок веб-сайтов, которые можно обнаружить с помощью записей

Просматривая записи, обратите внимание на следующие ошибки:

  • Ошибки совместимости , при которых страницы загружаются неправильно на разных устройствах / браузерах
  • Ошибки функциональности , когда веб-сайт не выполняет то, что должен (например, : пользователи пытаются войти в систему, но не могут, или нажимаемые кнопки или элементы не работают)
  • Ошибки макета и дизайна , когда элементы страницы не отображаются правильно
  • Необычная активность мыши , такая как дикая прокрутка или повторный щелчок, который может указывать на то, что посетители не находят то, что им нужно
  • Проблемы с навигацией , например страницы 404 (чтобы найти их, отфильтруйте их по соответствующему URL-адресу, например https: // www.yoursite.com/404 . Если вы их найдете, следование обратному пути поможет вам увидеть, как люди туда попали)

Совет от профессионала : регистрируйте каждую ошибку, отмечая записи; позже вы можете фильтровать по отдельным тегам и повторно просматривать только соответствующие файлы. Заранее выберите соглашение об именах: некоторые из тех, что мы используем в Hotjar, включают Неработающая ссылка для связи с нами, Ошибка, Используемые фильтры, Неудачно, Для расследования, Похоже, не удалось найти цены, Проблема с проверкой - могут быть эти может зажечь идеи для вашей команды.

Поделитесь выводами со своей командой разработчиков продукта / продукта

Если вы и ваша команда разработчиков продукта или продукта используете систему управления проектами, такую ​​как Jira или Trello, создайте и добавьте ссылки записи к отдельным тикетам или запросам на исправления: это дает тем, кто отвечает за решение проблемы, возможность увидеть, как это происходит. прежде, чем войти и работать над исправлением.

Шаг 2: используйте тепловые карты, чтобы найти проблемы на отдельных страницах

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

пример тепловой карты с прокруткой (слева) и карты кликов (справа)

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

Пример тепловых карт до и после изменений от Bannersnack, которые улучшили CTA на главной странице

В Hotjar используйте двухэтапный подход:
1) Прежде чем выпускать изменения , настройте тепловую карту на наиболее релевантных / важных страницах:

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

Примечание: для того, чтобы тепловая карта начала работать, достаточно одного человека, чтобы посетить страницу, но данные, основанные только на одном посетителе, не будут очень полезны, поэтому не забудьте дать инструменту некоторое время, чтобы собрать хороший объем данных. (100-200 посещений - хорошая отправная точка).

Используйте тепловые карты, чтобы узнать, что вызывает наибольшее взаимодействие

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


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

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

Примечание редактора: еще в 2018 году мы изменили дизайн домашней страницы Hotjar и добавили видео там, где его раньше не было.Мы также разместили тепловые карты на обновленной странице:

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

Используйте прокручиваемые тепловые карты, чтобы узнать, сколько посетителей просматривают страницы

Прокрутка тепловых карт показывает , насколько далеко вниз по странице прокручивают посетители :

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

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

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

Проверить наличие различий между устройствами

Программа записи сеанса

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

Поделитесь тепловыми картами и выводами со своей командой и / или клиентами

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

от наших клиентов: команда @ Skyscanner просматривает тепловые карты страницы

Шаг 3. Узнайте, ПОЧЕМУ что-то не работает, с помощью отзывов на месте

В дополнение к обнаружению ошибок и сломанных элементов, которые необходимо исправить в первые несколько минут / часов после запуска, вы можете обнаружить, что что-то не работает должным образом, но вы не знаете, почему .Например, отдельные записи могут показывать, что люди достигают определенной страницы, а затем не продвигаются дальше; Затем тепловая карта для конкретной страницы может подтвердить, что это не единичные инциденты, поскольку кнопка «следующая страница» (или эквивалентный призыв к действию) не получает много кликов.

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

Создайте в Hotjar опрос на месте (мы называем их «Опросы») и разместите его на любой странице (ах), которую вы хотите изучить; настроить цвет и внешний вид в соответствии со стилем вашего бренда:

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

(ПРИМЕЧАНИЕ. Опросы работают лучше, если у вас около 1000+ пользователей в день. При меньшем объеме трафика вы, вероятно, выиграете от «партизанского исследования», когда вы просто покажете веб-сайт нескольким людям и спросите их вопросы напрямую.)

Спросите посетителей, почему они уходят

Если вы заметили, что потенциальные клиенты уходят на определенную страницу в вашем потоке электронной торговли, настройте на этой странице опрос, чтобы выяснить, что происходит. Задавая вопросы, близкие к «моменту истины» (т. Е. К моменту принятия решения о продолжении или отказе), вы поймете, в каком контексте они приняли решение покинуть страницу .

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

  • Почему вы уходите с этой страницы?
  • Что неясно в этом шаге / странице?
  • Перед тем, как уйти: чего не хватает на этой странице?
  • Не для тебя? Расскажите, почему:


Или вы можете попробовать менее прямой подход:

  • Что вы ожидаете делать после этой страницы?
  • Есть ли что-то, что, по вашему мнению, следует добавить на эту страницу?
  • Если бы вы могли добавить ОДНО на эту страницу, что бы это было?

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

Спросите совета у посетителей

Если вы заметили повторяющуюся проблему или поведение (например, что-то мешает людям продолжить путь регистрации) bu

.

5 советов, которые помогут вам найти эту ошибку

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

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

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

За свою короткую жизнь программиста у меня были ситуации, когда я думал, что моя Android Studio, мой эмулятор или сам Android сломаны.Я мог поклясться, что мой код был правильным, но он вел себя непонятно для меня. Конечно, Android не был сломан, просто в моем коде были ошибки. Но ошибки были настолько незаметными и скрытыми, что было очень трудно понять, в чем дело. И это были даже не большие программы, а маленькие хобби-проекты. Поиск неприятной ошибки в большой кодовой базе может быть совершенно другой задачей.

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

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

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

Прежде всего сделайте глубокий вдох

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

Так что сделайте глубокий вдох прямо сейчас. Вы расслабились? Большой! Перейдем к следующему шагу.

Используйте отладчик

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

В большинстве современных IDE по умолчанию реализован отладчик. Недавно я начал изучать, как использовать тот, который поставляется с Android Studio (IntelliJ IDEA), и хотя сначала он выглядит очень сложным, на самом деле он довольно прост в использовании и очень мощный, не только для поиска ошибок, но и для улучшения понять, как работает ваш код. Как обычно, я собрал знания, полученные в процессе обучения, в видеоруководство, поэтому вам не придется проходить через тот же утомительный процесс. Щелкните здесь, чтобы перейти к нему.Если вы разработчик Android, обязательно посмотрите это руководство, потому что знание того, как использовать отладчик, - это то, что вы не сможете обойтись в долгосрочной перспективе. Серьезно, перейдите к видео прямо сейчас и хотя бы добавьте его в закладки.

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

Обратиться за помощью онлайн

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

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

А где задать вопрос? У меня есть отдельная запись в блоге со списком различных замечательных сообществ Android и общего программирования, помимо Stackoverflow, которые вы можете найти здесь.

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

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

Сделайте перерыв

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

Когда вы застряли, перерыв может творить чудеса. Я не знаю, что именно происходит в нашем мозгу, когда мы отходим от проблемы, но я знаю, что подсознание продолжает работать над этим в фоновом режиме. И эта фоновая обработка может привести к пониманию, которое казалось невозможным понять, пока мы активно пытались разгадать проблему. Это явление внезапного просветления также называют «эффектом Эврики» или «Ага! момент », и я уверен, что вы уже испытывали это раньше.Однако, чтобы получить такое спонтанное понимание, вам сначала нужно активно заняться проблемой, поэтому не делайте перерыв, если вы чего-то не понимаете.

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

У программистов

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

Скажи это своей резиновой утке

Это может показаться забавным, но «отладка резиновой утки» на самом деле вещь.Ранее я упоминал, что, задав свой вопрос в Интернете, вы можете найти решение еще до того, как вы получите какие-либо ответы, потому что, когда вам нужно объяснять проблему шаг за шагом, вы не пропускаете, казалось бы, неважные части, как вы это делаете, когда просто думаете о ней. или работайте над своим кодом самостоятельно. Для этого не имеет значения, кому вы объясняете свой код, потому что речь идет о самом акте объяснения, а не об ответе. Поэтому вместо того, чтобы спрашивать других разработчиков (и отнимать у них время), вы можете объяснить свою проблему кому-нибудь, совершенно не имеющему отношения к программированию.Это может быть друг или член семьи, который ничего не знает о коде, это может быть ваша собака или это может быть ... ну, ваша резиновая уточка. Фактически, объяснение вашего кода тому, кто ничего не знает о программировании, может быть даже более действенным, потому что это заставляет вас вдаваться в детали и создавать логичный и понятный ход мыслей. Уловка здесь в том, что (если это не человек) вы должны притвориться, что объект, которому вы его объясняете, может понять, что вы говорите.

Термин «отладка резиновой утки» был введен Эндрю Хантом и Дэвидом Томасом в книге «Программист-прагматик», и вот как это работает:

Сначала возьми резиновую уточку.Если у вас его еще нет, купите его на Amazon. Пошагово опишите утке, что должен делать ваш код. Просмотрите каждую строчку, объясните, что она делает и какой следующий логический шаг. Выскажи все устно. Это заставит вас замедлиться, потому что мы думаем быстрее, чем говорим. Ничего не пропускайте, даже если это кажется несущественным. Помните, утка понимает, что вы говорите, она просто не имеет представления о программировании, поэтому вы должны быть предельно ясны. Ваша программа делает именно то, что вы ей говорите, а это означает, что вы в конечном итоге дойдете до точки, где ваш предполагаемый следующий шаг на самом деле не соответствует введенным вами инструкциям.Это ваша ошибка.

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

Перепиши чертову вещь

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

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

Также рассмотрите возможность присоединения к группе Coding in Flow Facebook, где мы помогаем друг другу с проблемами кодирования. С единомышленниками легче учиться.

Удачного кодирования, и пусть вы устраните все ошибки на своем пути!

.

Смотрите также

Поделиться в соц. сетях

Опубликовать в Facebook
Опубликовать в Одноклассники
Вы можете оставить комментарий, или ссылку на Ваш сайт.

Оставить комментарий