Потребителски потоци: Какво представляват те и защо имат значение в дизайна на UX1 min read

Страхотният UX не започва с пиксели. Започва с разбиране какво се опитват да направят потребителите, къде въвеждат продукт, кои решения трябва да вземат и какъв път ги води до успешен резултат.

Този път се нарича a потребителски поток.

Потребителският поток е визуална карта на стъпките, които човек предприема чрез приложение, уебсайт или конкретна задача. Може да покаже цялостно изживяване с продукта, като влизане в приложение SaaS, или по-малък поток, като регистрация, резервиране на демонстрация, абониране за бюлетин или завършване на плащане.

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

В това ръководство ще обясним какво представляват потребителските потоци, как да ги четем, кога да ги създаваме и как поддържат по-добър UX дизайн.

Опитайте да проектирате потребителски потоци с AI

Опишете потребителския поток, който искате да проектирате, след което оставете Anima да го превърне в UX, екрани и код.

Какво е потребителски поток?

А потребителски поток е диаграма, която показва пътя, по който потребителят поема, за да постигне цел в рамките на даден продукт. В дизайна на UX този продукт обикновено е приложение, уебсайт, уеб приложение или цифрова услуга.

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

Потребителският поток може да представлява:

• Пълно продуктово пътуване, като откриване, регистрация и използване на ново приложение
• Една задача, като нулиране на парола или надграждане на план
• Поток от функции, като създаване на проект, покана на съотборник или експортиране на дизайн
• Поток на потребителския интерфейс, показващ как екраните се свързват вътре в продукта

Целта е проста: изчистете пътя на потребителя, преди да проектирате интерфейса в детайли.

Пример за основна структура на потребителския поток

Потребителски поток срещу поток на потребителски интерфейс

Условията потребителски поток и поток на потребителския интерфейс са тясно свързани.

Потребителският поток се фокусира върху пътя на потребителя към целта. Той отговаря на въпроси като:

• Откъде започва потребителят?
• Какво действие се опитват да изпълнят?
• Какви решения вземат по пътя си?
• Какво се случва, ако успеят, провалят се или поемат по различен път?

Потокът на потребителския интерфейс се фокусира по-конкретно върху това как се свързват екрани, състояния, бутони, формуляри и елементи на интерфейса. Той отговаря на въпроси като:

• Кой екран идва след този?
• Какво се случва, когато потребителят щракне върху този бутон?
• Къде води това състояние на грешка?
• Какво вижда потребителят след подаване на формуляра?

На практика UX екипите често използват и двете заедно. Потребителският поток определя пътя. Потокът на потребителския интерфейс прави този път конкретен вътре в продукта UI.

Как да четем потребителски поток

Потребителският поток описва стъпките, които потребителят предприема от входната точка до крайното взаимодействие. Всяка стъпка обикновено се представя от форма, наричана още възел. Възлите са свързани със стрелки, които показват посоката на движение.

Повечето диаграми на потребителски поток използват прост визуален език:

• Кръг или овал: Начална или крайна точка
• Правоъгълник: Екран, страница или действие
• Диамант: Точка за вземане на решение, като да/не, успех/провал или избор на път
• стрелка: Посока на движение между стъпките

Обяснени компоненти на потребителския поток

Например прост потребителски поток за регистрация може да изглежда така:

1. Потребителят попада на началната страница
2. Потребителят кликва върху „Стартирайте безплатно“
3. Потребителят въвежда имейл и парола
4. Системата проверява дали имейлът е валиден
5. Потребителят потвърждава акаунта
6. Потребителят достига екрана за включване
7. Потребителят завършва настройката
8. Потребителят попада в таблото за управление

Този вид пример за потребителски поток помага на екипа да разбере опита, преди да проектира всеки екран.

Примери за потребителски поток

Потребителските потоци стават по-лесни за разбиране, когато ги свържете с реални продуктови задачи. Ето няколко общи примера за потребителски поток, които екипите на UX създават по време на продуктовото планиране.

Потребителски поток при регистрация

Потокът на регистриран потребител показва как нов посетител става регистриран потребител.

1. Посетете целевата страница
2. Щракнете върху CTA за регистрация
3. Изберете метод за регистрация
4. Въведете подробности за акаунта
5. Потвърдете имейл
6. Завършете адаптирането
7. Достигнете таблото за управление на продукта

Този поток помага на екипите да намалят триенето при първото преживяване. Ако регистрацията има твърде много стъпки, неясни полета на формуляра или объркващи състояния на проверка, потребителите може да се откажат, преди изобщо да видят продукта.

