Что такое UX/UI-дизайн, как разрабатывается и как стать UX/UI-дизайнером

Контент-маркетолог
Стаж 13 лет

Бывает, посмотришь на какую-нибудь программу и видишь это:

Шумерская клинопись, не иначе!
Шумерская клинопись, не иначе!

Ты расстраиваешься, тыкаешь на все кнопки, переходишь по всем ссылкам, но ничего не меняется, ничего не понятно.

Все дело в том, что кто-то пренебрег заботой о пользователе и адекватным дизайном. Давайте разбираться!

Что такое UX/UI

User Experience — это образ общения пользователей с интерфейсом, а также степень соответствия сайтов, программ или мобильных приложений потребностям пользователей в плане удобства и понятности, простыми словами, UX ― это пользовательский опыт.

Люди так или иначе общаются с предметами материального мира со времен своего возникновения, но сам термин UX возник в 90-е годы XX века. Его автором стал американский тестировщик Дональд Норман, который написал и издал ставшую легендарной книгой «Дизайн привычных вещей», где он и был впервые описан.

Понятие включает в себя:

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

Некорректно понимать под пользовательским опытом лишь структуру сайта — ту же совокупность страниц. Это и коммуникативные моменты: поиск по сайту, pop-up-окна, роли кнопок. Уровень понимания и учета UX определяет, с какой скоростью и как быстро пользователь достигнет целей, с каким он пришел на сайт, в настольное или мобильное приложение.

Рука об руку с этим понятием идет UI, или user interface, определяющий, как будут выглядеть кнопки, формы, шрифты, изображения.

Если резюмировать, то UX —функциональность, а UI — внешний вид интерфейса.

Это как две половинки мозга. Друг без друга никуда!
Это как две половинки мозга. Друг без друга никуда!

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

Бывают ситуации, когда акцент делается больше на UI, в других же — на UX:

UX

UI

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

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

Мы рассматриваем пару «UX-UI» в этой статье с точки зрения веб-дизайна, но это видение можно распространить и на повседневную жизнь.

  1. Бытовая техника.
  2. Ну разве этот холодильник не приковывает взгляд и не вызывает желание перекусить?
    Ну разве этот холодильник не приковывает взгляд и не вызывает желание перекусить?
  3. Электроника.
  4.  Вот так пирамидка!
    Вот так пирамидка!
  5. Мебель.
То ли сидеть, то ли ехать…
То ли сидеть, то ли ехать…

В качестве предмета, в котором все прекрасно с точки зрения UI, но пока не решен вопрос с UX, я бы привел проводные наушники. Почему, спросите вы?

Как говорится, без комментариев!
Как говорится, без комментариев!

Алгоритм разработки продукта по правилам UX/UI

В идеале (и при адекватном подходе) пользовательский опыт — краеугольный камень работы. Прежде всего надо подумать, как пользователи станут перемещаться по сайту, где они будут оставаться дольше (какой контент им дать?), где-то сразу переходить на другие страницы (что это будут за страницы?), а где-то уходить с сайта (как их удержать?). Учитываются любые возможные сложности во взаимодействии пользователей с интерфейсом и то, как мотивировать их к совершению целевого действия.

Как мы уже сказали, работа над UX должна идти параллельно с UI, т.е. минимум на уровне прототипов и эскизов иметь представление о внешнем виде сайта.

Далее мы рассмотрим типовой алгоритм разработки UI/UX продукта.

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

Мы должны провести с клиентов интервью и/или составить бриф.

Наш зарубежный партнер Уильям рассказывает о своих чувствах, болях и ожиданиях
Наш зарубежный партнер Уильям рассказывает о своих чувствах, болях и ожиданиях

Базис вопросов строится на концепции сайта или мобильного приложения, например:

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

Всю полученную информацию нужно зафиксировать в текстово-графической форме либо как текстовый документ, либо как табличный или же сделать презентацию. Рекомендуем делать это в Google Docs, потому что там можно работать совместно.

2. Проводим конкурентный анализ

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

  • проводим SWOT-анализ;
  • выделяем выгодные качества продукта и его текущие недостатки;
  • продумываем, как с точки зрения дизайн выделить первые и оттенить вторые.

Такой анализ непосредственно связан с изучением целевой аудитории и тем, как ее представители ведут себя на сайтах и в приложениях и каким образом принимают решения. Если клиент крупный, то всю информацию о ЦА дает его маркетинговый отдел. Если же нет, им занимается сам дизайнер.

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

