В чем разница между UX и UI

В чем разница между UX и UI дизайном?

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

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

Приступим!

Прежде всего, давайте ответим на вопрос: что такое дизайн интерфейса и UX дизайн, и в чем между ними разница?

Проще говоря, пользовательский интерфейс – это то, как выглядят вещи, UX – это то, как они работают. UX – это процесс, а пользовательский интерфейс – это результат. Давайте рассмотрим подробнее…

Дизайн интерфейса

Дизайн интерфейса (UI) – большая сфера. Теоретически интерфейс представляет собой комбинацию контента (документы, тексты, изображения, видео и т. д.), формы (кнопки, метки, текстовые поля, флажки, раскрывающиеся списки, графический дизайн и т. д.) и поведения (что произойдет, если я нажимаю / перетаскиваю / печатаю).

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

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

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

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

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

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

Что нужно помнить о создании восхитительного интерфейса

1. На экране люди всегда будут читать в первую очередь самое большое, самое смелое и самое яркое.

Это человеческая природа. Наше внимание запрограммировано таким образом, что мы в первую очередь видим самое большое, смелое и яркое. И затем оно перемещается на более мелкие, менее смелые и менее яркие вещи.

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

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

На картинках выше изображение слева имеет 1 линию выравнивания. В то время, как изображение cправа – 4 линии выравнивания.

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

Изображение слева имеет слишком много линий выравнивания, в то время, как справа имеет только одну и выглядит более приятным для глаз!

Существует два основных типа выравнивания: выравнивание по краю и выравнивание по центру.

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

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

1. Станьте архитектором внимания.

Вот два способа интерпретировать это: 1) Вам нужно привлечь внимание пользователя к вашему дизайну. 2) Вы должны обратить внимание на каждую мелочь в ваших проектах.
Чтобы стать отличным дизайнером, вам нужно сделать и то, и другое. Последнее позволяет вам достичь первого.

Дизайн интерфейса – это адаптация опыта ваших пользователей, направляя их внимание на важные вещи.

Способы использования текста, для привлечения внимания пользователя:

• Сделайте размер текста большим или меньшим.
• Яркий цвет. Или сделайте его приглушенным.
• Используйте тяжелый шрифт в противовес чему-то тонкому или легкому.
• Выделяйте слова курсивом. Слова написанные заглавными или строчными буквами.
• Увеличьте расстояние между каждой буквой, чтобы общий размер слов занимал больше места.

Самое главное при проектировании – это тестирование! Удостоверьтесь, что вы попробуете разные цвета, шрифты, оттенки, углы, выравнивание, макеты и т. д. Экспериментируйте с разными дизайнами, чтобы вы могли создавать путешествие пользователей, используя различные способы привлечения внимания.

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

Дизайн пользовательского опыта

Дизайн пользовательского опыта (UX) – это создание безболезненного и приятного опыта.

Вот 7 вопросов, чтобы спросить себя, является ли UX вашего продукта хорошим:

1. Юзабилити: для чего пользователь использует мое приложение? В чем его основная функциональность? Что мне нужно для того, чтобы мое приложение использовали? Как я могу свести к минимуму количество шагов, которые требуется сделать пользователю, чтобы достичь этого в моем приложении? Главная вещь, которую хотят достичь мои пользователи при помощи моего приложения? Как я могу сделать опыт достижения этого максимально плавным, быстрым и приятным?
2. Профилирование пользователей: Вы должны знать, кто ваши пользователи и чего они хотят достичь с помощью вашего приложения. Лучший способ сделать это – профилировать своих пользователей.
   Вы должны понять свой рынок. Уточните целевую аудиторию/пользователя.
   Главный вопрос, который следует задать себе: В чем основная функциональность моего приложения? Профилируйте своих пользователей, чтобы постоянно пересматривать этот вопрос.
3. Просить разрешения: если ваше мобильное приложение имеет push-уведомления, нуждается в службах геолокации, имеет интеграцию с социальными сетями, электронной почтой и т. д., вы знаете, что вам нужно разрешение пользователя. Поэтому при использовании вашего приложения на экране появляется предупреждающее сообщение. Вместо того, чтобы спрашивать сразу и подавить пользователя, используйте эффект Бенджамина Франклина. Прежде чем попросить кого-нибудь оказать большую услугу, попросите их о небольшой услуге. И медленно подталкивайте пользователя в нужном направлении.
   Убедитесь, что ваше приложение отправляет уведомление о разрешении только тогда, когда пользователь собирается использовать эту функцию, а не когда он просто запускает приложение.
4. ФормаvsФункциональность: Дизайн не всегда касается формы – красивой цветовой схемы, шрифтов, макета и т.п. Он также касается функциональности. Всегда ставьте функцию превыше формы.
5. Согласованность: Придерживаюсь ли я согласованности во всем приложении? Согласованно ли мое приложение с моим брендом? Несогласованность в дизайне создает путаницу. Смущенный пользователь – недовольный пользователь.
   Подумайте о согласованности не только с точки зрения внешнего вида, но и с точки зрения функциональности.
