UX/UI-дизайн. Просто о сложном

Представьте кружку, из которой Вы обычно пьете чай. Достаточно ли она глубокая? Удобно ли ее держать, не скользит в руке? А цвет — нравится ли Вам ее оформление?

Подобными и другими вопросами задается UX/UI-дизайнеры. Только смотрят они на макеты сайта или приложения, которые ожидает от них заказчик. Как понять, что сайт будет оценен клиентами по достоинству? Что его дизайн и интуитивная понятность соответствуют человеку, а не роботу? Сейчас мы все объясним.

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



Или еще один пример: два меню, а именно основное и боковое. Некоторые наши заказчики возражают, когда мы дублируем элементы меню на странице, но посмотрите сами. Если клиенту необходимо перейти сразу с любой другой страницы на конкретную, например, с "Блога" на "Разработку сайтов", как он это сделает? Правильно, нажав на основное меню. А если уже на "Разработке сайтов" ему понадобится страница "Логотип", то боковое меню позволит сделать ему это быстро (т.к. оно находится ближе) и в один клик (за счет раскрывающихся элементов, чего нет в основном). Выгоды двух меню очевидны.



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

Популярно правило цветового решения 60-30-10. Это значит, что ресурс получает 60% основного цвета, 30% второстепенного, 10% акцентного. Пример показан ниже. На сайте team-b.ru белый цвет основной, синий второстепенный, а оранжевый использован в качестве акцента.



Напоследок вернемся к кружке. Как Вы понимаете, удобство и красота неотделимы при ее создании. Так и с дизайном, UX и UI рассматриваются как единое целое и чаще всего ими занимается один человек.



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

Team-B на связи!