UX-дизайн — уже давно покорил мир и продолжает набирать обороты на невероятных скоростях. А что на самом деле означает этот термин? В продуктовых компаниях и диджитал агентствах уже давно поняли, почему ux дизайн решает при разработке продукта, но новички могут наспех подумать, что это просто еще одно из модных словечек, которыми разбрасываются на встречах стартаперы. Давайте разбираться.

Термин UX впервые использовал в 1993 году Дональд Норман — учёный в области дизайна и пользовательской инженерии, который в то время присоединился к команде Apple. Он считал, что интерфейс — это не только функциональность, но и  эмоции пользователей. Он описал этот термин в своей книге «Дизайн привычных вещей». 

Аббревиатура UX-дизайн расшифровывается как user experience ― «пользовательский опыт». Простыми словами, это то, каким образом пользователь взаимодействует с интерфейсом. Насколько сайт или приложение для него удобны. UX/UI-дизайнеры востребованы в IT-сфере, поскольку интерфейсы должны быть не только красивы, но и понятны.

Общепринятого определения «Что такое UX дизайн» не существует. И это нормально. User Experience дизайн — многогранная концепция, которая включает множество дисциплин: интерактивный дизайн, информационную архитектуру, визуальный дизайн, юзабилити и взаимодействие между человеком и компьютером.

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

В UX входит навигация по сайту, функционал меню и результат взаимодействия со страницами. Это не только «костяк» сайта ― его структура, ― но и коммуникация: диалоговые окна, функционал кнопок, настройки поиска и форм. Именно от качества UX зависит то, насколько быстро пользователь сможет получить то, зачем он пришёл на сайт.

Чем UX отличается от UI

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

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

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

UX – это функционал интерфейса, UI – его внешний вид.

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

Однако вместе с тем есть некоторые типы проектов, в которых больше важен UX, а в некоторых ― UI:

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

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

Зачем нужен UX-дизайн

Редакция Оксфордского журнала «Взаимодействие с компьютером» задалась вопросом, какую роль дизайн User Experience играет в бизнесе и провела исследование. Его результаты говорят о том, что цель UX дизайна — «улучшить степень удовлетворенности клиента и его лояльность через пользу, простоту использования и удовольствие, которое клиент получает в процессе взаимодействия с продуктом».

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

Стоит отметить, что UX нацелен не только на удовлетворение нужд пользователей, но и на удовлетворение потребностей бизнеса. Нет смысла создавать продукт, который полюбят пользователи, если это не поможет в достижении целей бизнеса. UX дизайнер должен найти баланс между пользователями и бизнесом, чтобы создать оптимальное решение.

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

Сферы использования UX-дизайна

UX-дизайн используется во многих областях, связанных с созданием пользовательского интерфейса. Вот некоторые из них:

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

10 принципов эффективного UX-дизайна

UX-дизайн – это творческий подход к разработке интерфейса. Этому обучают на онлайн-курсах, где также рассматриваются 10 принципов эффективного UX-дизайна:

1. Простота и понятность. Пользователь должен быстро находить нужную информацию и легко ориентироваться на сайте.
2. Удобство использования. Продукт или услуга должна быть удобной в использовании.
3. Адаптивность. Сайт должен подстраиваться под разные устройства и размеры экранов.
4. Персонализация. Сайт должен учитывать индивидуальные потребности и предпочтения пользователя.
5. Безопасность. Сайт должен обеспечивать безопасность данных пользователя, защищать его от кибератак и мошенничества.
6. Инновационность. Сайт должен постоянно развиваться и обновляться, чтобы оставаться актуальным и востребованным.
7. Дизайн. Сайт должен иметь привлекательный дизайн, который будет вызывать положительные эмоции у пользователей.
8. Скорость загрузки. Сайт должен загружаться быстро, чтобы не вызывать у пользователей дискомфорт и раздражение.
9. Качество контента. Сайт должен содержать качественный и полезный контент, который будет интересен и полезен пользователям.
10. Обратная связь. Сайт должен позволять пользователям оставлять отзывы и комментарии, чтобы улучшить качество продукта или услуги.

План разработки продукта UX/UI-дизайна

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

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

При этом, работая над UX, дизайнер должен продумывать и UI проекта ― то есть представлять, как будет оформлен сайт, каким будет его дизайн. Любые недоработки с точки зрения UX или UI будут портить пользователю впечатления от взаимодействия.

В разных командах работа над сайтом или приложением может строиться по-разному. Однако можно выделить общие этапы работы над проектом.

Сбор информации

На этом шаге нужно получить как можно больше информации от клиента ― через бриф или интервью.

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

Всю эту информацию можно сохранить в обычном текстовом редакторе и уже на этом этапе схематично набросать структуру продукта.

Аналитика

Далее следует изучить конкурентов заказчика ― список указанных клиентом компаний затем можно расширить, поискав самостоятельно. Задача:

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

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

