Что такое UI и UX дизайн design? Что в них общего и что различного? | by Writes

Всем привет! Предлагаем вам изучить простой в освоении материал, чтобы лучше понять разницу между дизайном пользовательского интерфейса (UI) и пользовательским интерфейсом (UX)

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

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

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

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

Процесс проектирования пользовательского интерфейса от команды Ramotion

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

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

Фото CareerFoundry

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

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

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

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

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

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

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

Tweet by LukeW

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

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

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

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

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

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

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

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

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

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

Что такое UX/UI-дизайн и как попасть в эти профессии

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

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

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

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

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

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

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

(с) Дональд Норман — основатель признанной в области дизайна компании Nielsen Norman Group, бывший вице-президент Apple, профессор информатики Северо-Западного университета. Автор 11 книг по дизайну.

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

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

UX-дизайнер (англ. user experience designer) — это проектировщик интерфейсов и сервисов, который вникает в потребности пользователей, строит логические схемы работы интерфейса, тестирует прототипы на целевой аудитории и составляет техническое задание для UI-дизайнера.

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

Мы также подготовили сводку по зарплатам UX-дизайнеров →

UI (англ. user interface) переводится как «пользовательский интерфейс». UI – охватывает не только графический интерфейс, а еще и тактильный, голосовой или звуковой.

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

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

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

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

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

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

Рекомендации по проектированию интерфейсов. Шнайдерман (1987 год) и Плейзент (2009 год):

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

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

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

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

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

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

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

• Минимизируйте нагрузку на кратковременную память — создайте ощущение “все под рукой”. Тогда пользователи не будут чувствовать, что они что-то потеряли и у них не будет повода беспокоиться, что ценную информацию или результаты работы нужно обязательно куда-то сохранить или запомнить.

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

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

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

UI, USER INTERFACE, Пользовательский интерфейс

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

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

Сразу скажу, что настраиваесь на ритм “обучение как стиль жизни”, не ищите один курс как серебряную пулю. Начните с малого и постепенно увеличивайте нагрузку.

в чем разница — Дизайн на vc.ru

Ольга Сорока, Янина Ноэль

55 085 просмотров

Фото Charles Deluvio

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

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

В то же самое время оба эти элемента имеют решающее значение для конечного результата и не могут существовать друг без друга. В общих чертах, UX Design или User Experience Design — это аналитическая и техническая область разработки, в то время как UI Design или User Interface Design — то, что мы иногда ошибочно называем графическим дизайном. Хотя, на самом деле, все гораздо сложнее.

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

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

UX делает интерфейс полезным

Фото Charles Deluvio

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

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

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

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

Разберем основные задачи UX дизайнера

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

Фото Charles Deluvio

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

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

Итак, подведем итоги:

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

UI делает интерфейс красивым

Фото Charles Deluvio

User Interface Design — это посредник между девайсом и человеком. Это не только внешний вид, но и интерактивность продукта.

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

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

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

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

На основании опыта в EGO Creative Innovations мы можем отметить, что основные задачи UI дизайнера включают:

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

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

Фото Charles Deluvio

Подведём итоги:

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

На чем фокусируются дизайнеры UI и UX?

Фото Charles Deluvio

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

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

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

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

Почему UX- и UI-дизайнер — это два разных человека — Дизайн на vc.ru

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

6940 просмотров

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

Куда делись web дизайнеры или краткая история интернета.

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

Этап первый. Просто сделай сайт. Эпоха, когда в интернете еще жили мамонты и многие верят, что это теория заговора и такого никогда не было.

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

​Пример вырви-глаз-дизайна. Дальний родственник современного дизайна

Этап второй. SEO. Нужно больше текста и ключевых слов. Сайтов становится все больше, начинают развиваться поисковые системы, улучшаются алгоритмы поисковой выдачи. Уже недостаточно просто запустить сайт, его нужно продвигать. Клиентов получит тот, чей сайт будет выше. Для этого кроме знакомого разработчика появляется копирайтер / seo специалист, который через web дебри выведет сайт на вершину SEO горы, где по легендам можно найти трафик. Сайты стали похоже на огромные библиотеки с текстом и разделами.

