UX-разбор 3 моих старых работ: сравнение до/после

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

Кейс 1: стартовая страница зоомагазина

Что было в версии “до”

1. Шапка и верхняя панель. Из-за яркого фиолетового цвета верхняя строка с контактами и меню выглядит перегруженной и перетягивает на себя слишком много внимания.
2. Поиск теряется в шапке. Кнопка поиска слишком нейтральная и растворяется среди остальных элементов, из-за чего её сложно заметить с первого взгляда. Для интернет-магазина это критично, потому что поиск это один из основных сценариев входа в каталог, и он должен быть на виду.
3. Баннер. Не хватает акцента на преимуществах, они читаются как обычный текст, а не как ключевые аргументы. Кнопка выглядит второстепенной и слабо выделяется на фоне, хотя это ключевое действие на странице.
4. Недостаточно пространства между блоками. Баннер, категории товаров и следующий блок расположены слишком близко друг к другу. Из-за малого расстояния между ними страница выглядит плотной, а блоки визуально сливаются и не воспринимаются как самостоятельные смысловые единицы.

Что изменилось в версии “после”

1. Шапка стала визуально легче. Я покрасила шапку в цвет фона, чтобы она не конкурировала за внимание с баннером. Добавила иконки к блоку с контактами — они служат визуальными якорями и помогают быстрее ориентироваться в шапке, не вчитываясь в текст. Акцент сместила на основные кнопки: каталог, поиск и корзину.
2. Каталог и поиск стали заметнее. В верхней строке главная функция — переход в каталог, пользователя прежде всего нужно вести именно туда. Поэтому кнопку каталога выделила более ярким цветом. Поле поиска сделала шире, чтобы оно было заметнее и сразу читалось как место для ввода запроса. Дополнительно добавила иконку лупа, чтобы пользователи мгновенно распознавали поисковое поле, ещё до того как прочтут текст плейсхолдера.
3. Выстроенная иерархия на баннере. Увеличила заголовок, выделила розовым основной текст и увеличила цифры, чтобы преимущества компании считывались быстрее. Сделала сильнее контраст между размерами заголовка и основного текста, чтобы была более четкая иерархия. Кнопку покрасила в белый цвет, чтобы она была заметнее, и написала более понятный текст — «Узнать о компании» вместо «Перейти» — чтобы пользователю было ясно, куда он попадёт после клика.
4. Больше воздуха между блоками. Увеличила расстояние между баннером, категориями товаров и следующим блоком. Когда между смысловыми блоками достаточно пространства, пользователь воспринимает информацию порциями и не устаёт от страницы. Это снижает когнитивную нагрузку и помогает сфокусироваться на каждом блоке по отдельности.

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

Кейс 2: промо-экран AI-платформы

Что было в версии “до”

1. Активный паттерн на фоне. Фон с крупным контрастным паттерном конкурирует с основным контентом. Текст заголовка и подзаголовка читается хуже, потому что внимание пользователя рассеивается между содержимым и фоном. В проектировании интерфейсов следует следовать правилу: фон должен поддерживать контент, а не спорить с ним. Здесь это правило нарушено.
2. Заголовок не ведёт к действию. Текст «Добро пожаловать» занимает центральное место на экране, но не даёт пользователю понимания, что делать дальше. Это приветственный текст, а не инструкция. На стартовом экране важно сразу направить пользователя к следующему шагу.
3. Карточки сценариев оформлены одинаково. У всех трех карточек одинаковые иконки и цвета. Визуально они воспринимаются как равнозначные, и пользователю сложнее быстро выбрать нужный вариант. Это связано с законом Хика: когда элементы выглядят одинаково, процесс выбора замедляется.
4. Слишком общие названия сценариев. Названия инструментов «AI-ассистент» и «Организатор задач» не помогают пользователю, который впервые зашёл на сервис, понять, какую конкретную задачу решает каждый инструмент. Хорошее название карточки должно отвечать на вопрос «что я получу, если нажму сюда?», а не просто описывать технологию.

Что изменилось в версии "после"

