Дизайн
Майк Лисянский

UX, UI и визуалы

Мало кто различает UI и UX, их обычно так и пишут — UI/UX, через дробь, как номер дома на углу двух улиц. Нумерация двойная, а дом — один. Действительно, как их различить?

Пользовательский интерфейс (UI) — картинки. Пользовательский опыт (UX) — тоже картинки. Там картинки, и там картинки. В нашем мире, в мире «визуалов», если разницы не видно — значит ее нет. «Зачем тогда платить больше?»™

Меня зовут Майк Лисянский. Я занимаюсь разработкой цифровых продуктов и управлением командами. Работаю с пользовательским опытом (UX) уже 20 лет.

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

Я применяю опыт UX в управлении процессом разработки цифровых продуктов. Это очень интересная тема, но, чтобы рассказ про нее не превратился в «вечеринку для избранных», нужно сначала ответить на «простые» вопросы — что такое UX? В чем разница между UX и UI?

UX

Слово “UX” обычно используют как престижный синоним слова «картинки».

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

Проблема в том, что UX — вообще не про картинки. Совсем. Он про пользовательский опыт — мысли, чувства и ощущения человека. Про картинки — иллюстрация и UI. Здесь похоже уже на геологов и геофизиков — специальности разные, но для всех непричастных они «геологи».

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

UX vs UI

UI — это про картинки интерфейса.

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

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

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

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

Граница между UX и UI

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

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

Именно здесь начинается принципиальное расхождение между UI и UX.

UI, картинки, могут быть только про видимую функциональность программы. Всё, что не видно, и всё, что не относится к программе, в UI просто не существует.

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

Видимость и практика

UX — это практическое занятие. Граница между UI и UX проходит по «я вижу» и «я делаю».

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

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

Использование программы и разработка той же самой программы — это вообще из разных Вселенных.

Кто не различает UX и UI?

Мы живем в мире «визуалов». Это норма современного городского общества, в котором жизнь завязана на зрение. Но в городе мы, в основном, лишь смотрим — наше взаимодействие с увиденным сильно ограничено или запрещено.

Человеческий организм — великий оптимизатор. Он бесцеремонно избавляется от всего, что требует затрат, но не используется «прямо сейчас». Через некоторое время бездействия ненужная функция просто засыпает.

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

Картинки — это пассивное восприятие. На картинку смотрят, но не трогают. Она завершена, в ней нет места творчеству и новым историям. Ее оценивают, но не меняют.

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

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

Последствия

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

Представьте, что вы строите здание по визуализациям вместо технических чертежей. Очень красивые картинки, их приятно обсуждать, но непонятна толщина стен и расположение воздуховодов — и их выбирают рабочие по своему настроению и наличию кирпичей. А инженерные коммуникации в визуализации не рисуют, поэтому при попытке подключить электричество и воду владельца здания ждет сюрприз. «Такой задачи не стояло»™.

Исправлять ошибки проектирования сложно — они выясняются уже на реализации, когда их можно «потрогать». Потраченные усилия и время начинают работать против разработчиков, работа по плану заменяется импровизациями. Все нервничают, мягко говоря.

Эта проблема не решается наймом «крутого дизайнера». Если вы на базовом уровне не понимаете содержание его работы, то для вас ничего не изменится — оценивать работу вы будете только в конце, по реализации.

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

Совет

Самый простой способ получить представление об UX — самому написать и проиллюстрировать небольшую историю, например, с двумя‑тремя персонажами и сюжетом в 4‑5 действий.

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

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

Продолжение

Эта статья — начало небольшого цикла, следите за продолжением.

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

Если вы занимаетесь UX или дизайном профессионально, прочитайте мою статью «Дизайн поведения человека» про UX‑дизайн.

Обязательно задавайте вопросы в комментариях и подписывайтесь на мой канал @control_sample в Telegram.

Я ищу новые проекты для участия, на постоянной основе или как консультант. Я могу лично рассказать вам и вашей команде то, о чём пишу, зовите в гости. Моя почта mike@lisiansky.com, пишите.

{ "author_name": "Майк Лисянский", "author_type": "self", "tags": [], "comments": 46, "likes": 7, "favorites": 46, "is_advertisement": false, "subsite_label": "design", "id": 206654, "is_wide": false, "is_ugc": true, "date": "Tue, 09 Feb 2021 19:47:18 +0300", "is_special": false }
0
46 комментариев
Популярные
По порядку
Написать комментарий...
6

Много текста и пустых эпитетов. Честно признаюсь, читать было сложно, хотя мне и понятно о чем речь. Кто ничего кроме этой статьи не прочёл, не поймёт о чем здесь! Различие в самих названиях:

