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

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

---

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

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

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

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

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

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

Графический интерфейс Adobe Photoshop 1.0 в 1990

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-дизайнера

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

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

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

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

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

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

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

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

Требования к качественному UX/UI-дизайну

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Как стать UX/UI-дизайнером

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

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

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

Что почитать и посмотреть о UX/UI-дизайне

Вывод и рекомендация

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

Что такое UI и UX дизайн? Что в них общего и что различного? / Хабр

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

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

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

Что такое UI Design?

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

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

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

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

Что такое UX Design?

«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-дизайне.

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

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

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

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

Исследования в UX-дизайне

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

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

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

UI и UX: две совершенно разные дисциплины, которые работают в гармонии

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

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

Ссылка на английскую версию

32 User interface элементов для UI дизайнеров — bool.dev

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

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

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

UI элементы:

UI элементы обычно делятся на одну из следующих четырех категорий:

1. Input Controls
2. Navigation Components
3. Informational Components
4. Containers

Input Controls

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

Navigation Components

Navigation Components помогают пользователям перемещаться по продукту или веб-сайту. Общие навигационные компоненты включают панели вкладок на устройстве iOS и меню гамбургеров на Android.

Informational Components

Informational Components делятся информацией с пользователями.

Containers

Containers содержат связанный контент вместе.

Словарь UI элементов:

Аккордеоны (Accordion)

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

Bento Menu, Döner Menu, Hamburger Menu, Kebab Menu, Alt-burger, meatball

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

Хлебные крошки (Breadcrumb)

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

Кнопка (Button)

Кнопки позволяют пользователю взаимодействовать с формами на сайте.

Карточка (Card)

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

Карусель (Carousel)

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

Checkbox

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

Комментарий (Comment)

Dropdown

Лента (Feed)

Сложно представить соц сети такие как Facebook, twitter и т.п без ленты. Содержание ленты варьируется от простого текста до изображений и видео. 

Форма (Form)

Иконки (Icon)

Поле ввода (Input Field)

Loader

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

Модальное окно (popup)

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

Уведомления

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

Пагинация (Pagination)

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

Picker

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

Progress Bar

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

Radio Buttons

Radio Buttons похожи на чекбоксы, но отличаются тем, что можно 1 из нескольких вариантов. 

Поле поиска (Search Field)

Боковая панель (Sidebar)

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

Ползунок (Slider Controls)

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

Stepper

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

Тэг (Tag)

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

Tab Bar

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

Tooltip

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

Toggle

Toggle это флаг который позволяет выбрать между Да или Нет.

Источник: https://careerfoundry.com/en/blog/ui-design/ui-element-glossary/

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

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

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

UI != UX

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Вывод

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

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

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

В чем отличие UI от UX? Подробный разбор | GeekBrains

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

https://d2xzmw6cctk25h.cloudfront.net/post/1949/og_image/03fc1adc37a1c0c715eac80caf8ba948.png

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

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

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

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

А UX-дизайн — это создание полезных, простых и приятных в использовании продуктов.

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

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

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

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

Что такое пользовательский интерфейс, или UI

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

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

Посмотрим, каковы обязанности UI-дизайнера.

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

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

Зачем придумали это различие UI от UX?

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

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

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

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

Кто он — UI/UX-дизайнер?

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

User Interface является инструментом User Experience. Так что эти понятия по факту зависят друг от друга и отдельно в принципе не работают — это не эффективно.

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

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

Кратко

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

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

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

Курсы GeekBrains по самым востребованным профессиям в дизайне:

1. Факультет дизайна с гарантированным трудоустройством.
2. Профессия «Веб-дизайнер». Обширный онлайн-курс с возможностью пройти онлайн-стажировку в Mail.ru Group.
3. Профессия «Графический дизайнер». Онлайн-курс для самых творческих людей в мире дизайна.
4. Дизайнер интерфейсов (UI/UX). В этом онлайн-курсе навыки интерфейсного дизайна отрабатываются на реальных задачах от крупных компаний.
5. Гейм-дизайнер. Курс для тех, кто хочет войти в игровую индустрию и начать зарабатывать в ней.

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

Стали ли понятнее различия терминов UI и UX? Как вы воспринимали их до прочтения статьи? Делитесь в комментариях!

Что такое UI/UX-дизайн, кто такие «дизайнеры» — кратко — Дизайн на vc.ru

