UX/UI-дизайн простыми словами: чем отличаются и что это даёт сайту

UX и UI простыми словами

Термин «опыт пользователя» популяризировал Дон Норман, один из основателей исследовательской компании Nielsen Norman Group. В их определении UX охватывает все стороны взаимодействия человека с компанией, её услугами и продуктами. Для сайта это сужается до простого вопроса: легко ли посетителю сделать то, ради чего он пришёл?

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

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

Разница UX и UI на примере формы заявки

Возьмём обычную форму «Оставьте заявку» на сайте ремонта квартир.

Что решает UX

• Нужна ли форма вообще здесь. Может, человек на этом шаге хочет написать в мессенджер, а не заполнять поля.
• Сколько полей. Имя, телефон, площадь, тип ремонта, бюджет, удобное время звонка, комментарий. Каждое лишнее поле — повод бросить заполнение.
• В каком месте страницы. После цен и отзывов, когда сомнения сняты, или в самом начале, когда человек ещё ничего не понял.
• Что происходит после отправки. Пустая страница, «спасибо» или понятное «Перезвоним в течение 15 минут, а пока посмотрите примеры работ».
• Что видит человек, если ошибся. Красная рамка без пояснения или подсказка «Номер должен начинаться с +7 или 8».

Что решает UI

• Как выглядят поля. Видны ли их границы, подписаны ли они над полем, а не только серой подсказкой внутри, которая исчезает при вводе.
• Какая кнопка. Контрастная, крупная, с понятным текстом «Рассчитать стоимость», а не «Отправить».
• Как выглядит ошибка. Цвет, иконка, текст рядом с полем.
• Как форма выглядит на телефоне. Поля на всю ширину, клавиатура с цифрами для телефона, кнопка не прячется за клавиатурой.

Одна и та же форма может провалиться по любой из сторон. Мы видим на разборах обе картины. Красивая форма из семи полей с полем «Ваш бюджет» — хороший UI и плохой UX. Короткая форма из двух полей, где кнопка того же серого цвета, что и фон, — хороший UX и плохой UI. Как собрать форму, которую заполняют, разобрано в статье форма заявки на сайте.

Основы UX/UI-дизайна для сайта

Пара принципов, по которым можно проверить любой сайт без специального образования.

Основы UX:

1. Одна страница — одна главная цель. Посадочная страница под рекламу ведёт к заявке, а не к десяти разным действиям.
2. Ответы в порядке вопросов. Что это, сколько стоит, почему вам можно доверять, как заказать.
3. Минимум шагов. Каждый лишний клик и каждое лишнее поле теряют часть людей.
4. Понятные слова. «Рассчитать стоимость ремонта» вместо «Отправить», «Услуги» вместо «Решения».
5. Предсказуемость. Логотип ведёт на главную, телефон кликабелен, меню там, где его ищут.

Основы UI:

1. Иерархия. На экране одно главное — заголовок или кнопка.
2. Единообразие. Все кнопки одного стиля, все ссылки одного цвета.
3. Контраст. Текст читается на любом экране, включая телефон на солнце.
4. Состояния. У кнопки есть вид при наведении и нажатии, у поля — вид с ошибкой.
5. Размер под палец. На телефоне кнопки и ссылки достаточно крупные, чтобы попасть с первого раза.

Мы на своих проектах начинаем с UX: прототип, тексты, порядок блоков. Только потом переходим к визуалу. Если делать наоборот, красивые экраны приходится переделывать, когда выясняется, что логика не работает. Про этот этап — в статье прототип сайта.

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

UI/UX-дизайн сайта: из каких этапов состоит работа

Сроки — ориентир из нашей практики для сайта услуг на 5–10 страниц. Для лендинга всё быстрее, для сервиса с личным кабинетом — в разы дольше.

Общий процесс веб-дизайна, включая адаптив и передачу в работу, описан в статье веб-дизайн: что это.

Когда малому бизнесу нужен отдельный UX-специалист

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

Отдельный UX-специалист окупается, если:

• у вас сервис с личными кабинетами, ролями, сложными формами;
• онлайн-запись или бронирование с выбором услуги, мастера, времени и оплатой;
• интернет-магазин с фильтрами, сравнением и корзиной на сотни товаров;
• конверсия упала, а причину не видно в аналитике;
• у вас много трафика, и даже прирост конверсии на десятые доли процента даёт заметные деньги.

Как проверить UX своего сайта бесплатно

Не нужно заказывать исследование, чтобы найти главные проблемы. Есть простые способы.

1. Тест на пять секунд. Покажите первый экран человеку не из вашей сферы. Через пять секунд спросите: что предлагают и что делать дальше.
2. Наблюдение. Попросите знакомого заказать услугу на вашем сайте с телефона. Молчите и смотрите, где он замялся.
3. Вебвизор. В Метрике можно посмотреть записи визитов реальных посетителей. Как пользоваться и на что смотреть, разобрано в статье Вебвизор: как пользоваться.
4. Аналитика форм. В Метрике есть отчёт, который показывает, сколько людей начали заполнять форму и на каком поле бросили. Описание — в справке Метрики.
5. Карта кликов. Показывает, куда нажимают люди. Если кликают на картинку или текст, который не ссылка, — они ожидают там действия.

Условный пример: сколько стоит лишнее поле

Пример условный, не кейс студии. Сервис по ремонту бытовой техники, 2 000 посетителей с рекламы в месяц.

Было: форма из шести полей: имя, телефон, марка техники, модель, описание поломки, удобное время. В аналитике форм видно, что 120 человек начали заполнять, а отправили 30. Больше всего бросали на поле «Модель»: люди не знают модель своей стиральной машины.

Стало: два поля — имя и телефон, а под формой строка «Мастер уточнит детали по телефону». Плюс кнопка мессенджера рядом.

Если из тех же 120 начавших отправили бы хотя бы 70, заявок стало бы в два с лишним раза больше при том же бюджете. Это UX-правка: дизайн формы не менялся, поменялась логика.

Тексты в интерфейсе: самая дешёвая UX-правка

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

Принцип простой: текст должен говорить, что произойдёт после нажатия, и снимать страх. «Без спама», «бесплатно», «перезвоним за 15 минут» отвечают на вопросы, которые человек задаёт себе, прежде чем оставить телефон. Хотите опереться на методику — у Nielsen Norman Group есть подробный разбор того, как писать тексты интерфейса.

Мы на каждом проекте отдельно проходим по всем кнопкам и сообщениям сайта. Обычно находим 5–10 мест, где интерфейс говорит на языке разработчика. Клиент таких слов не использует.

Частые ошибки в UX/UI сайтов малого бизнеса

• Кнопка без глагола. «Подробнее» и «Отправить» ничего не обещают.
• Подсказка вместо подписи. Серая надпись внутри поля исчезает при вводе, и человек забывает, что вводил.
• Меню из 12 пунктов. Люди теряются и уходят.
• Телефон картинкой. На телефоне по нему нельзя нажать.
• Всплывающее окно через три секунды. Человек ещё не понял, где он, а его уже просят оставить почту.
• Разный вид одинаковых кнопок. Посетитель не понимает, что важнее.
• Форма внизу длинной страницы без кнопки наверху. До неё не доходят.

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