Топ-10 самых частых багов, которые можно найти в проектах

На своём пути в IT каждый неизбежно встречается с различными багами. И если опытные специалисты могут легко заметить ошибки, то джунам сделать это немного сложнее. В новой статье вместе с Екатериной Белозерцевой, Lead QA IT-компании Xpage мы составили топ-10 самых частых багов, которые можно найти в проектах. Скорее читай и составляй себе полезную шпаргалку для работы!

1. Проблемы с доступностью кнопок в мобильной версии сайта

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

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

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

2. Шрифт плейсхолдеров в мобильной версии меньше 16 px

Это приводит к тому, что при фокусе на поле ввода, например, «Введите имя», на iPhone в Safari автоматически включается зум. А после ввода данных пользователю приходится вручную менять масштаб страницы. С точки зрения удобства использования это крайне проблематично.

Рекомендуется, чтобы все плейсхолдеры имели размер шрифта не менее 16 px.

3. Невалидный текст сообщений об ошибках

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

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

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

4. Не сделан ресайз изображений

Например, качественные изображения на сайте могут весить 7, 10, 20 МБ, что значительно замедляет загрузку страниц. Это вызывает неприятные эмоции у пользователей. Часто эту проблему допускают backend-разработчики: либо забывают о необходимости оптимизации, либо выполняют её неправильно.

Если на сайте используются большие красивые изображения (баннеры и т. д.), их можно ресайзить до 1 МБ. Однако для мелких изображений (особенно иконок) разумный вес должен быть гораздо меньше.

5. Отсутствие капчи в формах обратной связи

Капча нужна для того, чтобы определить, кто отправляет форму – человек или робот. Токен формируется на стороне клиента, происходит запрос на сервер Google, который рассчитывает коэффициент «человечности». Затем это значение обрабатывается backend-разработчиком. В зависимости от полученного коэффициента пользователь может не пройти проверку на робота, в таком случае форма обратной связи не отправится.

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

6. Валидация полей осуществляется только на фронте, но пропускается на бэкенде

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

7. Закрытый robots.txt на релизе

В файле robots.txt указывается, какие части сайта можно индексировать, а какие – нет. Если он настроен неправильно, то в попытках скрыть определённый контент мы можем закрыть доступ ко всему сайту. Это сделает его невидимым в поисковых системах.

8. Некорректный Open Graph

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

Частая ошибка заключается в том, что изображение не соответствует содержанию сайта: например, ссылка на страницу ХК «Трактор», а изображение – логотип Xpage. Также текст описания бывает неверным: для сайта ХК «Трактор» должно быть «Официальный сайт хоккейного клуба «Трактор» – Челябинск», а отображается «Главная страница».

9. Неотрисованный на дизайне экран с результатами поиска, когда ничего не найдено

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

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

10. Отсутствие кнопки «Сбросить все фильтры»

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

Этот список далеко не полный! Характер ошибок и способы их устранения зависят от вида и сложности проекта. Составленный нами список ты можешь использовать как чек-лист или шпаргалку в своей работе.

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