UX и UI дизайн: в чём разница и что из этого нужно вашему сайту

Две стоматологии в одном районе почти одновременно заказали новые сайты с UI/UX-дизайном. Первая получила сайт с размахом: видео на весь экран, модные шрифты, плавная анимация. Второй сайт выглядит скромнее. Зато на нём к врачу можно записаться с телефона за минуту, а на первом форма записи спрятана в третьем пункте меню и просит заполнить девять полей.

Через месяц заявок больше у второй клиники. Первая вложилась в UI, вторая в UX. Обе при этом говорили одно слово: «дизайн».

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

Оба термина пришли из английского. UX означает user experience, то есть «опыт пользователя». UI означает user interface, «пользовательский интерфейс». Интерфейс — это всё, с чем человек имеет дело на экране: меню, кнопки, формы, карточки товаров.

Разницу проще всего увидеть на примере кафе. UX — это то, как устроен ваш визит. Сразу ли понятно, куда сесть. Лежит ли меню на столе или за ним надо идти к стойке. Быстро ли приносят счёт. UI — это интерьер: цвет стен, посуда, шрифт в меню, форма стульев.

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

Слово «UX» ввёл в обиход Дон Норман, когда работал в Apple в 1990-х. Ему казалось, что слова «интерфейс» и «юзабилити» описывают слишком узкую часть того, что чувствует человек, пользуясь продуктом. Для сайта это значит, что UX начинается ещё до первого клика. С того, как быстро открылась страница и понял ли человек, что попал куда нужно.

Если коротко, UX отвечает на вопрос «удобно ли», а UI на вопрос «понятно ли глазу и приятно ли». Вот как это выглядит в работе.

Самая частая путаница: UX считают чем-то вроде правильного расположения кнопок. На деле UX решает гораздо раньше. Какие вообще страницы нужны. Что человек увидит первым. Какой вопрос он задаст через пять секунд и где найдёт ответ. Кнопка здесь последнее звено.

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

Когда говорят «UX сайта», имеют в виду весь путь человека от входа до заявки. Его удобно разложить на простые вопросы, которые посетитель задаёт себе в первые секунды и минуты.

Пример из жизни. Компания продаёт межкомнатные двери и просит в заявке имя, телефон, почту, адрес, размер проёма и удобное время звонка. Менеджеру удобно: всё сразу. А человек на шестом поле закрывает вкладку. Если оставить имя и телефон, а остальное уточнить в разговоре, заявок станет больше. Это и есть UX-решение. Оно не про красоту, а про то, сколько усилий вы требуете от клиента.

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

Хороший пример UX можно посмотреть на сайте «Бифистим». Человеку не нужно разбираться в штаммах пробиотиков. Он отвечает на несколько вопросов и за 3 минуты получает средство под свою задачу. Сложный выбор превратился в короткий и понятный сценарий.

UI-дизайн сайтов — это не одна красивая главная страница. Это система элементов, из которых потом собирают все страницы, включая те, которых ещё нет.

Отдельно про размер кнопок. Пальцем попасть труднее, чем курсором. Apple в рекомендациях для интерфейсов советует делать область нажатия не меньше 44 точек, Google в Material Design не меньше 48. На сайте это значит простую вещь: никаких крошечных крестиков и ссылок, которые стоят вплотную друг к другу.

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

Разработка UI/UX-дизайна для сайта почти всегда идёт в одном порядке: сначала думают, потом рисуют. Если поменять шаги местами, красивые макеты потом приходится переделывать.

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

Подробнее о первых шагах мы писали отдельно: зачем нужен прототип сайта и как проверить удобство сайта за один день.

Ответ зависит от того, что происходит с сайтом сейчас. Вот четыре типовые ситуации.

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

Такую проверку можно сделать самому. А можно заказать UX-аудит: специалист пройдёт сайт по сценариям ваших клиентов и составит список правок по важности. Часто самые полезные правки оказываются самыми простыми: убрать лишнее поле, поднять цену на первый экран, переписать текст кнопки.

Как UX работает на заявки, хорошо видно на сайте стоматологии «Время радоваться». Пациент ещё до приёма знакомится с врачом по коротким роликам и записывается прямо с телефона. Сайт новой клиники приносит больше 120 записей в месяц.

Эти ошибки встречаются чаще всего. Почти все они не про талант дизайнера, а про то, как поставлена задача.

Оценивать дизайн по картинке на большом мониторе. Макет смотрят на огромном экране в уменьшенном виде, и всё кажется аккуратным. Смотрите его на своём телефоне и в масштабе 100%.

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

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

Делать UX ради UX. Сайту-визитке на пять страниц не нужны три недели интервью и карта пути из двадцати шагов. Глубина исследования должна соответствовать сложности продукта.

Не собрать набор элементов. Дизайнер нарисовал пять страниц, остальные тридцать верстальщик собрал «по аналогии». Через полгода на сайте шесть видов кнопок, и никто не помнит, какая из них правильная.

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

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

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