Потребителски поток при плащане

Потребителският поток при плащане картографира как потребителят преминава от интерес към продукта към покупка.

1. Вижте страницата с продукти или цени
2. Добавете артикул или изберете план
3. Прегледайте детайлите на количката или плана
4. Въведете информация за плащане
5. Потвърдете покупката
6. Достигнете страница за успех или разписка

Този поток е особено важен за електронна търговия, SaaS и абонаментни продукти, тъй като всяка допълнителна стъпка може да повлияе на преобразуването.

Потребителски поток за нулиране на влизане и парола

Потокът на влизане картографира как връщащите се потребители имат достъп до акаунта си, включително крайни случаи.

1. Отворете страницата за вход
2. Въведете идентификационни данни
3. Системата валидира въведеното
4. Потребителят влиза успешно или вижда грешка
5. Ако е необходимо, потребителят започва нулиране на паролата
6. Потребителят потвърждава имейл
7. Потребителят задава нова парола
8. Потребителят се връща към продукта

Пример за потребителски поток за процес на влизане (поток на задача)

Включване на потребителски поток

Един потребителски поток на борда картографира как новите потребители достигат първия си успешен продукт.

1. Създаване на акаунт
2. Отговорете на въпроси за настройка
3. Изберете шаблон или начална точка
4. Завършете първото действие
5. Вижте състояние на успех
6. Продължете към продукта

За продукти с изкуствен интелект, инструменти за проектиране и приложения за производителност, потоците на включване са критични, защото потребителите трябва бързо да разберат какво да правят след това.

Кога да създадете потребителски поток

Създавайте потребителски потоци в началото на процеса на проектиране, в идеалния случай след първоначално проучване на потребителите и преди висококачествен UI дизайн.

На този етап потребителският поток ви помага:

• Решете кои екрани трябва да съществуват
• Премахнете ненужните стъпки
• Идентифицирайте объркващи точки за вземане на решения
• Подравнете екипа около структурата на продукта
• Планирайте прототипи по-бързо
• Избягвайте да проектирате полирани екрани за счупен път

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

С други думи, потребителските потоци не са само за нови продукти. Те също са полезни за подобряване на съществуващи продукти.

Ролята на потребителските потоци в дизайна на UX

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

Потребителските потоци помагат на екипите на UX да направят три важни неща.

1. Създайте по-интуитивен интерфейс

Ясният потребителски поток прави окончателния интерфейс по-лесен за разбиране.

Когато картографирате потока преди проектиране, можете да забележите триене рано. Може би потребителят трябва да вземе решение, преди да получи достатъчно информация. Може би формулярът се появява твърде рано. Може би стъпката за потвърждение липсва. Може би има три екрана, където един би бил достатъчен.

Ако потокът е объркващ, интерфейсът вероятно също ще бъде объркващ.

2. Оценете съществуващ интерфейс

Потребителските потоци са чудесен начин за оптимизиране на съществуващи продукти, които може да не се конвертират или задържат според очакванията. Ако потребителите не преобразуват, активират или изпълняват важна задача, картирайте текущия поток.

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

3. Предайте стратегията си на членовете на екипа и заинтересованите страни

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

Дизайнерите могат да използват потока, за да планират екрани. Разработчиците могат да го използват, за да разберат състояния и крайни случаи. Премиерите могат да го използват, за да изяснят изискванията. Заинтересованите страни могат да го използват, за да прегледат логиката на опита, преди екипът да инвестира в подробен дизайн или внедряване.

Потребителските потоци също могат да помогнат на разработчиците да разберат цялостното структура зад вашия окончателен прототип, което прави предаване по-ефективен.

Пътят на потребителя срещу потребителския поток

Пътуванията на потребителите и потоците на потребителите често се бъркат, но не са едно и също нещо.

А потребителско пътуване разказва по-широката история на връзката на потребителя с даден продукт. Обикновено включва потребителски цели, емоции, мотивация, болезнени точки и допирни точки преди, по време и след употребата на продукта.

А потребителски поток се фокусира върху пътя, който потребителят поема вътре в продукта, за да постигне конкретна цел.

Ключови разлики

И двете са полезни. Пътуването ви помага да разберете контекста на потребителя. Потокът ви помага да проектирате действителния път през интерфейса.

Как да създадете потребителски поток

Можете да създадете потребителски поток с бяла дъска, инструмент за проектиране, инструмент за диаграми или инструмент за AI дизайн. Форматът има по-малко значение от яснотата на пътя.

