Ux это ui: Что такое UX/UI-дизайн и как попасть в эту профессию / Skillbox Media

Содержание

что это такое и для чего это нужно? — Менделеев маркетинг на vc.ru

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

168 просмотров

Игорь, ведущий UX/UI-дизайнер «Менделеев Маркетинг»

Что такое UX/UI

Тут всё просто, это аббревиатура от английских названий:

UX (User Experience) — дословно с английского «пользовательский опыт»;

UI (User Interface) — дословно с английского «пользовательский интерфейс».

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

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

Вы никогда не задумывались, почему он выглядит именно так?

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

Как говорится, чайник — он и в Африке чайник.

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

Пользовательский опыт — опыт взаимодействия с продуктом (в нашем случае с чайником).

А все элементы на чайнике: ручка, крышечка, носик и так далее — не что иное, как простейший интерфейс для того, чтобы пользоваться им. Таким образом:

Пользовательский интерфейс — набор элементов взаимодействия с продуктом.

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

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

Это лишь предпосылки к появлению понятий UX/UI.

Откуда появилось понятие UX/UI

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

В 1995 году Дональд Норман, профессор и ученый, который пришел в Apple в начале 90-х в качестве архитектора пользовательского опыта, был первым, кто использовал термин UX в своей должности.

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

Исходя из вышесказанного, можно наконец определить, что же такое UX/UI:

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

Занимается всем этим UX/UI-дизайнер — специалист, проектирующий и создающий продукты по методологии UX/UI, где:

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

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

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

Если представить требования в виде списка, то выглядеть он будет следующим образом:

обширные теоретические знания;
большой практический опыт;
знание и понимание трендов;
развитое воображение.

Но это того стоит…

Для чего это всё нужно

И это, пожалуй, самое важное в данной методологии. Цель методологии можно представить всего в двух пунктах, но они очень важны:

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

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

А для бизнеса это важные параметры.

Вот как-то так вкратце выглядит описание UX/UI.

Конечно, если вы заинтересовались этой темой и хотели бы изучить её подробнее, то могу посоветовать вам почитать книги:

Дональд Норман «Дизайн привычных вещей»;
Алан Купер «Интерфейс. Основы проектирования взаимодействия»;
Расс Унгер, Кэролайн Чендлер «UX-дизайн. Практическое руководство по проектированию опыта взаимодействия».

Ну а если вы решили стать UX/UI-дизайнером, то могу посоветовать вам отличный онлайн-курс по UX-дизайну от Skillbox.

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

что это такое, проектирование интерфейсов

UX-дизайн — направление дизайна, которое предназначено для создания интерфейсов, удобных для пользователя. Основная задача интерфейсов — повысить лояльность клиента к продукту за счет простоты взаимодействия с ним. UX — сокращение от User Experience (пользовательский опыт).

Содержание

Сферы использования UX-дизайна
Что такое UI-дизайн
Сферы использования UI-дизайна
Как UX связан с UI
Этапы проектирования интерфейса
Принципы хорошего UX/UI-дизайна
Какими навыками должен обладать UX/UI-дизайнер

Сферы использования UX-дизайнаИнтерфейс мобильного приложения от дизайнера Filip Rygucki. Источник

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

простые алгоритмы, понятные даже неподготовленному человеку;
продуманные сценарные решения;
широкий функционал.

Структура и логика сайта от UX-дизайнера Brian Rodenberg. Источник

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

Говоря про UX, обязательно нужно упомянуть другое тесно связанное с ним понятие.

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

Фрагмент интерфейса платформы LingvoHabit по изучению английского языка. Источник

Сферы использования UI-дизайна

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

Цвета, шрифты для приложения и их реализация в логотипе. Источник

Как UX связан с UI

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

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

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

Этапы проектирования интерфейса

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

Этапы разработки интерфейса наглядно отображены в виде схемы в презентации проекта дизайнеров Artem Makarenko и Mary Up. Источник

