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