UX/UI дизайн.

Что такое UX и UI

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

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

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

Как дизайн влияет на деньги

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

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

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

Из чего складывается удобный интерфейс

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

• Простота и предсказуемость. Элементы работают так, как человек ожидает: логотип ведёт на главную, корзина в правом верхнем углу, ссылки отличаются от обычного текста.
• Понятная навигация. С любой страницы видно, где вы находитесь и как вернуться назад.
• Читаемость. Достаточный размер шрифта, контраст текста и фона, воздух между блоками.
• Адаптивность. Сайт одинаково работает на телефоне, планшете и большом экране — не «открывается», а именно работает.
• Видимая реакция. На нажатие кнопки что-то происходит сразу: подсветка, индикатор, сообщение. Тишина после действия заставляет нажимать повторно.

Отдельно — первое впечатление. Оно складывается за секунды и по визуальной части: если страница выглядит устаревшей, дальше её изучать не станут.

Где чаще всего ломается

Самое частое — форма. Восемь полей вместо трёх, обязательное отчество, непонятная ошибка при отправке. Каждое лишнее поле стоит вам части заявок.

Второе — мобильная версия, которую делали по остаточному принципу. Мелкие кнопки, горизонтальная прокрутка, всплывающее окно, которое нельзя закрыть пальцем. При том, что большая часть визитов приходит именно с телефонов.

Третье — скрытая важная информация. Цена «по запросу», условия доставки в отдельном разделе, контакты только в подвале. Человек, который не нашёл ответ за полминуты, уходит искать его в другом месте.

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

Как проверить свой сайт

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

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

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

Когда нужен редизайн, а когда правки

Полная переделка — самый дорогой и самый рискованный вариант. Она оправданна, когда сайт технически устарел, не адаптируется под мобильные или его структура не соответствует тому, что компания сейчас продаёт.

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

Опасность редизайна в том, что вместе со старыми проблемами часто теряются работавшие решения. Поэтому перед переделкой стоит зафиксировать текущие показатели — иначе после запуска будет не с чем сравнивать.

Частые вопросы

Можно ли обойтись готовым шаблоном?

Для простого сайта — вполне. Шаблон закрывает базовые вещи: сетку, адаптивность, типографику. Дорабатывать всё равно придётся сценарии: шаблон не знает, как вы продаёте.

Как понять, что дело в дизайне, а не в трафике?

По конверсии. Если посетители есть, а заявок почти нет, причина внутри сайта. Если посетителей мало, сначала разбираются с источниками.

Сколько живёт дизайн сайта?

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

Нужны ли пользовательские тесты небольшой компании?

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

Что делать дальше

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

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