Этап 1. Исследования

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

Пример части брифа для UX-дизайнера. Источник. Подробнее о брифах для дизайнеров можно прочесть в этой статье

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

Фрагмент landing page для ветеринарной клиники от Yana Gladkaya. Источник

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

Пример пошагового сценария пользователя сайта Эрмитажа от Alex Kovch. Источник

Этап 2. Прототипирование

Когда все данные собраны и имеется приблизительное понимание того, каким должен быть конечный продукт, дизайнер может приступить к созданию прототипа — наброска сайта или приложения. Самый первый черновой вариант обычно называют вайрфреймом (wireframe). Он наглядно демонстрирует основную идею, но не имеет никакого отношения к финальному варианту (выполнен в ч/б гамме, иконки и картинки не прорисованы и выглядят грубо). Уже на этом этапе согласованный скетч можно отправить разработчикам для создания «скелета» мобильного приложения. Сверстанный прототип, как правило, сразу дает представление о том, насколько удобными оказались все идеи дизайнера.

Пример прототипов интерфейса для мобильного приложения кофейни от Mariia Martishyna и Oksana Kovalchuk. Источник

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

Прототипы интерфейса мобильного приложения для прослушивания аудиокниг от Alena Chibichik, Olga Fedorova, Елизаветы Мячиной. Источник

Этап 3. Проектирование визуальной составляющей (UI-дизайн)

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

Начало работы UI-дизайнера: подбор оттенков и шрифтов, которые будут использоваться в приложении и на сайте. Работа Mateusz Grad. Источник

Этап 4. Проверка решений

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

Наличие темной и светлой темы в приложении удобно для многих пользователей, поэтому не стоит забывать о создании сразу двух вариантов цветовых схем, как в проекте дизайнеров Artem Makarenko и Mary Up. Источник

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

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

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

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

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

Источник

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

Шаблонное решение — познакомить нового пользователя с функционалом приложения. Согласитесь, скрин приложения справа помогает новому пользователю понять механику, а слева — нет. Источник

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

Виртуальная кнопка Home, которую можно настроить самостоятельно на последних моделях iPhone. Источник

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

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

Много текста и яркий дизайн — тренд середины 2000-х. Пример утрирован, но дает понять, что с трендами стоит быть осторожнее, чтобы не застрять в прошлом. Источник

Какими навыками должен обладать UX/UI-дизайнер

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

К профессиональным навыкам можно отнести:

знание цветовой теории;
знание типографики;
навыки работы в основных графических редакторах: Adobe Photoshop, Adobe Illustrator, Figma и др.
умение создавать запоминающийся визуал;
умение разрабатывать с нуля иконки и кнопки;
умение создавать анимированные объекты интерфейсов.

ИСКРА —
неделя знакомства
с дизайн-профессиями

бесплатно

ИСКРА —
неделя знакомства
с дизайн-профессиями

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

разжечь искру

UX и дизайн пользовательского интерфейса — разница между ними

Автор: Мэтью Мартин

Часы

Обновлено 3 декабря 2022 г.

Ключевое различие между дизайном UX и UI

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

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

UX-дизайн против дизайна пользовательского интерфейса

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

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

Что такое дизайн пользовательского интерфейса?

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

Пользовательский интерфейс в основном используется цифровыми отраслями. Пользовательский интерфейс (UI) — это особый элемент дизайна, с которым взаимодействуют пользователи.

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

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

Вот основные различия между UX и UI дизайном:

Дизайн пользовательского интерфейса

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

Обязанности UX-дизайнера

Вот некоторые основные обязанности UX-дизайнера:

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

Обязанности дизайнера пользовательского интерфейса

Вот некоторые основные обязанности дизайнера пользовательского интерфейса:

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

Взаимозаменяемость обоих терминов

UX и UI — термины, ставшие модными на корпоративном уровне. Было обычным делом, что многие люди смешивали термины или использовали их взаимозаменяемо.

