Отличие UX от UI дизайнера. С чего начать обучение UX-дизайну

На главные вопросы о профессии UX-дизайнера отвечают руководитель R&D в «Ак Барс Цифровые Технологии» и куратор программы «UX/UI дизайн » в Британской высшей школе дизайна Ярослав Шуваев, а также начальник отдела аналитических исследований пользовательского взаимодействия в «Сбербанк-Технологии» Алина Ермакова, руководитель по облачным сервисам в «МегаЛабс» (Мегафон) Дмитрий Ершов и дипломированные UX/UI-дизайнеры.

1. Как объяснить бабушке, кем я работаю, если я UX/UI-дизайнер?

Все зависит от степени прокачанности бабушки. Если бабушка - UX/UI-дизайнер, то, скорее всего, упрощающих метафор не потребуется. Для менее любознательной бабушки это может быть объяснение-отговорка: «Я занимаюсь мобильными и онлайн-приложениями». Если же мы попробуем составить определение из слов, понятных среднестатистической бабушке, максимально лаконично и близко отражающее смысл, то это будет: «Я занимаюсь улучшением качества цифровых услуг (UX), включая проектирование точек, каналов получения этих услуг (UI)».

Татьяна Пчелинцева, выпускница курса «UX/UI дизайн» БВШД

«Бабушке... Тут выяснилось, что даже мой папа до недавнего времени не понимал, чем я занимаюсь. Был забавный случай. Папа поинтересовался, на кого я учусь. Я ответила, что мы делаем цифровые продукты, улучшаем пользовательский опыт. (Пауза) ”Сыр через интернет что ли продаете?” Почему именно сыр, я до сих пор так и не поняла, но меня это сильно впечатлило. Пришлось рассказывать, что каждый из нас является UX-дизайнером.

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

Денис Ушаков, выпускник БВШД

«Сложнее всего то, чем я занимаюсь, было объяснить моей бабушке, которая словосочетание «продуктовый дизайн» воспринимает как что-то, связанное с магазином продуктов, - и постоянно спрашивает, с какими такими продуктами я работаю. :)

Но в целом и для бабушки, и для родителей вполне подходит объяснение на примере автомобильного руля: UX-дизайн объясняет расположение руля в машине, а UI - его внешний вид».

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

Проект студентов курса «UX/UI дизайн» БВШД для Tele2: цифровая витрина для Tele2

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

2. Какими компетенциями обладает идеальный UX/UI-дизайнер?

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

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

С появлением гибкого подхода в программного обеспечения (Agile, Scrum), количество узкоспециализированных экспертов в командах начинает уменьшаться за счет увеличения количества компетенций каждого участника. В гибких продуктовых командах сразу становится понятно, что разделение UX- и UI-обязанностей увеличивает время разработки за счет того, что постоянно меняются и растут требования «приемки» работ между дизайнерами. В конце концов один из дизайнеров может заболеть, тогда вся работа встает. Поэтому продуктовые команды предпочитают набирать UX/UI-дизайнеров, совмещающих, пусть иногда поверхностно, как компетенции UXD, так и UID, чем двух глубоких экспертов.

Сочетание компетенций UX/UI-дизайнера


Сколько зарабатывают такие дизайнеры? Точнее всего на этот вопрос ответит hh.ru. По данным сервиса, сегодня компании готовы предложить UX/UI-дизайнерам от 70 до 200 тысяч в месяц и больше.

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

Дарья Сальникова, UX/UI-дизайнер Tele2

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

Поэтому я решила углубиться в UX/UI-дизайн, понять, как разрабатывается продукт с нуля, проводятся исследования, изучается пользователь, его задачи и поведение? и как все это отражается на интерфейсе. Сначала я прошла вводный онлайн-курс от AIC, потом пошла за практикой в Британку. После нескольких учебных проектов для «Золотой короны» и Mail.Ru я устроилась UX/UI-дизайнером в Tele2. Помимо портфолио, было важно, как я умею работать в команде, какие роли в этих проектах я занимала, какие задачи, кроме интерфейсов могу решать и другие soft skills.

