Секреты успешного редизайна: когда и как правильно обновлять веб-интерфейс
Владельцы веб-продуктов рано или поздно сталкиваются с типичной ситуацией: интерфейс, который был удобным несколько лет назад, начинает вызывать вопросы у пользователей. Первые проблемные сигналы — рост количества запросов в поддержку, снижение скорости выполнения задач и жалобы новых сотрудников, которым трудно разобраться в системе.
Почему со временем интерфейсы перестают быть удобными
Веб-продукты развиваются — запуск новых функций, усложнение сценариев работы и увеличение объемов данных. Однако это не всегда сопровождается изменением интерфейса — разработчики просто добавляют все новые и новые кнопки, перегружая экраны.
В результате система разрастается неорганично: часть элементов дублирует друг друга, логика взаимодействия кажется запутанной, а пользователи вынуждены тратить больше времени на онбординг поиск нужных функций.
Как усложнение функционала запутывает систему: показываем на примере
Разберем проблему на примере системы контроля качества звонков QMT, которую использует крупнейший аутсорсинговый колл-центр России «Телеконтакт». Для компании мы сделали редизайн сервиса.
Изначально платформа была удобным инструментом для анализа звонков. По мере роста стали добавлять новые функции: управление задачами, планирование тренингов и статистика.
Со временем интерфейс стал перегруженным: на экране появилось слишком много кнопок и фильтров, из-за чего работать стало сложнее. Новым сотрудникам было непросто разобраться в системе, а дублирующиеся в разных разделах функции лишь усиливали путаницу. Все изменения внедрялись без пересмотра структуры интерфейса, встраивались в существующие экраны и скрывались в дополнительном меню. Вместо быстрого выполнения задач менеджеры тратили время на поиск нужных инструментов. В таких случаях выявить проблемные места помогает аналитика. Чтобы обновить интерфейс, необходимо изучить поведение реальных пользователей: какие проблемы они испытывают, как работают в системе и какие сценарии нужно улучшить. Редизайн веб-продукта не должен основываться только на догадках команды разработки или пожеланиях заказчика. Часто бизнес видит проблему в одном, а пользователи сталкиваются с совершенно иными сложностями. Поэтому перед изменением интерфейса нужно разобраться, что мешает людям работать быстрее и эффективнее. Один из способов выявить проблемы — провести Customer Development (CustDev). Это серия глубинных интервью, где пользователи рассказывают, как они работают в системе, какие действия совершают чаще всего, что их раздражает и что нравится.Для этого нужно разобраться в процессе работы: Часто оказывается, что пользователи адаптировались к неудобному интерфейсу, но продолжают выполнять лишние шаги просто потому, что так привыкли. Именно такие моменты можно оптимизировать в ходе редизайна. Еще один эффективный инструмент — полевые исследования. В отличие от интервью, этот метод предполагает наблюдение. Аналитики и UX-специалисты следят за тем, как пользователи работают в продукте. Например, пользователь может утверждать, что ему удобно работать с таблицами, но при этом потратить несколько минут на поиск нужного показателя. Такое наблюдение дает более объективные данные, чем простой опрос.
В сложных продуктах есть разные роли пользователей: сотрудники, менеджеры, аналитики, руководители, администраторы. У каждой группы свои задачи, поэтому им нужны определенные данные и функции. Чтобы система была удобной, нужно определить: Перед редизайном QMT наша команда провела глубинные интервью с сотрудниками колл-центра: супервайзерами, администраторами, операторами и руководителями. В результате мы выявили несколько проблем: Дополнительно провели полевые исследования, наблюдая за работой специалистов. Это подтвердило, что важные показатели скрыты за несколькими уровнями меню, а нехватка сортировки в таблицах усложняет анализ данных. Закажите экспресс-аналитику в Атвинте После того как был проведен анализ пользователей и выявлены проблемы, следующим шагом является пересмотр структуры интерфейса. Даже самый удобный интерфейс со временем требует расширения — новые пользователи и процессы создают дополнительные потребности. Например, образовательная платформа СМИТАП, которую мы создали для одноименной онлайн-школы. Мы постоянно обновляем сервис и добавляем новые функции, которые облегчают работу преподавателей, методистов и кураторов. При расширении веб-продукта выстраиваем логику и ненавязчиво внедряем новые элементы, чтобы пользователи постепенно осваивали обновления. Мы продолжаем масштабировать сервис и улучшать пользовательский опыт. В систему ежедневно переходят 8 000 учеников, а общий рейтинг удобства платформы составляет 90%. Как органично вписывать новые элементы: Частая проблема старых веб-продуктов — хаотично разросшееся меню. С появлением новых функций их просто добавляют в навигацию, не пересматривая логику разделов. В системе QMT существовало два меню управления — боковое и верхнее, в которых дублировались разделы. Также есть два типа личного кабинета: один предназначен для администраторов, другой — для всех остальных пользователей с разным функционалом. То есть на платформе можно быть в роли пользователя либо совмещать ее с возможностями администратора. Мы оставили только боковой сайдбар и добавили четкое разделение между ролями — администратор и обычный пользователь. Вместо первого экрана сделали дашборд с ключевыми показателями. Так стало удобнее находить нужные функции, а новички перестали теряться в интерфейсе. Еще одна проблема старых интерфейсов — визуальная перегруженность. Когда на одном экране слишком много информации, пользователю сложно сосредоточиться. Как оптимизировать пространство: В изначальном интерфейсе QMT кнопки управления были разбросаны по экрану, а рабочая зона занимала меньше половины пространства. Мы освободили место, убрали лишние элементы и добавили компактные плашки для ключевых метрик. Плохо продуманная структура данных замедляет работу и заставляет пользователей тратить время на поиск информации. Какие проблемы встречаются наиболее часто: Как улучшили таблицы в QMT: В обновленном личном кабинете MC Intermark Auto мы сделали удобную таблицу с данными по автопарку: появились гибкие фильтры по VIN, госномеру и пробегу, а также возможность настраивать колонки под задачи пользователя. Интуитивность интерфейса зависит от того, насколько быстро пользователь может выделить главное. Если все элементы выглядят одинаково, внимание рассеивается. Показательный пример управления вниманием пользователя — дашборды, на которых нужно разместить множество данных. Информацию в дашбордах и таблицах нужно визуально структурировать, чтобы пользователю не приходилось тратить время на поиск нужных данных. Группировка показателей на плашках помогает сразу понять, какие данные относятся к выбранной категории. Ключевые метрики выделяют размером — крупный шрифт и заметные графики позволяют мгновенно определить важные значения. Кроме того, не стоит перегружать экран — свободное пространство между элементами помогает лучше воспринимать информацию и ускоряет анализ. Вместо нагромождения информации лучше распределить информацию на новых страницах, переходя от общих показателей к частным. Как расставить визуальные акценты: В старом интерфейсе QMT все элементы были одного размера, из-за чего нужные показатели терялись. Наша команда выделила ключевые цифры крупным шрифтом и использовала цветовые акценты. Так сразу видно, какие метрики в норме, а где есть проблемы: зеленые — положительная динамика, красные — негативная. С таким подходом пользователи стали тратить меньше времени на анализ, потому что система сразу подсказывает, куда смотреть. Пользователю неважно, насколько красиво выглядит система, если она мешает ему быстро выполнять задачи. Оптимизация интерфейса должна уменьшать количество действий и обеспечивать логичную структуру сервисов. Например, мы создали экосистему управления улучшениями для крупного добывающего холдинга. В экосистеме 5 сервисов с разным функционалом. Чтобы упростить работу в экосистеме, мы разработали единый дизайн. Все продукты используют определенные UX-паттерны — пользовательские сценарии, визуальные элементы и структуру интерфейса. Благодаря этому персонал быстро ориентируются в любом из сервисов. Также сделали бесшовный переход между продуктами. Сотрудники не тратят время на повторные авторизации и сложную навигацию — все инструменты связаны между собой. Это позволяет быстрее выполнять задачи и упрощает масштабирование экосистемы. Компании часто допускают ошибки, из-за которых обновление не приносит ожидаемых результатов или даже ухудшает ситуацию. Радикальные изменения могут вызвать сопротивление, если не учитывать привычки существующих пользователей. Даже если новый интерфейс объективно лучше, сотрудники, которые годами работали в старой системе, могут испытывать дискомфорт. Чтобы этого избежать, соберите обратную связь от активных пользователей, узнайте, какие функции для них критичны. Затем протестируйте изменения на небольшой группе, чтобы учесть их реакцию. Если в один день полностью поменять интерфейс без подготовки пользователей — это вызовет стресс и снизит продуктивность их работы. Внедряйте редизайн поэтапно — например, сначала дайте возможность переключаться между старой и новой версией. После редизайна продукт может выглядеть идеально, но если не заложить возможность его масштабирования, через пару лет он снова устареет. При проектировании учитывайте будущие сценарии использования. Для холдинга мы разработали экосистему сервисов, в которой учли возможность их расширения и интеграции новых решений без необходимости переделывания системы. Редизайн веб-продукта — это процесс, который требует глубокой аналитики, тестирования и поэтапного внедрения. Редизайн не должен ломать привычные сценарии. Этот этап нужен для оптимизации работы и создания удобного интерфейса. Как результат — ускорение работы пользователей в системе. Например, благодаря редизайну QMT, пользователи стали тратить на 15% меньше времени на рутинные задачи. Редизайн интерфейса показал следующие улучшения:
Как понять, что именно мешает пользователям: инструменты аналитики
Анализ поведения пользователей и глубинные интервью
Полевые исследования: как UX-аналитика помогает увидеть слабые места
Пересмотр пользовательских ролей и задач: кому и что действительно нужно
Как аналитика показывает UX-проблемы интерфейса: на примере нашего кейса
Оптимизация интерфейса: приемы по улучшению экранов
Добавление новых функций
Навигация: как избавиться от дублирования и упростить пользовательские пути
Оптимизация пространства: убираем лишнее и выделяем нужное
Работа с таблицами, фильтрами и данными: как ускорить взаимодействие
Визуальная иерархия: цвет, размер, контрастность, акценты
Как ускорить работу пользователей
Как убрать лишние шаги и автоматизировать рутинные процессы
Ошибки при редизайне и как их избежать
Игнорирование текущих пользователей
Резкие изменения без плавного перехода
Дизайн без учета будущего роста
Подведем итоги
