Профессия ux/ui-дизайнер

Краткое описание: кто такой UI-дизайнер

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

UX/UI дизайн в БВШД – работа в команде, плечом к плечу с профи в своем деле (оффлайн в Москве)

Все преподаватели являются практикующими лидерами индустрии, лауреатами профессиональных конкурсов и создают дизайн продуктов с миллионными индексами MAU (monthly active users).

Автор курса: Команда преподавателей БВШД. Куратор курса Ярослав Шуваев, руководитель R&D в Ak Bars Digital Technologies (Банк Ак Барс)

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

Объем курса: 1 год

Стоимость: 350 000 руб. в год

Фишка: погружение в профессию через реальные проекты и живое взаимодействие с экспертами: Банк Ак Барс, ExactFarming, Tele2, IBM Interactive Experience Россия, Райффайзенбанк, VRTech, Сбербанк

Изучить курс: https://britishdesign.ru/courses/ux-ui/

Почему UI UX дизайн — это одно направление

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

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

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

Если вы совмещаете в себе обязанности UX и UI, то вы избавляете себя от подобного рода развития событий.

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

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

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

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

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

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

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

Искусственный интеллект в UI/UX

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

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

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

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

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

Цветовые переменные и представление компонентов – обновленные опции приложения Sketch. Благодаря им разработчикам проще сохранять однородность цвета и работать с компонентами. 

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

Чем занимается

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

Пошаговая инструкция работы UX-дизайнера выглядит таким образом:

1. Получить техническое задание от заказчика. В случае недостатка информации уточнить у клиента некоторые вопросы.
2. Провести подготовительную работу: определить и исследовать целевую аудиторию и конкурентов.
3. Провести анализ взаимодействия пользователя с сайтом, в том числе составить карту путешествия посетителя.
4. На основе результатов анализа пользовательского опыта и пожеланий заказчика разработать несколько макетов веб-ресурса.
5. Отправить заказчику готовый проект.
6. Провести тестирования, проанализировать результаты, при необходимости внести правки.

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

Если же представить все списком, то в обязанности UX-дизайнера может входить:

1. Проведение UX-исследований.
2. Создание прототипов сайта.
3. Тестирование готового продукта на целевой аудитории, внесение изменений на основе полученных результатов.
4. Определение и исследование целевой аудитории.
5. Продумывание связей между элементами интерфейса и их расположением.
6. Подготовка технического задания для UI-дизайнеров.
7. Анализирование пользовательских сценариев.
8. Разработка кликабельного макета веб-сервиса.
9. Продумывание логики использования продукта.
10. Подборка UX-инструментов для создания дизайна.
11. Изучение потребностей пользователей.
12. Проведение опросов посетителей веб-ресурса.
13. Работа в команде с проект-менеджером, веб-разработчиками, UI-дизайнерами.
14. Построение логических схем работы интерфейса.

Специалист должен следить, чтобы работа соответствовала таким требованиям, как:

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

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

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

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

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

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

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

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

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

Дизайн для скорости

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

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

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

Что делать? Именно в такой ситуации важен подробный анализ темперамента целевой аудитории. Изучите пользователей и добавьте в дизайн только те детали, которые имеют неоспоримую ценность и не имеют определяющего влияния на скорость загрузки. Можно пользоваться бесплатными инструментами (например, GTmetrix), чтобы определить время загрузки страницы и найти причины, замедляющие работу проекта. 

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

Начните с изучения материалов по теме

Самое важное на первом этапе — погрузиться в дизайн-среду через прочтение профессиональной литературы (список мы рассмотрим позже), тематических блогов, просмотр уроков (например, на YouTube: «Наука Дизайна», Disarto). . Собирайте коллекцию различных дизайн-решений на Dribbble, Behance, Pinterest

Они пригодятся вам в дальнейшем. Заведите себе страницу на Dribbble, Behance, где позже будете размещать свое портфолио

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

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

Вебинары по теме:

1. Skillbox. Вебинары по направлению «Дизайн». Среди них есть и записи по UX/UI-дизайну.
2. Нетология. по направлению «Дизайн и UX». Для предстоящих вебинаров требуется регистрация. Записи доступны и незарегистрированным пользователям.

