Elena Saharova
Sep 5, 2017 · 5 min read

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

Начнем с того, куда же подевались WEB дизайнеры, раз все стали UI/UX дизайнерами?

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

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

Но почему бы просто не адаптировать веб интерфейс под другие устройства?

В таком случае мы потеряем главное — мы не учтем пользовательский опыт с каждым из этих устройств.

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

Из этого следует, что первым этапом в работе над любым интерфейсом будет построение пользовательского опыта (UX)

UX (пользовательский опыт) — это восприятие и ответные действия пользователя, возникающие в результате использования и/или предстоящего использования продукции, системы или услуги.

UX — это концепция, имеющая много аспектов и охватывающая весь путь, совершаемый пользователями:

— Процесс, через который они проходят, когда ищут продукт вашей компании.

— Последовательность действий, выполняемых ими при взаимодействии

с интерфейсом.

— Мысли и чувства, возникающие у них при выполнении своей задачи.

— Впечатления, получаемые ими от взаимодействия в целом.

Из чего складывается UX (пользовательский опыт):

  1. Контент — он позволяет вам установить контакт с аудиторией. С его помощью вы сообщаете о ценности своего продукта. Хорошо написанный текст способен захватывать внимание, информировать и вызывать эмоции (например, волнение, решимость, счастье), которые становятся частью пользовательского опыта.
  2. IA (информационная архитектура) — это организация информации на сайте так, чтобы она была доступна для восприятия. Это создание структуры, подсказывающей пользователю, где он и что ему нужно сделать или куда пойти, чтобы совершить целевое действие.

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

3. ID (проектирование взаимодействия) — это адаптация технологий к поведению пользователей. Вам нужно понять, чего хотят и ожидают ваши посетители, и найти способ облегчить им задачу, несмотря на технические ограничения своего сайта, товара или услуги.

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

Основное правило UX-дизайна: он должен быть полезным, удобным, востребованным, имеющим ценность, находимым, доступным, вызывающим доверие.

useful, usable, desirable, valuable, findable, accessible, credible.

UX — дизайнер имеет глубокие познания в стратегии, практике исследований, информационной архитектуре и дизайне взаимодействия (Interaction Design).

Теперь разберемся что же такое UI-дизайн

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

Интерфейс компьютера 70х

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

Интерфейс компьютера 80x

В 80х вышел первый компьютер с графическим пользовательским интерфейсом (GUI), который позволил привлечь к компьютерным инновациям более широкую аудиторию, ведь интерфейс компьютера стал напоминать нам окружающие нас вещи — корзина, папки, рабочий стол и т.д. Таким образом, компьютером можно было владеть и без знания кода, таким образом и появились первые UI-дизайнеры работающие именно над проектированием графических пользовательских интерфейсов.

UI дизайнер должен обладать такими навыками, как VD (визуальный дизайн), MD (моушн дизайн) и брендинг.

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

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

Составляющие UI (пользовательского интерфейса):

  1. VD (Визуальный дизайн) — формирует эстетику сайта, он стратегически важен для качественной реализации изображения, цвета, шрифта и других элементов. Успешный визуальный дизайн не может существовать отдельно от содержания, размещенного на странице, а также ее функционала. Помимо этого, он привлекает пользователей и помогает выстроить их доверие и интерес к бренду.
Источник: https://www.behance.net/gallery/47282085/M2H-agency

2. Дизайн система — cоздание системы отдельных фрагментов интерфейса, которые могут использоваться для создания элементов и шаблонов, которые можно использовать повторно множество раз.

Источник: http://book.nimax.ru/gajdlajn-dlya-veb-proektov/

3. Анимация (Прототипы) — Создание действующей модели пользовательского интерфейса. Имитация работы системы, так что ее можно оценить в действии еще до того, как начата разработка. С помощью аниматики продумывается отклик и характер интерфейса, его элементов в целом.

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

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

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

Elena Saharova

Written by

designer (artdirector) www.eessoo.co

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade