Создать идеальный пользовательский поток | Creative Bloq

Что такое поток пользователей? Визуально это немного похоже на танцевальный коврик. Правая нога здесь. Левая нога там. Теперь соберите их, включите и повторите. Не зная, как танцевать, вы все равно можете стоять на этом коврике и двигаться, ступая ногами в нужных местах в правильном порядке. Пользовательский поток — это просто так. Свободный, но скоординированный танец с вашим сайтом. Важно, чтобы вы знали, куда пойдет пользователь и в каком порядке этот танец будет успешным.

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

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

Что вам нужно для потока пользователя

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

Для этого вам понадобится следующее:

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

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

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

Желтые кирпичные дороги (YBR)
Какой идеальный путь для пользователей для перемещения между страницами, чтобы встретить оба бизнес и пользовательские цели? Чтобы получить их от точки входа до места назначения, ориентированного на результаты? По мере того как пользователи работают нелинейно, в какие крайние случаи могут попадать пользователи? Например, если ваш YBR — это целевая страница поста блога, которая переходит на страницу сервиса, а затем на страницу контактов, где могут потеряться некоторые пользователи? Некоторые пользователи в конечном итоге на странице о? Куда они идут оттуда? Составьте карту этих крайних случаев и того, как они отходят от ваших идеальных сценариев.

Вы можете извлечь последние две точки с помощью Google Analytics и функции обозревателя пользователей для отдельных путей потока пользователя или раздела «Поток пользователей», чтобы увидеть 10 000-футовое представление путей трендов для всех пользователей на сайт. С обоими стоит ознакомиться (см. Наши лучшие инструменты в посте Google Analytics).

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

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

• Легко распределяется и печатается. Это может показаться легкой задачей, но вы будете удивлены, как часто люди приносят распечатки для диаграмм, которые не читаются. Если на распечатке размером 8,5 x 11 дюймов слишком много шагов или слишком много текста, вы слишком усложняете ситуацию.
• Устраните разрыв в коммуникации между клиентами, заинтересованными сторонами, дизайнерами и разработчиками. Потоки показывают, как пользователь будет перемещаться и взаимодействовать с сайтом, переходящим между страницами. Это важно для того, чтобы дать каждому возможность объединить свое понимание, продвигаясь вперед.
• Продемонстрируйте пути к каждой приоритетной цели бизнеса и клиента, общие пути входа и оптимизированный путь YBR, который предлагает упущенные возможности. для ключевого контента. Для ясности, это не происходит в одном потоке. Это будет несколько автономных потоков.

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

Развернуть потоки пользователей в каркасы

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

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

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

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

Хорошая идея — начать рисовать на бумаге, на доске или каком-нибудь инструменте для рисования на планшетах

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

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

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

Как только эти грубые наброски будут выполнены, выберите один из ваших пользовательских потоков. Например, если идеальный путь — это целевая страница поста в блоге, по которой пользователь переходит на страницу сервиса, а затем на страницу контактов, протестируйте его с помощью каркасов. Посмотрите на целевую страницу поста в вашем блоге: как пользователь найдет страницу сервиса на основе вашей структуры? Это понятно? Это действительно приоритет на макете этой страницы или это просто еще одна ссылка, скрытая на боковой панели, в нижнем колонтитуле или в навигации?

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

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

Интерактивные прототипы

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

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

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

Другие могут предложить использовать Adobe XD, который гораздо более надежен в демонстрации интерактивных элементов дизайна, помимо переходов страниц. Это как если бы вы объединили Adobe Creative Suite (приобретите Adobe Creative Cloud здесь) с InVision как единый продукт. Вы можете создать свои каркасы, полные концепции дизайна и прототипы одним махом, если вы достаточно организованы. Важная часть заключается в соединении страниц для создания опыта, который кто-то может просмотреть и понять видение.

Важно установить ожидания

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

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

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

Эта статья была первоначально опубликована в выпуске 315 net самого популярного в мире журнала для веб-дизайнеров и разработчиков. Купите выпуск 315 здесь или подпишитесь здесь .

Похожие статьи: