ISRPO/Лекции/UI_UX_Дизайн/di/ux_ui_дизайн.md

Что такое UX/UI-дизайн?

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

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

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

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

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

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

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

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

В качестве примера из прошлого можно привести токарные станки Средних веков. У человека возникла потребность в однотипных деревянных деталях, и он изобрёл инструмент. Дальше этот инструмент совершенствовался ― появился ножной привод, который освобождал руки, а размеры конструкции учитывали рост того, кто за станком работал. Когда мастера собирали станки, они использовали наработки предыдущих поколений и при этом старались усовершенствовать механизм, чтобы станок служил дольше, а работа шла быстрее.

Само понятие UX впервые было сформулировано только в начале девяностых. Его придумал психолог и проектировщик Дональд Норман, который в то время присоединился к команде Apple. Он описал этот термин в своей книге «Дизайн привычных вещей». Компания Apple с самого начала уделяла большое внимание юзабилити, и её интерфейсы до сих пор считаются одними из лучших.

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

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

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

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

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

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

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

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

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

2. Аналитика.

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

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

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

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

Пример портрета пользователя в виде таблицы.

Пример результатов исследования в виде таблицы.

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

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

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

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

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

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

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

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

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

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

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

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

Так выглядит прототип сервиса «Городские экскурсии» ― контент показан схематично, но уже понятно, как будут расположены все элементы.

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

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

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

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

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

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

6. Дизайн ― UI.

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

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

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

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

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

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

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

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

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

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

Какие знания нужны для UX/UI?

1. Маркетинг. Необходимо уметь составить портрет целевой аудитории, оформить уникальное торговое предложение, сделать анализ конкурентов.
2. Аналитика. Важно владеть методологиями анализа бизнес-задач и знать, как составить карту пользовательских путей для достижения целей этих задач.
3. Психология. Поможет использовать паттерны поведения пользователей и принципы визуального восприятия.
4. Технические знания. Вся работа производится в компьютерных программах, без них ― ничего не получится.
5. Насмотренность. Позволит отслеживать современные визуальные тренды и применять их на практике.
6. Принципы вёрстки. Необходимы для взаимодействия с верстальщиком во время передачи ему макета сайта.