Что первое приходит на ум при упоминании слова «дизайн»? Красота, эстетичность, стиль? Точно что-то про внешний вид. Но сайты создаются не для выставки и любования, а для зарабатывания денег. Поэтому задача веб-дизайнера — подтолкнуть посетителя к целевому действию. Для этого нужно, чтоб веб-ресурс был понятным, удобным, отзывчивым, ну и привлекательным тоже.
Исходя из этого, требования к веб-дизайнеру обширны: нужно понимать, как мыслит посетитель, что ему нравится, что он ожидает, а также, какие бывают шрифты, как лучше комбинировать цвета, как удержать внимание и многое другое.
Так на рынке появилось разделение на UX и UI дизайн.
Итак, что такое UI/UX дизайн и чем они отличаются — читайте дальше.
Что такое UX-дизайн?
UX (англ. user experience) — пользовательский опыт.
UX — проектирование сайта либо приложения на базе данных о пользовательском опыте.
Основная задача — изучить поведение посетителей и найти лучший способ отображения элементов на веб-площадке.
Цель — сформировать положительное впечатление юзера о ресурсе, а также сделать путь от входа к конечному действию легким и приятным.
Что конкретно делает UX-специалист:
- изучает целевую аудиторию (берет интервью, тестирует, наблюдает за реакциями, составляет портрет).
- анализирует статистику площадки (ищет проблемные зоны, где и почему гости уходят).
- продумывает варианты пользовательских сценариев (связи между страницами и элементами интерфейса, их расположение, логику и последовательность).
- разрабатывает вайрфреймы, мокапы и прототипы.
- проводит A/B-тестирование прототипов.
| Вайрфреймы — черно-белый, без детализации план веб-проекта. Показывает в общих чертах Что? Где? Как? Мокапы — план, который передает стиль, «характер» задания. Тут есть цвет, картинки, информационная структура. Прототипы — интерактивный образец, с помощью которого можно проводить юзабилити-тестирования. Нажимаются кнопки, работают всплывающие окна. |
Например, как разрабатывали UX-дизайн навигации в компании Uber для водительского приложения.
Их целью было создать точную, удобную навигацию, которая не будет отвлекать от дороги, чтоб минимизировать касания приложения во время пути.
Для этого специалисты ездили рядом с таксистами, изучали их пожелания, проблемы. Проводили тестирование прототипов, приглашали водителей в офис и спрашивали их мнение. Даже использовали устройство для слежения за передвижением глаз, чтоб понять, как они взаимодействуют с дорогой и картой.
Так понятие UX-дизайна — это про маркетинг, психологию, инженерию и в некоторой степени программирование.
Что такое UI-дизайн?
UI (англ. user interface) — пользовательский интерфейс.
UI — работа над внешним видом.
Задача — сделать интерфейс удобным, понятным и красивым.
Цель — создать веб-продукт, на котором клиент быстро, без проблем решит свою задачу. Формирование узнаваемости бренда с помощью единого стиля.
Что делает UI-специалист:
- продумывает единый стиль: подбирает шрифты, цвета, картинки
- обрисовывает кнопки, окна, иконки, которые интуитивно узнаваемы и удобны
- отслеживает правильность отображения элементов, совершенствует логику подачи информации
- делает готовый макет для программиста
То есть отслеживает, чтоб был удобный размер окна, хорошо видимая кнопка, читабельный шрифт, понятная форма обратной связи, красиво ли смотрится.
7 слов на «П», которые описывают требования к UX/UI дизайну
- Привлекательность. Дизайн, который интригует и нравится. Нет раздражающих цветов, постоянно всплывающих окон. Все сделано со вкусом.
- Понятность. «Вот корзина, а это кнопка купить, если нажму сюда, попаду в каталог, а если сюда, вернусь на главную». Клиент должен понимать все детали интуитивно. Не надо путать юзера и изобретать велосипед, лучше использовать всем знакомые иконки, узнаваемые цвета.
- Простота. Нет лишних элементов, которые отвлекают от конечной цели. На экране присутствуют объекты, которые важны в данный момент.
- Продуманность. Вся информация, страницы, объекты структурированы, логично размещены. Чтоб было легко находить ответы и достигать нужной цели.
- Предусмотрительность. Позаботьтесь об ошибках клиента. Чтоб он легко смог отменить действие, вернуться обратно или узнать, что пошло не так. Он будет вам благодарен, а поэтому лоялен.
- Продуктивность. Интерфейс должен экономить время и усилия. Поэтому к конечной цели посетитель должен дойти быстро и легко.
- Положительность. Манипуляции с продуктом должны вызывать приятный опыт, оставлять только хорошее впечатление.
Отличия UX и UI: расставляем четкие границы
Где должно быть меню интернет-магазина? Какие элементы должны присутствовать, а какие отвлекают внимание? Продумывание навигационных цепочек, чтоб посетитель понимал, где он находится и как вернуться к исходной точке либо на шаг назад. Этим занимается UX-дизайнер.
Какой шрифт использовать для меню? Какой цвет? Как должны подсвечиваться ссылки на страницы? Как выглядят иконки панели навигации? Область задач UI-дизайнера.
UX-дизайн — про смысл, логику, причинно-следственные связи, которые исходят из потребностей, привычек, пожеланий посетителей.
UI-дизайн — про видимую часть проекта. Как это должно выглядеть и сочетаться. Когда эта часть строится на анимации и эффектах, как в сайтах с wow-эффектом, требования к UX никуда не исчезают: движение должно вести посетителя к целевому действию, а не отвлекать от него.
Если погуглить вакансии, то нечасто встречаются предложения на отдельную должность UI либо UX-специалиста. Чаще ищут универсального бойца, имя которому UI/UX-дизайнер. Простыми словами, UX/UI-дизайнер — это специалист, который отвечает и за логику взаимодействия, и за внешний вид интерфейса. И грань между ними стирается, поэтому часто не понимают их отличие.
В UX идет упор на понимание человеческого поведения, мышления, нужд и хотелок. UI — это про графику, цвета и красоту, на основе данных, предоставленных UX-дизайнером.
Создание сайта — это очень ответственный процесс, так как от его работы зависит успех бизнеса. Восприятие продукта формируется не только качеством товара либо услуги, но и тем, как его позиционируют, подают и предлагают. Его воспринимают целостно. Огромная роль в этом отведена веб-дизайну. Не зря в Apple (продукты которой прославились своим восхитительным интерфейсом) все работники отчасти дизайнеры.
Важно помнить: истина в простоте, лучший веб-дизайн тоже. Избавиться от всего лишнего и обрамить все в приятный каркас — это огромный процесс сбора, анализа и структурирования информации. Все это умеет хороший UI/UX-специалист.