1. Фон перестал мешать контенту. Я сделала паттерн мягче и менее контрастным, благодаря чему основной контент вышел на первый план. Увеличила заголовок, чтобы он сразу привлекал внимание, и написала более чёткую формулировку с призывом к действию — «Выберите сценарий для начала работы». Так пользователь с первых секунд поймет, что от него ожидается. Фон по-прежнему задаёт настроение, но больше не отвлекает от основного содержимого.
2. Карточки стали выглядеть кликабельно. Я перекрасила кнопки со стрелками в каждой карточке в чёрный цвет, чтобы они были заметнее и пользователь сразу понимал, что это кликабельные элементы, а не просто информационные блоки. Это важный момент: элементы, на которые можно нажать, должны выглядеть как активные элементы.
3. Визуальное разделение сценариев. Я покрасила три карточки в разные цвета и подобрала для каждой свою иконку. Это поможет пользователю быстрее различать варианты и ускорит выбор. Когда элементы отличаются друг от друга, мозг воспринимает их как разные объекты, а не как однородный список.
4. Более конкретные названия сценариев. Вместо абстрактных формулировок появились прикладные описания. Пользователь сразу соотносит карточку со своей задачей и быстрее принимает решение. В UX-копирайтинге это базовое правило: текст на интерактивном элементе должен описывать результат, а не процесс.

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

Кейс 3: Сервис транскрибирования Digital Studio

Что было в версии “до”

1. Заголовок не объясняет пользу. Формулировка «ИИ сервис транскрибирования» звучит как техническое описание продукта, а не как ответ на задачу пользователя. Заголовок на главной странице сервиса должен сразу давать понять, что здесь можно сделать и какой результат получить. Вместо описания технологии лучше описывать действие: не «сервис транскрибирования», а, например, «Переведите аудио в текст за минуту».
2. Зона загрузки не выделяет главное действие. Блок загрузки файла занимает место на странице, но кнопка внутри него слабо акцентирована. Пользователь видит область, однако само действие «загрузить файл» визуально не считывается как главный шаг. Для сервиса, где всё начинается с загрузки, это ключевой элемент, и он должен быть более заметным на странице.
3. Таблица файлов перегружена. Колонки «Размер», «Состояние», «Осталось», «Дата» и «Длительность» занимают много места, но не все из них обязательны для работы с файлами. Статусы файлов оформлены однотипно, и их сложно различить при быстром сканировании. В таблицах с большим количеством строк визуальное разделение статусов критически важно — без него пользователь вынужден вчитываться в каждую строку.
4. Яркая шапка отвлекает от контента. Чёрная верхняя панель с логотипом и навигацией выглядит слишком массивно и перетягивает внимание на себя. Шапка должна помогать ориентироваться на сайте, но не конкурировать с рабочей областью.

Что изменилось в версии "после"

1. Зона загрузки стала главным элементом страницы. Я сделала кнопку загрузки ярче и растянула по всей ширине блока. Теперь пользователь будет сразу понимать, что сервис ждёт от него загрузки файла, и увидит, куда нажать ,чтобы это сделать. Когда на странице есть одно ключевое действие, оно должно визуально доминировать и выделяться на фоне остальных. Удалила заголовок "ИИ сервис транскрибирования", потому что он занимал место и описывал то, что и так понятно из контекста страницы.
2. Табы стали информативнее. Я добавила счётчики к вкладкам: «В работе (12)» и «История (46)». Так пользователь сможет оценить объём файлов в каждом разделе, не переключаясь между ними.
3. Прогресс обработки стал нагляднее. Я дополнила текст с информацией об очереди и времени ожидания иконкой и добавила индикатор прогресса, чтобы процесс обработки выглядел более прозрачным. Пользователь должен в любой момент понимать, на каком этапе сейчас идет обработка его файла, это снижает тревожность и создаёт ощущение контроля над процессом.
4. Таблица стала проще для сканирования. Я добавила цветовое кодирование для статусов и иконки типов файлов слева от названий. Теперь пользователь может мгновенно определить состояние каждого файла по цвету, не вчитываясь в текст, а иконки работают как визуальные якоря и помогают быстрее пробежаться по списоку глазами. Это применение принципа «preattentive processing»: цвет и форма считываются быстрее, чем текст, и ориентироваться в длинных списках становится гораздо проще.

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

Что общего у этих трёх кейсов

Во всех изначальных версиях часто встречались одни и те же проблемы:

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

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

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