6. Простота: могу ли я сделать это еще проще? Убедитесь, что ваше приложение проверено бабушкой, т. е. пожилые люди смогут его понять и использовать.
   В запутанном приложении будут ряды кнопок, множество разных цветов и перегруженный интерфейс.
7. Не заставляйте меня думать: неужели я делаю вещи сложными для своих пользователей?
   Люди не любят смущаться. Когда мы пишем код, мы стараемся сделать его максимально легким и эффективным. Когда мы создаем дизайн, мы пытаемся сделать интерфейс понятным и как можно менее запутанным. И красивым! Постарайтесь формулировать мысли максимально ясно.

Моменты, заслуживающие внимания, для создания замечательного UX:

1. Не используйте длинные инструкции при запуске приложения, объясняя, как использовать его. Вместо этого предоставляйте своим пользователям информацию, когда это необходимо. Делайте это контекстуально. Давайте советы и подсказки. Пытайтесь создать дизайн, в котором пользователь поймет приложение за несколько секунд, не требуя инструкции. Вот откуда берутся интуитивные принципы дизайна!
2. Когда что-то настолько укоренилось в умах мобильных пользователей, как, например, жест «потянуть вниз», чтобы обновить страницу или увеличение размера щипковым движением пальцев – придерживайтесь этих правил для вашего приложения. И НЕ используйте эти действия для какой-то другой цели. Например, жест «потянуть вниз», чтобы добавить новую запись в журнал – это очень смущает пользователя. Приложение журнала, которое я использовал, делало это, и это путало меня.
3. Не относитесь к своим пользователям как к идиотам. Не показывайте пользователю всплывающее окно или предупреждение, чтобы подтвердить частое действие. Запрашивайте подтверждение только для вредоносных действий, о которых пользователи могут сожалеть – например, удалить что-то или совершить покупку.
   Ненужные всплывающие окна и предупреждения прерывают процесс и приводят к плохому пользовательскому опыту. Не заставляйте своих клиентов чувствовать себя глупо.

Читайте больше об UX дизайне здесь и здесь.

Мысли в заключение

Я надеюсь, что эта статья помогла вам понять основные понятия о дизайне интерфейса и UX дизайне. Я хотела бы услышать ваши мысли на эту тему. Вы можете отправить мне электронное письмо по адресу harshita@harshitaapps.com!

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

Я заканчиваю статью одной из моих любимых цитат о дизайне

«Дизайн – это не только то, как предмет выглядит и ощущается. Дизайн – это то, как он работает»
– Стив Джобс

Если вы нашли ошибку, выделите фрагмент текста и нажмите Ctrl+Enter

UX/UI-дизайн: что это такое?

Понятиям UX и UI уже около 70 лет, но некоторые дизайнеры все еще путают их. Мы рассказали, что означают аббревиатуры и кто такой UX-дизайнер.

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

UX (англ. user experience) — дословно означает «опыт пользователя». В более широком смысле это понятие включает в себя весь опыт, который получает пользователь при взаимодействии с вашим сайтом или приложением.

UX-дизайн отвечает за функциональность, адаптивность продукта и то, какие эмоции он вызывает у пользователей. Чем проще ваш интерфейс, тем проще пользователю получить результат и совершить целевое действие.

UX-дизайн — это проектирование интерфейса на основе исследования пользовательского опыта и поведения.

Одним из ярких примеров работы UX-дизайнеров можно назвать первый персональный компьютер компании Apple — Macintosh. Идея использовать окна вместо командной строки существовала и до1984 года, но именно инженеры и проектировщики Apple сделали графический интерфейс массово доступным.

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

UX не заканчивается на красивой и понятной форме на сайте. UX — это путь пользователя от точки входа до точки выхода, из пункта А в пункт&nbspБ.

Другими словами, UX — это впечатления, которые клиент получает от работы с интерфейсом. Опыт пользователя зависит от различных компонентов: архитектуры сайта, графического дизайна, понятного текста и отзывчивости интерфейса на конкретные действия пользователя.

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

UX-дизайнер (англ. user experience designer) — это проектировщик, который изучает потребности пользователей, строит логические схемы работы интерфейса, тестирует прототипы на целевой аудитории и составляет техническое задание для UI-дизайнера.

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

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

UI (англ. user interface) переводится как «пользовательский интерфейс». Он может быть не только графическим, но и тактильным, голосовым, аудио-. Мы рассмотрим только графический интерфейс, так как дизайнеры в основном работают с ним.

UI-дизайн — процесс визуализации прототипа, который разработали на основании пользовательского опыта и исследования целевой аудитории.

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

UI-дизайнер определяет цветовую палитру и расположение объектов в интерфейсе: удобно ли попасть пальцем по кнопке «Заказать», правильно ли работает выпадающее меню, удобно ли заполнять форму, хорошо ли читается текст со смартфона, какое сообщение выдает сайт при том или ином действии.

