UX весь какой он есть

Как понять и простить странную аббревиатуру

Nikita Morozov
UX / UI insane
7 min readJun 23, 2017

--

UX схема покупки товара в приложении

С огромной долей вероятности дорогой читатель не раз пытался понять что есть UI, а что есть UX. И не два. Две буквы тут, две буквы там, а смысла ноль. Занятно еще и то, что консолидированного мнения по поводу объяснения термина UX никто так и не родил. Ну что ж, бывает, я один из тех, кто объясняет его на пальцах =))

Например, термин UI (раньше звался GUI)User Interface (Пользовательский интерфейс) более менее понятен. С ним проще всего. Де факто под UI все понманиют красивые картинки на дрибла-бехансах, няшные погодные аппы, всевозможные дэшборды, и 1001 редизайн фейсбука и стартапы для лонгбордистов.

Резонный вопрос: зачем же тогда нужен этот UX? 😫

Коротко

UXUser eXperience (он же опыт пользователя); Design thinking (в двух словах о всей теории — Здравый смысл) и прочие маффиные объяснения от скейт баристы.

Кто-то вкладывает в эту аббревиатуру полный путь от лэндинг до факта покупки чего-то внутри продукта (самого продукта).

Кто-то понимает под этим лишь блок-схемы, по которым UI дизайнер рисует красивые картинки.

Кто-то считает, что это очень просто, но объяснить не может.

Кто-то обливается смуззи.

Кто-то гуглит ux…

На примере

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

Объясню на примере.

У вас есть красивый экран профиля. Сверху -мордочка с именем, справа от нее иконка «Карандаш», снизу контакты, а в самом внизу кнопка «Сменить пароль».

Внимательно смотрим на сий экран и думаем, а что будет если я тапну на «Карандаш»?

Тапнув (кликнув) на него у нас внезапно появляется похожий экран, но на нем можно редактировать имя и контакты, менять фото. И возможность сохранить все изменения, тапнув на кнопку «Save», либо сбросить все изменения к чертям, тапнув на «Cancel» или иконку «Х».

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

Либо можно при тапе на кнопку «Сбросить пароль» показать другой экран: в нав баре иконка «Стрелочка назад» в центре экрана текст «Мы отправим вам ссылку для изменения пароля на указанный email” и кнопка «Сбросить пароль».

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

Логика, описывающая связь между действиями пользователя и состоянием приложения после его сумбурных действий и есть User eXperience 😱

Научно

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

Можно объяснить термин UX как набор сценариев на любую ситуацию, состояние приложения в данный момент.

Уан мор тайм

  1. Если вам надо что-то найти (например, контакт человека в адресной книге), то вы тапаете на поле с надписью «Поиск», выезжает клавиатура на которой вы набираете запрос и система находит для вас значения (Контакты), максимально соответствующие критерию поиска.
  2. Вы хотите подробнее узнать о товаре в интернет магазине и, возможно, купить его. Вы тапаете (кликаете) на название товара и как-бы проваливаетесь вглубь приложения на страницу описания товара. А потом тапаете на кнопку «Купить» и система отправляет вас на страницу покупки.
    Сам же процесс покупки со всеми полями для ввода информации об адресе доставки, ФИО, номере пластиковой карты тоже кем-то проектируется (вами, например).
    Ситуации, когда система не смогла понять пользователя (обычно это называют ошибкой, но это не всегда вина пользователя) есть плод плохо спроектированного сценария, который леворукий UX дезигнер породил.

Грандиозно

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

Как ни странно, UX начинается не с интерфейса, но с коробки. Вы открыли коробку с айфонкой, шаг за шагом легко и непринужденно настроили систему, зашли в Аппстор, купив программу при помощи отпечатка пальца, открыли коробочку с Airpods, вставили в уши наушники, тапнули на одну единственную кнопку на айфоне и, вуаля(!), они уже играют музыку. Магия? Ну так..

А теперь мысленно представьте, сколько экранов интерфейсов вы увидели по ходу движения? 10? 20? 40?

