Если ты дизайнер, и на очередном собеседовании тебе еще не просили рассказать про твой "Идеальный процесс работы на этапе создания продукта", то спешу тебя порадовать – Все впереди :)
Когда я только начинала щупать веб, и только-только делала первые шаги в UI, я понятия не имела, что на это нужно отвечать, и каков мой "Идеальный процесс".
Может идеальный процесс, это когда пришел мистер скрам-мастер, поставил тебе задачи, а ты вовремя их закрыл.:) Я описывала идеальный процесс исходя из текущего опыта и не понимала как могут разные этапы работы повлиять на качество продукта.
Например, если у тебя совсем мало опыта и ты работаешь в небольшой студии в роли единственного дизайнера или ты фриланс-специалист без опыта в проф коммерческой разработки – то какой идеальный процесс может быть у тебя? Что важно, а на что можно вообще закрыть глаза и не вспоминать пока не придет время.
Со временем, когда опыт на боевых проектах накапливается, ты изучаешь больше литературы, общаешься с коллегами по дизайну, читаешь статьи, посещаешь хакатоны и конференции – ты уже можешь точечно и под задачу выстраивать свой процесс.
Да, я хочу сказать, что нет прям супер универсального правила, и не все этапы соблюдаются, и денег у заказчика нету, и команда не укомплектована хорошо, и бизнес-задачи другие сейчас и тд и тп.
Но я для себя выделила некоторые шаги, которыми пользуюсь при проектировании практически любого нового продукта. Конечно же, каждый этап можно дополнять, добавлять больше исследований, ресерча на свой вкус, но последовательность шагов остается неизменной, пока что. Может быть там в будущем и правда этапы будут сокращаться, и тогда мы сможем прожить опыт нашего пользователя натурально, надев очки, и полностью погрузившись в виртуальный мир какого-то Васи Иванова, который любит чтобы цвет приложения был розовый (ну это мы так считаем). Или же все будут делать аналитики больших данных, и исходя из этой информации будет создаваться продукт, без дополнительного ресерча.
Итак, вообще для чего нужна последовательность в проектировании? Я бы привела аналогию с замешиванием теста. Есть много нюансов, которые нужно делать последовательно, не перемешивая процессы, иначе тесто получится не пригодным для наших самых красивых и вкусных синабонов. С этапами работы все так же. Ты не можешь отрисовать дизайн, а потом искать пользователей. Твоя работа окажется бесполезной и не удовлетворит конечного потребителя. Здесь я расскажу про каждый этап и какие лучше применять исследования, фреймворки и методологии.
Шаг 1. Исследования
Заполнение Брифа
В начале пути тебя ждет несколько непонятных на первый взгляд встреч. На тебя будет сыпаться поток информации, старайся использовать диктофон чтобы не потерять себя в нем. После встречи анализируй запись, и выявляй самые важные аспекты.
Сбор данных о пользователях
В данной точке ты изучаешь всю информацию о пользователях. Узнаешь какой он, его болевые точки, составляешь его портрет и карту эмпатии. Здесь дизайнеры-проектировщики планирует какие исследования будут использовать.
При создании пользовательских карт хорошо использовать как качественные, так и количественные исследования. Опросы, где можно собрать демографические данные использовав закрытые вопросы. Открытые вопросы чтобы узнать о глубинных проблемах пользователя, наблюдения, интервью, полевые исследования, конкурентный анализ.
Также используются вторичные методы. Это могут быть отзывы о другом продукте, или исследовательские публикации по какой-то интересующей тебя проблеме. Это недорогой способ получить данные чтобы заложить основу для ваших первичных исследований.
Для создания карт эмпатии нужно ответить на четыре вопроса: что пользователь говорит, думает, делает и чувствует. Подробнее об этом фрейморвке можно ознакомиться в статье Нильсон и Норман групп «Карты эмпатии»
У меня так же есть подробная статья про Бюджетные исследования тыкай тут должно быть интересно.
Шаг 2. Портрет и постановка задач пользователя
В формировании портрета пользователя нет ничего сложного. Из собранных данных мы создаем вымышленного персонажа и наделяем его качествами и потребностями, которые выяснились в ходе ресерча. Пользователи бывает первичные, вторичные и третичные. Первичные это те, на кого нацелен наш продукт. Например: покупатель соленьев в магазине. Вторичные – менее заинтересованы. Это магазины в которых продаются соленья. Третичные – почти не заинтересованы. Это дистрибьютеры, импортеры.
Теперь давайте разберемся с поиском проблемы. Есть отличная методика 6ти вопросов: кто, что, где, когда, почему и как?
Кто: имя персонажа и чем занимается;
Что: вы хотите предложить пользователю чтобы решить его проблемы;
Где: находится пользователь когда использует продукт (это про физический контекст);
Когда: возникает проблема (может после долгого взаимодействия, а может в момент использования);
Почему: и как проблема влияет на жизнь пользователя;
Как: пользователи достигают своих целей используя продукт.
С помощью этих ответов сформируй задачу отвечая на вопросы:
Кто – Арсений менеджер
Что ему нужно? Быстрый поиск надежных догситеров для его собак.
Почему – он много работает и не успевает ухаживать за собаками.
Изучи эту статью на medium для большего понимания.
Шаг 3. Поиск и генерация идей
На этом этапе будем пользоваться техникой Дизайн-мышление. Нужно выбрать, что ты возьмешь в работу, для этого нужно собрать все приходящие инсайты в момент ресерча на доске. В рамках дизайн-мышления используют фреймворк How Might We (как мы могли бы). Это стимулирует творчество и дает возможность думать о проблеме с разных сторон. Методика помогает создать большой спектр решений пользовательской проблемы. Идея тавтологирует нам свой смысл: генерируем решения проблемы. Подробное применение этого фреймворка описано в статье Нильсон и Норман групп «Как мы могли бы»
Для поиска решения проблемы для дизайна экрана или для отображения фильтра, для расположения блоков и для многих других вопросов, отлично использовать методику Crazy Eights (безумные восьмерки). Возьми лист бумаги и сложи его сначала на две части, потом на четыре, и на восемь. Разверни, и у тебя получится 8 ячеек для твоих безумных идей. Для каждой идеи засеки по 1 минуте. По истечению 8 минут у тебя есть восемь сумасшедших идей, среди которых может попасться что-то сочное. Посмотри эту статью на medium
Не забывай про конкурентный анализ. Это вообще отличный способ оценить все стороны твоих конкурентов и выбрать самые эффективные стратегии. Посмотри эту замечательную статью
Собрав все артефакты на доску, проведи голосование и выбери самые "the best ideas", а после размести на стену идей. Ну а далее уже можно приступать к детальной проработке.
Шаг 4. Прототип и тестирование
Варфреймы
Стоит начать с проработки низкочастотного прототипа Wireframing. Напомню, что такой прототип можно рисовать на бумаге, и необязательно тратить на него время работая в каком-то софте. Набросай свои идеи на листе бумаге и можешь смело тестировать свои гипотезы на коллегах или на реальных пользователях.
На этом этапе хорошо подходит для тестирования карточная сортировка. Например, если архитектура твоего сайта очень сложная, и у тебя (допустим) уже есть понимание как лучше расположить навигацию, необходимо все-таки проверить ментальную модель твоего пользователя. Проведи исследование с помощью карточной сортировки. Отличная статья на моем любимом сайте
Юзер флоу
Если ты разрабатываешь большой высоконагруженный сервис – обязательно потрать время на проработку юзер флоу. Так ты сможешь выявить слабые места, и понять, что нужно улучшить или подкрутить. Потрясающий пользовательский опыт достигается пользователем когда она выполняет задачи естественным образом и без потери времени.
Навигационная схема
В этот момент создается Навигационная система или архитектура сайта. Если ты работаешь в стартапе, чаще всего все описанные действия выполняет дизайнер. Работа в крупных компаниях сужает твою роль, и проектированием архитектуры будет заниматься более узконаправленный специалист. Замечу, что это не тоже самое что юзер флоу. Юзер флоу это сценарий который выполняет пользователь, а навигационная архитектура ориентирована на цели пользователя и распределение когнитивной нагрузки. Существуют иерархические, последовательные и матричные структуры ознакомься с ними в этой замечательной статье, если еще не.
Прототип
Создание кликабельных прототипов, как возможность проверить гипотезы и понять насколько успешно пользователь справляется с задачей. Перед тестированием необходимо заранее подготовить сценарий тестирования и определиться какой функционал будет проверяться. Существует множество различных способов тестирования прототипа. Лабораторное тестирование в лаборатории (прости за тавтологию) – в таких тестированиях часто используют трекер глаз, отслеживают движение глаз совместно с записью экрана и камерами наблюдениями. Модератор дополняет своими заметками и направляет ход тестирования. Немодерируемое удаленное тестирование – проводится без модератора, в среде пользователя. Участник выполняет задания естественным для себя образом. Контекстное интервью – метод помогает команде получить информацию о реальном опыте. Сначала пользователю задают вопросы об опыте работы с продуктом, затем наблюдают как он работает в своей среде.
После тестирования создается диаграмма сходства. Она поможет тебя упорядочить данные из исследований. Размести цитаты участников на стикеры и рассортируй их по группам. Это помогает выявить новые творческие способы решения проблемы пользователей.
Определись какими тестовыми метриками ты будешь пользоваться. Насколько хорошо пользователь справлялся с задачами, где происходили ошибки. Изучи заметки и опросы, и выяви самые распространенные ошибки с которыми предстоит работать. Есть удобное тестирование по шкале SUS. Участники оценивают 10 пунктов от полностью согласен до совершенно несогласен и подсчитывается общий балл, подробнее об этих метриках можно почитать в этой статье
Шаг 5. Создание макетов и тестирование
После того, как ты получил ценную обратную связь, ты готов создать супер-удобный продукт для твоих пользователей. На этом этапе UI/UX дизайнеры создают потрясающие красивые интерфейсы. Происходит создание дизайна страниц, написание библиотек компонентов. Стоит помнить, что нельзя пренебрегать законами UX. Тестируй свой дизайн на принципы, эвристику, когнитивные эффекты и гештальт. Ранее я писала об этом ты можешь ознакомиться с серией моих статей, и дополнительно прочти статью Нильсон и Норман групп. И теперь ты готов отдать в разработку свой потрясающий дизайн. Не расставайся со своим макетом после того как отдал его в разработку. Не покидай своего друга, ведь очень много интересного может произойти без тебя, будь рядом.
И вот ты прошел все шаги, твой продукт вышел в прод, и что же тебя ждет дальше? Правильно! Снова начинается цикл тестирования, выявление пробелов и создание лучшего пользовательского опыта. Хорошо в момент после тестирования начать вести карту CJM. Она отлично помогает выявлять пользовательские боли и маленькие нюансы, которые возможно были не учтены. Ты отслеживаешь эмоции пользователей на каждом этапе взаимодействия с продуктом, это поможет тебе улучшать его каждый раз когда ты наполняешь новыми данными карту CJM. Ну и еще ссылка на супер статью.
Процесс разработки на этом этапе не закончен, ты всегда на страже лучшего опыта для своего пользователя, потому что тестирование, подсчет метрик и улучшение продукта не заканчиваются. Мы как профессионалы стремимся создать лучший опыт для клиента, поэтому не стоит останавливаться на этом, ведь технологии стремительно развиваются совместно с твоим продуктом.