Здесь мы поговорим простыми словами о том, кто такие дизайнеры, что такое UI и где живёт UX.

MICAH BOWERS

Кто такой Ui/Ux дизайнер?

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

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

Что такое Ui?

Если очень просто — пользовательский интерфейс, основной частью работы над которым есть Визуальный дизайн (Visual Design).

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

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

Где обитает Ux и что это?

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

Ux дизайнеры работают исследуют область взаимодействия, восприятия — фактически это “такие дядьки”, которые знают в каком месте Вы сомневались и где были заинтересованы.

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

Краткий глоссарий

Ui — User Interface (Пользовательский Интерфейс) — т.е. это та часть, которую Вы видите. Все те кнопки, иконки, плажки и пр., с которыми Вы взаимодействуете каждый раз, когда открываете сайт, программу, приложение и др.

Ux — User Experience (Пользовательский Опыт) — фактически это “опыт взаимодействия”, моменты “чувств” — участки, где Вы сознательно (и нет) идете к своей цели и/или получаете желаемое. Это возможные мысли, чувства, действия и впечатления, что Вы получаете при работе с конкретным интерфейсом.

Guidelines (Гайдлайны) — Это наборы правил, которые описаны в рамках дизайн-системы, например Material Design, iOs и пр.

Visual Design (Визуальный Дизайн) — Исключительно визуальная часть работы дизайнера, то что можно увидеть.

Ui Kit — набор элементов используемых в построении интерфейса. Такой-себе конструктор, с которого состоит дизайн.