ux - логика, архитектура программы/приложения/сайта. Как должно работать "изделие"! Что и за каким действием выполняется/должно выполняться. 

ui - это пользовательский интерфейс - логика построения взаимодействия пользователя со страницей сайта/программой/веб приложением. Конкретно: куда он должен посмотреть и что нажать, чтоб выполнить "действие".
Если на пальцах: ux - командная строка
ui - окно Windows с кнопками. И там и там выполняется взаимодействие users с "продуктом", но в Windows это нагляднее и понятнее обывателям.
И то и другое, нельзя сравнивать с картинками. Это несколько иные понятия.

Ответить
2

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

UX — это пользовательский опыт, User eXperience. Он про пользователя, как тот взаимодействует и ощущает приложение, а не про само приложение. Архитектура и прочее описанное для пользователей не существует — это проблемы разработчиков, а они «просто используют».

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

Ответить
–1

Блин, вот как объяснить, что никакого опыта пользователя не будет без построения логики, или архитектуры проги/приложения/сайта....

Ответить
–1

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

Ответить
2

ИМХО, вы не правы, в вашем объяснении UX вообще не про пользователя

Ответить
1

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

Ответить
0

То, да не то. Там смысл несколько иной. Вся проблема русскоязычного инета: тупое переписывание с искажением сути понятий. Какие ещё, картинки - ui ??? Ui - это удобство интерфейса!! А логика работы, это ux!
Чтоб было понятно, приведу картинку. Здесь работал ui/ux дизайнер. А вторая картинка, там ux/ui рядом не проходили!
У вас ещё вопросы есть по пользовательскому опыту и интерфейсам? По идее должны были отпасть. Совсем. Не морочьте людям головы! 

Ответить
0

На том, что «UI — это удобство интерфейса» мы остановимся.

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

Ответить
1

Иван, видимо вам важно слово "пользователь", а не суть значения.)))

Ответить
2

UX — это про пользователя, это его суть.

Ответить
0

Начинаю сомневаться, что вы где то серьёзно работали. В каком вы говорите интернет-банке?? Где сейчас этот банк? 

Что, за мода минусы ставить? )) 

Ответить
2

После слова UX - это картинки даже читать дальше не стал.

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

UX это как раз то, чего не видно в картинках: механика, логика, анимация, жесты, взаимодействие ( долгое нажатие, свайп, наведение курсора ) user flow, психология,  привычки, интуитивность, ожидания и многое другое. 

UPD, все таки перечитал. Автор написал о картинках как "сарказм", но подано это очень плохо, и вообще очень много воды. Про суть чуть чуть совсем. 

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

Ответить
1

Егор, учись как публику на комменты развести. Будоражишь сознание каким нибудь тригером (статья не для сантехников), а потом метафорическим образом объясняешь логику. 

Ответить
–1

После такого "выведения на комменты" в русскоязычной выдаче по любому интересному запросу нет ничего стоящего, одно ГАВНО! 

Ответить
0

Так не комментируйте его 🤪

Ответить
0

От комментов его положение в выдаче не зависит. Это vc. Статьи на нем заходят в топ по заголовку только за счёт количества пользователей всего vc.ru, а их до фига. 

Ответить
–1

🤷‍♂️

Ответить
–1

😂  

У меня иногда мозг кипит от того, как в статьях умудряются усложнить то, что должно быть простым. Либо просто не всем дано писать простым и доступным языком.

Ответить
0

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

Ответить
1

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

Ответить
–1

В написанном нет никакого сарказма, просто практика.

Вы смотрите на UI и UX глазами дизайнера. С этой точки зрения вы пишите правильно. Но следующий уровень — это способность посмотреть на собственную работу глазами «покупателя». Такая способность, кстати, — важнейшая часть UX.

Что получают «покупатели» — заказчики или члены команды — от UX-дизайнера? Они получают картинки с описаниями.

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

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

Попробуйте сменить угол зрения и прочитайте еще раз.

Ответить
–1

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

На этом все споры быстро заканчиваются )))

Ответить
0

Это просто прекрасно! :-)

То есть вы объясняете другим людям UX по картинкам (движущимся), после чего рассказываете мне, что UX — это не картинки!

Ок, для меня и для вас — это нечто большее, чем картинки. Но для всех остальных?

Та самая «вода» в моей статье — это как раз объяснение так получается.

Ответить
0

Сложный прикол. 

Я могу и без картинок пояснить за UX, например цифрами.  

Ответить
–1

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

Ответить
–1

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

Только UI картинки показывают как формы и элементы выглядят (цвета, размеры, отступы) 