Не важно сколько, важно что вы их не заметили =)) потому что каждый этот экран перерисовывался ради вас по сто раз чтобы вам было удобно! Это и есть UX, окутанный дизайном интерфейсов, запечатанный в пластик и алюминий девайсов.

Apple Airpods лекго подключаются и к айфонке и эпл вотчам и к Макбуку. Магия!

Безусловно, надо отметить роль промышленного дизайна, эргономики в гаджетах, ноутбуках, колонках и прочих устройствах, которые бесшовно сливаются с программной составляющей (iOS, OS X, аппы). Но это уже другая история, хотя тоже UX.

Место под Солнцем

Так вот, теперь мы начали догадываться о том, чем занимается UX дизайнер =))

Он берет и рассматривает каждый такой сценарий и изображает его в виде блок-схемы (сделанные, например, в Balsamiq), который должен быть понятен не только коллеге UI дизайнеру, но также и программисту и пользователю.

Это могут быть схематичный дизайн различных экранов (из разных уголков системы), соединенных между собой стрелочками, обозначающие переходы между ними. Это может быть кликабильный прототип с уже готовым дизайнов (например, в Invision), это может быть 101 страница подробной инструкции для разработчика.

Главный вопрос, на который должен отвечать работа UX дизайнера: «Как это должно работать?». После релиза продукт может работать по-другому и в дальнейшем он точно будет меняться. Но все это время его бережно сопровождает (проектирует) тот самый UX дизайнер, реагируя на изменеия рынка, желания пользователей и владельцев бизнеса.

Смысл не в самих схемах или тексте документации. Смысл в другом: UX дизайнер должен понятным способом объяснить всем (включая пользователя и команду) как продукт работает, как ведет себе в разных, редких и ошибочных ситуациях. Потому что нельзя сделать продукт или сервис, который непонятно как работает 😎

Чем выше класс UX дизайнера, тем выше шанс, что:

  • успех продукту/сервису гарантирован;
  • задумка вообще увидит Свет;
  • пользователи бутут пользоваться продуктом;
  • пользователи будут рекомендовать этот продукт/сервис друзьям.

В мире животных

Зачастую в названии вакансии пишут именно UI/UX дизайнер. И не с проста. В идеальном мире эти два дизайнера есть один человек, у которого кривизна рук и причино-следственная связь имеют минимальные отклонения от реальности.

В боооооольших (или тех, кто считает себя большими) компаниях эти позиции разделяют, что дает неоднозначный результат 🙃

Радио “Эхо UX”

Конечно же мне приятно вести диалог с умным человеком (то есть с собой) и делать совместный вывод о том, что есть UX.

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

Передаю микрофон:

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

Пример

Можно сделать простой и легкий интерфейс набора номера телефона, с подсказками при наборе и списком последних и частых / любимых контактов, который позволит находить нужные контакты в три тапа (клика).

Но весь этот труд идет по “одному месту”, когда мы переходим к аналогичным кейсам: водитель-автолюбитель и велосипедист — у обоих руки заняты рулем. И вот в этом случае качественным UX будет любой грамотный распознаватель голоса (aka Siri, Cortana, Google Assistant), позволяющий произвести те же действия со смартфоном (поиск контактов и набор номера), не отрывая рук от руля.”

Дмитрий Ориничев
Продакт менеджер и UX дизайнер (DIRECTUAL)

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

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

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

Дмитрий Андронов
Продакт дизайнер (DIRECTUAL), UX директор (TOPOS)

Если вам понравилось — жмите ❤️ в конце статьи. Хотите внесите свой вклад и разнообразить в Мир начинающих дизайнеров — расшарьте статью на фейсбуках 😊

Всем Бобра! ❤️

Если вам понравилось, — скажите «Спасибо», кликнув на кнопку 👏🏻. Это поможет другим людям быстрее найти статью.

--

--

Nikita Morozov
UX / UI insane

UI/UX Lead, продакт менеджер, преподаватель. Обладаю огромным опытом в проектировании и дизайне B2C, ERP и BPMs, а также мобильных и веб приложений.