Что такое UX и UI в веб-дизайне, роль в разработке сайта

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

Основные термины

Как и многие компьютерные термины, UX и UI пришли к нам из английского языка. UX — это User Experience, а UI — User Interface. Коротко говоря, UX это ощущения пользователей от работы с интерфейсом сайта либо устройства, а UI это внешний вид интерфейса (цвет и размер кнопок, читабельность текста и пр.). Разберемся с этим немного подробнее.

UX-дизайн

Появлением термина UX-дизайн мы обязаны компании Apple. Именно она впервые использовала эту аббревиатуру. Однако сам объект обсуждения существует с незапамятных времен. Можно смело называть UX-дизайнером человека, который придумал конную упряжь или прялку, определил порядок взаимодействия с тостером и стиральной машиной. Задача такого специалиста — пошагово спланировать поведение пользователя, который будет работать с устройством или сайтом, расписать все шаги, сделать их выполнение максимально удобным, а количество — минимально возможным.

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

UI-дизайн

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

В этом направлении работы над сайтом важно соблюдать несколько ключевых правил:

1. Все видимые составляющие ресурса должны быть логичными и связанными друг с другом. Блоки — располагаться в нужных местах и на удобном расстоянии, кнопки — находиться там, где положено, и быть заметными, изображения — соответствовать тексту и пр.
2. Элементы интерфейса важно расположить ровно, учитывая особенности человеческого восприятия. Если дизайнер забудет про типографику и золотое сечение, посетителя ждут крайне неприятные ощущения.
3. Кнопки и блоки, близкие по смыслу и функциям должны быть сгруппированы. Например, корзину, избранное, сравнение товаров и личный кабинет желательно располагать в одном месте, так как все это — личное взаимодействие пользователя с сайтом. Пункты меню доставка и оплата, о компании и контакты — также элементы одного порядка. Кнопки добавления в корзину и покупки в 1 клик нужно размещать рядом друг с другом в области блока с ценой, и так далее.
4. Цветовая гамма «правильного» ресурса однородная, нет кричащих оттенков, которые «режут глаз», а то, что должно выделяться, так или иначе гармонирует с остальными цветами.
5. При первом же взгляде на ресурс должно быть очевидно, что он имеет общий стиль. Во внимание принимаются не только цвет, но и размеры, и тип шрифта, параметры основных модулей, интерактивные детали интерфейса.

Кто создает UX и UI дизайн

Чаще всего UX/UI-дизайнер — один и тот же человек. Отметим, что эти направления развиваются и растут, так что довольно скоро ситуация изменится. Но пока опытному специалисту под силу справиться с задачами по обоим направлениям.

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

UI-специалист создает облик страниц, выбирает графический редактор, отслеживает внешний вид сайта в разных браузерах и на разных устройствах, отвечает за эстетику ресурса.

Как видите, UX/UI-дизайн — старше и шире веб-дизайна. Не так критично, будет ли заниматься разработкой один мастер или два разных. Главное — не перепутать порядок их работы и помнить, что продуманная последовательность действий посетителя на сайте все-таки важнее оттенка кнопочек.