Веб-дизайн

Разница между UX и UI дизайном


Вы знали, что 60% пользователей покидают сайты с плохим дизайном? Зачем ждать? Выберите и установите один из лучших премиум шаблонов WordPress прямо сейчас!

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

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

Разница между UX и UI дизайном

Разница между UX и UI дизайном

Давайте для начала разберемся, что означают эти две аббревиатуры. Итак, под UI (user interface) понимается пользовательский интерфейс, а под UX (user experience) – восприятие пользователем. Оба этих элемента имеют огромное значение для продукта и работают в тесном контакте друг с другом. Но, несмотря на эту связь, у каждого из них своя индивидуальная функция, относяющаяся к совершенно разным этапам и аспектам разработки. В то время как UX-дизайн связан с аналитической и технической частью проектирования, UI-дизайн ближе к тому, что принято называть графическим дизайном (хотя это понятие намного шире).

Чтобы наглядно объяснить разницу между этими двумя понятиями, можно описывать продукт, проводя аналогию с человеческим телом, в котором определенные его части соответствуют той или иной части разработки:

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

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

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

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

Вот что нам об этом говорит Википедия:

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

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

Дин Норман, известный сооснователь консалтинговой компании Nielsen Norman Group считает: «Восприятие пользователем (UX) объединяет все аспекты взаимодействия конечного пользователя с компанией, ее услугами и товарами».

Это значит, что независимо от сферы деятельности UX-дизайн объединяет в себе любые взаимодействия между реальным/потенциальным пользователем и компанией. С научной точки зрения, UX-дизайн можно применить к чему угодно: уличным фонарям, автомобилям, мебели IKEA и так далее.

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

Разработка стратегии и развитие контента:

  • Анализ конкурентов
  • Анализ потребителей
  • Формирование структуры продукта/разработка стратегии
  • Развитие контента

Каркасное моделирование и прототипирование:

  • Каркасное моделирование
  • Прототипирование
  • Тестирование/прогон
  • Планирование процесса разработки

Реализация и анализ:

  • Координация работы с UI-дизайнерами
  • Координация работы с разработчиками
  • Контроль достижения целей и интеграция
  • Анализ и прогон

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

Подытожим:

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

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

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

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

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

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

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

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

Внешний вид:

  • Анализ потребителей
  • Дизайнерское исследование
  • Брендинг и разработка графического оформления
  • Создание руководства пользователя

Восприимчивость и интерактивность:

  • UI-прототипирование
  • Интерактивность и создание анимационного оформления
  • Адаптация под устройства с любым размером экрана
  • Реализация совместно с разработчиком

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

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

Подытожим:

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

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

UX против UI – Какая профессия больше вам подходит и какая из них важнее?

Если вы дошли до этой части статьи, вы уже должны знать ответ на эти вопросы. Но если вы не уверены, позвольте процитировать дизайнера и эксперта Хельгу Морено, которая высказалась по этому поводу наиболее точно: «То, что выглядит красиво, но с чем сложно работать – это пример отличного UI-дизайна и паршивенького UX-дизайна. А то, что очень удобно в работе, но выглядит просто ужасно – пример отличного UX-дизайна и плохого UI-дизайна».

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

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

За какую работу больше платят?

Зарплата существенно зависит от многих факторов, но в основном на нее влияют:

  • город и страна проживания
  • ваш опыт
  • сфера
  • тип проекта/продукта

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

Если говорить о средних показателях, зарплаты для UX и UI вакансий находятся в следующем диапазоне (для стран Центральной Европы):

Годовой оклад:

  • Младший (Junior) – от 28 до 33 тысяч евро
  • Среднего уровня (Middle) – от 38 до 45 тысяч евро
  • Старший (Senior) – от 50 до 80 тысяч евро

Почасовая ставка:

  • Младший (Junior) фрилансер – 30-50 евро
  • Фрилансер средного уровня (Middle) – 50-75 евро
  • Старший (Senior) – 75-100 евро

*Цифры приведены, основываясь на данных для Германии и стран Центральной Европы. Чтобы узнать о данных для вашего региона, перейдите по ссылке: http://www.glassdoor.com/salaries

Как освоить эти навыки?

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

Если вы живете в мегаполисе, у вас больше возможностей найти официальные и неофициальные учебные курсы и программы, организованные как местными компаниями, так и известными компаниями с мировым именем вроде Microsoft или Google. В Интернете больше возможностей, и вы без проблем найдете огромное количество бесплатного контента и курсов для освоения обоих навыков. Мы настоятельно рекомендуем проверять краткое описание и содержание каждого из курсов, чтобы убедиться в том, что оно соответствует тем определениям, которые я упомянул в этой статье. Одними из лучших площадок онлайн-курсов для этого направления являются Coursera.com и Udemy.

Разница между UX и UI дизайном — Заключение

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

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

Веб-дизайн
Как используется психология цвета в маркетинге
Веб-дизайн
Редакторы кода для веб дизайнера 2017
Веб-дизайн
Топ-8 анализаторов оптимизации веб-производительности
There are currently no comments.

Добавить комментарий