Результаты аналитики оформляются в виде майндмэпа ― например, в программе XMind ― или же таблицей. (Приложение А)

Изучая опыт конкурентов в поисках концепции, можно исследовать сайты не только схожей тематики, но и с просто похожей аудиторией. Например, для сайта салона красоты пригодятся другие ориентированные для женщин ресурсы ― интернет-магазины женской одежды и косметики, студии женского фитнеса.

Ещё один источник для идей ― конкуренты в смежных нишах: при работе над проектом для строительной компании может быть полезен опыт фирм по ремонту или ландшафтному дизайну.

Структура сайта

На этом этапе определяются задачи сайта и разрабатывается карта пользовательских путей Customer Journey Map (CJM) ― в ней прописываются все сценарии взаимодействия пользователя с ресурсом. Обычно у сайта есть одна главная задача ― например, покупка. Однако в CJM нужно предусмотреть и взаимодействие с другими страницами.

В CJM обычно указывают, с помощью каких источников пользователь попал на сайт, что он решал при взаимодействии, что могло ему помешать и как он дошёл до цели. (Приложение Б)

Карту пользовательских путей можно сформировать:

• в Excel или «Google Таблицах» в виде таблицы;
• в программе XMindили онлайн-сервисе Miro в виде майндмэпа;
• в специальных онлайн-конструкторах карт пользовательских путей ― например, Canvanizer.

На основе CJM уже можно набросать структуру будущего сайта ― что будет на главной, какие пункты внесены в верхнее меню, а где будут располагаться главные элементы, ведущие к целевому действию.

Прототип сайта

Прототип — это «скелет» сайта, который показывает его основные блоки. В прототипе схематично отмечают, какой контент и какие элементы будут находиться на каждом экране, а также продумывают логику взаимодействия между элементами.

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

• поведение целевой аудитории;
• сценарии взаимодействия с сайтом;
• разработанная структура сайта;
• удачные «фишки» конкурентов (Приложение С)

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

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

Работа с контентом

Какой контент от заказчика понадобится, можно отметить уже на этапе создания структуры: прикинуть, будут ли на сайте фото, видео, инфографика. Но прототип позволит точно оценить формат материалов ― какого размера должны быть изображения, текстовые абзацы.

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

Обычно для подготовки контента дизайнер отправляет заказчику таблицу, где собрано, какой тип контента необходим, его объём и место размещения.

UI-дизайн

После того как прототип готов, начинается работа с UI ― дизайнер переходит к разработке визуальной оболочки сайта. Задачи UI включают:

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

Хороший дизайн учитывает современные графические тренды, однако главное в интерфейсе ― удобство для целевой аудитории. Например, если дизайнер создаёт ресурс для финансовых продуктов, основные пользователи которого ― мужчины старше 40, то вряд ли в нём будет хорошо смотреться ретростиль или пёстрые градиенты.

Тестирование

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

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

Тестирование может происходить в двух форматах:

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

Анализ результатов тестирования покажет, с какими проблемами сталкиваются пользователи и что в интерфейсе нужно подкорректировать.

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

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

Работа с UX/UI требует большего математического склада ума. Всё основано не только на красоте, но и интерактивном взаимодействии. Это позволяет направлению UX/UI-дизайна выйти на рынок IT-профессий, спрос на которые сейчас растёт.

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

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

Навыки для успешного UX/UI-дизайна?

Маркетинг. Необходимо уметь составить портрет целевой аудитории, оформить уникальное торговое предложение, сделать анализ конкурентов.

Аналитика. Важно владеть методологиями анализа бизнес-задач. И знать, как составить карту пользовательских путей для достижения целей этих задач.

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

Технические знания. Вся работа производится в компьютерных программах, без них ― ничего не получится.

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

Принципы вёрстки. Необходимы для взаимодействия с верстальщиком во время передачи ему макета сайта.

Как научиться UX/UI?

Для специальности UX/UI-дизайнера существует множество онлайн-курсов ― как платных, так и бесплатных.

Новичку лучше выбрать платную форму обучения. Она гарантирует внимание преподавателя и помощь в выполнении заданий. Ещё один важный плюс такого образования ― общение с однокурсниками и обмен опытом.

Главное (и единственное) достоинство бесплатных уроков ― цена. Среди них сложно выбрать качественный контент. Они не предполагают ни консультаций по материалу, ни обратной связи по выполненным заданиям.

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

Где искать клиентов?

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

• на сайтах вакансий ― например, HeadHunter;
• в профильных группах соцсетей;
• в разделах вакансий различных интернет-изданий ― например, ru, «Хабр Фриланс»;
• в нашем еженедельном дайджесте вакансий всегда есть предложения для UX/UI-дизайнеров, в том числе и начинающих. Проверяйте главную страницу нашего журналапо понедельникам.

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