UX/UI-дизайн — это не «сделать красиво»
Почти каждый второй бриф, который я получаю, заканчивается словами «главное, чтобы было красиво». Красиво будет. Но если начинать с этого, сайт получается похожим на хорошую обложку журнала, который никто не открывает.
Murodjon MaxmudovДизайнер
Год назад клиент прислал мне в Telegram три скриншота: сайт Apple, лендинг какого-то американского стартапа и пост из Instagram с градиентом. Подпись: «Хотим примерно так». Речь шла о сайте для бизнеса, где 80% посетителей заходят с телефона, по ссылке из Telegram-канала, и хотят за минуту узнать цену и адрес.
Я не против Apple. Но ни один из этих скриншотов не отвечал на вопрос, что человек должен сделать на сайте. Это и есть разница между UI и UX, о которой я хочу рассказать без учебника.
Красиво и удобно — разные задачи
UI (user interface) — это то, что вы видите: цвета, шрифты, кнопки, иконки, отступы. UX (user experience) — это путь человека: откуда он пришёл, что ищет, где споткнётся и почему уйдёт.
Простой тест. Если убрать с макета все цвета и картинки и оставить серые прямоугольники, станет ли понятно, куда нажимать? Если нет, никакой градиент не спасёт.
Я работаю в обе стороны: рисую логотипы и брендбуки, но на сайтах трачу больше половины времени на вещи, которые клиент в итоге не видит. Структура страниц, порядок блоков, тексты на кнопках, что происходит после нажатия. Клиенту это кажется «подготовкой», хотя это и есть основная работа.
Что я делаю до того, как открыть Figma
Мой процесс за последние два года почти не менялся. Меняется только длина шагов: для лендинга исследование занимает день, для платформы — неделю.
- Разговор с владельцем. Не про цвета, а про людей: кто приходит, откуда, на каком языке, с какого устройства. В Ташкенте ответ почти всегда «с телефона, из Telegram или Instagram».
- Чужие сайты. Смотрю 5–10 конкурентов, в том числе неудачных. Записываю, что раздражает меня как посетителя. Это быстрее любого опроса.
- User flow. Рисую стрелками путь: человек пришёл с рекламы → увидел цену → нажал «Написать в Telegram». Если путь не помещается в 3–4 шага, где-то лишнее.
- Вайрфреймы. Серые блоки без стиля. На этом этапе клиент спорит о содержании, а не о том, нравится ли ему синий.
- Кликабельный прототип. Показываю его 3–5 людям, которые похожи на будущих пользователей. Часто это родственники или сотрудники клиента, и этого достаточно, чтобы найти грубые ошибки.
- UI. Только теперь цвета, типографика, иллюстрации, анимация. И дизайн-система: кнопки, поля, карточки, чтобы фронтенд-разработчик не угадывал отступы.
Шестой шаг клиенты любят больше всего. Первые пять экономят им деньги.
Platina: новостной сайт, где главное — читать
Для Platina (клиент — Media Affairs) мы делали логотип, UX/UI и сам новостной сайт. Рубрики: политика, экономика, наука, культура, спорт. Новостей много, обновляются они каждый день, и читатель приходит не любоваться, а прочитать конкретную заметку.
Основные решения были не про красоту:
- Иерархия на главной. Одна главная новость, затем несколько важных, затем лента. Если всё одинакового размера, глаз не знает, куда смотреть.
- Типографика для длинного текста. Ширина строки, межстрочный интервал, размер шрифта на телефоне. Новостному сайту это важнее, чем любая иллюстрация.
- Рубрики как навигация, а не украшение. Человек, который читает про спорт, должен в один тап попасть в спорт, а не листать политику.
- Карточка новости. Дата, рубрика, заголовок, превью. Каждый элемент на одном и том же месте во всех списках, чтобы мозг не перестраивался.
Логотип делали параллельно и проверяли не на белом листе, а внутри шапки сайта и в маленькой иконке вкладки. Про логотипы я подробнее напишу отдельно.
PlanBaby: когда пользователь волнуется
PlanBaby — платформа о планировании беременности и родительстве, с интернет-магазином и клиникой. Здесь UX был про другое: человек, который ищет информацию об овуляции или анализах, часто тревожится. Ему не нужны яркие баннеры и всплывающие окна со скидками.
Что мы учитывали:
- Мобильная версия первой. Статьи читают вечером с телефона, поэтому макеты я начинал с ширины 375 px, а десктоп уже растягивал.
- Инструменты отдельно от статей. Калькулятор овуляции, база имён для ребёнка, расшифровка спермограммы. Это то, ради чего возвращаются, поэтому у инструментов свой раздел в меню.
- Рубрики по этапам жизни. Планирование, беременность, подготовка, кормление. Человек находит себя в одном слове, а не в сложном дереве категорий.
- Магазин не перебивает контент. Каталог и корзина есть, но статьи не превращаются в рекламу товаров.
- Два языка без перекоса. Узбекский и русский тексты разной длины, и кнопки должны выдерживать оба варианта, не ломая строку.
Честно скажу: с магазином мы сначала перестарались. В первых макетах товарные блоки стояли почти в каждой статье, и страница выглядела как маркетплейс. После обсуждения с командой убрали половину. Это был правильный шаг.
“Хороший макет для меня как разработчика — тот, где у каждого состояния есть экран: пустой список, ошибка, загрузка, длинное имя на узбекском. Если этого нет, решения принимает программист, а программист обычно выбирает то, что быстрее сверстать.”
Во что обходится плохой UX
Плохой интерфейс редко ломается громко. Он просто тихо теряет людей. Вот симптомы, которые я чаще всего вижу на сайтах, приходящих к нам на редизайн:
| Симптом | Что теряет бизнес | Как обычно исправляем |
|---|---|---|
| Кнопка «Связаться» только в подвале | Заявки с мобильных, человек не долистывает | Закреплённая кнопка Telegram на телефоне |
| Цена спрятана или «по запросу» везде | Доверие, люди уходят к тем, где цена есть | Диапазон «от…» хотя бы для основных услуг |
| Форма на 10 полей | Заявки на последнем шаге | Имя и Telegram, остальное уточняем в переписке |
| Текст на картинке | Поиск, перевод, читаемость на телефоне | Текст отдельным слоем поверх изображения |
| Меню из 12 пунктов | Время, человек не находит нужное | 5–6 пунктов, остальное в подразделах |
Ни одна из этих проблем не про «некрасиво». Все про то, что никто не нарисовал путь пользователя заранее.
Как понять, что дизайнер делает UX, а не картинки
Если вы выбираете дизайнера или студию, задайте несколько вопросов. По ответам сразу видно, с кем вы говорите.
- Спрашивает ли он, откуда приходят ваши клиенты и с каких устройств?
- Показывает ли он вайрфреймы или сразу готовый яркий макет?
- Есть ли в макете мобильная версия, и не «потом», а сразу?
- Есть ли состояния ошибок и пустых экранов?
- Готов ли он объяснить, почему блок стоит именно здесь, а не «так красивее»?
Цена дизайна на это тоже влияет. UI/UX-дизайн у нас начинается от $600, и большая часть этих денег уходит как раз на структуру и прототип. Если вам предлагают «дизайн сайта» за $100, скорее всего, вы получите только шестой шаг из моего списка.
Если бы я писал этот текст для себя пятилетней давности, я бы сказал одно: не влюбляйся в первый макет. Сначала серые прямоугольники, потом спор о смысле, и только потом цвет. Посмотреть, как это выглядит в готовых проектах, можно в кейсах Platina и PlanBaby, а про то, как мы делаем интерфейсы, — на странице UX/UI-дизайна.
