UX/UI Design with mentor

Введение в Digital Product Design и UX Design

Вступительный урок
1
Продуктовое мышление
2
Психология креативности
3
Процесс проектирования
1. Продуктовое мышление
Фундаментальное различие между веб-дизайнером и продуктовым дизайнером — это масштабное мышление. Веб-дизайнер просто «рисует» красивые сайты, а продуктовый дизайнер создаёт продукт, который решает конкретные задачи конкретных пользователей, и приносит доход бизнесу.
Цифровой продукт, будь это сайт, веб-сервис или мобильное приложение, помогает пользователю решить конкретную задачу и достичь определенной цели. За это пользователь готов платить деньги бизнесу, который и предлагает решение. И чем эффективнее продукт решает задачу тем больше пользователей у этого продукта. Поэтому дизайнеру нужно сместить фокус с "рисования красивых экранов" на проектирование продукта, который решает конкретные задачи.
Александр Волошин
Автор и ментор курса
Немного теории об информационных слоях, из которых состоит цифровой продукт. Это поможет тебе понять, каким образом можно сложную задачу превратить в набор более простых и загрузить все это в мозг, который, в свою очередь, выдаст нужное решение. Для себя я определил, что любой цифровой продукт состоит из трех информационных уровней.
  1. Дизайн продукта — на этом уровне содержится основная информация о продукте: какую услугу предоставляет продукт, какие проблемы пользователей решает каким образом, кто пользователи, какие используются технологии. Это ядро продукта, его уникальность, то, что определяет его ценность.
  2. Дизайн взаимодействия — на этом уровне основная информация превращается конкретное решение, в элементы интерфейса, паттерны и экраны, навигацию, подачу информации и т. д. Этот уровень определяет удобство работы с продуктом.
  3. Дизайн графического интерфейса — это уровень визуального и эмоционального восприятия продукта, его графическая оболочка. Это уровень, который видят пользователи и с которым они взаимодействуют.
Пример
Возьмем, для примера, популярный сервис по поиску жилья Airbnb.com и разложим его на три уровня.
Дизайн продукта
Сервис помогает путешественникам искать и бронировать жильё с доступной ценой по всему миру. Для поиска и бронирования жилья можно использовать сайт и мобильное приложение.

Целевая аудитория: люди, которые любят планировать путешествия самостоятельно и используют для этого Интернет и смартфон.
Дизайн взаимодействия
Опишу основной сценарий взаимодействия пользователя с продуктом с помощью сайта (взаимодействие с мобильным приложением опущу):

  1. Пользователь вводит название места, которое он хочет посетить, выбирает даты, когда он планирует там быть, вводит количество гостей и хочет увидеть доступные варианты жилья.
  2. Сервис выдает результат, в котором пользователь видит изображение жилья и стоимость за сутки пребывания.
  3. Пользователь выбирает заинтересовавший его вариант и переходит к детальному описанию, в котором он может посмотреть фотографии жилья, узнать об условиях проживания и предоставляемых удобствах, может почитать отзывы.
  4. Когда пользователь находит подходящий для себя вариант, он оплачивает проживание картой и получает подтверждение оплаты.
  5. Пользователь так же может связаться с хозяином жилья и уточнить нужные детали.
Дизайн графического интерфейса
Покажу основные экраны сервиса, которые отображают описанные выше сценарии. Если описать в целом: оформление достаточно простое, легкое, и не отвлекает от контента.
Итерации и жизнь продукта
Работа над продуктом разбита на итерации. Первая итерация всегда начинается с исследований и заканчивается выпуском первой версии продукта. В стартапах это так называемый минимально-жизнеспособный продукт (MVP от англ. Minimum Viable Product), который позволяет без больших затрат проверить гипотезу и получить обратную связь от пользователей.
После выпуска первой версии продукта все этапы повторяются, то есть проводится анализ результата, определяются проблемы, генерируются идеи, выбирается решение, создаются прототипы, проводится пользовательское тестирование, после чего идет реализация и выпуск следующей версии продукта, и так до бесконечности..
Если продукт оказывается успешным он, как правило, усложняется и разбивается на части, то есть подпродукты. В таком случае, все те же итерации повторяются для каждого подпродукта отдельно.
Таким образом, цифровой продукт можно рассматривать как живой организм, который постоянно хочет расти и развиваться. У него тоже есть свои этапы развития, так называемые стадии жизненного цикла продукта:
  • детство (рождение и выведение на рынок);
  • юность (интенсивный рост прибыли и объема продаж);
  • зрелость (пик продаж, наибольшее количество пользователей);
  • старость (падение уровня прибыли и популярности);
  • смерть (закрытие проекта).
