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

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

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

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

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


Пользователю должно быть комфортно и всё понятно

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

Отличия UX и UI дизайна

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

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

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

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

Сферы применения

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

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

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

Как понять правильный ли у вас дизайн

Если мы говорим о задаче продавать, то «правильность» UX-дизайна проверяется посредством А/Б тестирования или фокус групп . Это позволяет увидеть насколько пользователю, понятен и удобен интерфейс. Например, перед всеми членами фокус группы ставится задание, найти определённый раздел на сайте или зарегистрироваться. То насколько они быстро справляются с этим и говорит о качестве UX-дизайна.

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

Напишите в комментариях ниже ваше мнение, удалось ли мне раскрыть и если нет, то чем стоит её дополнить.

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

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

Что делает UX Designer?

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

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

UX-дизайн — что это? Концепция технологии

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

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

Почему — подразумевает мотивацию пользователей к принятию продукта и желанию им обладать.

Что — касается того, что люди могут делать с продуктом и его функциональностью.

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

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

Историческая ретроспектива

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

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

    исследование потребителя;

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

    тестирование;

    реализация.

Рассмотрим каждый из них подробнее.

Исследование потребителя: с чего начать начинающему дизайнеру?

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

    вопросники;

    обсуждения в фокус-группах;

    онлайн-опросы;

    анализ задач.

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

    Дизайн

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

      информационная архитектура;

    • прототипирование.

    Тестирование

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

      тестирование a/b;

      юзабилити;

      дистанционное тестирование пользователей.

    Реализация

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

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

    Веб-сайты и приложения становятся все более сложными по мере продвижения технологий. То, что раньше было односторонней статической средой, сегодня превратилось в широкий интерактивный опыт.

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

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

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

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

    Профессиональные компетенции

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

      лидерство;

    • управление проектами;

      эффективное взаимодействие с командой.

    Данные профессиональные характеристики очень важны для успешной работы.

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

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

    Что делает на самом деле дизайнер UX?

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

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

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

    Задачи и методы

    Дизайнеры UX выполняют различные задачи в разных точках процесса. Ниже представлен основной перечень:

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

      A/B TESTING. Специалист может разработать исследование для сравнения эффективности и качества опыта различных пользовательских интерфейсов. Это выполняется путем выдвижения гипотезы (например, «зеленая кнопка более привлекательна, чем красная»). Затем предлагается несколько версий дизайна и в порядке тестирования определяется «лучший опыт» (например, «зеленая кнопка лучше, потому что пользователи щелкали по ней чаще».).

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

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

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

    Шаблоны проектирования

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

    Программы

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

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

    Некоторые программные средства для создания каркаса и прототипов:


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

    В основном программное обеспечение для тестирования A/B разбивает трафик веб-сайта на два равных сегмента. Одна группа видит версию A, а другая — версию B. Статистика, такая как коэффициент конверсии и показатель отказов, отслеживается для каждой версии. Сплит-тестирование определяет, какая версия лучше, и данное решение основано на статистических данных. Одним из самых популярных приложений для тестирования A/B является Website Optimizer Google.

    Управление контентом

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

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

    Опросы и фидбек

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

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

    Примеры

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

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

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

Дизайнеры

Разработка интерфейса приложений, сайтов или игр является достаточно сложным процессом и нуждается в применении знаний из разных областей: инженерии, психологии и дизайна. Дизайнеры пользовательского интерфейса (по-английски - User Interface или UI) фокусируются на способе отображения функциональности сайта (поиск, вкладки, меню) и деталях взаимодействия клиента и интерфейса. Цель UI-дизайнера - эстетически приемлемый современный дизайн продукта . UX расшифровывается как User Experience, что в переводе значит «пользовательский опыт». UX-дизайнер больше сосредоточен на удобстве и понимании интерфейса потенциальным пользователем. Такой специалист зачастую проводит исследования и опросы, которые станут основой для создания концепции дизайна, а также тестирует концепции в ходе разработки и после неё. Обычно он сосредоточен на структуре, содержании, навигации и том, как пользователь взаимодействует с этими элементами.

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

