Когда веб-продукту нужен редизайн: как добавлять новые функции и обновлять действующий интерфейс

Почему со временем интерфейсы перестают быть удобными

Как усложнение функционала запутывает систему: показываем на примере

Как понять, что именно мешает пользователям: инструменты аналитики

Анализ поведения пользователей и глубинные интервью 

• Какие задачи пользователи решают ежедневно.
• Где они теряют больше всего времени.
• С какими функциями работают наиболее регулярно.
• Какие действия повторяют изо дня в день.

Полевые исследования: как UX-аналитика помогает увидеть слабые места

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

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

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

Как аналитика показывает UX-проблемы интерфейса: на примере нашего кейса

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

Оптимизация интерфейса: приемы по улучшению экранов

Добавление новых функций

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

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

• Информацию из уроков и полезных материалов можно быстро опубликовать в новостной ленте на платформе и в чатах Telegram. Так методистам не нужно заново формировать контент и переходить на страницы курсов. 

• В разделе «Техподдержка» добавили вкладку с часто задаваемыми вопросами, чтобы ученики и их родители могли сразу получить ответы. А в разделе с обращениями осталась возможность описывать проблемы и ошибки во время обучения. Это снизило нагрузку на кураторов, так как ученики могут самостоятельно находить решения.

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

Навигация: как избавиться от дублирования и упростить пользовательские пути

Оптимизация пространства: убираем лишнее и выделяем нужное

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

Работа с таблицами, фильтрами и данными: как ускорить взаимодействие

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

• Фильтры разместили над таблицей — раньше они были в отдельном правом меню.
• Добавили сортировку данных, фото пользователей и быстрое копирование ссылок.
• Сделали всплывающие подсказки для важных элементов.

Визуальная иерархия: цвет, размер, контрастность, акценты

• Крупный шрифт для ключевых показателей.
• Яркие цвета для важной информации.
• Контрастные кнопки для основных действий.

Как ускорить работу пользователей

Как убрать лишние шаги и автоматизировать рутинные процессы

• Оптимизация пользовательских сценариев. Прежде чем менять систему, нужно понять, какие процессы отнимают у людей больше всего времени. В QMT мы выяснили, что супервайзеры тратят время на поиск нужных звонков в таблицах. Чтобы решить эту проблему, мы добавили фильтры и сортировку. 
• Минимизация кликов и переходов. Чем меньше действий требуется пользователю для выполнения задачи, тем быстрее он с ней справится. На платформе СМИТАП ученики видят ближайшие уроки, дедлайны и статус домашних заданий. 
• Автоматизация рутинных процессов. Повторяющиеся задачи можно передать системе. В добывающем холдинге сотрудники вручную сортировали инициативы по улучшению производства. Мы помогли автоматизировать обработку предложений — идеи распределяются по категориям, а система показывает прогнозируемый экономический эффект.
• Использование визуальных подсказок. Цветовые акценты, всплывающие подсказки и динамические уведомления помогают пользователям быстрее ориентироваться в системе. 

Ошибки при редизайне и как их избежать

Игнорирование текущих пользователей

Резкие изменения без плавного перехода

Дизайн без учета будущего роста

Подведем итоги

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

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