Тем не менее, область UI/UX, несомненно, будет продолжать развиваться. Важно понимать роль каждой профессии в дизайне, ориентированном на человека.

Ознакомьтесь со списком наших курсов по дизайну UI/UX: нажмите здесь

В чем разница между UX и UI?

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

Никогда не называйте себя UI-дизайнером: UI — это UX

UI и UX — два очень распространенных термина в дизайне; однако эти термины часто используются в неправильном контексте.

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

Разве пользовательский интерфейс не является частью UX?

Почему «пользовательский интерфейс» стал таким модным словом?

UX против UI

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

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

По определению Nielsen Norman Group, «Пользовательский опыт» охватывает все аспекты взаимодействия конечного пользователя с компанией, ее услугами и продуктами».

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

Вот некоторые из них:

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

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

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

Взаимодействие с пользователем и пользовательский интерфейс. (Иллюстрация Шейна Раунса)

Как правило, UI — это то, как вы взаимодействуете с продуктом (например, клики, касания и голосовые взаимодействия), а UX — это результирующее мнение/эмоции, испытываемые пользователем (например, быстро/медленно). , интуитивно понятный/сбивающий с толку и/или заставляющий пользователя чувствовать себя счастливым/разочарованным).

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

Войдите в Dribbble, а точнее, в то, что известно как «эффект Dribbble».

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

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

Что с этим не так?

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

Давайте посмотрим на некоторые дизайнерские катастрофы на Dribbble.

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

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

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

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

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

Откуда эта одержимость визуальным дизайном?

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

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

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

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

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

Скорость
- Работает ли приложение или веб-сайт медленно (или кажется медленным)?
- Требуется ли от пользователя щелкать/прокручивать/взаимодействовать больше, чем необходимо?
- Слишком много отвлекающих факторов и/или решений?
- Существуют ли трения, которые мешают/задерживают пользователя в получении того, что он хочет?
Интуиция
- Очевидно ли для пользователя, что ему нужно делать дальше?
- Можем ли мы определить, чего хочет пользователь, и соответствующим образом отобразить контент?
Доступность
- Может ли пользователь получить доступ к пользовательскому интерфейсу, независимо от его возраста или инвалидности?
- Думали ли мы о различных типах дальтонизма?
Удобство использования
- Цели касания на мобильных устройствах имеют подходящий размер?
- Доступны ли мишени для больших пальцев?
- Является ли дизайн адаптивным? Он адаптируется ко всем устройствам?

Сьюзен Вайншенк и Дин Баркер (Weinschenk and Barker 2000) исследовали рекомендации и эвристики юзабилити из многих источников (включая Nielsen, Apple и Microsoft) и создали этот набор из 20 эвристик юзабилити для проверки.

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

Вот принципы дизайна UX, перечисленные выше, только на этот раз мы упомянем, как визуальный дизайн влияет на вещи:

Скорость
- Может ли пользователь быстро определить, куда ему нужно смотреть и взаимодействовать, используя контраст , цвет и интервал как визуальные подсказки?
- Отрисовывается ли пользовательский интерфейс/контент в верхней части экрана немедленно, объясняет ли он, что пользователю нужно делать на указанном экране, и содержит ли четкий призыв к действию?
Доступность
- Достаточно ли контрастны выбранные цвета?
- Достаточно ли велик пользовательский интерфейс для слабовидящих?
Удобство использования
- Существует ли визуальная иерархия, иллюстрирующая важность каждого элемента?
- Выражаем ли мы визуально доверие и безопасность, когда это применимо?
- Внедряем ли мы микровзаимодействия, которые кажутся естественными и поясняют действия, предпринимаемые пользователем?

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

Amazon заработал 1,9 миллиарда долларов за последние три месяца 2017 года, но вы бы не догадались об этом по дизайну пользовательского интерфейса.

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

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