Что нужно знать UX/UI-дизайнеру

    Графические редакторы . Самые популярные на рынке инструменты - это Adobe Photoshop, Adobe Illustrator, а также Sketch, Figma. Выберите удобный для себя редактор и попробуйте для начала нарисовать скриншоты сайта или приложения немного их модернизировав.

    Инструменты прототипирования (Mockplus, Axure) . Инструмент для создания прототипов является связывающим звеном между идеей и её реализацией. Неважно каким инструментом при этом вы будете пользоваться. Можно попробовать несколько и определиться с тем, который подойдёт именно вам по стилю и предпочтениям.

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

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

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

    Композиция и юзабилити сайта.

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

Разработчик Front-end

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

Что должен знать Front-end разработчик

Как правило, front-end стоит на трёх китах: язык разметки страницы HTML, таблицы стилей CSS и язык программирования JavaScript. Кроме того, фронтендщик должен понимать принципы работы протокола HTTP, серверов и браузеров, особенности отображения интерфейса на различных устройствах, которые в настоящее время находятся на рынке. Инструменты и методы создания веб-интерфейсов постоянно развиваются и меняются, поэтому разработчик должен за этим постоянно следить.

HTML и CSS (вёрстка)

Это верстка, те самые кирпичи, из которых строится сайт. Язык разметки HTML диктует организацию сайта, содержимое и все взаимодействие между ними. Он позволяет обозначить верхнюю часть страницы, нижнюю, боковые блоки с содержимым, заголовки, отображение текста и мультимедийных элементов. Таблицы стилей CSS служит для украшения HTML-элементов. Они определяют, как именно отображается каждый графический элемент, который располагается на странице. С помощью самых свежих версий HTML5 и CSS3 можно размещать видео и аудио компоненты на страницу, создавать двухмерные изображения и анимацию, и даже писать несложные игры. Не нужно стараться запомнить сразу все теги и стили. Будет полезно изучить основы и сразу же применить их в действии. Очень неплохой сайт, где можно изучить основы HTML и CSS - W3School. Но только если у вас есть хотя бы базовые знания английского. Также фронтендщик должен разбираться в кросс-браузерной и кроссплатформенной разработке, адаптивной и отзывчивой вёрстке.

Bootstrap

Это фреймворк для HTML, CSS и JavaScript. То есть определённые шаблоны, из которых, как из конструктора, можно собирать сайты гораздо быстрее, чем без них. Но, разумеется, его нужно затачивать под ваши потребности самостоятельно. Если знаете английский, рекомендуем сайт getbootstrap и всё тот же w3schools .

JavaScript

Javascript – ядро front-end разработки. Это первый и наиболее распространённый язык программирования интерфейсов. Он способен добавить массу возможностей на сайт. На базовом уровне этот язык позволяет добавлять интерактивные элементы на страницу. Его используют для создания карт, которые обновляются в режиме реального времени, интерактивных онлайн-игр и фильмов. На старших курсах JavaRush мы немного изучаем JavaScript. Также его можно изучать на том же W3School или почитать о нём на русском, на сайте javascript.ru .

jQuery

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

Javascript-фреймворки

Существуют различные типы фреймворков, но вы можете выбрать один из них, который будет удобен в использовании именно вам. Самые известные - Angular, Backbone, Ember, и React. Представляют собой готовую структуру для кода. Они помогают ускорить разработку. А в совокупности с библиотеками способны минимизировать разработку сайта или приложения с нуля. Обзор 5 самых популярных JavaScript фреймворков и библиотек 2017

Система управления версиями Git

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

Краткие выводы

UI расшифровывается как User Interface, что в переводе означает «интерфейс пользователя». То есть, Дизайнер UI отвечает в первую очередь за то, как продукт представлен пользователю. Он разрабатывает кнопки, иконки, подбирает шрифты, готовит макет. UX расшифровывается как User Experience (пользовательский опыт). Так что UX-дизайнер проектирует дизайн сайта, приложения - да чего угодно - так, чтобы пользователю было удобно и понятно, что к чему, и он мог получить от сайта то, что ему нужно с минимальными усилиями. Очень часто оба вида работ выполняет один человек-оркестр: UI/UX-дизайнер. Разработчик Front-end оживляет работу дизайнеров, внося в неё динамику: кнопки начинают нажиматься, а картинка - меняться. Он должен знать языки программирования, приправленные фреймворками, препроцессорами и библиотеками.

UI, UX: Профессия дизайнер интерфейсов. Руководство по ИТ-индустрии

Плюс: Описания дизайнерских должностей в Apple, Facebook, Google и других гигантах мира информационных технологий.