Сейчас я работаю над системой лояльности для клиентов Tele2. И это уже совсем по-другому: мы работаем с аналитиками, и когда дело доходит до UI, я уже могу аргументировать расположение, форму, цвет каждого элемента интерфейса. У нас на курсе были ребята, которые пришли не из сферы дизайна (маркетологи, менеджеры, разработчики). На курсе они освоили инструменты прототипирования, научились делать какие-то элементы интерфейса. Понятно, что у них нет такого бэкграунда в дизайне, как у графических дизайнеров. Но это так здорово, когда даже менеджеры или разработчики разбираются в дизайне, могут сделать прототип, поправить баннер, иконку и вообще начинают понимать, что дизайн - это большой труд».

Дмитрий Ершов, руководитель по облачным сервисам, АО «МегаЛабс»

«В «МегаЛабс» несколько команд, между которыми распределены продукты «МегаФона». Например, сейчас мы ищем дизайнеров в команды «МегаФон.Банк» и «МегаФон.ТВ». Когда я уже посмотрел портфолио и общаюсь с UX/UI-специалистом, сначала проверяю знание теории: композиции, типографики, колористики. На каждую из тем задаю несколько вопросов, и если дизайнер отвечает «я так вижу» – сразу минус 1 балл. Но если он, например, предлагает подобрать цвет с помощью триадной схемы – становится понятно, что с основами колористики он знаком.

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

Вопросы по разработке тоже всегда звучат на собеседовании. Обычно я показываю несколько сайтов и спрашиваю, сколько колонок в сетке, или чем отличается JS от CSS. Дизайнер должен уметь все это объяснить, чтобы «упаковывать» свои идеи на понятном для разработчиков языке».

3. Сложно ли найти работу?

С одной стороны, отрасль испытывает нехватку таких специалистов и готова много платить, с другой, сейчас многие дизайнеры в поиске работы и долго не могут найти приличное место. В чем проблема тех и других?

Прежде всего нужно изменить мышление. От «как сделать красивые экраны для портфолио» к «как сделать людей более счастливыми после взаимодействия с продуктом». Может получиться так, что вообще не придется рисовать экранов, и люди скажут за это спасибо. Для создания этих артефактов как раз используются актуальные дизайн-инструменты, методологии: Design thinking, User story mapping, User Flow Mapping, Customer Journey Mapping, Split-тестирования, Usability-тестирования, количественные исследования и многие другие. Хотя порой можно прийти к правильным результатам неправильным путем. Ситуация рынка новых профессий нестабильна, сейчас это довольно востребованное и прибыльное занятие, но спрос рождает предложение.

Евгений Засименко, выпускник БВШД, product-дизайнер в Avito

«Я начал искать работу продуктового дизайнера за несколько месяцев до окончания курса. Нельзя сказать, что очень активно, но в Avito мне понравилось, когда мы были там на экскурсии от Британки. Процесс трудоустройства был довольно стандартный для сферы дизайна: просмотр портфолио, тестовое задание, два собеседования, и я получил офер.

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

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

За этот год нам удалось сделать около 20 проектов для самых разных типов компаний: от ожидаемого финтеха - «Альфа-банк», МТС, «МегаФон» - до стартапов из сферы агротеха. Многие студенты смогли найти работу по итогам защиты проектов в тех компаниях, для которых делали проект, потому что заказчики в процессе видят их компетенции и практический опыт.

Денис Ушаков, выпускник БВШД

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

Сейчас я продолжаю работу над проектом в качестве продуктового дизайнера уже в штате этой компании. Заказчик сам предложил мне позицию продуктового дизайнера, поскольку они уже видели, на что я способен, у нас был опыт совместной работы. Мне кажется, почти все одногруппники к концу обучения устроились на должность, связанную с UX/UI в такие компании, как «Райффайзенбанк», «Сбербанк Технологии», Tele2, Mail.ru, IBM Россия и другие».

