Перегруженный интерфейс редко выглядит плохо. Обычно он выглядит богато: много блоков, много кнопок, всплывающее окно с подпиской, баннер с акцией, чат, меню на тридцать пунктов. Каждый элемент кто-то когда-то попросил добавить, и по отдельности все они разумны. Проблема возникает в сумме: человек открывает страницу, не находит, за что зацепиться, и уходит. Разбираем, как понять, что интерфейс перегружен, что именно мешает и как убирать лишнее, не теряя нужных функций.
Почему избыток элементов мешает
Человек не читает страницу целиком. Он бегло осматривает её и ищет то, что похоже на решение своей задачи. Каждый заметный элемент требует короткого решения: важно это или нет. Пока таких решений три или четыре, они проходят незаметно. Когда их несколько десятков, задача превращается в работу, а работать на незнакомом сайте никто не подписывался.
Второй эффект — потеря приоритета. Если на экране пять элементов оформлены одинаково ярко, ни один из них не главный. Кнопка целевого действия перестаёт выделяться среди акций, баннеров и виджетов, и человек не понимает, чего от него хотят.
Третий эффект — недоверие. Плотный экран с обилием предложений выглядит как попытка что-то навязать. На этом обычно и заканчивается интерес к предложению, даже если оно хорошее.
Как понять, что интерфейс перегружен
Ощущения здесь плохой советчик: команда видит свой сайт каждый день и перестаёт замечать шум. Мы опираемся на несколько проверок.
- Проверка на пять секунд. Показываем страницу человеку со стороны на несколько секунд и спрашиваем, что здесь предлагают и что можно сделать. Если ответа нет, проблема не в тексте, а в структуре.
- Записи сессий. Хаотичное движение курсора, прокрутка вверх-вниз, возвраты в меню означают поиск, а не изучение.
- Внутренний поиск. Люди ищут то, что есть в меню, значит, меню не читается.
- Обращения в поддержку. Повторяющиеся вопросы «где найти» — прямое указание на перегруженную навигацию.
- Подсчёт целевых действий на экране. Считаем, сколько разных призывов конкурирует в первом экране. Больше одного основного — уже спор.
Что чаще всего создаёт шум
| Элемент | Чем мешает | Что делаем |
|---|---|---|
| Несколько призывов в первом экране | Непонятно, какое действие основное | Оставляем один основной, остальные делаем второстепенными по оформлению |
| Меню на два-три десятка пунктов | Список не читается, выбор откладывается | Группируем по задачам, оставляем в верхнем уровне частые разделы |
| Всплывающее окно сразу при входе | Прерывает человека до того, как он понял, куда попал | Показываем позже и по действию, а не по таймеру, оставляем заметное закрытие |
| Баннеры и акции по всей странице | Конкурируют с содержанием и снижают доверие | Один блок в предсказуемом месте |
| Форма с длинным списком полей | Заполнение выглядит долгим, форма бросается | Оставляем поля, без которых нельзя обработать заявку, остальное спрашиваем позже |
| Плотный текст без структуры | Нельзя просмотреть глазами, теряется главное | Подзаголовки, короткие абзацы, списки, выделение ключевых условий |
| Виджеты и всплывающие подсказки | Перекрывают содержание, особенно на телефоне | Сокращаем число, проверяем на узком экране |
Как убирать лишнее, не теряя функций
Требование «убрать половину элементов» обычно встречает сопротивление, и справедливо: за каждым стоит чья-то задача. Поэтому мы не удаляем, а перераспределяем.
- Разделяем по частоте. Что нужно всем и всегда, остаётся на виду. Что нужно немногим или изредка, уходит на второй уровень: в раздел, в раскрывающийся блок, на отдельную страницу.
- Показываем постепенно. Сложные настройки и дополнительные параметры открываются по запросу. Экран остаётся простым, возможности сохраняются.
- Задаём разумные значения по умолчанию. Вопрос, на который в большинстве случаев один ответ, лучше не задавать вовсе, оставив возможность изменить.
- Объединяем близкие действия. Три кнопки, ведущие в один сценарий, заменяются одной с выбором внутри.
- Проверяем каждый элемент вопросом. Что произойдёт, если его убрать, и кто это заметит. Если ответа нет ни у кого, элемент лишний.
Визуальная разгрузка
Часть перегрузки снимается без удаления элементов, за счёт оформления. Работают простые приёмы:
- Свободное пространство. Отступы между блоками группируют содержание лучше, чем рамки и линии.
- Одна иерархия шрифтов. Два-три размера заголовков и один размер основного текста вместо пяти вариантов на странице.
- Ограниченная палитра. Яркий цвет остаётся за действиями. Если им покрашены заголовки, плашки и иконки, кнопка перестаёт выделяться.
- Одинаковые элементы выглядят одинаково. Кнопки одного назначения — в одном стиле, во всех разделах.
- Контраст текста. Светло-серый текст на белом фоне выглядит аккуратно и плохо читается, особенно на солнце и на недорогих экранах.
Мобильный экран проверяет всё
На узком экране перегрузка проявляется быстрее: блоки выстраиваются в длинную ленту, липкие панели и виджеты отнимают видимую площадь, кнопки оказываются под пальцем случайно. Мы всегда проверяем спорные решения сначала на телефоне: то, что помещается на большом экране, на маленьком превращается в бесконечную прокрутку.
Отдельно смотрим на размеры целей нажатия и расстояние между ними, на поведение всплывающих окон и на то, не перекрывает ли чат кнопку заказа.
Как проверить, что стало лучше
Упрощение нельзя оценивать по мнению команды. Мы фиксируем показатели до изменений и сравниваем после: доля дошедших до целевого действия, число шагов и время до него, частота ошибок в форме, доля обращений в поддержку с вопросами «где найти». Дополнительно повторяем короткие юзабилити-тесты на тех же задачах, что и до правок.
Важное правило: менять по одному заметному блоку и давать каждому изменению время набрать данные. Одновременная перестройка первого экрана, меню и формы даёт результат, который невозможно объяснить.
Чего делать не стоит
- Прятать важное ради красоты. Телефон, цена и условия доставки не должны требовать поиска.
- Заменять подписи иконками. Без подписи значок понимают далеко не все, и трактовки расходятся.
- Убирать элементы по одному только мнению руководителя, без проверки данными.
- Считать, что минимализм сам по себе решает задачу. Пустая страница без нужных сведений мешает не меньше, чем перегруженная.
Если интерфейс мешает продажам
Начать стоит с разбора: где именно люди останавливаются и какие элементы этому способствуют. Мы делаем такой разбор по сценариям и данным и выдаём список правок с приоритетом. Посмотрите, как устроен аудит юзабилити сайта, и напишите, какую страницу нужно разобрать первой.
Мы начинаем с задач пользователя, а не с макета: UX/UI-проектирование помогает не переделывать интерфейс после запуска.