Сайт-простыня. Огромное количество текста и разделов. Лишь бы Google заметил​

Этап третий. Web дизайн. Просто сделай красиво. Всех утомили простые и скучные сайты. Развиваются технологии, анимации. Компании активно ищут человека с хорошим чувством вкуса. Визуальная привлекательность вышла в приоритет. Уделать конкурентов и удивить пользователя. Этап экспериментов и бесконечных поисков цифрового Грааля. Для реализации сайта или проекта требуется уже полноценная команда с дизайнером, разработчиком, контент менеджерами и др. Многие помнят этот этап, а многие до сих пор в нем живут.

Эпоха web дизайна. Сайты и приложения становятся визуально приятными. Основной акцент на оформление​.

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

Проект roobinium. Пример эпохи UX/UI дизайна. Всего два возможных действия пользователя — связаться, либо посмотреть портфолио.

Кто такой UX дизайнер? Обязанности и ответственность

User Experience — пользовательский опыт. UX дизайнер — это специалист, который обладает эмпатией и понимает бизнес процессы. Переводчик, между бизнесом и пользователем. Ключевые обязанности:

• Проведение брифингов с бизнесом
• Проведение face-to-face интервью с пользователями
• Интерфейсный анализ решений конкурентов
• Составление информационной архитектуры проекта
• Прототипирование
• Аналитика и тестирование

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

UI дизайнер. Что делает и за что отвечает.

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

Основные обязанности UI дизайнера:

• Общая стилистика проекта
• Визуальные акценты
• Типографика
• Брендирование
• Подготовка UI к верстке

Почему бы не сделать UX и UI за одну цену?

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

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

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

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

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

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

Что такое UX/UI дизайн на самом деле? / Хабр

Я хочу раз и навсегда поставить точку и простым понятным языком объяснить, что значит «UX/UI дизайн».

_{Разные типы интерфейсов для заточки лезвий.}

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

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

Что такое UX/UI, прямым текстом

UX — это User Experience (дословно: «опыт пользователя»). То есть это то, какой опыт/впечатление получает пользователь от работы с вашим интерфейсом. Удается ли ему достичь цели и на сколько просто или сложно это сделать.

А UI — это User Interface (дословно «пользовательский интерфейс») — то, как выглядит интерфейс и то, какие физические характеристики приобретает. Определяет, какого цвета будет ваше «изделие», удобно ли будет человеку попадать пальцем в кнопочки, читабельным ли будет текст и тому подобное…

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

Что такое UX и UI дизайн, другими словами

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

Вот первый пример: когда Вильгельм Шиккард в 1623 году изобретал арифмометр, он уже был UX/UI дизайнером.

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

Ещё один более древний и примитивный пример — точильный камень (колесо). Уже даже в раннем средневековье было много разновидностей и механизмов такого колеса:

• его можно было крутить рукояткой вручную
• колесо мог крутить другой человек
• или его можно было раскручивать даже без рук, нажимая педаль ногой
• и другие…

Так вот, когда изобретатель очередного точильного камня думал:

• будет ли он сидеть и сам нажимать педаль
• или он упростит механизм, но приставит раба который будет раскручивать колесо рукой,

А тот человек, который думал, какой величины будет камень, какого цвета выбрать дерево для подставки и чем скрепить деревянные жерди (гвоздями или кожаными жгутами?) и какой длины будет ручка, был UI дизайнером.

И тот способ, каким бы вы затачивали меч — назывался бы интерфейс.

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

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

UX и UI — это не тренды. Технологи развиваются. Спрос на сайты растёт. Цифровые приложения появляются как грибы. А инструменты дизайна и разработки упрощаются настолько, что уже практически любой человек без знания программирования может «на коленке» сделать сайт-визитку. Вот только этот сайт должен как-то выглядеть. И не просто как абстрактный каркас из текста и кнопок. Тут программистам и нужна помощь UX/UI дизайнера.

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

В чем отличие UI от UX? Подробный разбор часто используемых терминов

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

UI != UX

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

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

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

UI это инструмент

Неправильное использование это риск

Поиск подходящего дизайнера

Ответственность за проблему

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

Было бы довольно странно взвалить ответственность за все это на UI разработчика. Тоже самое касается и UX. Чтобы разработчик по праву взял на себя ответственность за проблему UX, он должен иметь возможность рекомендовать и вносить изменения, реализовывать решения проблемы и контролировать процесс. Понимание процесса зависит от возможностей и сосредоточенности дизайнера. Дело не в том, что одному дизайнеру не по силам справится с обеими областями. Речь идет об инструментах и способности решать задачи. Фактически, строитель не имея никаких материалов и инструментов — не сможет строить, как и человек без определенных навыков и знаний.

Вывод

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

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

Что такое UX/UI дизайн: основные характеристики

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

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

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

UI – аббревиатура, которая расшифровывается как User Interface, что в переводе означает «Пользовательский интерфейс». Это направление развития цифровых продуктов, включающее в себя работу над визуальным оформлением бренда/сайта/приложения или сервиса.

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

Основные характеристики:

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

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

UX расшифровывается как User Experience, что в переводе означает «Пользовательский опыт». Здесь и кроется ключевое отличие одной профессии от другой. UX-дизайнера заботит не только внешний вид сайта или сервиса, но и то, как с ним будет взаимодействовать клиент.

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

Основные характеристики:

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

Что входит в задачи UX/UI-дизайнеров?

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

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

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

Изучение поведенческих особенностей пользователей

Для UX и UI

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

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

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

Из этого строится базовая абстрактная структура продукта, основанная на предпочтениях клиентов и их привычках.

Формирование образа типичного пользователя

Для UX

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

• Сколько лет пользователю продукта?
• Кем он работает?
• Как много свободного времени у него остается после работы?
• Сколько он зарабатывает и готов заплатить за ваш сервис/продукт?
• Какими еще сервисами пользуется клиент?

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

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

Разработка интерфейсных решений

Для UI и UX

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

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

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

Создание прототипов и тестирование разработанных функций

Для UX

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

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

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

Создание визуального дизайна продукта

Для UI

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

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

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

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

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

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

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

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

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

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

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

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

Ключевые принципы хорошего UX/UI-дизайна

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

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

Пользователь во главе угла

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

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

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

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

Хороший интерфейс строится на шаблонах

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

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

Следовать трендам нужно обдуманно

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

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

Конечно, игнорировать тренды не получится, но слепо бежать за ними не стоит. Нужно вбирать в свой продукт только лучшее, а каждое решение осмыслять. А стоит ли оно того? А действительно это будет хорошо смотреться? Будет ли новый облик соответствовать общему образу бренда? Всему нужно четкое объяснение.

Важно соблюдать фундаментальные приниципы дизайна

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

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

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

Какую профессию выбрать для себя?

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

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

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

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

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

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

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

Вот что у нас получилось…

Книга

Красивый PDF-файл, содержащий 50 невероятно наглядных глав , разбросанных по более чем 200 тщательно набранным страницам.

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

Вы можете ознакомиться с полным содержанием здесь:

Посмотреть полное содержание

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

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

Видеоуроки

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

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

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

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

Галерея компонентов

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

Галерея компонентов — это огромный ресурс, включающий 20+ категорий компонентов / макетов и 200+ отдельных стилей компонентов .

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

• Стили кнопок
• Макеты страницы входа
• Разделы маркетинговой страницы
• Макеты карточек
• Таблица стили
• Навигационные схемы

… и многое, многое другое.

Вам больше никогда не придется переходить на другой сайт в поисках вдохновения.

Цветовые палитры

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

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

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

Рекомендации по шрифтам

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

