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

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

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

Первые проблемные сигналы, которые говорят, что с интерфейсом что-то не так:

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

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

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

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

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

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

Заказчик решил обновить интерфейс и обратился к нам за редизайном. Первым делом мы приступили к аналитике.

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

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

Разберем инструменты, которые мы в Атвинте используем для обновления давно работающих интерфейсов.

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

Рекомендуем выяснить следующие моменты:

В одном из проектов мы узнали интересный факт:

Именно такие ценные инсайты можно собрать на кастдевах и оптимизировать в ходе редизайна.

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

При проведении полевых исследований нужно обращать внимание:

Еще один интересный пример из нашего опыта:

Такие исследования дают более объективные данные, чем опросы.

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

Читайте кейс о разработке платформы:

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

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

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

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

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

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

В результате мы выявили несколько ключевых проблем интерфейса:

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

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

Мы уже 5 лет развиваем образовательную платформу СМИТАП. Отдельная продуктовая команда постоянно обновляет сервис и добавляет новые функции, которые облегчают работу учеников, преподавателей, методистов и кураторов.

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

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

Обоснование необходимости

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

Преподаватели в СМИТАП для подготовки к занятиям используют файлы, которые хранятся в базе знаний. Раньше для поиска нужного файла приходилось скроллить базу, раскрывать плашки и искать нужные файлы глазами.

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

Баланс между элементами и воздухом

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

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

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

Консистентность

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

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

Так методистам не нужно заново придумывать контент и переходить на страницы курсов.

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

Визуальные подсказки

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

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

Для этого использовали интуитивно понятную иконку с двумя файлами, а также добавили всплывающее окно с выбором действия — “копировать в курс”.

Размещение

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

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

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

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

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

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

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

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

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

Как оптимизировать пространство:

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

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

Какие проблемы встречаются наиболее часто:

Как мы улучшили таблицы в сервисе качества звонков:

Посмотрите, какой структурированной и удобной стала работа с таблицами после редизайна:

Еще один пример — личный кабинет менеджера лизинговой компании MC Intermark Auto. Менеджеры компании работают с автопарком из 7 000 авто, с которыми нужно постоянно совершать действия:

Здесь мы сделали удобную таблицу с данными по автопарку: появились гибкие фильтры по VIN, госномеру и пробегу, а также возможность настраивать колонки под задачи пользователя.

Читайте полный кейс по проекту:

Дашборды со статистикой — еще один популярный инструмент в корпоративных сервисах. Часто в них допускают ошибки:

Ранее мы уже выпускали огромный мануал по разработке дашбордов, который прочитали более 50 000 человек:

Здесь же кратко пройдемся по основным поинтам.

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

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

2. Ключевые метрики выделяют размером — крупный шрифт и заметные графики позволяют мгновенно определить важные значения.

3. Не стоит перегружать экран — свободное пространство между элементами помогает лучше воспринимать информацию и ускоряет анализ.

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

5. Как расставить визуальные акценты:

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

Мы выделили ключевые цифры крупным шрифтом и использовали цветовые акценты. Так сразу видно, какие метрики в норме, а где есть проблемы: зеленые — положительная динамика, красные — негативная.

С таким подходом пользователи стали тратить меньше времени на анализ, потому что система сразу подсказывает, куда смотреть.

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

Минимизация кликов и переходов

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

Оптимизация пользовательских сценариев

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

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

Автоматизация рутины

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

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

Единообразие и бесшовность в экосистемах

Мы создали экосистему управления улучшениями для крупного добывающего холдинга. В экосистеме 5 сервисов с разным функционалом.

Чтобы упростить работу в экосистеме, мы разработали единый дизайн. Все продукты используют определенные UX-паттерны — пользовательские сценарии, визуальные элементы и структуру интерфейса. Благодаря этому персонал быстро ориентируются в любом из сервисов.

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

Читайте кейс о разработке экосистемы:

Визуальные подсказки

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

Редизайн и обновление веб-продукта — это процесс, который требует глубокой аналитики, тестирования и поэтапного внедрения.

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

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

Качественные улучшения: