Сучасна диджитал-освіта для дітей — безоплатне заняття в GoITeens ×
Mazda CX 30
×

Этапы дизайн-процесса: как создать продукт, который решит проблемы пользователей и удовлетворит запрос клиента

Выбирай тренды на Dribbble. Выбирай скевоморфизм и глассоморфизм. Выбирай красивые анимации, безумные шрифты, ироничные иллюстрации и 3D-иконки. Выбирай тени и градиенты. Создай свой первый проект на Behance. Однако какой в этом смысл, если ваш интерфейс остается неудобным для пользователей, а сам продукт не решает никаких реальных проблем?

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

Меня зовут Дима Дытюк, я Head of Design в Techstack. За 6 лет работы дизайнером я видел немало примеров того, как плохо налаженный дизайн-процесс вредит качеству продукта. В этой статье я решил рассказать начинающим дизайнерам о том, как можно наладить эффективное взаимодействие с командой и клиентом, чтобы вместе создать успешный продукт.

Дизайн-процесс: пошаговое руководство

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

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

Шаг 1. Погружение в идею

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

Шаг 2. Исследование

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

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

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

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

Самые популярные методы UX-исследований 一 интервью, фокус-группы, этнографические исследования, опросы, сортировка карточек, юзабилити-тестирование, A/B-тестирование.

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

Когда команда создает продукт для конкурентного рынка, помимо анализа самих пользователей, следует проанализировать те решения, которые предлагаются конкурентами. Это не даст вам заново изобрести велосипед, но поможет учесть уже существующий опыт и предложить клиентам более полезный и качественный функционал. Помните закон Якоба Нильсена: «Пользователи проводят большую часть своего времени на других веб-сайтах, а не на вашем». Учитывайте совокупный опыт взаимодействия ваших пользователей с другими продуктами и постарайтесь использовать знакомые им UX-паттерны. Тогда пользователи сразу поймут, как работает ваш продукт, и смогут сосредоточиться на его использовании.

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

Шаг 3. Проектирование

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

Составьте пользовательские истории

Опираясь на результаты исследований, выделите несколько основных групп пользователей. Например, представьте сайт для аренды недвижимости. Среди пользователей этого сайта можно выделить две основные группы: тех, кто сдает недвижимость в аренду, и тех, кто хочет ее снять. После этого составьте пользовательские истории 一 короткие утверждения, описывающие, в чем нуждается та или иная группа пользователей. Например, история для пользователя, который хочет снять дом, может звучать следующим образом: «Как пользователь сайта для аренды недвижимости, я хочу снять дом у озера, чтобы провести там выходные с семьей».

Постройте юзер-флоу

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

Создайте вайрфреймы

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

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

Шаг 4. UI-дизайн

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

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

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

Шаг 5. Юзабилити-тестирование

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

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

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

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

Шаг 6. Разработка продукта

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

Мы используем Figma. C его помощью разработчики могут:

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

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

Шаг 7. Аналитика и улучшения

После завершения разработки и релиза все только начинается. C этого момента вы и ваша команда будете непрерывно работать над улучшением продукта. Основным инструментом на этом этапе является аналитика, собирающая данные о взаимодействии пользователей с продуктом. Например, можно посмотреть Bounce Rate и узнать процент пользователей, которые покинули сайт, посмотрев только одну его страницу. Или отследить среднее время (AVG time on page), которое пользователь проводит на странице, а затем узнать, сколько пользователей (the number of targeted actions) достигли финальной точки в своем пути по продукту. Используйте эту информацию для того, чтобы обнаружить слабые места в интерфейсе, сформулируйте новые гипотезы о проблемах и их решениях, проверьте их с помощью исследований и делайте ваш продукт еще лучше.

Дизайн-процесс in a nutshell

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

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

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

👍ПодобаєтьсяСподобалось5
До обраногоВ обраному4
LinkedIn
Дозволені теги: blockquote, a, pre, code, ul, ol, li, b, i, del.
Ctrl + Enter
Дозволені теги: blockquote, a, pre, code, ul, ol, li, b, i, del.
Ctrl + Enter

Дякую! просто й дуже зрозуміло

Очень доступна и полезная статья🙌 поделитесь с какими тулзами для аналитики приходилось работать, какие наиболее удобные?

Спасибо 😌

Для продуктовой аналитики используем Google Tag Manager + Amplitude

Два останні пункти забув:
Шаг 8. ?????????
Шаг 9. PROFIT!!!

8. Получить финансирование от инвесторов

Підписатись на коментарі