Мы составили список из более чем 30 шрифтов, которые нам очень нравятся, и разбили его на три категории: пользовательский интерфейс, заголовки и текст статьи.

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

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

Пользовательские иллюстрированные значки

Пользовательский интерфейс рефакторинга также включает в себя набор из 200 прекрасно иллюстрированных значков SVG:

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

Что такое UI-дизайн? Что такое UX-дизайн? UI vs UX: в чем разница | by ✨ They Make Design ✨

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

UX и UI: два термина, которые часто используются взаимозаменяемо, но на самом деле означают очень разные вещи. Так в чем же разница?

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

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

1. В чем разница между UX и UI дизайном?
2. Как взаимодействуют UX-дизайн и UI-дизайн?
3. UX vs. UI-дизайн: какой карьерный путь подходит вам?
4. Почему я написал эту статью?
5. Заключение и дальнейшее чтение

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

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

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

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

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

Дизайн пользовательского опыта — это способ создания продуктов, ориентированный на человека.Дон Норман, ученый-когнитивист и соучредитель Nielsen Norman Group Design Consultancy, придумал термин «пользовательский опыт» в конце 1990-х годов. Вот как он это описывает:

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

— Дон Норман, когнитивист и архитектор пользовательского опыта

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

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

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

Мы ответим на вопрос «Чем занимается UX дизайнер?» в четвертом разделе. На данный момент вот что вам нужно знать о UX-дизайне в двух словах:

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

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

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

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

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

Итак, какой из них правильный? Печальный ответ: ни то, ни другое.

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

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

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

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

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

Основные различия между UX и UI

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

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

Но не волнуйтесь, если вы все еще запутались! Ты не единственный!

По словам Рахула Варшни, соавтора Foster.fm:

«Пользовательский интерфейс (UX) и пользовательский интерфейс (UI) — одни из самых запутанных и неправильно используемых терминов в нашей области. Пользовательский интерфейс без UX подобен художнику, который без раздумий наносит краску на холст; в то время как UX без пользовательского интерфейса похож на каркас скульптуры без папье-маше.Хорошее впечатление от продукта начинается с UX, за которым следует UI. Оба важны для успеха продукта ».

Если у вас есть место для еще одной аналогии, Дейн Миллер прекрасно резюмирует взаимосвязь между UX и дизайном пользовательского интерфейса:

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

— Дейн Миллер, веб-разработчик

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

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

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

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

Надеюсь, теперь вы начинаете понимать, что UX и UI-дизайн — это действительно две очень разные вещи. Подводя итог:

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

2. Как UX-дизайн и UI-дизайн работают вместе?

Мы изучили различия между UX и UI; теперь давайте посмотрим, как они работают вместе. Вы можете задаться вопросом, важнее ли одно по сравнению с другим, но на самом деле они оба важны! Позвольте мне процитировать дизайнера и эксперта Хельгу Морено, которая довольно красноречиво выразила это в своей статье «Разрыв между UX и дизайном пользовательского интерфейса»:

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

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

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

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

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

3. UX vs. UI-дизайн: какой карьерный путь подходит вам?

Хотя UX и UI-дизайн идут рука об руку, вам не нужно быть мастером и того, и другого.Итак, какой карьерный путь вам больше всего подходит: UX или UI? Если вам интересно, что вам больше подходит: UX или UI-дизайн, посмотрите мое видео ниже. Я касаюсь тех качеств, которые предрасполагают вас к успешной работе в каждой области. Если вы хотите узнать больше о том, чем на самом деле занимаются UX- и UI-дизайнеры изо дня в день, продолжайте читать!

Какие ключевые задачи и навыки требуются от UX-дизайнеров по сравнению с UI-дизайнерами?

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

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

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

Стратегия и контент:

• Анализ конкурентов
• Анализ клиентов и исследования пользователей
• Структура и стратегия продукта
• Разработка контента

Вайрфрейминг и прототипирование:

Выполнение и аналитика