Дизайн - достаточно широкий и расплывчатый термин. Когда человек говорит: “Я дизайнер”, не сразу понятно, чем он занимается изо дня в день. Собирательный термин “дизайнер” включает в себя множество разных обязанностей.

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

У дизайнерской проблемы нет единого решения.

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

UX-дизайнер

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

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

“Определять модели взаимодействия, потоки задач пользователей и UI-спецификации. Доносить до всех заинтересованных лиц сценарии, пользовательский опыт на всех этапах, модели взаимодействия и дизайн каждого экрана. Совместно с креативным директором и визуальными дизайнерами работать над привнесением визуальной идентификации бренда в каждую функцию Twitter. Разрабатывать и поддерживать вайрфреймы, макеты и спецификации по мере необходимости.”

Пример экранов приложения, созданных UX-дизайнером. Создано: Neway Lau, Kitchenware Pro Wireframe Kit на Dribbble.

Над чем работает: Вайрфреймы экранов, карты истории (storyboard), карта сайта

Чем пользуется: Photoshop, Sketch, Illustrator, Fireworks, InVision

“Каждый раз при завершении регистрации нужно отправлять пользователя на страницу “Спасибо”.

UI-дизайнер (дизайнер интерфейсов)

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

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

“Создавать и применять визуальный язык Airbnb.com. Разрабатывать и развивать гиды по стилю в контексте всего сайта”.

Граница между UI и UX-дизайнером достаточно размыта и компании зачастую принимают решение объединить эти роли.

UI-дизайнер определяет общий лейаут и внешний вид приложения. Создано: Ionut Zamfir, Metro Style Interface 4 на Dribbble.

Чем пользуется: Photoshop, Sketch, Illustrator, Fireworks

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

Визуальные дизайнеры корпят над незначительными деталями, которых остальные не замечают.

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

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

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

Визуальный дизайнер, опираясь на гид по стилю, выверяет каждый пиксель элемента, чтобы добиться идеального результата. Создано: Seevi kargwal, iOS 7 Guide Freebie PSD на Dribbble

Чем пользуется: Photoshop, Sketch

Как общается в дикой природе: “Кернинг нарушен, а кнопка должна быть на пиксель левее”

Дизайнер взаимодействия (моушн-дизайнер)

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

“Необходимые качества и навыки: профессионализм в графическом дизайне, моушн-графике, цифровом искусстве, чувствительность к шрифтами и цветам, общие представления о материалах/текстурах и практическое понимание анимации. Знание iOS, OS X, Photoshop и Illustrator, а также общее представление о Director (или эквивалентном инструменте), Quartz Composer (или эквивалентном инструменте), компьютерном 3D-моделировании и моушн-графике”.

Чем пользуется: AfterEffects, Core Composer, Flash, Origami

Как общается в дикой природе: “Меню должно плавно появляться слева со скоростью 800мс”

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

UX-исследователь - мастер потребностей пользователя.

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

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

Роль UX-исследователей временами выполняют UX-дизайнеры.

Над чем работает: архетипы пользователей (персоны), результаты A/B тестов, исследования и интервью пользователей

Чем пользуется: микрофон, бумага, документация

Как общается в дикой природе: “Исходя из результатов исследования, типичный пользователь…”

Фронтенд-разработчик (UI-разработчик)

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

Чем пользуется: CSS, HTML, JavaScript

Как общается в дикой природе: “Я пользуюсь 12-колоночной сеткой под 960px”

Продуктовый дизайнер

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

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

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

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

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

Это самая распространенная фраза, которую я слышу от стартаперов. На самом деле, они ищут того, кто сможет делать все вышеперечисленное сразу. Им нужен тот, кто сможет рисовать красивые иконки, создавать и A/B-тестировать лендинги, логически структурировать элементы интерфейса на экране и, возможно, заниматься фронтенд-разработкой. Поскольку термин “дизайнер” такой универсальный, небольшие компании, вместо того, чтобы выставить конкретные требования, больше разговаривают о своем поиске “дизайнера”.

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

User Interface Design или пользовательский интерфейс призван помочь организовать взаимодействие пользователя с устройством или программой.Это то, с чем пользователь сталкивается при взгляде на устройство или экран: расположение графических элементов интерфейса, кнопок и навигации. От того, насколько пользовательский интерфейс удобен, зависит желание человека воспользоваться сайтом или приложением. Лояльность пользователей во многом зависит от удобства и привлекательности интерфейса. Яркий дизайн привлекает людей и заставляет их зайти в программу или на сайт. Поэтому важно чтобы UI дизайн был интуитивно понятен.

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

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

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

