User journey و flow design
User journey کل experience را در timeline نشان میدهد؛ user flow مسیر action در product را. یاد بگیرید چطور journey map بسازید، flow را simplify کنید و dead-end را از بین ببرید.
Journey و Flow: دو lens روی experience
User Journey Map timeline افقی experience است: awareness → consideration → purchase → use → support → loyalty. هر stage شامل action، touchpoint، emotion (curve)، pain point، opportunity. scope میتواند macro (کل relationship با brand) یا micro (یک task مثل «reset password») باشد.
User Flow diagram مسیر screen/action در product است — node و arrow، decision diamond، start/end. focus روی system interaction نه emotion curve. wireframe و prototype از flow میآید.
در Nova Lab هر دو لازماند: journey برای empathy و strategy؛ flow برای execution و dev handoff. confusion بین این دو باعث میشود team روی diagram اشتباه time بگذارد.
ساخت Journey Map گامبهگام
۱) persona و scenario مشخص. ۲) stages define (۳–۷ stage). ۳) per stage: user goal، channel (app، email، phone)، action، thought، emotion (😊😐😞). ۴) pain point و opportunity highlight. ۵) workshop با stakeholder برای validate.
Emotion curve honesty مهم است — همه stage positive نیست. checkout often anxiety (payment) سپس relief. insight از negative peak میآید.
Service blueprint layer پشت صحنه: frontstage (UI) + backstage (API، warehouse) — برای service design. digital product often frontstage-heavy اما support call still touchpoint است.
Task Flow و Happy Path
Happy path = مسیر بدون error با minimum step به goal. مثال signup: landing → CTA → form → verify email → welcome. هر step یک screen یا logical group.
Rule of thumb: هر step باید one clear primary action داشته باشد. اگر user در step «نمیداند بعد چه کنم»، flow broken است. progress indicator در multi-step (checkout، wizard) anxiety کم میکند.
Branching: decision «已有 account?» → login vs signup. flowchart با diamond برای condition. avoid deep nesting — اگر بیش از ۳ level branch، simplify IA.
Edge case، error path و recovery
Professional flow فقط happy path نیست: network error، validation fail، empty state، permission deny، session timeout. هر error path باید recovery واضح داشته باشد — «تلاش مجدد»، «تماس پشتیبانی»، «بازگشت به home».
Dead-end: screen بدون exit. audit flow با «من گیر کردم» walkthrough. back button behavior در mobile critical — Android back vs in-app back consistent باشد.
Edge case document در Figma flow page با label red برای error branch. dev باید همه branch را implement کند — UX designer responsibility flag کردن است.
کاهش friction و optimize flow
Heuristic: step count را کم کنید بدون حذف necessary info. social login، autofill، smart default (country from IP)، guest checkout — هر کدام friction کم میکنند اگر security OK.
Cognitive load: یک form ۱۵ field را split کنید به step ۳×۵. chunking psychology. optional field clearly marked.
Measure: funnel analytics — کجا drop؟ A/B test یک step حذف یا reorder. qualitative: think-aloud usability on flow.
Artifact در Figma/Miro و handoff
Flow در FigJam با connector shapes؛ color code: green happy، red error، blue optional. link frame Figma به node flow (prototype flow یا manual doc).
Annotation: business rule («فقط premium»)، data source، API dependency. developer flow diagram را spec میخواند.
Version: flow با feature change update شود. outdated flow worse than no flow — mislead dev. در Nova Lab critique، flow و journey side-by-side present کنید.
مثال یکپارچه: سفارش غذا
Journey macro: hunger → search app → browse → order → wait → receive → eat → review. pain: «آدرس اشتباه»، «زمان انتظار unclear». opportunity: proactive SMS، reorder one-tap.
Flow micro: open app → home → search restaurant → menu → cart → address confirm → payment → confirmation. branch: coupon invalid، item out of stock، payment fail.
Design decision از journey: emotion wait stage → UI progress tracker + ETA. از flow: cart step field reduce → saved address default. journey و flow با هم product coherent میسازند.
سوالات متداول
Journey map چند stage داشته باشد؟
معمولاً ۵–۷ stage for macro journey. کمتر از ۳ too vague؛ بیشتر از ۱۰ hard to maintain. micro journey برای single task میتواند ۳–۵ step باشد.
User flow در چه سطح fidelity بکشم؟
Lo-fi box + arrow برای alignment early. وقتی IA stable شد، link به wireframe frame. high-fi prototype flow برای test و stakeholder demo.
Service blueprint لازم است؟
برای pure app sometimes overkill. برای fintech، healthcare، logistics که ops پشت صحنه heavy است، blueprint pain invisible به user را expose میکند.
چطور flow را با business goal align کنم؟
هر flow step باید user goal و business metric (signup، purchase، retention) mapping داشته باشد. step فقط برای «feature dump» بدون metric suspect است.