Майк Лисянский
Контрольная проба
×
Майк Лисянский
Майк Лисянский
×

UX, UI и визуалы

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

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‑дизайн.

В статье использованы фотографии Paul Hanaoka, Sergii Bozhko, Andrew George, Taton Moïse, Einstein Vectors by Vecteezy, davisuko, Lars Bo Nielsen, Martin Sattler, Kristopher Roller.

Комментарии — в личной переписке или на vc.ru

Подписывайтесь в 

Практический дизайн в UX, IT и обществе
Я занимаюсь UX с 2001 года, программирую с 1989.
На этом сайте я пишу про практику проектирования «компьютерного мира» и другие интересные мне вещи.
Прочитайте еще
«Дизайн поведения человека» — о UX‑дизайне и его основных понятиях.
«Гражданин, пройдемте за кулисы!» — о главном инструменте проектировщика (интеллекте) и избытке текстов категории 0+ про UX‑дизайн.