Никто не хочет тащить в новый год всякий мусор из года прошедшего.
Именно поэтому люди символически убираются перед праздником. Мусор в IT – это ошибки при разработке: баги, нарушения логики, структуры, функциональности. Давайте оставим всё это в прошлом!

А «прибраться» перед Новым годом поможет наша рубрика #debug

Итак, поехали.

Чем больше всяких фич вы накручиваете на фронтенде, тем выше вероятность багов.
Такая обратная зависимость. Чтобы ваши приложения не глючили, вот 5️⃣ полезных инструментов для мониторинга:

➖Sentry: довольно популярный инструмент. Неплохо восстанавливает цепочку событий, которая привела к проблеме, ищет первопричину ошибок. Совместим с основными фреймворками и ЯП.

➖LogRocket: умеет записывать и воспроизводить пользовательские сеансы. Чтобы устранить проблему, вам не нужно запрашивать журнал или скриншот.

➖Rollbar: отслеживает ошибки сразу на многих платформах, доступна автоматизация сортировки и мониторинга ошибок.

➖Raygun: главная фишка – скорость. Инструмент быстро находит ошибки, быстро сообщает о проблеме.

➖Firebase: создаёт отчётность и производит мониторинг в режиме реального времени. Разработчики могут быстро оптимизировать производительность на основе поведения пользователей, показателей вовлечённости и аналитики.

Кстати, как насчёт «помониторить» производство новогодних игрушек?
☃️ Попробуйте себя в роли специалиста по контролю качества: определите, что баг, а что фича. Награда – в конце ➖пройти квест

#debug

Прежде чем решить, что «этот баг – скорее фича», помните: крипер из Майнкрафта, появившийся из-за ошибок при создании моба, – приятное исключение. Да, у фичи и бага есть кое-что общее: баг тоже делает продукт в каком-то смысле уникальным.
Но нужна ли вам такая уникальность ❔

Не усложняйте без необходимости
Представьте: вы – веб-дизайнер. Заказчик хочет привести сайт в соответствие с последними модными веяниями. И вы начинаете «накручивать» фоны, анимацию, шрифты, графику. Когда сайт выкатывают в прод, он грузится полминуты, а див-контейнеры с фоновыми изображениями наезжают на панель навигации при прокрутке. Хотели фичу – получили баг.

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

Отталкивайтесь от реалий конечного пользователя
Какое решение напрашивается первым, если пользователи массово удаляют аккаунты на сайте? Разобраться в причине? Конечно нет. Сделать так, чтобы удаление аккаунта превратилось в целый квест? Определённо! Улучшит ли такая «фича» UX? Нет. Человек всё равно удалит аккаунт, просто потратит на это больше нервов.

Итак!
❌ Это баг, если: решение не соответствует задаче вашего продукта. Каким бы эффектным оно не казалось.

👩‍💻 Это фича, если: решение помогает вашему продукту выполнить задачу.

А это – игра про завод новогодних игрушек под контролем ИИ.

☃️ Проверьте новую партию товаров – получите индивидуальную характеристику и скидку на любой курс!

#debug

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

Например, у вас поехала вёрстка в текстовом блоке, а ещё – сбоит отправка данных через форму регистрации: данные неправильно шифруются/дешифруются. C чего начнёте? Впрочем, времени на размышления всегда мало. Поэтому и существует классификация багов по приоритету и уровню серьёзности.

🛅 Приоритет бага

Высокий: критичная ошибка; исправить как можно скорее.
Средний: не критичная ошибка, мешает работе системы; требуется обязательное исправление.
Низкий: не критичная ошибка, не мешает работе системы; исправлять в последнюю очередь.

🛅 Серьёзность бага

Блокирующая. Система полностью не работает, пользоваться продуктом невозможно. Пример: сайт не открывается, программа не запускается.
Критическая. Большая часть функционала системы вышла из строя. Программа работает, но сильно сбоит. Пример: приложение работает, но в нём невозможно зарегистрироваться.
Высокая. Система работает неправильно. Элементы системы функционируют, на задачу не выполняют. Пример: при регистрации данные пользователя передаются, но в виде непонятных символов: асС?иренный РїРѕРёСЃРє.
Низкая. Система нормально функционирует, но с ней просто неудобно работать. Пример: при закрытии всплывающего окна вас перебрасывает в начало лендинга.
Незначительная. Баг вообще не влияет на работу системы. Пример: кнопка вылезает за границу контейнера.
Умозрительная. Зависит от точки зрения. 😄Шутка. Но в нашем новогоднем квесте «Баг или фича?» вы действительно можете решать, что есть что.

🍪 Пройдите мини-игру и получите награду.

#debug

Частые ошибки в UX и UI

✅ Отказ от тестирования
«Бродить» по сайту будет не разработчик, не заказчик, а конечный пользователь.
Даже если вы считаете, что создали удобный интерфейс, проверьте его с помощью контрольной группы.

✅ Текст ради текста
Текста не должно быть слишком много и не должно быть слишком мало. Текста должно быть столько, чтобы привлечь, удержать внимание и подтолкнуть к целевому действию.

✅ Непродуманные размеры элементов
При проектировании вы заложили красивый контейнер с картинкой и текстом в 150 символов. Но при заполнении сайта выяснилось: для раскрытия смысла нужно больше текста. Теперь вы стоите перед необычным выбором между потерянным смыслом и поехавшей вёрсткой.

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

✅ Непонятные кнопки
Не жертвуйте точностью навигации на сайте в угоду креативности. Кнопка – важная веха на пути к целевому действию, поэтому пользователь должен понимать, что будет после нажатия. Исключение – игры. Например, «Баг или фича?».

🍪 Пройдите квест – получите скидку 5% на любой курс OTUS

#debug

Как превратить лендинг в головоломку? Четыре совета

1️⃣Пустая «шапка». Не объясняйте пользователю, зачем он здесь и что может получить. Просто сразите его наповал модным дизайном с абстрактными формами и претенциозным слоганом. Не забудьте про кнопку! Ведь пустота – идеальный призыв к действию.

2️⃣Отсутствие визуальной иерархии. Помните: ваш продукт уникален и не вписывается в стандартные характеристики. Ваш выход – творческий хаос. Для пользователя не должно быть ничего второстепенного: пусть в поле зрения будет всё и сразу.

3️⃣Запутанный интерфейс. Переживаете, что пользователь может запутаться в окнах, кнопках, ссылках, полях и формах? Не стоит беспокоиться: творец здесь вы. Если смертные не способны в чём-то разобраться – это их проблема.

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

Кстати, не пропустите скидку 5% на любой курс OTUS!
🍪 Пройдите квест «Баг или фича»

И с Наступающим вас, друзья!