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

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

Какими были сайты 20 лет назад

Первый веб-ресурс был запущен почти 30 лет назад создателем интернета Тимом Бернерсом-Ли. Сайт состоял из текстового контента и гиперссылок. Языка CSS ещё не было, поэтому оформление заканчивалось на заголовках разного уровня. Несмотря на отсутствие дизайна, сайт справлялся со своей задачей. Он рассказывал пользователям о том, что такое интернет-пространство, и как оно работает. Аудитория у этого проекта отсутствовала, но информации хватало для базового понимания принципов работы интернета.

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

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

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

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

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

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

Как отличить хороший UI от плохого

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

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

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

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

Пренебрежение юзабилити

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

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

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

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

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

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

Отсутствие подсказок

Красивого интерфейса с анимацией мало для выполнения задач пользователей. Человек заходит в интернет-магазин, чтобы оформить заявку на шуруповёрт, но не может найти кнопку для отправки товара в корзину. Через 5 минут бесцельных поисков он закрывает страницу и решает, что больше не доверится этой компании. Оказывается, что кнопка доступна только после регистрации, а информация об этом скрыта в недрах раздела FAQ.

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

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

Ещё один сайт в стиле брутализма создан, чтобы выкупать рекламные места для продвижения компаний или сайтов. Создатель добавил в нижнюю часть страницы подсказку о том, что проект перестал работать в декабре 2018 году. Без неё пользователям было бы непонятно, почему кнопка «Арендовать» недоступна для клика.

Для описания логичного интерфейса часто используют понятие «интуитивность». Это свойство, которое позволяет быстро осваивать новые продукты или технологии. Предположим, что таксист постоянно работал на механической коробке передач, а потом резко пересел на автоматическую. Ему останется только разобраться в режимах работы, а остальное он и так знает. Знаки на дороге не изменились, педали газа и тормоза тоже.

Вспомните крутые ощущения, которые возникали при знакомстве с новым сайтом или приложением. Предположим, вы раньше вносили расходы вручную, а теперь установили программу, которая считывает QR-код с чека, подгружает список покупок с удалённого сайта и автоматически распределяет элементы по категориям. Останется только проверить общую сумму и проследить, чтобы все покупки попали в статистику.

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

Запутанная навигация

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

На скриншоте выше американская доска объявлений Craigslist, дизайн которой не менялся с момента создания площадки. Удивительно, но сайт входит в число самых посещаемых ресурсов американского интернета. Пользователи не только добавляют объявления, но и покупают платные услуги. Оборот доски объявлений исчисляется миллионами долларов в месяц.

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

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

Сайт можно обновить для улучшения пользовательского опыта, но за более чем 20 лет активного развития проект оброс большой структурой. На редизайн и тестирование новой версии уйдёт много времени и ресурсов. Создателям проще сохранить знакомый пользователям образ. Проект настолько популярный, что совсем не нуждается в рекламе. На рынке есть конкуренты с более современным дизайном, которые давно работают, но не могут уменьшить долю Craigslist.

Чрезмерное давление

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

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

Ещё недавно на сайте Curology было написано, что подписка на месяц стоит 20 долларов и никаких других платежей нет. В процессе оформления заказа выяснялось, что придётся заплатить 5 долларов за доставку. Скрытие цен — популярная манипуляция, которая позволяет компаниям временно увеличивать доход. Вместе с ростом прибыли они получают недовольных клиентов или даже коллективные иски за обман.

Чрезмерное давление проявляется по-разному. Например, Google пытается всяческими способами заставить пользователя добавить номер телефона в аккаунт Gmail. Кроме упоминаний о том, что данные станут доступны злоумышленникам, в компании решили добавить подтверждение через СМС-код для регистрации аккаунта.

Регистраторы доменов грешат автоматическим добавлением услуг в корзину. Если пользователь хочет зарегистрировать 4 домена, ему придётся отключать лишние опции для каждого адреса отдельно. Это время можно было потратить с пользой. Чрезмерное давление всегда играет против компании и снижает количество целевых действий.

Внутренние противоречия

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

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

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

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

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

Устаревший интерфейс и конверсии

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

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

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

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

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

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

Чёткой формулы идеального интерфейса не существует. Хороший UI и плохой UX вызовут у пользователей только недоумение. В идеале UI и UX должны быть на уровне, чтобы цифровой продукт приносил пользу.

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