Design system (Дизайн

10 золотых правил UI дизайна

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

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

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

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

Профессия «Графический дизайнер»

Скидка 45% по промокоду UXPUB

Узнать подробнее

1. Проектируйте для плотности, а не для пикселей

Значения пикселей в 3 или 4 раза больше значений dp (независимые от плотности экрана пиксели)

Если вы не знаете, плотность – это количество пикселей на один дюйм экрана или PPI. Единица измерения «dp» – это сокращение от выражения «независимый от плотности экрана пиксель», иногда можно встретить сокращение «dip».

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

Причина, по которой мы это делаем, заключается в том, что, если мы создадим актив кнопки, например, с разрешением 200 x 50 dp, он будет отображаться 200 x 50 px на экране 160 ppi и 400 x 100 пикселей на экране 320 ppi (в 2 раза больше первоначального размера актива).

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

Например, размеры экрана iPhone XS Max составляют 414 x 896. Но это не пиксели, а количество точек. В пикселях это 1242 x 2688 px. Учитывая это, при проектировании для iPhone XS Max я бы выбрал размер 414 x 896 точек, а затем масштабировал активы в @ 3x.

2. Используйте шаг 8dp

Зачем проектировать с шагом 8? Ну, этому есть простое объяснение. Причина, по которой мы используем магическое число 8, а не 5, заключается в том, что, если устройство имеет разрешение 1,5x, оно не будет правильно отображать нечетное число.

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

Проектируя с шагом 8 на сетке 8-pt ваши дизайны будут выглядеть согласованными. Больше не надо угадывать интервал, и все идеально согласуется с обозначенными вами интервалами.

Если хотите подробнее узнать об этой теме, прочтите эту статью.

3. Уберите линии и рамки

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

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

4. Обращайте внимание на контраст

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

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

Правила доступности веб-контента (WCAG) требуют контрастности не менее 4,5: 1.

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

5. Используйте знакомые пользователям стандарты

Существует множество причин, по которым определенные элементы считаются стандартными.

Например, если вы создадите кнопку в виде круга и разместите на ней текст «Start Free Trial», то он займет слишком много вертикального пространства.

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

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

6. Используйте цветовой вес, чтобы установить иерархию

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

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

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

7. Старайтесь не использовать больше двух шрифтов

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

Выходом может быть использование семейств шрифтов.

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

При выборе шрифта найдите семейства, которые имеют различные веса (light, regular, medium, bold, extra bold, а также такие стили, как сжатый, расширенный и курсив). Это даст вам больше возможностей для изучения различных стилей без добавления дополнительных шрифтов.

8. Узнавать знакомое, а не пытаться вспомнить

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

Страницы оформления заказа, почтовые ящики, история поиска, кнопки «Назад» и т. д. являются хорошими примерами.

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

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

«Минимизируйте нагрузку на пользователя, делая объекты, действия и параметры видимыми. Пользователь не должен помнить информацию из одной части диалога в другой. Инструкции по использованию системы должны быть видимыми или легко доступными при необходимости» — Nielson Norman Group

9. Не замедляйте меня

Полное руководство по правильному использованию анимации в UX

Для пользователя скорость и эффективность – единственное, что имеет значение. Я использую приложение, чтобы выполнить конкретную работу, которую нужно сделать.

«Я хочу двигаться быстро» – Рики Бобби

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

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

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

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

«Многочисленные исследования показали, что оптимальная скорость анимации интерфейса составляет от 200 до 500 мс. Эти цифры основаны на конкретных качествах человеческого мозга. Любая анимация короче 100 мс является мгновенной и не распознается вообще. Между тем, анимация продолжительностью более 1 секунды вызовет ощущение задержки и, следовательно, будет скучной для пользователя» — Руководство по правильному использованию анимации в UX

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

10. Меньше значит больше

Дайте знать, если захотите инвестировать в эту революционную идею

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

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

Прости Yahoo, я должен был это сделать

Одна из моих любимых цитат: «Совершенство достигнуто не тогда, когда нечего добавить, а когда нечего убрать». – Антуан де Сент-Экзюпери

Спасибо за прочтение!

Подписывайтесь на автора на Dribbble и Medium.Пишите ему в LinkedIn.

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

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

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

UI! = UX

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Вывод

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

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

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

.

32 Элементы пользовательского интерфейса для UI дизайнеров — bool.dev

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

Как дизайнер пользовательского усилия интерфейса (UI) вы будете использовать элементы пользовательского интерфейса для создания визуального языка и согласования вашего продукта.

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

UI элементов:

UI обычно делятся на одну из следующих четырех категорий:

1. Элементы управления вводом
2. Компоненты навигации
3. Информационные компоненты
4. Контейнеры

Элементы управления вводом

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

Компоненты навигации

Компоненты навигации помогает перемещаться по продукту или веб-сайту. Общие навигационные компоненты включают панели вкладок на устройстве iOS и меню гамбургеров на Android.

Информационные компоненты

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

Контейнеры

Контейнеры связанный связанный вместе.

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

Аккордеоны (Аккордеон)

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

Бенто-меню, Дёнер-меню, Гамбургер-меню, Кебаб-меню, Альт-бургер, фрикадельки

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

Хлебные крошки (Хлебные крошки)

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

Кнопка (кнопка)

Кнопки позволяют пользователю взаимодействовать с формами на сайте.

Карточка (Карточка)

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

Карусель (Карусель)

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

Флажок

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

Комментарий (Комментарий)

Раскрывающийся список

Лента (Feed)

Сложно представить соц сети такие как Facebook, twitter и т.п без ленты. Содержание ленты варьируется от простого текста до изображений и видео.

Форма (Form)

Иконки (Иконки)

Поле ввода (Поле ввода)

Погрузчик

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

Модальное окно (всплывающее)

Модальное окно — закрыть его и вернуться к основному контенту.

Уведомления

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

Пагинация (Пагинация)

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

Сборщик

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

Индикатор выполнения

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

Радиокнопки

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

Поле поиска (Поле поиска)

Боковая панель (Боковая панель)

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

.

Ползунок (Slider Controls)

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

Шаговый

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

Тэг (Тег)

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

Панель вкладок

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

Подсказка

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

Переключить

Переключить это флаг позволяет выбрать между Да или Нет.

Источник: https://careerfoundry.com/en/blog/ui-design/ui-element-glossary/

.

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

---

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

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

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

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

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

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

Графический интерфейс Adobe Photoshop 1.0 в 1990

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Требования к качественному UX / UI-дизайну

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Как стать UX / UI-дизайнером

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

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

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

Что почитать и посмотреть о UX / UI-дизайне

Вывод и рекомендация

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

.

Что такое UI / UX-дизайн, кто такие «дизайнеры» — кратко — Дизайн на vc.ru

Здесь мы поговорим простыми словами о том, кто такие дизайнеры, что такое UI и где живёт UX.

МИКА БАУЕРС

Кто такой Ui / Ux дизайнер?

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

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

Что такое Ui?

Если очень просто — пользовательский интерфейс, основная часть работы над которым есть Визуальный дизайн ( Visual Design ).

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

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

Где обитает Ux и что это?

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

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

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

Краткий глоссарий

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

.