4. Продолжится ли рост спроса на таких специалистов в ближайшие 5 лет?

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

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

Я думаю, следующая волна будет направлена на осознанность и внедрение основных понятий и принципов UX во все профессии, занимающиеся созданием продукта. То есть востребованы будут специалисты, которые на уровне ДНК понимают принципы исследований, основных методов анализа пользователей и процессов, проектирования опыта. И это не исключает высокие дизайнерские скиллы. Я верю в рост именно дизайнерской компетенции, потому что проектировщик - это хорошо, но чувство прекрасного в широком смысле слова никто не отменял».

5. Как работа UX/UI-дизайнера отражается на повседневной жизни?

Если принять что практически все, чем мы пользуемся, было придумано дизайнерами, то почти все массовые цифровые сервисы - мобильные сайты, web-сервисы и другие - придумываются сейчас Digital Product Designer"ами. Банковские приложения, услуги операторов связи, электронная коммерция, сервисы знакомств, геолокационные и информационные сервисы... Продолжать можно долго - легче открыть рабочий стол мобильного телефона или десктоп ноутбука и полистать установленные приложения. Все это - цифровые продукты, над логической и визуальной составляющей которых работают UX/UI-дизайнеры.

Проект студентов курса «UX/UI дизайн» БВШД для МТС: мобильный гид для адаптации и развития сотрудников МТС

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

Время жизни прибыльных бизнес-моделей стремительно сокращается. Чтобы оставаться на плаву, нужно постоянно создавать новые и развивать уже имеющиеся цифровые продукты. Бренды, которые не могут адаптироваться к скорости, «вылетают с трассы». Поэтому современные компании переходят на быстрые адаптивные циклы постоянных изменений. Это как раз про пресловутый Agile и Scrum. Design-Develop-Learn и опять по кругу. Следовательно, дизайн-экспертиза как часть этого круга становится основополагающей.

Алина Ермакова, начальник отдела аналитических исследований пользовательского взаимодействия в «Сбербанк-Технологии»

«Пару недель назад я вернулась с конференции Enterprise UX в Сан-Франциско. Большие компании рассказывали, как проектируют госсервисы, или большие финтех-системы, или, например, как Uber сохраняет консистентность, находясь в 77 странах мира. UX/UI у них уже в ДНК. Это не этап, не метод, это нормальный продакшн-процесс. Нет церемоний прохождения дизайн-мышления, например.

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

6. Какие методологии сейчас наиболее популярны?

В России культура продуктового дизайна сейчас только зарождается. Фреймворк «Дизайн-Мышление» (Design Thinking) - уже стал неотъемлемой частью программы внутреннего корпоративного обучения в наших крупных компаниях и корпорациях: «Росатом», «Сбербанк», «Альфа-банк» и других.

В цифровых компаниях традиционно популярны деривативы Design Thinking - Google Ventures Design Sprints, IBM Design Thinking, а также различные инструментальные части Design Thinking - моделирование персонажей, этнографические исследования, карты стейкхолдеров, картирование пользовательских путей (Customer Journey Mapping) и прочие. Относительно новым, но заслуживающим внимания является фреймворк Jobs To Be Done, где продукт разрабатывается не столько на основе характеристик пользователя, сколько на основе ситуации, в которой он оказался. Востребованность методологии зависит как от сферы деятельности компании, так и от внутренних процессов. Внедрить тот же Scrum в крупной компании дольше и сложнее, чем в стартапе, но все реально, главное - желание делать классный продукт для людей.

Дмитрий Ершов, руководитель по облачным сервисам АО «МегаЛабс»

«Для продуктов, которые не будут меняться, мы используем классическую каскадную модель разработки, а для постоянно развивающихся – выбираем SCRUM. Новые продукты или функциональности описываем с помощью диаграмм вариантов использования, но примеряем концепцию Jobs To Be Done, в которой такие диаграммы не нужны.

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

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