А UX картинки показывают взаимодействие, flow, логику. 

Расшифровал? 

Ответить
0

Да, практически.

Из этого и следует проблема, про которую я писал, — большинство людей в индустрии не могут различить «картинки» и «картинки».

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

Ответить
–1

Расскажи нормально.  Я так и не понимаю, какой смысл ты хочешь передать. При чем тут то, как и кто воспринимает UX? 

Ответить
–1

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

Про восприятие.

Смотри, я пришел к тебе с Библией и предлагаю тебе уверовать в Господа Нашего, Иисуса Христа. Если ты видишь в Библии только пачку нарезанной бумаги с типографской краской, то ты это воспримешь как домогательства психически ненормального человека. Если же для тебя это священная книга, то мы можем отлично поговорить про свои духовные переживания.

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

Ответить
0

Лучшим объяснением для меня стала в свое время эта картинка, подтолкнув к многочисленным поискам и исследованиям :)

Ответить
0

ахахах 
Теперь и я ее для объяснения буду использовать)

Ответить
1

Матвей, не стоит. Это и близко не о разнице ui & ux...) 

Ответить
0

Несколько неверно. Прочтите определения ux и ui у авторитетных источников. Ищите в Google. На сайте Tilda не читайте. 

Ответить
0

В эту же коллекцию 

Ответить
0

Это тоже визуальная разница.

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

Ответить
0

На мой взгляд, эта картинка больше на тему «Ожидание vs Реальность» — тоже важная тема в UX. Но для того чтобы задуматься — в самый раз, да.

Ответить
2

Чтоб не спорить, поступим проще: покажите ваши ux/ui, - которые можно посмотреть СЕЙЧАС, кроме вашего "site". Тогда и задумаемся о экспертности вашего мнения)) 

Ответить
0

Алексей, вы раздражены, а в интернете постоянно кто-то не прав. Успокойтесь, пожалуйста.

Ответить
0

@Алексей Медведев Вы преподносите свое мнение как единственно правильное, нимало не заботясь привести сколь нибудь убедительные доказательства. Тем не менее, на мой взгляд, именно в русскоязычном сегменте у многих сложилось мнение что UI это цвет кнопочки а UX это куда она ведет при клике, тогда как еще Нильсен определил UX по другому - "Первое требование для идеального пользовательского опыта – удовлетворить точные потребности клиента, без лишней суеты или беспокойства. Следующими идут простота и элегантность, которые делают продукт, вызывающий у пользователей радость от использования и владения им." - это именно пользовательский опыт, вид кнопки и ее действие это UI. Более того, кнопка может работать и совсем нелогично, но тем не менее давать пользователю просто огромный положительный отклик (как раз картинка с дорожками очень точная - нарисовали прямые дорожки, но пользователю гораздо удобнее, приятнее, быстрее, комфортнее использовать ту что "напрямки")
А впрочем не вижу смысла в дальнейшей полемике, ваши методы спора и убеждения мне не нравятся, не нужны и едва ли принесут какую-то пользу.

Ответить
0

Видимо подгорело!!))) с вами никто не спорил. Я бы о вас даже и НЕ ЗНАЛ, что вообще существует такой чел, если б вы тут так не отметились, активно минусуя всех, кому статья "не зашла". Да, ещё, прежде чем плюсить/минусить, было б не плохо сначала букварь по design, хотя бы открыть....
Пользуюсь правилом: ставишь минус - обоснуй. Этой статье ни одного минуса я не поставил и комментариям к ней тоже. Но у вас, видимо, сразу "подгорело"! )))
По вашему комменту с упоминанием меня и Нильсена, вы хоть прочли что написали??? "удовлетворить точные потребности клиента без излишней суеты и беспокойства" - это не о "картинках", а о логике работы, что и в какой последовательности даётся!
Есть японская поговорка: "прежде чем что то написать, подумай, как прекрасен чистый лист!" 

Ответить
0

По пустякам раздражаться?)) да ну на фиг... Есть вещи гораздо более интересные. А вопрос об экспертности вашего мнения не снят. В студию, плиз!))
это на самом деле важно для тех кто Вас читает!

Ответить
2

…я бежал за вами два часа, чтобы сказать как вы мне равнодушны!

Ответить
1

Статья классная, но картинкам в следующий раз уделите больше времени

Ответить
0

А лучше просто не тратить время на «бэст практис» пиздеж уровня «чем ui отличается от ux» и делать нормальные продукты.

Ответить
–4

Такая чушь , иди в народное хозяйство , не пиши про сайты 

Ответить

Комментарии

null