Вы получите

Качественно выполненная работа

Привлекательный дизайн

Эмоциональное вовлечение пользователей

Структурированный интерфейс

От чего зависит цена UI дизайна

  1. Количества концептов интерфейса. Чем их больше, тем она выше.
  2. Типа устройств, для которого разрабатывается интерфейс. Это может быть интерфейс приложения андроид, интерфейс приложения IOS или же web-приложение.
  3. Наличия сформированных правил UX. Если нам нужно будет выработать правила - цена повышается.
  4. Необходимости создания иллюстраций . Они могут быть графическими и анимационными. Также цена зависит от их количества. Чем больше иллюстраций требуется, тем выше стоимость UI дизайна.

Закажите дизайн пользовательского интерфейса в брендинговом агентстве KOLORO. Мы найдем подход к вашему проекту.

Разработка UI дизайна: этапы

1.Постановка задачи:

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

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

UI интерфейс включает в себя такие элементы:

  • информационную архитектуру;
  • проектирование взаимодействия;
  • графический дизайн.

Создание UI дизайна: правила

  1. Дизайн элементов приложений должен быть максимально простым и понятным .
  2. Пользователь не должен совершать сложных действий или длинных цепочек переходов.
  3. Желательно использовать привычные элементы управления и понятные визуальные образы.
  4. Логически связанные элементы необходимо объединять в меню и формы.
  5. Самые важные элементы пользовательского интерфейса должны идти первыми .
  6. Интерфейс должен быть оформлен в едином стиле.

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

Закажите дизайн интерфейсов в брендинговом агентстве KOLORO . Мы умеем соблюдать баланс.

Особенности разработки интерфейса приложения

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

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

Перед UI интерфейсом стоят такие задачи

  1. Обеспечивать взаимодействие пользователя с приложением.
  2. Приносить эмоциональное удовлетворение пользователю в процессе работы.
  3. Выглядеть привлекательно .

Составляющие UI

  1. Визуальный дизайн , или VD важен для качественного отображения цветов, шрифтов и других элементов сайта, поскольку именно это создает эстетику сайта. Хороший пользовательский интерфейс может существовать только в совокупности содержания страницы и ее функционала. Кроме этого, визуальный дизайн направлен на то, чтобы привлечь пользователя и выстроить его доверие к продукту или услуге.
  2. Дизайн система  — проектирование пользовательского интерфейса через системы отдельных элементов интерфейса. Они нужны для разработки многоразовых шаблонов.
  3. Прототип  представляет собой действующий пример разработанного пользовательского интерфейса. Имитирование работы дает представление об откликах элементов интерфейса до их непосредственной разработки.
  4. Содержимое . Гаджеты приучили пользователей работать в режиме многозадачности, поэтому при проектировании пользовательского интерфейса важно быстро и корректно продемонстрировать главный контент и функционал приложения, а все вторичное перенести на задний план или убрать.

  1. Обратная коммуникация — это использование разного оформления или анимации отклика программы на действие пользователя. Человеку это дает понимание, что все под контролем и функционирует корректно.
  2. Работа с помощью одной руки . Хороший дизайн интерфейса должен быть адаптирован под управление одной рукой. Легче всего управлять программой, когда необходимые элементы навигации расположены в нижнем левом углу. Также удобный дизайн интерфейса предусматривает наличие больших кнопок, отступов и броского оформления важных элементов для легкого взаимодействия с ними.
  3. Быстрый ввод . Формы для заполнения должны: требовать от пользователя минимального количества информации; предлагать варианты ответов. Например, при необходимости узнать возраст юзера лучше использовать выпадающий список, а, узнавать адрес через синхронизацию с геолокацией. Общая рекомендация - минимальный ручной ввод.

Разработка UI дизайна в KOLORO принесет вам

  1. Эстетически привлекательный интерфейс. Элементы дизайна и цветовые решения будут подобранны в соответствии с концепцией приложения.
  2. Простоту и понятность использования. Люди будут с лёгкостью понимать, как взаимодействовать с интерфейсом.
  3. Согласованность. Элементам, которые действуют одинаково необходимо придавать согласованность. Это облегчит использование приложения.

UI дизайн - важный элемент интерфейса. С его помощью контактируют программа и пользователь. Обратитесь в брендинговое агентство KOLORO, и мы разработаем максимально удобный UI дизайн!