Да, продукты умирают и на смену им приходят другие. У Гугла даже есть целое кладбище закрытых проектов.
2. Психология креативности и дизайн-мышление
В школе не рассказывают о невидимых процессах, которые лежат в основе креативности и работы, связанной с решением задачи. И кажется, что не каждому человеку дано быть "креативным"... но это далеко не так. По сути, главное разобраться в глубинных процессах, а понимание этих фундаментальных процессов и является залогом построения правильного рабочего процесса и получения нужных результатов. И для этого не нужно обладать неким талантом.

В литературе по психологии я нашел описание процесса целенаправленного мышления, который состоит из 4-х этапов, вот эти этапы:

  1. Сначала озадаченность и формирование соответствующей доминанты на проблеме (ситуации).
  2. Загрузка интеллектуальных объектов, имеющих отношение к проблеме (ситуации).
  3. Сбор дополнительных фактов.
  4. Последующая проверка возникшей в вашем мозгу реконструкции конкретной реальностью, то есть конкретные действия.

В книге Джеймса Вебб Янга "Техника рождения идей" автор описывает простейший процесс, с помощью которого производятся на свет идеи:

  1. Сбор сырой информации, включая как непосредственные материалы по теме, так и любые другие из вашего багажа общих знаний.
  2. Сортировка и обработка материала в голове.
  3. Инкубационный период, когда вы даете подсознанию возможность заняться анализом (важно, нужно забыть на время о задаче).
  4. Непосредственное рождение идеи — этап "Эврика!"
  5. Окончательное формирование и доработка идеи для ее практического применения в реальной жизни.
Особо хочу отметить, что заставлять мозг работать, когда для этой работы нет достаточного материала, – всё равно, что перегревать мотор. Кроме того, нужно мозгу дать время для обработки информации. Время это нужно для того, чтобы образовались новые нейронные связи, а на это нужно время.
Александр Волошин
Автор и ментор курса
В каком то смысле дизайнер похож на ребенка, который играет с информацией как с кубиками (интеллектуальные объекты) и комбинируя эти кубики творит из них нечто совершенно новое.
Дизайн-мышление
Дизайн-мышление – это такая методология решения проблем в условиях неопределенности и работы с нестандартными задачами. Ценность методологии заключается в том, что она заточена на работу с "неявным знанием" потребителя, который не в состоянии осознать и вербализировать свои проблемы и потребности, а также помогает находить инновационные решения. Это тот случай, который описывал Генри Форд в своем знаменитом высказывании: "Если бы я спросил людей, чего они хотят, они бы попросили более быструю лошадь".

Апологетом дизайн-мышления является компания IDEO, которая специализируется на разработке инновационных продуктов для крупных компаний. Сама по себе методология представляет собой некий фреймворк, который можно подгонять под свои потребности и использовать в рамках своей предметной области. Для работы используются четыре базовых вопроса.
Что есть? Исследуется существующая реальность.

Что если? Представляется новое будущее, генерируются идеи.

Что цепляет? Делается определенный выбор из предложенных идей.

Что работает? Проводится тестирование и вывод продукта на рынок.

Классическая методология состоит из шести этапов: исследование, фокусировка на проблеме, генерация идей, выбор идеи, прототипирование, тестирование идеи. Процесс проектирования продукта заканчивается после успешного тестирования, а этап реализации входит в процесс разработки.
Проходя по этапам мы то расширяем поток информации, используя дивергентное мышление (лат. diverge - расходиться), то фокусируемся на самом важном, используя конвергентное мышление (лат. convergere - сходиться). Дивергентное мышление - это то же самое, что и рассеянное мышление; применяется, когда нужно придумать что-то новое, сгенерировать идеи. Конвергентное мышление - это сфокусированное мышление; применяется когда нужно сосредоточиться на какой-либо информации, проанализировать и изучить ее, принять решение. Коротко рассмотрим каждый этап.

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

Фокусировка на проблеме. После сбора информации определяем проблему, которую нужно решить, и фокусируемся на ней.

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

Выбор идеи. Анализируем идеи и выбираем ту которая должна решить проблему.

Прототип. На основе идеи разрабатываем несколько решений в виде прототипов, чем больше прототипов - тем лучше.

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

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

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