7. В какие отрасли интегрируются методики UX/UI-дизайна в будущем?

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

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

Проект студентов курса «UX/UI дизайн» БВШД для банка «Ак Барс»: личный финансовый помощник, инструмент для инвестиций в любом удобном мессенджере.

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

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

«Большинство компаний все еще воспринимают UX/UI-исследования, дизайн-мышление и другие креативные методики как услугу, отдельный сервис, который можно заказать или нанять. «Мыслить как дизайнер» нельзя купить, надо начать. Всем =)», - говорит Алина Ермакова, начальник отдела аналитических исследований пользовательского взаимодействия в «Сбербанк-Технологии».

Дизайн – понятие довольно широкое и неопределенное. Когда кто-то говорит? «Я дизайнер», не сразу понятно, чем он в действительно занимается каждый день. Существуют несколько разных областей, объединенных под понятием «дизайн».

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

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

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

UX-дизайнер (USER EXPERIENCE дизайнер)

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

Пример описания работы experience-дизайнера в Twitter:

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

Результаты работы: макеты изображений на экранах, раскадровки, план сайта.

Инструменты: Photoshop, Sketch, Illustrator, Fireworks, InVision

UI-дизайнер (USER INTERFACE дизайнер)

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


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

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

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

Инструменты: Photoshop, Sketch, Illustrator, Fireworks

Визуальный дизайнер (графический дизайнер)

Визуальный дизайнер – это тот, кто занимается графикой. Если вы спросите кого-то, кто не занимается дизайном, кто такой дизайнер, пожалуй, первым на ум придет как раз-таки графический дизайнер. Графические дизайнеры никак не связаны ни с тем, как экраны сообщаются друг с другом, ни с тем, как кто-то взаимодействует с продуктом. Вместо этого, они сосредоточены на создании красивых иконок, элементов управления и других визуальных элементов и выбирают подходящие шрифты. Графические дизайнеры трудятся над маленькими деталями, которым остальные не придают значения, и часто работают в Photoshop в режиме приближения 4X или 8X.

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

Инструменты: Photoshop, Sketch

Interactive-дизайнер (моушен-дизайнер)

Помните почти незаметную подпрыгивающую анимацию, когда вы обновляете почту на своем iPhone? Это работа моушен-дизайнера. В отличие от графических дизайнеров, которые работают со статичными элементами, моушен-дизайнеры создают анимацию внутри приложений. Они имеют дело с тем, что делает интерфейс, после того, как пользователь к нему прикасается. Например, они решают, каким образом должно развертываться меню, какие эффекты перехода использовать, и как должна реагировать та или иная кнопка. Хорошо выполненный моушен-дизайн становится неотъемлемой частью интерфейса, предлагая визуальные подсказки как использовать продукт.

Описание работы моушен-дизайнера в Apple:

«Высокая квалификация в графическом дизайне, моушен-графике, знания в digital art, хорошее восприятие шрифтов и цвета, общее внимание к материалам и текстурам, а также практическое понимание анимации. Знание iOS, OS X, Photoshop и Illustrator, также знакомство с Director (или аналогом), Quartz Composer (или аналогом), 3D-моделированием, моушен-графикой»

Инструменты: AfterEffects, Core Composer, Flash, Origami

UX Исследователь (Исследователь пользователей)

Цель UX исследователя – ответить на два вопроса: «Кто наш потребитель?» и «Что хочет наш потребитель?» Обычно в обязанности исследователя входит проведение интервью с пользователями, исследование маркетинговых данных и общий сбор аналитики. Дизайн – это процесс постоянного совершенствования. Исследователь может помочь в этом процессе, проводя A/B-тестирование, чтобы выявить, какое дизайнерское решение наиболее полно удовлетворяет потребительские нужды. UX-исследователь обычно – главная опора в больших компаниях, где доступ к огромному количеству информации дает ему достаточно возможностей, чтобы прийти к значимым заключениям.

Описание работы UX-исследователя в Facebook:

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

