Статья
UI и UX дизайн простыми словами: в чём разница
UX и UI часто пишут через косую черту, и кажется, что это одно и то же. На деле это две разные стороны дизайна: одна отвечает за то, удобно ли пользоваться сайтом, другая — за то, как он выглядит. Разбираем разницу простыми словами и что из этого важно владельцу бизнеса.
UX — как этим пользоваться
UX — user experience, пользовательский опыт. Это всё, что определяет, легко ли человеку сделать то, ради чего он пришёл: найти услугу, понять цену, записаться, купить.
UX — это структура сайта, порядок блоков на странице, понятные названия разделов, короткая форма, путь от первого экрана до заявки. Плохой UX — это когда человек не находит цену, не понимает, куда нажать, или бросает форму на третьем поле.
UI — как это выглядит
UI — user interface, интерфейс. Это внешний вид: кнопки, цвета, шрифты, иконки, отступы, состояния элементов при наведении и нажатии.
Простая аналогия — магазин. UX — как устроен зал: где вход, где кассы, как идти между полками, чтобы найти нужное. UI — как выглядят полки, ценники и вывески. Красивые полки не спасут магазин, в котором невозможно найти молоко.
Почему важно и то, и другое
- Красиво, но неудобно — посетитель восхищается первым экраном и уходит, не найдя цену.
- Удобно, но некрасиво — всё понятно, но сайт не вызывает доверия и выглядит дешевле, чем компания на самом деле.
Хороший сайт — когда внешний вид помогает пользоваться: главная кнопка заметна, важное выделено, второстепенное не отвлекает.
Законы UX, полезные владельцу сайта
- Закон Якоба. Люди проводят большую часть времени на других сайтах и ждут, что ваш работает так же. Корзина справа вверху, логотип ведёт на главную, меню — там, где его ищут. Оригинальничать в базовых вещах дорого.
- Закон Фиттса. Чем больше кнопка и чем ближе она к пальцу или курсору, тем быстрее в неё попадают. Поэтому главная кнопка — крупная и под рукой. Подробнее — в статье «Кнопка призыва к действию».
- Закон Хика. Чем больше вариантов, тем дольше выбор. Десять одинаковых кнопок на экране — это десять секунд сомнений и часто отказ.
- Эффект эстетики и удобства. Красивое кажется людям удобнее, чем оно есть на самом деле, — поэтому дизайн прощает мелкие неудобства, но не большие.
Эти и другие законы собраны в книге Джона Яблонски «Законы UX».
Как понять, что сайт удобен
- Посмотрите записи визитов в Вебвизоре: где люди путаются, что пытаются нажать, где бросают форму. О нём — статья «Вебвизор».
- Попросите пять человек выполнить задачу на сайте — найти цену и записаться — и молча понаблюдайте. Пяти обычно хватает, чтобы увидеть главные проблемы.
- Сравните конверсию до и после изменений — о ней статья «Конверсия сайта».
Как это устроено у нас
В нашей команде за UX и UI отвечает дизайнер интерфейсов: прототипы, внешний вид и адаптация под телефон. Сначала мы проектируем путь посетителя — схему блоков и разделов, — потом рисуем, как это выглядит, и показываем макеты до начала вёрстки. Об этих этапах — в статьях «Прототип сайта» и «Макет сайта».