UI/UX-дизайн | DMU – Цифровые медиаприложения

Две разные дисциплины, единый опыт.

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

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

Сначала структура, потом экран.

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

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

Последовательность рождается из системы, а не из отдельных экранов.

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

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

Доступность — не слой, добавленный задним числом.

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

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

Процесс — это доказательство, а не заявление.

Объединение 13 бизнес-направлений и 67 функций в едином мобильном приложении не было теоретическим UX-упражнением — это была реальная задача, потребовавшая исследований, информационной архитектуры, прототипирования, юзабилити-тестирования и многократных итераций. dmu ONE — результат этого процесса, и самый честный способ рассказать о подходе DMU к UI/UX — показать его напрямую.