Рассказываем, что такое UX- и UI-дизайн, чем они отличаются, с чего начать погружение в эти специальности и кому они подойдут.
Что такое UX-дизайн и UI-дизайн
- UX-дизайн (User Experience — «пользовательский опыт») занимается тем, как работает интерфейс.
- UI-дизайн (User Interface — «пользовательский интерфейс») фокусируется на внешнем виде интерфейса.
Эти две составляющие неразрывно связаны; невозможно представить создание интерфейса без учета его визуальной составляющей, как и невозможно оформить UI без продуманного UX. Современные подходы предполагают, что дизайн и пользовательский опыт разрабатываются вместе, так как они взаимозависимы.
Проектирование визуальной части дизайна, UI, — это один из этапов создания интерфейса
Специалист, который занимается одновременно UX и UI, обычно называется дизайнером интерфейсов или UX/UI-дизайнером. Он управляет всеми этапами разработки интерфейса — от постановки задачи до тестирования прототипа.
Чтобы понять, что входит в работу по UX и что — по UI, рассмотрим все этапы проектирования интерфейса на примере учебного задания — дипломного проекта Александра Манова, выпускника курса «Дизайнер интерфейсов».
Материал по теме:
Жми скорей сюда: как создать хороший пользовательский интерфейс
Этапы проектирования интерфейса
Дизайнер пользовательских интерфейсов гибко планирует свою работу. Это значит, что для решения конкретной задачи он может подобрать разный набор действий.
Базово можно разделить работу дизайнера на четыре этапа: исследования, проектирование, визуальный дизайн и проверка решения.
- Исследования
Для подробного изучения задачи дизайнер интерфейсов использует различные инструменты UX-исследования: интервьюирует будущих пользователей, изучает конкурентов и предметную область, анализирует продукт и существующие проблемы.
Дизайнер ищет инсайты. То есть разбирается, что именно нужно пользователю и подойдёт ли ему тот способ решения задачи, который определил заказчик. Дизайнер интерфейсов обязательно общается не только с заказчиком, но и с потенциальным пользователем продукта.
На этом этапе будут созвоны, встречи, уточнения задачи, новые детали. В конце этапа они соберутся в единую картину пожеланий, требований и ограничений.
Представим, что дизайнер получил задачу: спроектировать мобильное приложение и лендинг для сервиса клинико-диагностической лаборатории.
Фрагмент учебного брифа на курсе «Дизайнер интерфейсов». Чтобы лучше понять задачу, нужно переговорить с представителями всех пяти сегментов целевой аудитории
Пользователи этого приложения должны иметь возможность заказать и оплатить анализы, вызвать врача на дом, посмотреть старые результаты анализов и добавить в приложение ещё одного пользователя, например ребёнка.
В ходе обсуждения задачи с заказчиком дизайнер поинтересуется, почему нельзя добавить эти функции в личный кабинет на сайте, почему важно вынести их в отдельное приложение. От заказчика дизайнер узнает, что приложение — это гипотеза. Если большая часть пользователей начнёт заказывать анализы через приложение, его будут дорабатывать, добавлять новые функции и расширять приложение.
- На этапе подготовительных исследований дизайнер интерфейсов визуализирует алгоритм задачи. Здесь он может применить разные инструменты, например:
- — пошаговый сценарий пользователя (User Flow), чтобы наглядно увидеть путь пользователя от регистрации до покупки;
- — карту пользовательского опыта (CJM, Customer Journey Map), чтобы понимать, где ключевые боли пользователя и как их решить.
Фрагмент схемы User Flow для «Смартлаба». Каждое действие пользователя в интерфейсе прописывается как алгоритм
Перед тем как приступить к этапу проектирования интерфейса, дизайнер заранее определяет метрики, по которым будет измеряться эффективность дизайна.
В брифе заказчика из примера выше был запрос на два формата: мобильное приложение и лендинг — одностраничный сайт, который расскажет про функции приложения. Для каждого формата будет своя оценка эффективности, например у лендинга это количество скачиваний приложения.
- Прототипирование
После подготовительного этапа, когда все данные собраны, дизайнер визуализирует структуру продукта или сервиса в виде наброска.
Самый быстрый черновой набросок, который показывает идею, называется вайрфреймом. Обычно проектирование макета идёт по методу «прогрессивного джипега», когда сначала делается структура целиком, а детали прорабатываются постепенно.
Быстрый скетч от руки, чтобы зафиксировать идею
Уже на этапе скетча можно отправить спецификацию разработчикам, которые будут программировать приложение. Это нужно, чтобы понять, все ли задумки дизайнера они смогут реализовать.
Вайрфрейм детализируется и становится реалистичным прототипом в процессе согласования с клиентом и параллельного тестирования с разработчиками. На пути из точки А в точку Б макет проходит несколько итераций. UX-дизайнер презентует прототип клиенту, тестирует и улучшает его.
Прототип проходит несколько циклов итераций, прежде чем будет готов
У UX-дизайна есть принципы, которые помогают построить эффективный дизайн интерфейса. Начинающим дизайнерам можно ориентироваться на 10 принципов Якоба Нильсена, гуру пользовательского дизайна. Это отдельная тема, целая философия. Подробнее о ней можно прочитать в книге «Веб-дизайн: книга Якоба Нильсена».
- Проектирование визуальной части — UI‑дизайн
Дизайнер интерфейсов переходит к этапу UI-дизайна как к очередной задаче. Чтобы выполнить часть UI, он должен обладать навыками визуального дизайна.
Фрагмент UI-макета в разработке интерфейса для мобильного приложения «Смартлаб»
Фрагмент UI-макета в разработке интерфейса лендинга «Смартлаб»
На этом этапе дизайнер решает, как будут выглядеть элементы, подбирает картинки, шрифты, цвета — общий стиль. Если понадобится, то UI-дизайнер создаст анимированные объекты.
Фирменный стиль для проекта «Смартлаб»
В UI-части дизайнер следит не только за общей красотой интерфейса, но и за тем, чтобы пользователь верно считывал элементы интерфейса во всех состояниях экрана и чтобы интерфейс соответствовал стандартам доступности. Это одновременно относится и к визуальной части, и к части взаимодействия с интерфейсом. То есть в части UI дизайнер продолжает думать про UX интерфейса.
В отличие от UX-дизайна принципы построения UI-дизайна предельно конкретны. Дизайнеру-новичку лучше ориентироваться на стандартные правила визуализации интерфейса. Подробнее — в учебниках «Типографика и вёрстка» Артёма Горбунова и «Пользовательский интерфейс» Ильи Бирмана.
- Проверка решения
Дизайнер интерфейсов тестирует свой макет с помощью различных инструментов. Самый простой — коридорное тестирование, оно помогает быстро найти грубые ошибки. Дизайнер продумывает сценарий опроса и опрашивает нескольких возможных пользователей. Потом собирает и анализирует обратную связь, а если нужно, возвращается на предыдущие этапы. Для более сложного тестирования используют юзабилити исследования, АВ-тесты.
Тестирование покажет, что нужно исправить в макете на уровне UI или на уровне UX
В финале дизайнер дорабатывает прототип интерфейса и отдаёт его веб-разработчикам. Он по-прежнему включён в задачу, контролирует процесс вплоть до сдачи готового продукта заказчику.
Дизайнер интерфейсов — это адвокат пользователя. На каждом этапе проектирования дизайнер думает сразу и о том, как интерфейс будет работать (UX), и о том, как будет выглядеть (UI). Это забота не об интерфейсе, а о пользователе, будет ли в итоге ему удобно. Да, дизайнер учитывает интересы бизнеса, возможности и ограничения технологий, но его основная цель — разработать интерфейс, который решит задачу пользователя.
Зачем понадобилось разделять UX и UI
Работодатели иногда разделяют UX и UI на две разные вакансии. UX-дизайнеру достаётся часть задач: он исследует предметную область, анализирует целевую аудиторию, создаёт прототип, тестирует его. Потом подключается UI-дизайнер, который доводит прототип до готовности — оформляет пользовательский интерфейс.
Разделение на UX и UI пока остаётся и в небольших дизайн-студиях, и в крупных компаниях. Например, ведущий дизайнер компании может выполнять только задачи по UX, так как раньше работал в роли UX-аналитика. Задачи по UI в таком случае могут отдавать начинающим специалистам, чтобы отрабатывать навыки визуального дизайна.
При этом есть тренд: границы между UX- и UI-ролями начинают стираться. Сейчас дизайнер интерфейсов — это UX/UI-универсал.
Тренды и перспективы UX и UI и что с ними делать
С точки зрения процесса создания интерфейса в UX и UI прослеживаются три основных направления:
Рутина постепенно уходит | Создание макета интерфейса уже похоже на собирание конструктора из готовых деталей. Такая автоматизация экономит время, и дизайнер всё больше уходит в сторону более интересных вещей: исследований продукта, контекста, пользователей. | Есть смысл более глубоко изучать инструменты UX-исследований и тестирования: Google Analytic, Flowmap, Bugsee, Hotjar, User Report. |
|---|---|---|
Дизайн и разработка медленно, но верно идут к слиянию | Возможно, что в будущем это станет единой профессией. | Есть смысл изучать программы, no code — инструменты. |
Дизайн интерфейсов включает в себя всё больше этапов создания продуктов | Дизайн интерфейсов задействует все стороны: пользователей, бизнес, технологическую разработку. | Есть смысл изучить, чем занимается продуктовый дизайнер. |
Кому подойдёт профессия UX/UI-дизайнера
Скорее всего профессия подойдёт тем, у кого аналитический склад ума, есть желание систематизировать, наполнять вещи вокруг смыслом, оптимизировать и понятно доносить, докапываться до сути.
UX/UI-дизайнер в работе ориентируется на то, чтобы улучшать жизнь пользователей. У него высокий уровень эмпатии, он умеет работать в команде, спрашивать и слушать, общается на одном языке с людьми из различных областей и понимает, у кого что надо спросить:
- — с клиентами и продакт-менеджерами — про бизнес и маркетинг,
- — с аналитиками данных — про исследования,
- — с UX-писателями — про инфостиль,
- — с разработчиками — про внедрение и тестирование,
- — с пользователями — про их проблемы, опыт и задачи.
С чего начать
UX/UI-дизайнер постоянно обращает внимание на интерфейсы вокруг, анализирует паттерны взаимодействия и свои привычки. Он думает, как улучшить то, что уже есть.
На начальном этапе освоения дизайна интерфейсов полезно:
1. Копировать знакомые интерфейсы, раскручивать в обратную сторону от готового продукта к прототипу, тренироваться собирать макеты в Figma.
2. Собирать интересные UX- и UI-идеи и решения на доску в Pinterest или избранные закладки в Chrome.
3. Читать базовые книги:
— Дональд Норман «Дизайн привычных вещей»
— Илья Бирман «Пользовательский интерфейс»
— Якоб Нильсен «Веб-дизайн»
— Артемий Лебедев «Ководство»
— Генрих Альтшуллер «Найти идею»
— Люк Вроблевски «Сначала мобильные»
4. Подписаться на телеграм-каналы и рассылки про UX:
— Адовый UX дизайнера и разработчика Кирилла Олейниченко,
— Редач UX-писателя Иры Моториной,
— UI фейл дизайнера Дениса Пушкаря.
Чтобы стать дизайнером интерфейсов, необязательно заканчивать университет. Дизайн — это навык, его можно прокачать, например с помощью онлайн-курсов. Перед началом обучения важно разобраться, какой метод обучения подходит, и скорректировать ожидания. Например, узнать, куда устраиваются выпускники программы. Хорошим стартом после учёбы будет оплачиваемая стажировка в крупной компании.
Подпишитесь на наш ежемесячный дайджест статей —
а мы подарим вам полезную книгу про обучение!