• Координация с дизайнером (ами) пользовательского интерфейса
• Координация с разработчиками
• Отслеживание целей и интеграция
• Анализ и итерация

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

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

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

Внешний вид продукта:

• Анализ клиентов
• Исследование дизайна
• Разработка бренда и графики
• Руководства и сюжеты пользователя

Отзывчивость и интерактивность:

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

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

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

Что лучше оплачивается: UX или UI?

Заработная плата, конечно, определяется многими факторами, но в первую очередь:

• Местоположение
• Опыт
• Отрасль
• Тип проекта / продукта

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

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

Годовой:

• Зарплата младшего уровня 28 000 — 33 000 евро
• Зарплата среднего уровня 38 000 — 45 000 евро
• Зарплата старшего уровня 50 000 — 80 000 евро

Почасовая оплата:

• Младший фрилансер, € 30–50 евро
• Фрилансер среднего уровня 50–75 евро
• Консультант старшего уровня 75–100 евро

* Цифры основаны на данных о зарплатах в Германии и Центральной Европе.

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

Почему компании часто рекламируют роли UX / UI как единое целое?

Мы установили, что UX и UI-дизайн — это две отдельные области, поэтому теперь вы можете задаться вопросом: почему так много объявлений о вакансиях требуют от UX / UI дизайнеров в одном?

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

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

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

UX vs. UI: как определить, что лучше?

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

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

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

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

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

Как вы изучаете навыки UX и UI-дизайна?

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

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

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

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

4. Почему я написал эту статью?

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

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

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

Разница между UX и UI: визуальный обзор

Щелкните здесь, чтобы открыть инфографику в новой вкладке.

5. Подведение итогов и дальнейшее чтение

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

Лучший пользовательский интерфейс — это лучший пользовательский интерфейс. Это третья часть из серии… | Автор: Джош

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

Embrace NO UI

Прямо сейчас вы слышите о том, как графический пользовательский интерфейс переходит в голосовой пользовательский интерфейс, то есть от GUI к VUI. Но реальность такова, что наиболее естественным образом мы взаимодействуем друг с другом не с помощью пользовательского интерфейса. Мы жестикулируем, разговариваем, взаимодействуем друг с другом, мы используем наши сенсоры. Это должно быть целью. Голос — это первый шаг в этом направлении, но впереди еще очень много всего.Здесь, в Josh.ai, мы верим в мантру принятия NOUI.

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

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

Пожалуйста, просто откройте дверь моей машины!

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

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

Шаг 1, подойдите к своей машине.

Шаг 2, достаньте ключ из кармана или кошелька.

Шаг 3, нажмите кнопку разблокировки.

Шаг 4, откройте дверь машины.

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

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

Не форсируйте его

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

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

Одна из цитат, которая мне очень нравится, взята из книги под названием «Лучший интерфейс — это не интерфейс»:

Так мы проектируем в моей компании, Josh.ai, и именно так, по нашему мнению, должна двигаться вся отрасль. . Давайте адаптируемся к более естественному способу взаимодействия людей.

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

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

UI и UX: в чем разница?

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

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

Люди часто используют эти термины как синонимы, а иногда и неправильно. Если вы когда-нибудь задавались вопросом: «Что такое UI, что такое UX и в чем разница между ними?» в сегодняшнем посте мы немного углубимся в UI и UX, чтобы лучше понять различия между ними.

Содержание

Что такое UI?

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

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

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

К 1980-м годам первый графический интерфейс пользователя (GUI) был разработан компьютерными учеными из Xerox PARC. Благодаря этому революционному нововведению пользователи теперь могут взаимодействовать со своими персональными компьютерами, визуально отправляя команды с помощью значков, кнопок, меню и флажков.

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

К 1984 году Apple Computer выпустила персональный компьютер Macintosh, который включал в себя мышь «укажи и щелкни».Macintosh был первым коммерчески успешным домашним компьютером, использующим этот тип интерфейса.

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

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

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

