Есть интерфейсы, которые работают. Есть те, которые не работают. А есть такие, которые как будто специально сделаны так, чтобы человек нажал не туда, потерял данные формы и почувствовал себя полным идиотом. Вот о разнице между ними мы и поговорим.
Представьте: ты заходишь на сайт банка, чтобы сделать перевод. Простой перевод. Три цифры. И вдруг — поле ввода суммы появляется только после того, как ты прокрутил страницу вниз, нажал кнопку «Далее» (куда — куда?!), согласился с уведомлением и... случайно закрыл модальное окно. Серьёзно? И это называется UX?
Кто такой Dizko и зачем это читать
Я не великий гуру UX. Я не читал десять книг про дизайн-мышление и не делал дипломную работу по психологии поведения. Я просто человек, которого доводят до белого каления плохие интерфейсы — и я разбираю их вслух. Без воды, без корпоративных формулировок, без «в результате анализа было выявлено». Мы покопались — и вот что вылезло.
Dizko — это журнал про UX/UI и Figma. Здесь нет теории ради теории — только разборы реальных продуктов с конкретными примерами. Маркетплейсы, приложения,сайты доставки — всё, что ты используешь каждый день и на что ругаешься в процессе. Зачем тебе это читать? Если ты делаешь продукт — чтобы не повторять чужих ошибок. Если ты пользуешься продуктом — чтобы понять, почему от него уходят другие. Или просто — чтобы посмотреть на плохой UX со стороны и почувствовать хоть немного удовлетворения от того, что кто-то всё это называет вслух.
Принцип 1. Пользователь не читает. Смирись
Есть такой термин — «сканирование страницы». Это называется— F-паттерн. На человеческом — пользователь не читает твой ловкий текст. Он пробегает глазами в поисках кнопки — или слова, которое выглядит как кнопка.
Пример: возьмём приложение доставки — скажем, Delivery Club пару лет назад. На главном экране была кнопка «Перейти по списку». Но она была похожа на ссылку. Мелкая, серая, без визуального веса. Пользователь пробегал мимо. Потому что он сканировал экран в поисках чего-то визуально выразительного. Серый текст на сером фоне не считается «кнопкой» — это просто шум. Это называется «потеря аффорданса». Штука? Нет. Десятки процентов потерянной конверсии — это реальные деньги.
Как неправильно: сделать кнопку цветом фона, написать на ней что-то вроде «дополнительная информация». Такая кнопка просто растворяется на паге. У неё нет веса, нет характера, нет причины на неё нажать. Пользователь пробежит мимо — и правильно сделает. Потому что вы ему не объяснили, что вот это самое важное.
Как правильно: выдели главное действие — цветом, размером, позицией. Назвавайте кнопку так, чтобы никто не сомневался: «Заказать», «Купить», «Получить». Не «Продолжить» — это не действие, это обещание продолжить непонятно что.
Вывод: если твоя главная кнопка не бросается в глаза с первого взгляда — у тебя не кнопка. У тебя пиксель в непонятном месте. Пользователь не ищет — он уходит.
Принцип 2. Иерархия — это не прокрутость. Это уважение к пользователю
Слушай, визуальная иерархия — это когда размер, цвет, позиция элементов говорят пользователю: «вот здесь важное, вот здесь менее важное, а вот это просто фон». Когда иерархии нет — всё кричит одновременно, и мозг пользователя просто отчаливает. А потом он закрывает приложение. И больше не возвращается.
Пример: возьмём любой интернет-магазин средней руки. Открываешь страницу товара. Сверху — баннер с акцией. Им же по размеру — название товара. Таким же шрифтом, такой же жирностью — цена. Таким же — кнопка «Добавить в корзину». Таким же — рейтинги. Таким же — состав и характеристики. Ну и вот это всё?! Что первое? Что важнее? Куда смотреть? Глаз не знает. Мозг требует дополнительных усилий. Дополнительных усилий — нет. Цель — одна, ты помнишь? Купить вот этот товар.
Как неправильно: всё в один размер. Всё одним цветом. Кнопка не выделяется — она просто висит в ряду с двадцатью других элементов такой же важности. Это не демократия в дизайне — это хаос. Глаз не знает за что цепляться — и цепляется ни за что.
Как правильно: название товара — большое. Цена — среднее. Кнопка «Купить» — яркая, выделенная, в самом видном месте. Всё остальное второстепенное. Точка. Вот и вся наука.
Вывод: если в твоём интерфейсе всё одинаково важное — значит, ничто не важно. Иерархия — это не про красивый дизайн. Это про уважение к времени пользователя. Ну и про деньги в вашем кармане тоже.
Принцип 3. Ошибка — не позор. Ошибка — это общение
Окей, вот мой любимый тип плохого UX. Пользователь что-то вводит неправильно. Например, номер телефона в неподходящем формате. Или пароль не той длины. Что происходит? Продукт холодно на него смотрит. Выдаёт ошибку — и чаще всего эта ошибка звучит примерно так: «Ошибка». Серьёзно? Просто «Ошибка»? Не «Пожалуйста, проверьте номер — должно быть 10 цифр»? Не «Номер введён неправильно, проверьте формат: +7 (XXX) XXX-XX-XX»? Просто «Ошибка» — и идите разбирайтесь сами. Спасибо, большое.
Это называется «микрокопия» — маленькие тексты в интерфейсе. Подсказки, сообщения об ошибках, подтверждения. На деле — это про то, понимаешь ли ты человека на другом конце экрана.
Пример позорного сообщения об ошибке в приложении банка: «Операция не выполнена. Ошибка: -100». Общался как-то в одном российском банке — и вот такое выскочило на экране после того, как перевод не прошёл. Никакого контекста. Никакого объяснения. Никакого понятия, что делать дальше. Попробовать ещё раз? Позвонить в поддержку? Идти пить валерьянку? Здорово, человек выбрал всё три варианта одновременно.
Как неправильно: интерфейс был проектирован так, что будто ошибок не существует. Нет подсказок. Нет подсветки. Нет форматов. А если что-то пошло не так — человек получает глухой технический текст вместо нормального объяснения. Интерфейс, который убивает быстрее, чем кофе без кофеина.
Как правильно: сообщение об ошибке должно отвечать на три вопроса: что пошло не так, почему это произошло и что сделать. «Пароль должен быть от 8 до 20 символов и содержать хотя бы одну цифру. Исправьте и попробуйте снова» — вот это общение. Не код ошибки —И0в режиме непонятно чего.
Вывод: ошибка — это не позор. Это разговор. И если твой интерфейс не умеет объяснять ошибку понятным человеческим языком — это не ошибка пользователя. Это ошибка продукта.
Зачем я вообще это делаю
Потому что мне правда интересно. Не в смысле «ну там, цифры, фреймворки». А в смысле «почему одни продукты работают, а другие нет». Это примерно как смотреть на два магазина на одной улице: один — яркий, удобный, всё понятно. Другой — охранник у дверей не знает, где вход, а касса находится в полуподвале. Разница между ними — в UX.
Кайф в том, чтобы разбирать вслух то, что все чувствуют, но не могут сформулировать. Пользователь знает: «что-то не так, но что — не понятно». Дизайнер знает: «надо что-то изменить, но что — непонятно». А Dizko — посередине. Говорит на языке, который понятен обоим.
Если ты делаешь продукт и хочешь понять, почему от него уходят пользователи — читай дальше. Я всё разберу. Без терминологического тумана, без корпоративного языка и без уважения к плохому UX. Которого он, кстати, заслуживает. Хотя бы потому, что его создал не пользователь.
И напоследок: если вы дочитали до этой строки — значит, интерфейс нашего журнала работает. Или вы очень упорстые. В любом случае — верно.