UX-дизайнеры периодически выполняют обязанности UX-исследователей.

Результаты работы: портрет пользователя, результаты A/B-тестирования, поведенческие исследования пользователей/интервью.

Инструменты: микрофон, бумаги, документы

Внешний разработчик (UI-разработчик)

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

Инструменты: CSS, HTML, JavaScript

Дизайнер продукта

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

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

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

Описание работы продакт-дизайнера для Pinterest

«Владение всеми сферами дизайна: взаимодействие, визуальная часть, работа с продуктом, макетирование. Создание шаблонов элементов изображений и их верстка».

Ищу дизайнера

Самая распространенная фраза, которую я слышу от молодых стартапов. Обычно они ищут того, кто мог бы делать все вышеперечисленное. Они ищут того, кто мог бы создавать красивые иконки, создавать лендинги, запускать A/B-тестирование, логично размещать элементы UI на экране, и может даже делать что-то из обязанностей внешнего разработчика. Из-за общего характера, который носит эта должность, мы часто слышим, что компания хочет нанять просто «дизайнера», не углубляясь в подробности и специфику этой профессии.

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

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

Коротко про разницу

UI-дизайнер (user interface) - это дизайнер интерфейсов в идеальной среде, который рисует кнопочки, иконочки, формы, подбирает шрифты и делает из всего гармоничный и красивый макет. Сайта, приложения, хоть чего, с чем будет взаимодействовать пользователь - хоть экрана вокзального терминала. И больше ни о чем не думает.

UX-дизайнер (user experience) - это не дизайнер, а проектировщик (просто в английском слово designer имеет как раз второе значение). Он изучает потребности пользователей, строит логические схемы работы интерфейса, тестирует прототипы на живых людях, пишет ТЗ на дизайн. Другими словами, это такой инженер-маркетолог: на входе аналитика, на выходе принципы создания интерфейса, логика работы, компоновка, контент. Рисования как такового он не касается.

Вот и всё.

Зачем нужно было всё усложнять

Как было раньше: дизайнеру поступало задание «нарисовать сайт». Все сайты были более-менее одинаковыми: главная, о компании, каталог, далее по списку. Дизайнер спрашивал: «а когда нам контент дадут?». Никогда, товарищ дух, это армия.

И дизайнер назывался просто «дизайнер». Без заморских приставок.

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

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

То же самое уже было в отрасли. Например, просто «программистов» разделили на «фронтенд» и «бэкенд». А фронтендеров на истинных фронтендеров и «просто верстальщиков». Кстати, .

Причина всегда одна: одного человека не хватает на большой процесс. Едем дальше.

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

Что весело: в вакансиях часто мелькают должности UX/UI дизайнера, именно так, через слэш. Даже Тинькофф ищет такого кккомбо-специалиста:


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

Кто такой UX/UI в идеальном мире? Сверхчеловек, который проводит весь цикл работ UX, а потом еще успевает отрисовать всё с несколькими итерациями правочек (сделать UI).

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

Так что, если видите удивительного мутанта UX/UI, знайте, что:

  1. Это дизайнер, который подходит к проекту с головой, а не просто щелкает мышкой и клювом.
  2. Это хлыщ, который начитался умных слов и теперь называет себя UX/UI.

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

Как запомнить, где UX, а где UI

Предлагаем две простые запоминалки.

Для тех, кто знает английский:

Для тех, кто не знает:

Кстати

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

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

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

Кто такой UX-дизайнер, чем он занимается

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

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

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

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

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

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

Один из дизайнеров Google, Фиона Йонг, рассказала , что в ее команде - лишь несколько специалистов с образованием дизайнера. Остальные раньше работали в смежных областях или в других отраслях. Кто-то занимался когнитивными науками, а кто-то психобиологией.

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

С чего начать

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

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

Исследование

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

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

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

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

Анализ данных

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

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

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

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

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

Проектирование

На этом этапе визуализируют все собранные данные. Строят структуру приложения, располагают элементы для каждого экрана.

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

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

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