1. Определете потребителската цел

Започнете с действието, което потребителят иска да завърши.

• Създайте акаунт
• Купете продукт
• Резервирайте демо
• Публикувайте уебсайт
• Поканете съотборник
• Експортирайте дизайн в код

Потребителският поток трябва да бъде изграден около конкретна цел, а не около неясна продуктова област.

2. Изберете входната точка

Решете откъде да започне потребителят. Примерите включват начална страница, страница с цени, резултат от търсене, имейл кампания, табло за управление на приложението, известие или споделена връзка.

Различните входни точки могат да създадат различни потоци. Завръщащ се потребител и посетител за първи път може да не се нуждаят от един и същи път.

3. Начертайте щастливия път

Щастливият път е най-простият успешен път от началото до края.

1. Потребителят отваря страница с цени
2. Потребителят избира план
3. Потребителят създава акаунт
4. Потребителят въвежда данни за плащане
5. Потребителят потвърждава покупката
6. Потребителят попада на страницата за успех

Това ви дава основното изживяване.

4. Добавете решения и крайни случаи

Истинските потребители не винаги следват идеалния път. Добавете точки за вземане на решения като:

• Потребителят вече има ли акаунт?
• Формулярът валиден ли е?
• Успешно ли е плащането?
• Потребителят избра ли месечно или годишно таксуване?
• Потребителят има ли разрешение да продължи?
• Какво се случва, ако потребителят се откаже?

Тези разклонения превръщат простия път в истински UX дизайн потребителски поток.

5. Опростете потока

След като потокът бъде картографиран, потърсете триене.

• Можем ли да премахнем стъпка?
• Можем ли да комбинираме екрани?
• Прекалено рано ли искаме информация?
• Очевидно ли е следващото действие?
• Има ли задънена улица?
• Ясни ли са състоянията на грешки?
• Винаги ли потребителят знае какво се е случило?

Най-добрите потребителски потоци изглеждат очевидни, защото сложността вече е решена зад кулисите.

Потребителски потоци накратко

Потребителските потоци са структурни карти за проектиране на продукта. Те показват как потребителите се движат през приложение, уебсайт или задача от входната точка до крайното взаимодействие.

Силен потребителски поток:

• Започва с ясна потребителска цел
• Показва входната точка на потребителя
• Картографира стъпките, екраните и решенията в пътя
• Включва важни крайни случаи
• Помага на екипите да идентифицират триенето преди детайлния дизайн на UI
• Прави предаването по-лесно за дизайнери, разработчици, PM и заинтересовани страни

За екипите на UX потребителските потоци са един от най-практичните инструменти за превръщане на потребителското изследване в интерфейсна структура. Те ви помагат да проектирате с намерение, вместо да гадаете екран по екран.

ЧЗВ: Потребителски потоци

Какво представляват потребителските потоци?

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

Какво представлява потребителският поток в дизайна на UX?

В дизайна на UX потребителският поток картографира стъпките, екраните, решенията и действията, които потребителят предприема, за да постигне дадена цел. Екипите на UX използват потребителски потоци, за да планират структурата на продукта, да намалят триенето и да проектират по-ясни интерфейси, преди да създадат екрани с висока прецизност.

Каква е разликата между потребителски поток и потребителско пътуване?

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

Какво представлява потокът на потребителския интерфейс?

Потокът на потребителския интерфейс показва как екрани, UI състояния, бутони, формуляри и взаимодействия се свързват вътре в продукт. Той е тясно свързан с потребителския поток, но се фокусира по-конкретно върху пътя на ниво интерфейс.

Кога трябва да създадете потребителски поток?

Създайте потребителски поток след първоначално потребителско проучване и преди подробен UI дизайн. Можете също така да създадете потребителски потоци по-късно, за да одитирате съществуващ продукт, да диагностицирате отпадането или да подобрите преобразуването.

Какви са примерите за потребителски потоци?

Примерите за общ потребителски поток включват потоци за регистрация, потоци за плащане, потоци за включване, потоци за влизане, потоци за повторно задаване на парола, потоци за резервации, потоци за надграждане и потоци за покана на съотборник.

Защо потребителските потоци са важни?

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

Как карате потребителски поток?

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

Опитайте Anima Playground за потребителски потоци и UX дизайн

Anima Playground ви позволява да преминете от идеята за продукт до UX поток, дизайн и работещ код в браузъра. Опишете изживяването, което искате да изградите, усъвършенствайте го с AI и превърнете резултата в истински интерактивен продукт.

Започнете да проектирате с Anima Playground.