Результаты анализа ЦА можно закреплять в виде майнд-карт (об этом мы поговорим ниже) или с помощью составления портретов представителей целевой аудитории.

Здесь мы видим информацию о пользователях Кайла
Здесь мы видим информацию о пользователях Кайла

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

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

3. Структурируем сайт

Здесь формируется пул задач на сайт и формируется карта путешествий пользователей, или CJM. Она закрепляется в тои или иной форме и содержит все алгоритмы коммуникации пользователей с сайтом.

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

CJM содержит источники переходов на сайт (внешние источники, социальные сети, прямые заходы, поисковая выдача и т .п.), какие действия он предпринимал на страницах, что мешало и помогало в принятии решений и то, как он смог достичь целей.

Типовой пример построения карты путешествий покупателя
Типовой пример построения карты путешествий покупателя

Вы можете отразить CJM следующими способами:

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

Если CJM была построена в подробной форме, с ее помощью можно составить первичную структуру будущего сайта: как будет выглядеть главная страница, «О нас», продуктовые страницы, пункты всех меню, расположение элементов (кнопок и форм) и т. д.

4. Готовим прототип сайта

Это самый настоящий скелет веб-ресурса, который показывает, где будут располагаться его «кирпичики», т.е. блоки с текстово-графической информацией.

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

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

Это простейший прототип сайта, выполненный в «Google Формах»
Это простейший прототип сайта, выполненный в «Google Формах»

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

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

Это одна из моих пробных работ в Figma. Прототип страницы блога Толи-баскетболиста
Это одна из моих пробных работ в Figma. Прототип страницы блога Толи-баскетболиста

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

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

Еще при создании структуры становится более-менее ясным, какой контент будет нужен сайту:

  • тексты (они нужны везде и всегда);
  • графика (фотографии, рисунки);
  • инфографика;
  • аудио и видео и т. п.

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

В идеале контент предоставляет заказчик, но в реальности дизайнер может долго и упорно его компоновать так, чтобы с ним не конфликтовала дизайн-концепция. Ему же надо (а не просто рекомендуется) рассказать заказчику, что и как должно быть размещено на каждой прототипируемой странице.

Лучше всего будет вариант, когда дизайнер подготовит документ, где отразит, какой формат контент и в каких объемах ему необходим.

6. Работаем с пользовательским интерфейсом

Итак, прототип сделан. Надо начинать работу с UI:

  1. Подобрать шрифты и цветовую гамму для текстов исходя из предпочтений представителей целевой аудитории. Хорошо, если у заказчике есть брендбук, где будут указаны все кегли, шрифтовые семейства и варианты их оформления. Но если компания маленькая, дизайнер должен полагаться на свой вкус и профессионализм.
  2. Создание базового набора элементов сайта, куда входят поисковые строки, строки ввода, кнопки и иконки.
  3. Оформление механик общения пользователей с интерфейсом. Учитываются макро- и микровзаимодействия, а также анимация элементов до и после совершения с ними целевых действий. Это может быть, например, изменение цвета кнопок и контуров форм.
Дизайнер приводит всю систему в действие: крутани один «вентиль» и закрутятся остальные
Дизайнер приводит всю систему в действие: крутани один «вентиль» и закрутятся остальные

Дизайн сайта на заре Рунета года не похож (мы надеемся!!!) на его же дизайн в 2022 году, потому что тренды не стоят на месте.

Главная страница «Яндекса» в 1997 году. Найдите 100 500 отличий за прошедшие 25 лет!
Главная страница «Яндекса» в 1997 году. Найдите 100 500 отличий за прошедшие 25 лет!

Между тем, всегда на первом месте стоит удобство ЦА и ее привычки. Едва ли суровые мужчины, истинные дровосеки, желающие купить средство по уходу за бородой, будут рады такому фону онлайн-барбершопа:

Где пролили ваниль и слёзы…
Где пролили ваниль и слёзы…

7. Тестируем

Сверстанный сайт переносится на тестовый домен, где проверяется удобство взаимодействия с интерфейсом, выявляются ошибки и тестируется обратная связь. Как правило, из числа целевых пользователей формируется фокус-группа. Если денег на это нет, этап пропускается, но как последствие такого решения будет снижение качества сайта или мобильного приложения. Все просто: даже у специалиста экстра-класса от мира веб-дизайна есть профдеформация, и он не сможет предусмотреть и предсказать все пути взаимодействия ЦА с сайтом.

Как-то так…
Как-то так…