В процессе проектирования нужно всегда помнить о трех основных составляющих, которые лежат в основе любого цифрового продукта: бизнес-требования, пользовательские требования и используемые технологии. Именно из этих трех составляющих и получается хороший продукт, то есть UX (англ. User eXperience — пользовательский опыт взаимодействия). Любой правильно настроенный процесс должен помогать дизайнеру постоянно держать в фокусе эти составляющие, иначе есть большой риск заблудиться в информации и пойти не в том направлении. На первом этапе проектирования мы опираемся на эту информацию, поэтому так важно уделить процессу сбора информации особое внимание.
Как правило, клиент сам дает описание того, что он хочет получить, дает примеры на похожие продукты. Помимо этого он помогает понять, для кого этот продукт будет предназначен, то есть описывает портрет пользователя. Если клиент не может этого сделать, придется ему помочь, вы же дизайнер, и это ваша работа. Вся эта информация помогает дизайнеру сформировать бизнес- и пользовательские требования, что в свою очередь помогает понять какой результат ждет от него клиент. Перечень основных шагов, которые нужно пройти:

  1. Определить конечные цели и потребности бизнеса.
  2. Узнать кто конечный пользователь продукта, определить каковы его цели и потребности, с какими проблемами сталкивается сейчас и как он их решает.
  3. Описать персонаж пользователя на основе полученных данных и держать его перед глазами в течение всей работы над проектом.
  4. Изучить существующие технологии которые используются в данной предметной области.
  5. Изучить уже существующие решения и конкурентов.
  6. Проанализировать полученную информацию и сгенерировать идеи.
  7. Описать требования к будущему продукту.
  8. Описать будущий опыт работы с продуктом с помощью пользовательских сценариев и сторибордов. Нужно охватить все ключевые сценарии, должно быть понятно как работает продукт.
  9. При необходимости, составить диаграммы потоков задач опираясь на ключевые пользовательские сценарии.
  10. Сделать первые концептуальные наброски.
Рассмотрим основные этапы чуть подробнее.
Бизнес-требования, потребности и цели
Важно с самого начала проектирования понимать, каковы цели создания будущего продукта, какие потребности бизнеса он должен удовлетворить. Эту информацию дает клиент или его представитель, нужно получить от них максимум информации.
Исследования целевой аудитории
Чтобы лучше понимать потребности и проблемы целевой аудитории проводятся исследования в виде интервью, опросов, наблюдений за поведением. Одним словом, собираются качественные и количественные данные всеми возможными способами.
Customer Journey Map (CJM)
Это продвинутый инструмент для проведения исследований, который чаще всего применяется в сервис-дизайне. Этот инструмент помогает найти болевые точки на пути пользователя к своим целям.
Профиль пользователя
Профиль пользователя нужен для того, чтобы объединить все собранные данные в один документ и сфокусироваться на основных проблемах, и целях потенциальных пользователей продукта. Это документ, который помогает в процессе разработки сохранять верное направление и не уйти в сторону.
Требования к будущему продукту
Общие требования формируются из бизнес-требований, потребностей пользователей и технологических требований. После анализа этой информации проводится генерация и отбор идей. Требования помогают лучше понять, какой функционал и контент должен быть в будущем продукте.
Пользовательские сценарии
Со сценариев, собственно, и начинается проектирование будущего продукта, так как мы описываем, каким образом будет работать будущий продукт. Главное требование к сценариям: чтобы любой человек, их прочитавший, получил представление о том как будет работать будущий продукт, какую проблему решает, какую потребность удовлетворяет и каким образом.
(!) Контрольная точка
Первый этап формирует вполне объективные критерии оценки, по которым будет оцениваться конечный результат. В конце этого этапа на руках должен быть документ который описывает суть продукта, кто его пользователи, какую проблему он решает и каким образом.

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

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

  1. Определить технические ограничения, исходя из специфики продукта.
  2. Выявить и записать абсолютно все сценарии использования.
  3. Составить информационную структуру продукта (разбивка по экранам/страницам).
  4. Описать функционал и информационное наполнение для каждого экрана/страницы.
  5. Проработать несколько прототипов будущего продукта.
  6. Провести эвристическую оценку интерфейса.
  7. Провести пользовательское тестирование прототипа и внести правки.
  8. Составить карту навигации на основе сценариев и прототипа.
