UX и UI: чем занимается дизайнер интерфейсов

UX и UI

Слово UX (user experience) переводят как «опыт пользователя». Это всё, что человек чувствует, пока пользуется продуктом: удалось ли быстро сделать, что хотел, не запутался ли, захочется ли вернуться. UX-дизайн отвечает на вопросы:

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

UI (user interface) — интерфейс, то, что человек видит и трогает: сетка, шрифты, цвета, кнопки, иконки. UI-дизайн делает продукт понятным с первого взгляда и приятным.

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

Как устроена работа

Работа дизайнера идёт по кругу:

1. Исследовать — поговорить с пользователями, изучить конкурентов и данные, понять проблему.
2. Спроектировать — продумать структуру и шаги, нарисовать прототип.
3. Оформить — сделать визуальный дизайн и компоненты.
4. Проверить — показать прототип людям и посмотреть, где они спотыкаются.
5. Передать и улучшить — отдать макеты разработчикам, а после запуска смотреть на данные и улучшать.

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

С кем работает дизайнер

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

Дизайнеры работают в продуктовых компаниях — банках, маркетплейсах, сервисах доставки; в дизайн-студиях и агентствах, которые делают проекты для клиентов; на фрилансе.

Инструменты

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

Ещё пригодятся:

• FigJam или Miro — онлайн-доски для схем, карт пути и мозговых штурмов;
• инструменты для интервью и тестов: видеозвонки, формы опросов, сервисы для юзабилити-тестов;
• блокнот — набросать идеи от руки быстрее всего.