UI-дизайнер (англ. user interface designer) — дизайнер интерфейсов, который визуализирует рабочий прототип, отрисовывает кнопки, иконки, формы и другие его компоненты и собирает их в гармоничный работающий макет.

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

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

Ясность

В интерфейсе нет двусмысленности, а текст и структура направляют пользователя к цели.

Лаконичность

Важно не перегружать интерфейс подсказками, всплывающими окнами и анимацией. Задавайте себе вопросы: «А нужно ли это здесь? Для чего?» Это поможет не перегрузить страницу и сфокусировать внимание пользователя на конкретном элементе.

Узнаваемость

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

Отзывчивость

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

Постоянство

Соблюдайте постоянство для всех разделов сайта и приложения. Элементы интерфейса — меню и слайдеры — должны вести себя одинаково на любой странице.

Эстетика

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

Эффективность

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

Снисходительность

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

В чем разница между UX и UI

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

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

UX, User Experience

UI, User Interface

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

Пользовательский интерфейс — это конечный результат работы дизайнера, то, что увидит пользователь. UI-дизайнер визуализирует пользовательский опыт и «оживляет» интерфейс продукта. Интерфейс создается на основе пользовательского опыта — UX.

Как стать UX/UI-дизайнером

Для начала нужно понять, кем вы хотите быть: UX- или UI-дизайнером. Сати Тачиба, старший дизайнер в Wargaming, советует, как легко и быстро выбрать между UX и UI.

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

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

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

• Живая обратная связь с преподавателями
• Неограниченный доступ к материалам курса
• Стажировка в компаниях-партнёрах
• Дипломный проект от реального заказчика
• Гарантия трудоустройства в компании-партнёры для выпускников, защитивших дипломные работы

Что почитать и посмотреть о UX/UI-дизайне

Что такое UX и UI — бесплатный вебинар Skillbox+AIC.

Что такое UX-дизайн в блоге Tilda.

Что такое UX и UI на примере средневековых профессий.

Чем отличается UX-дизайнер и UI-дизайнер в блоге ADN.

Зачем учить UX, или почему простые дизайнеры скоро станут не нужны.

Как стать UX/UI-дизайнером без образования и опыта.

Карта талантов UX-дизайнера: что стоит развивать.

Прошлое, настоящее и будущее UX: что ждет дизайн интерфейсов в 2018 году.

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

Бесплатный курс «Дизайн интерфейсов для нормальных людей» Антона Жиянова.

UX- и UI-дизайн: в чем разница и что их объединяет

Подробнее о терминах

UX – опыт пользователя (User Experience). Термин подразумевает ощущения, получаемые пользователем при взаимодействии с интерфейсом: насколько легко/трудно выполнить действие для достижения нужной цели.

UI – пользовательский интерфейс (User Interface). Понятие определяет внешние характеристики продукта: цвета дизайна, удобство обращения, читабельность текста и прочие визуальные элементы.

Design – дизайн. Это конструирование/проектирование, при котором создают конструкцию объекта и представляют его в определенной форме.

UX/UI Design – создание различных интерфейсов, где одинаково важны внешнее представление и удобство пользования.

Чем отличаются UX и UI

UX-дизайн отвечает за функционал продукта и эмоции, возникающие у пользователей. Чем интерфейс проще, тем легче получить результат и совершить целевое действие.

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

Разница между UX и UI состоит в отличии задач. Поскольку впечатления пользователей отличаются, в UX-дизайне надлежит анализировать действия посетителей, создавать прототипы поведения, проводить тестирования, что и осуществляет UX-дизайнер. Основная цель UI-дизайнера – объяснить пользователю, как воспользоваться продуктом.

Но на практике UX и UI тесно связаны, и не всегда можно определить их границы.

Что объединяет UX с UI

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

Также следует понимать, что UX/UI специалист – это не только про веб-дизайн, но и про иные интерфейсы, в том числе и офлайн. Потому важно уточнять область компетенции специалиста.

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

• сложный в обращении интерфейс с изумительным дизайном – слабый UX, качественный UI;
• очень удобный в использовании невзрачный интерфейс – качественный UX, слабый UI.

Сочетание UX и UI определяет юзабилити (usability – удобство пользования), то есть простоту и комфорт работы с сайтом.

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

Пример хорошего UX/UI – сайт компании Zara. Интернет-магазин имеет интуитивно-понятную структуру, привлекательный, но не перегруженный дизайн с минимумом элементов.

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

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

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

Как пример прекрасного сочетания UX и UI с отличным юзабилити – сайт компании Strava. Здесь в принципе отсутствуют лишние элементы: есть изображение продукта, есть кнопки для регистрации и меню в «подвале» страницы.

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

Понравилась статья? Получайте похожие на вашу почту еженедельно.

Источники:

http://ux.pub/v-chem-raznica-mezhdu-ux-i-ui-dizajnom/
http://skillbox.ru/media/design/ux_ui_dizayn_chto_eto_takoe/
http://spark.ru/startup/ra-apelsin/blog/48177/ux-i-ui-dizajn-v-chem-raznitsa-i-chto-ih-objedinyaet