Рассмотрим основные этапы чуть подробнее.
Технические требования и ограничения
Нужно уточнить и описать технические требования и ограничения, проанализировать возможные проблемы и варианты их решений. Это делается до того, как дизайнер приступает к прототипированию интерфейса будущего продукта.
Сценарии, структура, функционал и наполнение
Выписать все возможные сценарии взаимодействия, сформировать структуру будущего продукта, описать функциональное и информационное наполнение для каждой страницы. Это дает полную картину, помогает на этапе прототипирования сфокусироваться только на подаче информации и проработке удобства взаимодействия, и совсем не думать, что же должно быть на каждом экране.
Первые наброски
Руками думать лучше и быстрее, по этому для начала накидай свои идеи карандашом на бумаге. Эти инструменты не ограничивают полет фантазии, в отличие от компьютера, и дают возможность быстро набросать большое количество вариантов, продумать их поведение, расставить акценты, показать свои идеи команде и обсудить.
Прототипирование интерфейса
После того, как у тебя появится ясная картина количества экранов и их содержимого, можно перейти к созданию прототипа. Прототип нужен для того, чтобы проверить идею, обсудить ее и протестировать, и чем больше вариантов, тем лучше.
Обсуждение, тестирование прототипа
Прототип обсуждается с клиентом и командой, проводится пользовательское тестирование, проверяются все гипотезы и, при необходимости, вносятся правки. Таким образом снижается количество ошибок и логических несоответствий в конечном продукте.
Карта навигации
Карта составляется после того, как проработаны все экраны интерфейса продукта. Она дает возможность увидеть общую картину и все связи, выявить недостающие экраны, помогает понять программистам как работает логика. Для больших и сложных проектов карта составляется для отдельных сценариев.
(!) Контрольная точка
Проработать несколько идей в виде прототипа и изменить их намного проще, и быстрее, чем править окончательный макет. По сути прототипы это черновики, большая часть из которых пойдет в мусорную корзину, и чем больше прототипов, тем лучше.

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

  1. Определить общее настроение, тон визуальной и текстовой коммуникации на основе исследований целевой аудитории.
  2. Проработать несколько вариантов графического оформления для ключевых экранов.
  3. Выбрать один вариант и проработать все экраны.
  4. Проработать эффекты и анимацию.
  5. Подготовить графику для вёрстки и руководство для программистов.
  6. Проверить результаты работы программистов.
Рассмотрим основные этапы чуть подробнее.
Графический интерфейс
Дизайнер прорабатывает графический интерфейс, по которому пользователи будут судить о продукте. Итогом этой работы являются макеты высокого разрешения с проработкой различных состояний элементов, анимации и т. д.
Эффекты, анимация
Когда проработаны все типовые экраны, дизайнер продумывает эффекты и анимацию элементов интерфейса. Самое главное на этом этапе сильно не увлечься и не переборщить c эффектами.
Графика, спецификации
После того, как проработаны все экраны, продуманы эффекты и анимация, дизайнеру остается подготовить графику для верстки, проработать состояния для всех интерактивных элементов и передать это все разработчикам (по запросу разработчиков).
(!) Контрольная точка
Для начала сделай несколько черновых вариантов основных экранов, которые позволяют понять идею, обсудите их с клиентом и командой. Нет необходимости прорабатывать все экраны сразу. При чем, эти варианты могут быть в виде набросков или кусков из разных проектов, главное быстро донести идею.

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

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

Отдельное спасибо за поддержку, нереальную мотивацию и вдохновение!

Богдан Головатый

UI/UX Designer

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

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

Спасибо за знания!

Александр Куренной
Product Designer

В первую очередь данный тренинг научил меня выстраивать систематический рабочий процесс. Четкий алгоритм работы помогает не потеряться в большом потоке информации, а собрать все в единый пазл + ты постоянно находишься в рабочем процессе, совмещая теорию и практику, уделяя 2−3 часа в день, что позволяет не тонуть в материале.

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

Стоимость обучения
$390
Приступить к обучению возможно в любое время, оплату можно разбить на две равные части.

В стоимость обучения с полной поддержкой ментора входят:

— доступ к онлайн-кабинету с видео-уроками и доп. материалами;

— подробная обратная связь от ментора по заданиям 5 дней в недлю в течение 6-ти недель;

— обратная связь по результатам обучения и рекомендации по дальнейшему развитию;

— сертификат.


Чтобы начать обучение свяжись с ментором тренинга в Телеграм.
UX Clan © 2016-2021
Образовательный проект
Александра Волошина
Киев, Украина
Контакты
+38 097 941-7655
voloshin78@gmail.com
Made on
Tilda