Все статьи Что такое UX/UI-дизайн, фотография 1

Что такое UX/UI-дизайн

20 апреля 2018
Клиентам
Дизайнерам
Что такое UX/UI-дизайн
20 апреля 2018
Клиентам
Дизайнерам
Олеся
Мельник

Термин User eXperience, или просто UX, возник в 1993 году в недрах корпорации Apple. С ростом популярности мобильных устройств это понятие вошло в моду и стало использоваться повсеместно. Но даже сейчас не все могут ответить с уверенностью, что же такое UX-дизайн, чем он отличается от UI-дизайна и почему эти вещи часто упоминаются в связке. Мы поможем разобраться.

Что такое UX-дизайн

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

Где лучше разместить вход в личный кабинет? Сколько шагов должен пройти пользователь, чтобы подписаться на рассылку или сделать заказ? Как он поймет, что операция прошла успешно? Именно такие вопросы решает UX-дизайнер.

UX-дизайн включает в себя разные компоненты:

  • информационную архитектуру;
  • интерактивный дизайн;
  • юзабилити (показатель простоты, удобства и эффективности продукта в глазах пользователей).

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

разобранный пазл
Сырая идея сайта или приложения похожа на разобранный пазл в нашем офисе. Волей UX-дизайнера из этих кусочков складывается понятная структура.

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

UX-дизайнерам важно уметь:

  • проводить исследования пользователей;
  • создавать вайрфреймы и прототипы сайтов и приложений. Это поможет оценить, в каком направлении развивать приложение или сайт. Причем умение рисовать совсем не обязательный навык для современного UX-дизайнера. Существует множество инструментов для прототипирования, где с помощью готовых элементов можно создать грамотную визуализацию интерфейса (например Axure, Balsamiq или UXPin);
  • проектировать взаимодействие, то есть представлять, как именно человек будет пользоваться продуктом. Для этого создаются карты маршрутов пользователей по экранам приложения, интерактивные каркасы сайтов и приложений с разными вариантами дизайна;
  • тестировать продукт;
  • заниматься аналитикой. Использование различных метрик (например Webvisor, Hotjar, Mixpanel, UXcam, или Appsee) поможет понять, насколько эффективно работает дизайн, и дорабатывать продукт, основываясь на реальных данных.

Подробнее о принципах и основах UX-дизайна можно почитать здесь.

Что такое UI-дизайн

UI-дизайн, или дизайн пользовательских интерфейсов, можно назвать визуальным воплощением UX-дизайна. Его задача — сделать приложение, сайт или другой продукт интуитивно понятным, привлекательным и максимально простым в использовании с помощью определенных графических решений.

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

Как должна выглядеть кнопка, чтобы на нее было удобно нажимать? Какой размер шрифта выбрать, чтобы текст хорошо читался? Как оформить сообщение об ошибке, чтобы оно привлекало внимание, но не раздражало? Ответы на эти вопросы помогает найти UI-дизайн.

UI-дизайнер использует в работе разные графические редакторы: Photoshop, Illustrator, Sketch, Fireworks, Adobe XD, Gravit Designer, Affinity Designer, Figma.

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

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

Что еще почитать

Что такое UX дизайн? 15 кратких определений от мировых экспертов по пользовательскому опыту. Блог Tilda Publishing.

UX и UI: основные понятия дизайна цифрового продукта. Материал проекта «Теплица социальных технологий».

UI vs. UX: в чем различие? Блог платформы LPGenerator.

Чем отличается UX-дизайнер и UI-дизайнер? Блог компании ADN Agency.

Пять различий между UI и UX дизайном. Блог проекта UX Guru.

Пользовательский опыт (UX). Блог исследовательского агентства GFK.

12 инструментов и сайтов для UI/UX дизайнеров. Перевод хабраблогера. 

Будущее UX-дизайна. Блог UX Journal. 

Что ждёт дизайн интерфейсов в 2018 году. Перевод материала из блога UX Design Collective

5 простых шагов для получения первой работы в UX. Блог «Дизайн-кабак». 

Как работает UX лаборатория, и что такое UX Research. Статья сотрудницы студии Wargaming.

Прочитайте другие наши статьи
Как мы делаем проекты: дизайн

От прототипа к макету: работаем по гайдлайнам, накладываем фирменный стиль, рисуем иллюстрации, используем Sketch и Adobe

52 термина из области UX-исследований

Перевели статью с кратким объяснением терминов из области изучения интерфейсов

Выбираем приложение для рисования на iPad

Paper 53, Tayasui Sketches, Procreate и Medibang Paint — что выбрать? Мнение дизайнера Лайв Тайпинг

Олеся Мельник, фотография
Олеся
Мельник