3. GeekBrains. : анонс предстоящих и записи прошедших. Требуется регистрация, в том числе и для просмотра записей.

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

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

UX практически всегда сопровождается словом “дизайн”. Люди, работающие в этой области – UX дизайнеры.

Простыми словами, User Experience Design (UXD или UED) – это процесс создания физического или электронного продукта, который полезен, легок в использовании и приятен для взаимодействия. Но на самом деле все значительно сложнее:

01. UX дизайн больше чем юзабилити

Существует заблуждение, что UX дизайн – это то же самое, что и юзабилити. И это заблуждение понятно: юзабилити предполагает, что продукт полезен и легок в использовании.

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

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

02. UX дизайн не является визуальным или UI дизайном

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

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

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

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

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

03. UX дизайн – это люди

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

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

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

04. UX дизайн имеет разные размеры

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

05. UX дизайн – это постоянно продолжающийся процесс

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

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

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

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

Веб-дизайн, в свою очередь, ориентирован ИСКЛЮЧИТЕЛЬНО на Веб, то есть на сайты. Также к веб-дизайну можно отнести разработку рекламных баннеров, креативных промо-материалов и так далее. UX/UI дизайн может выходить далеко за пределы веб пространства, поскольку интерфейсы есть не только у сайтов, а например, у банкоматов, телевизоров, панелей приборов и так далее. В этом и есть основное различие между веб-дизайном и UX/UI дизайном.

Помимо этого, UX/UI дизайн всегда опирается на анализ и работу с целевой аудиторий. Нельзя просто так взять и нарисовать «красивый» интерфейс. Интерфейс должен быть в первую очередь УДОБНЫМ. А для этого нужны определенные исходные данные, на основе которых будет разрабатываться дизайн интерфейса.

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

Разделение понятий «веб-дизайн» и «UX/UI дизайн» имеет огромный смысл для работодателя, поскольку он ищет себе в штат тех, кто на 100% мог бы закрыть потребности бизнеса. По этой причине, на сайтах по поиску работы вы практически не встретите вакансий «Веб-дизайнер», зато вакансий «UX/UI дизайнер» будет предостаточно.

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

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

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

Основные принципы построения интерфейсов

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

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

Важно, что он получит ожидаемый результат.
Привычка. Человеку трудно привыкнуть к новому

Пользователь видит нарисованную корзину и появляется ассоциация покупки. Если поменять изображение на «бабушкину авоську», уже будет трудно догадаться, что к чему.
Просмотр по диагонали. Большие тексты никто не читает. Лучше делать краткие заметки по сайту или заголовки и подзаголовки, отображающие суть вопроса.
Кошелек Миллера. Согласно принципу американского ученого кратковременная память способна охватить 7 элементов плюс-минус две штуки. Поэтому информацию в блоках лучше располагать в пределах этих цифр.
Интуитивность. Многие вещи пользователи делают согласно своей интуиции и не желают что-то запоминать.
Нужное на виду. UI дизайн предполагает делать акцент на тех вещах, которые пользователю наиболее необходимы.
Группировка. Все элементы необходимо группировать по какому-то отличительному признаку. Например, если в телефоне есть меню «сообщения», то рациональнее в него вставить входящие и исходящие сообщения, написание новых, а также настройки сообщений.
Правило 3-х кликов. Старое, но не теряющее актуальности. Чтобы добраться до нужной информации, необходимо сделать не более трех кликов. Большее количество вызывает недовольство и влечет за собой уход с сайта или отказ от услуг.
Одинаковый стиль. Отзывы о компании или об определенном продукте не должны отличаться функционалом или внешним отображением.
«Защита от дурака». Если пользователь захотел удалить свои фотографии или еще что-то – нужно переспросить. Возможно, он просто случайно нажал на кнопку.
Копирайтинг. В интерфейсе не должно быть ничего лишнего. Каждый заголовок важен, каждая буква в меню тщательно подбирается.
Будь в тренде. Создание проекта – дело длительное, а мода переменчива. Чтобы проект не устарел его до его выхода в свет, необходимо продумывать каждую деталь.
Мелочей не бывает. Одна маленькая черточка своим присутствием или отсутствием отпугнет или привлечет людей.