Как правило, процесс тестирования делается в двух вариантах:

  1. Пользователи достигают определенных задач, которые в итоге приводят их к совершению целевых действий. Далее им дается анкета, где отмечается степень легкости, с какой они смогли решить ту или иную задачу, какие сложности у них возникли и что бы они предложили в плане улучшения сайта.
  2. Представители фокус-группы получают аналогичный пул задач, но компьютеры, на которых они их достигают, будут иметь установлено ПО для мониторинга пользовательского поведения: жесты мышью и eye-tracking. Программа фиксирует приоритетные области пользовательского внимания, специфику их взаимодействия с интерфейсом, встречающиеся сложности и способы их преодоления.
Здесь вас ждут незабываемые 6 часов пользовательского тестирования!

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

Так можно оценивать рост, плато или снижение конверсии, самые популярные страницы, какие трудности остались и какие вновь появились. Это значит, что UX-UI-дизайнер должен оставаться на «короткой ноге» с клиентом.

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

Стык пользовательского опыта и интерфейса продолжает оставаться в трендах диджитал-профессий. Компании зовут в штат не только дизайнеров в этой области, но и писателей и даже редакторов!

При этом конкуренция в виду своей сложности остается на низком уровне.

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

Инструментарий

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

Если же мы имеем дело со специалистом-новичком в дизайнерском мире, ему нужно обязательно освоить такие программы как:

  • Figma ― для создания прототипов страниц и выстраивания системы их взаимодействия;
Даже текстописцам эта программа весьма полезна. Хотя бы для написания этой статьи!
Даже текстописцам эта программа весьма полезна. Хотя бы для написания этой статьи!
  • Adobe Photoshop ― для создания комплексных растровых изображений.
Это то, что нужно изучать сразу же после овладения Paint. Личное мнение, не более ;)
Это то, что нужно изучать сразу же после овладения Paint. Личное мнение, не более ;)
  • Adobe Photoshop Lightroom ― для обработки фото и их последующей вставки в макеты.
Чтобы потом пинать балду, как мужчина на изображении, сначала надо освоить программу
Чтобы потом пинать балду, как мужчина на изображении, сначала надо освоить программу
  • Adobe After Effects ― для создания визуальных эффектов на сайте.
Главное — не переборщить с анимацией, чтобы страницы грузились быстро
Главное — не переборщить с анимацией, чтобы страницы грузились быстро

Hard skills UX/UI-дизайнера

Как мы уже говорили, в нагрузку к основным навыкам пойдут познания в таких областях как:

  • Классический и интернет-маркетинг — умение находить и составлять портреты ЦА, выявлять и показывать на сайте УТП, проводить конкурентный анализ и знать, как в наиболее выгодном свете подать товар или услугу через дизайн.
  • Веб-аналитика и аналитика владение инструментарием для анализа ЦА и построением карты пользовательских путешествий.
  • Психология — знание схем принятия пользователями решений и механизмов их восприятия интерфейса.
  • Насмотренность — умение видеть закономерности в визуальной части и использовать личные находки в построении интерфейсов.
  • Вёрстка — для адекватного общения заказчиком при отправке ему макета сайта.

По опыту работы в веб-студии знаю, что верстальщик — это тот самый человек, который способен спустить веб-дизайнера на землю и направить его в русло практически реализуемого UI.

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

Если поискать в Рунете по запросу “UX дизай обучение”, вы найдете не один профильный онлайн курс как на платной, так и на бесплатной основе.

Есть даже видео на YouTube!
Есть даже видео на YouTube!

Для совсем начинающих оптимальной будет платное обучение — потому что в этом случае с ними системно и планомерно будут заниматься преподаватели-практики, проверять их домашние задания и давать (это самое главное!) обратную связь. Кроме того, на на курсах можно общаться с другими обучающимися, заводить полезные знакомства и обмениваться знаниями.

Только так, а не иначе!
Только так, а не иначе!

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

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

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

Книги по UX/UI

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

  1. Дженнифер Нидерст Роббинс. «Веб-дизайн для начинающих. HTML, CSS, JavaScript и веб-графика».
  2. Дональд Норман. «Дизайн привычных вещей».
  3. Ян В. Уайт. «Редактируем дизайном. Классическое руководство: как завоевать внимание читателей».
  4. Артемий Лебедев. «Ководство. Пятое издание».
  5. Алан Купер. «Интерфейс. Основы проектирования взаимодействия».
  6. Алан Купер. «Психбольница в руках пациентов».
  7. Стив Круг. «Не заставляйте меня думать».
  8. Джон Яблонски. «Законы UX-дизайна. Понимание психологии пользователя — ключ к успеху»
  9. Аарон Уолтер. «Эмоциональный веб-дизайн»
  10. Джанда Майкл. «Сожги свое портфолио».
  11. Ян Чихольд. «Новая типографика. Руководство для современного дизайнера».