>> Ссылки по теме: Невидимый пользовательский интерфейс, скрытая возможность для отличного UX

Что такое UX?

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

Источник: User Experience Rocks

Когнитивисту Дону Норману приписывают создание термина «пользовательский опыт» еще в начале 1990-х, когда он работал в Apple, и определяет его следующим образом:

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

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

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

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

Источник: Питер Морвилл

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

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

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

>> Ссылки по теме: Что такое UX Research?

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

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

Дон Норман и Якоб Нильсен хорошо подытожили это, сказав:

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

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

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

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

UI / UX экспертов весят

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

Вот что они сказали о разнице между UI и UX:

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

Кен Нортон — партнер Google Ventures, бывший менеджер по продукту в Google

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

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

Энди Бадд — соучредитель Clearleft, основатель UX London

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

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

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

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

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

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

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

Крейг Моррисон, заместитель креативного директора Truvani

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

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

Например, это как вопрос: «В чем разница между красной краской и химическими веществами, из которых она состоит?» Нет никакой разницы. Красная краска состоит из самых разных химикатов, которые в совокупности образуют красную краску.

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

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

• В чем разница между MacBook и формой клавиш клавиатуры?
• В чем разница между чаем и материалом, из которого сделан чайный пакетик?
• В чем разница между автомобилем и цветом, который он окрашен?

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

(Примечание: Крейг еще более подробно описывает разницу между дизайнерами UI и UX в своем сообщении: Почему вам не следует нанимать дизайнера UI / UX )

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

Джейсон Огл — ведущий и продюсер подкаста User Defenders, дизайнер в CACI International

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

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

UI — это мост, который ведет нас на другую сторону того места, где мы хотим идти.

UX — это чувство, которое мы испытываем, когда добираемся туда, когда мост хорошо построен, или падая насмерть (говорите о плохом UX!).

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

Имейте в виду, что мы всегда создаем UX, все время за клавиатурой, в продуктовом магазине, на рабочем месте или на автостраде (да поможет нам Бог).

Подводя итог, как я всегда говорю своим супергестям в конце каждого эпизода подкаста User Defenders: продолжайте сражаться, создавая отличный UX для других людей!

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

5. Пользовательский интерфейс ориентирован на продукт, серию снимков во времени. UX ориентирован на пользователя и его путешествие по продукту

Скотт Дженсон, бывший специалист по стратегии продукта в Google

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

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

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

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

Чинве Оби — старший научный сотрудник WW

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

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

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

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

Как вы думаете?

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

Итак, что вы думаете? В чем разница между UI и UX? Должны ли они использоваться взаимозаменяемо или означают разные вещи? Поделитесь с нами своим мнением в Twitter, Facebook и Linkedin.

API — пользовательский интерфейс темы

Пакет core theme-ui экспортирует следующие модули.

 
 экспорт по умолчанию (реквизиты) => (
 
 
 
 {... реквизиты} 
 
 sx = {{
 
 color: 'primary', 
 
}} 
 
 / > 
 
) 
 

 
 import {jsx, jsxs} from 'theme-ui / jsx-runtime' 
 
 import {jsxDEV} from 'theme-ui / jsx-dev- runtime '
 

 
 импорт {jsx} из 'theme-ui' 
 
 экспорт по умолчанию (реквизиты) => (
 
 
 
 {... реквизиты} 
 
 sx = {{
 
 цвет : 'primary', 
 
}} 
 
 /> 
 
) 
 

 
 const context = useThemeUI () 
 

 
 const [colorMode, setColorMode] = useColorMode () 
 

 
  
 
  
 
 
 Стиль на основе  theme.styles  
 
  
 
  
 

 
 css (styleObject) (theme) 
 

 
 import dark from '@ theme-ui / preset-dark' 
 
 const theme = merge (dark, {
 
 fontWeights: {
 
 body: 500, 
 
 heading: 700, 
 
) полужирный: 900, 
 
}, 
 
})