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

UX-дизайн (User Experience — «пользовательский опыт») отвечает за то, как интерфейс работает.

UI-дизайн (User Interface — «пользовательский интерфейс») отвечает за то, как интерфейс выглядит.Одна часть не может существовать без другой. Сейчас трудно себе представить, что можно разрабатывать интерфейс и не задумываться о том, как он будет выглядеть, и наоборот — оформлять UI в отрыве от проектирования UX.

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

Чтобы понять, что входит в UX-часть, а что в UI, разберём все этапы проектирования интерфейса на примере учебной задачи — дипломного проекта Александра Манова, выпускника курса «Дизайнер интерфейсов».

Этапы проектирования интерфейса

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

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

Исследования

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

Фрагмент учебного брифа на курсе «Дизайнер интерфейсов». Чтобы лучше понять задачу, нужно переговорить с представителями всех пяти сегментов целевой аудитории
Пользователи этого приложения должны иметь возможность заказать и оплатить анализы, вызвать врача на дом, посмотреть старые результаты анализов и добавить в приложение ещё одного пользователя, например ребёнка.В ходе обсуждения задачи с заказчиком дизайнер поинтересуется, почему нельзя добавить эти функции в личный кабинет на сайте, почему важно вынести их в отдельное приложение. От заказчика дизайнер узнает, что приложение — это гипотеза. Если большая часть пользователей начнёт заказывать анализы через приложение, его будут дорабатывать, добавлять новые функции и расширять приложение ux онлайн.На этапе подготовительных исследований дизайнер интерфейсов визуализирует алгоритм задачи. Здесь он может применить разные инструменты, например:— пошаговый сценарий пользователя (User Flow), чтобы наглядно увидеть путь пользователя от регистрации до покупки;— карту пользовательского опыта (CJM, Customer Journey Map), чтобы понимать, где ключевые боли пользователя и как их решить.

Фрагмент схемы User Flow для «Смартлаба». Каждое действие пользователя в интерфейсе прописывается как алгоритмПеред тем как приступить к этапу проектирования интерфейса, дизайнер заранее определяет метрики, по которым будет измеряться эффективность дизайна.В брифе заказчика из примера выше был запрос на два формата: мобильное приложение и лендинг — одностраничный сайт, который расскажет про функции приложения. Для каждого формата будет своя оценка эффективности, например у лендинга это количество скачиваний приложения.

Прототипирование

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

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

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

Прототип проходит несколько циклов итераций, прежде чем будет готов

У UX-дизайна есть принципы, которые помогают построить эффективный дизайн интерфейса. Начинающим дизайнерам можно ориентироваться на 10 принципов Якоба Нильсена, гуру пользовательского дизайна. Это отдельная тема, целая философия. Подробнее о ней можно прочитать в книге «Веб-дизайн: книга Якоба Нильсена».