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

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

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

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

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

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

Разрабатывает структуру продукта

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

Разрабатывает прототипы

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

Анализирует

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

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

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

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

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

Создает анимации

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

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

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

Добавляет подсказки

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

Читайте также:

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

Сходства и различия UX- и UI-дизайна

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

Сходства

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

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

Различия

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

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

Ясность

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

Удобство

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

Эффективность

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

Современность

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

Забота о пользователе

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

Программы для UX/UI-дизайна

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

Figma

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

Adobe Illustrator

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

Axure RP

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

Fontjoy и ColorHexa

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

Adobe After Effects

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

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

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

1. Много практиковаться

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

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

2. Подучить теорию

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

Здесь лучше всего начать со статей на Medium. Потом переходить к отцам основателям UX — Якобу Нильсену и Дональду Норману. Их материалы можно найти в блоге NNGroup. Ну и конечно, книги:

• «Дизайн для реального мира», Виктор Папанек;
• «Не заставляйте меня думать», Стив Круг;
• «Дизайн привычных вещей», Дональд Норман;
• «Психбольница в руках пациентов», Алан Купер;
• «Интерфейс», Джеф Раскин;
• «Дневник дизайнера-маньяка» и вообще все книги Яны Франк.

3. Освоить теорию и практику

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

Читайте также:

Бросить работу на заводе и стать UX/UI-дизайнером. История студента Никиты Чистило

Итог: что такое UX и UI-дизайн?

Что такое UX?

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

Что такое UI?

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

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