Дизайн

Созданием окончательного варианта занимается UI-дизайнер. Но часто рисовать окончательный вариант приходится самостоятельно. Поэтому полезно получить основные навыки и научиться UI-дизайну.

На этапе из прототипов и вайрфреймов создают визуализацию, работают с цветом, композицией и типографикой, оформляют контент.

Для этого подходят графические редакторы, в которых работают дизайнеры:

  • Adobe Photoshop,
  • Adobe XD,
  • Sketch,
  • Figma.

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

Анализ метрик

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

Работают над продуктом - проводят юзабилити- и A/B-тесты. Улучшают пользовательский опыт, добавляют новые возможности.

Как учиться UX-дизайну

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

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

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

    Какова разница между UI (user interface, пользовательский интерфейс) и UX (user eXperience, пользовательский опыт)?

    Если бы у нас было 30 секунд на объяснение, мы бы дали такое блиц-описание.

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

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

    Плохой UX: «Я ненавижу всех! Включая тебя!». Великолепный UX: «Люблю жизнь! И тебя! И щеночков!».

    Однако данное объяснение не является всеобъемлющим. Копнем немного глубже в область UI и UX для лучшего понимания различий между ними.

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

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

    Затем в 1981 году группа специалистов в области вычислительной техники компании Xerox PARC разработала и запустила Xerox Star — персональный компьютер с самым первым графическим пользовательским интерфейсом (Graphical User Interface, GUI). Он использовал окна, иконки, раскрывающееся меню, (Radio Buttons) и чекбоксы (Checkboxes, флажки для выбора функций). Пользователи теперь могли открывать, перемещать и удалять файлы:

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

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

    Команда компании Apple Computer продолжила свое развитие и расширение именно на базе идеи GUI. И в 1984 году они выпустили Macintosh, ставший первым коммерчески успешным десктопным компьютером. Он имел интерфейс с несколькими окнами и мышку, работавшую по принципу «наведи и кликни» (point-and-click).

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

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

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

    Что такое пользовательский опыт?

    Термин «пользовательский опыт» был придуман ученым-когнитивистом Доном Норманом (Don Norman) в начале 1990-х, когда он был вице-президентом группы разработки новейших технологий в компании Apple.

    Вот как звучит определение Нормана: «Пользовательский опыт охватывает все аспекты взаимодействия конечного пользователя с компанией, ее услугами и ее продукцией».

    Объясняя происхождение термина, Норман писал:

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

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

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

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

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

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

    1. Процесс, через который они проходят, когда ищут продукт вашей компании.
    2. Последовательность действий, выполняемых ими при взаимодействии с интерфейсом.
    3. Мысли и чувства, возникающие у них при выполнении своей задачи.
    4. Впечатления, получаемые ими от взаимодействия в целом.

    UX должен быть: полезным (useful), удобным (usable), востребованным (desirable), имеющим ценность (valuable), находимым (findable), доступным (accessible), вызывающим доверие (credible)

    Обязанность UX-дизайнеров заключается в том, чтобы гарантировать: поставляемые компанией товары или услуги отвечают потребностям клиента и позволяют им беспрепятственно достичь желаемого результата. Чтобы добиться этого, дизайнеры могут обратиться к исследованиям для получения как можно большего количества информации о контексте взаимодействия пользователя с продуктом, чтобы затем с помощью этих сведений смоделировать структурные схемы (Wireframes) и прототипы (Prototypes), позволяющие пользователю добраться из точки А в точку Б.

    Какова разница между UI и UX?

    Дон Норман и Якоб Нильсен (Jakob Nielsen) кратко и понятно резюмировали разницу между двумя понятиями:

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

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

    Еще одним удачным примером является Google. Его интерфейс очень прост. Он почти ничего не содержит — только логотип, строку поиска и несколько кнопок:

    Но когда вы вводите что-либо в поле поиска, менее чем за секунду вы получаете доступ к почти полной базе человеческих знаний в оцифрованном виде:

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

    Мнения

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

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

    Кен Нортон (Ken Norton), один из партнеров в Google Ventures, бывший руководитель отдела по разработке новой продукции в Google:

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

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

    Энди Бадд (Andy Budd), соучредитель компании Clearleft и основатель UX Лондон:

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

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

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

    Джейсон Мисут (Jason Mesut) отлично описал разницу между UX и UI (а также и частичное совпадение их смыслов) в его «дважды бриллиантовой» модели (Double Diamond Model). Согласно этой модели, разработчик UX имеет глубокие познания в стратегии, практике исследований, информационной архитектуре и дизайне взаимодействия (Interaction Design).

    UI-дизайнер (или, как теперь его принято называть в Кремниевой долине, дизайнер цифровых продуктов) также имеет навыки в области дизайна взаимодействия. Однако фокус его работы тяготеет больше к таким областям, как информационный дизайн (Information Design), «движущийся дизайн» (Motion Design) и брендинг.

    Хотя некоторые люди утверждают, что они являются экспертами во всех этих областях, такое встречается довольно редко. В конце концов, если вы являетесь экспертом во всем, вы, вероятнее всего, эксперт ни в чем конкретно».

    3. Нет никакой разницы между UX- и UI-дизайном, потому это два несопоставимых понятия.

    Крейг Моррисон (Craig Morrison), руководитель отдела по разработке продукции компании RecordSetter и основатель Usability Hour:

    «Я слышу этот вопрос все время, и я много раз отвечал на него. В итоге я пришел к такому выводу.

    Нет никакой разницы между UX- и UI-дизайном, поскольку эти две вещи не сопоставимы друг с другом. Это то же самое, что спрашивать, к примеру, какова разница между красной краской и химическими веществами, из которых состоит эта краска?

    Нет никакой разницы.

    Красную краску дает соединение различных химических веществ…

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

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

    Какова разница между MacBook и формой клавиш?

    Какова разница между чаем и видом материала, из которого сделан чайный пакетик?

    Какова разница между автомобилем и цветом, в который он окрашен?

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

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

    Патрик Ниман (Patrick Neeman), начальник отдела дизайна продуктов компании Apptio, основатель Usability Counts:

    «Дизайн пользовательского опыта охватывает весь опыт пользователя, даже вне экрана его компьютера. Дизайн пользовательского интерфейса, как правило, связан с визуальным и информационным дизайном, то есть с тем, что происходит на экране. Современное определение UX восходит к тому, что дала Nielsen Norman Group: UX — это любая точка контакта пользователя или клиента с системой, как в цифровом ее виде, так и в других проявлениях».

    5. UI ориентирован на продукт и представляет собой серию визуальных характеристик за отрезок времени. UX фокусируется на пользователе и его пути «через продукт».

    Скотт Дженсон (Scott Jenson), руководитель отдела стратегического развития продуктов в Google:

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

    UX фокусируется на пользователе и его пути «через продукт».

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

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

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

    Клейтон Янь (Clayton Yan), UX-дизайнер компании UserTesting:

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

    Я всегда объясняю эту тему, используя аналогию со строительством дома. Когда вы строите дом, вы думаете о его планировке и расположении комнат.

    Сколько спален вам нужно, 2 или 3? Будет ли каждая из этих спален иметь собственную ванную комнату? Будет ли гостиная располагаться сразу у входа? Будет ли дом одноэтажным или сделать два этажа?

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

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

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

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

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

    А каково ваше мнение?

    Многие путают понятия UX и UI и используют их как взаимозаменяемые. Как сказал Дон Норман, «они просто вошли в лексикон и больше не имеют какого-либо специального смысла. Люди используют их, часто не имея никакого понятия о том, что означают эти слова, каково их происхождение, история или какой круг явлений они затрагивают».

    А что думаете вы? Какова разница между UI и UX? Могут ли они использоваться взаимозаменяемо или означают разные вещи?