Помимо этих книг, можно также прочитать издания по смежным областям, например:

  1. Максим Ильяхов и Людмила Сарычева. «Пиши, сокращай».
  2. Роберт Чалдини. «Психология влияния».
  3. Георгий Челпанов. «Учебник логики».

Также рекомендую Telegram-каналы:

  • UX Horn — https://t.me/uxhorn.
  • UX Notes — https://t.me/uxnotes.
  • «Редач» — https://t.me/redachredach.

И группы во «ВКонтакте»:

UI/UX DESIGN professional — https://vk.com/ui_ux_design.

«Я — дизайнер продуктов» — https://vk.com/pdigest.

«Infogra.ru — Лучшее для дизайнера» — https://vk.com/infographics.

Где искать клиентов дизайнеру интерфейсов

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

  1. Сайты вакансий. Самый популярный — HH.RU:
  2. Обещанные ЗП радуют глаз и будоражат воображение!
    Обещанные ЗП радуют глаз и будоражат воображение!
  3. Профильные паблики в соцсетях. Работу ищут и предлагают, как правило, не в постах, а в ветках обсуждений.
  4. Наши руки — не для скуки!
    Наши руки — не для скуки!
  5. Разделы вакансий различных интернет-изданий ― например, «Хабра».
И тут есть хорошие предложения!
И тут есть хорошие предложения!

Заключение

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

Норм!
Норм!

А не так:

Концептуально, но совсем не норм!
Концептуально, но совсем не норм!

Создаем сайты с красивым дизайном и продуманным интерфейсом

Оценить статью
3 ответов

Комментарии 1

Bill Watzmanescu Bill Watzmanescu
Написать комментарий
Создать грамотный интерфейс это искусство. Спасибо за подборку книг!
Ответить
Написать комментарий
Популярные статьи автора
Узнайте стоимость продвижения сейчас
Выберите удобный способ связи:
Выберите удобный способ связи:
Введите Ваш номер телефона:
Введите адрес Вашего сайта:
Введите Ваше имя:
Нажимая кнопку «Получить предложение» вы соглашаетесь с Политикой конфиденциальности.
Введите Ваш Email:
Введите адрес Вашего сайта:
Введите Ваше имя:
Нажимая кнопку «Получить предложение» вы соглашаетесь с Политикой конфиденциальности.
Оперативно отвечаем в рабочее время: с 10:00 до 19:00
Оперативно отвечаем в рабочее время: с 10:00 до 19:00
Вы уже проголосовали
Возьмем ТОП вместе?
Здравствуйте, меня зовут
,
я представляю компанию
.
Со мной можно связаться по телефону
Со мной можно связаться по тел.
,
или по email
ник в телеграм
Спасибо!
Нажимая кнопку «Оставить заявку» вы соглашаетесь с Политикой конфиденциальности.
Цена лидов в различных нишах
Тематика Стоимость лида (Москва/Россия)
Отдых 500
Мебель 350
Оборудование 500
Бансковские услуги 500
Безопасность 500
Организация мероприятий, концерты, праздники 500
Недвижимость 500
Строительство и отделка 500
Грузоперевозки 500
Доставка еды 350
Юридические услуги 500
Бухгалтерские услуги 500
Пластиковые окна 500
Детские товары 350
Автозапчасти 350
Образование 500
Возьмем ТОП вместе?
Здравствуйте, меня зовут
,
У меня есть сайт
.
Со мной можно связаться по телефону
Со мной можно связаться по тел.
,
или по email
ник в телеграм
Спасибо!
Нажимая кнопку «Оставить заявку» вы соглашаетесь с Политикой конфиденциальности.
Оставить заявку сейчас
Ваше имя*
Введите адрес Вашего сайта:*
Введите Ваш номер телефона:*
Введите Ваш e-mail:*
Введите Ваш ник в телеграм:
Выберите интересующую услугу *
Нажимая кнопку «Оставить заявку» вы соглашаетесь с Политикой конфиденциальности.
Подпишитесь на рассылку
Не пропустите самое интересное из мира SEO и Digital. Только актуальные и самые крутые статьи.
Заявка успешно отправлена!
Наши сотрудники уже приступили к анализу Вашего сайта. Наш менеджер свяжется с вами в течение дня, спасибо!