Как найти работу без опыта и реализованных работ

1. Делайте хорошую работу

Чтобы найти работу, самый верный способ — это сделать выдуманный кейс качественно. Есть отличный пример Дениса (пункт 6 в статье), который долгие годы работал в компании, а потом сделал выдуманные кейсы, благодаря которым получил рабочие приглашения и даже больше. Поступите так же, получите как минимум ленточку в Behance и писать начнут уже вам.

2. Присоеденитесь к единомышленникам

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

В Behance ленточки даются каждому кто учавствовал в проекте. Поэтому это отличный способ научиться и вытянуть сложный проект вместе, с дружеской поддержкой

С ленточкой HR-менеджер обратит на вас внимание вероятнее, а заказчики на фрилансе будут уделять большее внимание

3. Найдите верстальщика

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

4. Ищите стартаперов

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

5. Ищите в базе вакансий и предложений

Кратко

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

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

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

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

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

Где найти работу по специальности

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

Найти нужную вакансию помогут специализированные веб-ресурсы — hh ru или Работа.ru.

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

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

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

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

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

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

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

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

Карточка (Card)

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

Карусель (Carousel)

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

Checkbox

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

Лента (Feed)

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

Loader

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

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

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

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

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

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

Picker

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

Progress Bar

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

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

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

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

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

Stepper

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

Тэг (Tag)

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

Tab Bar

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

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

Сколько зарабатывают UX-дизайнеры

В разных компаниях UX-дизайнеры получают по-разному. Многое зависит от сферы и региона. Наиболее высокие зарплаты у продуктовых дизайнеров (от 80-100 тыс. рублей в месяц), еще выше — в зарубежных компаниях (так, по данным Payscale, в США она в среднем составляет $75 тыс. в год). 

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

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

Навык 9. Тестирование продукта

После того как вы собрали свой прототип, пришло время проверить ваши идеи.

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

Главное здесь — не задавать «наводящие» вопросы. Например: «Как вы думаете, иконки социальных сетей достаточно легко найти?» Или «Этот новый дизайн понятнее предыдущего?»

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

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

Как стать и куда двигаться дальше

Первый и главный навык по части UI — освоить графический редактор. Самый востребованный инструментарий — Adobe Photoshop, Sketch, Principle, Adobe Illustrator, After Effects. Для начала можно попробовать перерисовать скриншоты любого мобильного приложения или сайта. Но не просто скопировать (хотя и это нужно уметь), а заметить какое-то неудобство и предложить решение, как сделать лучше.

Также важно понимать теорию цвета, типографику, композицию, эргономику сайта (принципы юзабилити интерфейсов), а также основы маркетинга, бизнес-анализ, психологию. Для более эффективного общения с разработчиками будут полезны навыки верстки (HTML/CSS) и базовые знания JavaScript и фреймворков

Изучение UX можно начать со знакомства с методологией, почитав книги Нильсена Нормана, Алана Купера, Джефа Раскина, Стива Круга, Алистера Коберна. Более прикладная литература — «The User Experience Team of One: A Research and Design Survival Guide» Leah Buley.

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

UX и UI навыки и компетенции (image source)

Из личных качеств важны:

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

Возможные карьерные пути UX/UI дизайнера:

• совершенствоваться как дизайнер, повышать рейт (если фрилансер);
• осваивать смежные направления, развиваясь как дизайнер продукта, VR дизайнер, VFX дизайнер, Game дизайнер;
• дорасти до позиции Арт-директора (Head of Design);
• развиваться как Product Manager, если хочется переключиться с дизайна на управление продуктом в целом;
• стать Project Manager, если интересно координировать людей;
• заняться версткой, если больше интересен технический аспект;
• освоить программирование и стать UI-разработчиком;
• попробовать себя в маркетинге или бизнес-анализе.

Благодарю за помощь в написании статьи Юлию Бондаренко, Максима Паливоду, Марину Поповиченко и 25 других украинских дизайнеров, которые рассказали DOU о своей должности. Приведенные в статье цитаты взяты из их рассказов.

См. также cтатьи о других специальностях в IT.