16 марта 2019
23 мин на чтение
6805

UX/UI дизайн — что это и в чем отличия

author__photo
Елизавета Теряева
Редактор блога
Нет времени читать?
Отправить статью на почту

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

Наши продукты помогают вашему бизнесу оптимизировать расходы на маркетинг
Узнать подробнее

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

За сокращением UX скрывается понятие User Experience Design, а за UI — соответственно, User Interface Design. Обе эти составляющие являются фундаментальными при разработке продукта.

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

Разберём каждое понятие по отдельности.

UX/UI дизайн

Что такое UX

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

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

Что такое UX?

UX дизайн применим во многих областях:

  • Стратегия и контент. Анализ конкурентов, анализ аудитории, структура и стратегия продукта, разработка контента.
  • Прототипирование. Непосредственно прототипирование, тестирование.
  • Разработка и аналитика. Координация с UI-дизайнерами и разработчиками, постановка целей, интеграции, аналитика и доработки.

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

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

caltouch-platform

Виджет обратного звонка для сайта

50 минут в подарок новым клиентам
  • Повысьте конверсию сайта на 30%.
  • Экономьте на тарифах: от 5 рублей в минуту.
  • Настраивайте под ваш сайт. Адаптируйте под все устройства. Тестируйте разные виджеты.
  • Используйте гибкие настройки показа.
  • Стройте отчеты по звонкам: от показа виджета до ключевого слова.

В результате:

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

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

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

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

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

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

Что такое UI

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

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

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

При этом, часто определения UI и UX идентичны.

Проблема в том, что никто здесь не прав.

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

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

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

Что такое UI

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

Рассмотрим зону ответственности UI-дизайнера:

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

Данная сфера обязанностей крайне важна, так как UI-дизайнер — это тот, кто создаёт лицо продукта. Именно с результатом его видения будут иметь дело все пользователи.

Таким образом:

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

Что важнее — UI или UX?

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

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

caltouch-platform

Сквозная аналитика

 от 990 рублей в месяц
  • Автоматически собирайте данные с рекламных площадок, сервисов и CRM в удобные отчеты
  • Анализируйте воронку продаж от показов до ROI
  • Настройте интеграции c CRM и другими сервисами: более 50 готовых решений
  • Оптимизируйте свой маркетинг с помощью подробных отчетов: дашборды, графики, диаграммы
  • Кастомизируйте таблицы, добавляйте свои метрики. Стройте отчеты моментально за любые периоды

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

В то же время, до сих пор возникает большая путаница и недопонимание даже среди специалистов в области digital — что же такое UX и что такое UI.

Отличия UX от UI

Разница между веб-дизайном и UI/UX дизайном

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

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

Где используют UX и UI в Digital

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

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

Принципы хорошего UX/UI-дизайна

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

Полезный / Useful

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

Пригодный для применения / Usable

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

Обнаруживаемый / Findable

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

Заслуживающий доверия / Credible

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

Желанный / Desirable

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

Доступный / Accessible

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

Ценный / Valuable

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

Как научиться UX и UI

Если вы не наниматель, а специалист, который хотел бы определиться с направлением развития, полезно вам дать краткие советы о том, как приобрести навыки и опыт в UX и UI.

Как правило, дизайнерские специальности с профильным уклоном в высших учебных заведениях постсоветского пространства не распространены. Одна из немногих возможностей попасть на очный формат — это Британская высшая школа дизайна. Рекомендуется попробовать себя в тех ВУЗах, где преподаётся трёхмерная графика. Часто в процессе обучения попутно осваивается 2D-вектор, основы юзабилити, что можно использовать для своих нужд.

Наиболее распространённый вариант — онлайн-курсы. Та же coursera, udemy, edx. На этих платформах достаточно материалов и знаний от настоящих профессионалов. Вы можете найти продолжительные углублённые курсы, которые помогут освоить вам профессию по-настоящему.

Перспективы UI/UX

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

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

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

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

  • Тачскрин из дронов

Тачскрин из дронов GridDrones

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

Что если теперь этот же подход применить не к дисплею в руке, а к произвольным объектам окружающей среды? Проект GridDrones, продемонстрированный на ACM User Interface Software and Technology Symposium, делает шаг в этом направлении.

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

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

  • Пальцы — часть интерфейса

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

Вместо того, чтобы придумывать тройные, четырёхкратные и другие избыточные неудобные команды, создатели Touch+Finger решили избавиться от старой парадигмы.

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

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

  • Осязаемая виртуальная реальность

Осязаемая виртуальная реальность PuPOP

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

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

Баллон PuPOP, размещённый в руке, сдувается и надувается, принимая формы предметов, к которым вы прикасаетесь в VR.

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

Заключение

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

Магазин умных предложений для вашего бизнеса

По материалам https://careerfoundry.com и https://www.fastcompany.com/90247985/the-craziest-projects-from-a-conference-on-experimental-ui

Нет времени читать?
Отправить статью на почту
Оцените
Поделитесь с друзьями
Что нового в интернет-маркетинге?
Главное в ежемесячной рассылке
Нажимая на кнопку "Подписаться", вы даёте своё согласие на обработку персональных данных и получение рекламной информации о продуктах, услугах посредством звонков и рассылок по предоставленным каналам связи.
У вас есть интересный материал?
Опубликуйте статью в нашем блоге
Опубликовать статью
Хотите получить актуальную подборку кейсов?
Прямо сейчас бесплатно отправим подборку обучающих кейсов с прибылью от 14 730 до 536 900р.
[contact-form-7 404 "Not Found"]
У нас тут cookies…
На сайте используются файлы cookies. Продолжая использование сайта, вы соглашаетесь с этим. Подробности об обработке ваших данных — в политике конфиденциальности.