wireframe و interactive prototype
flow ساده تا prototype کلیکخور.
قدم اول: User flow mapping
قبل از باز کردن Figma برای pixel، flow را روی paper یا FigJam map کنید. از persona سارا شروع کنید: او میخواهد پروژه client جدید با deadline اضافه کند و در week view ببیند. flow اصلی: Open app → Dashboard → Add Project (FAB) → Form → Save → Dashboard با item جدید → Week view → Task detail.
از shapes استاندارد flowchart استفاده کنید: oval برای start/end، rectangle برای screen/action، diamond برای decision. happy path را اول بکشید — مسیری که ۸۰٪ users بدون گیر successful میشوند. decision مثال: «اولین بار باز کرده?» → بله onboarding کوتاه : خیر dashboard.
Entry points و exit success را explicit کنید. entry: notification «deadline فردا»، deep link، یا open مستقیم app. exit success: confirmation «پروژه ذخیره شد» و project در list دیده میشود. exit failure: abandon form، validation error — اینها branch جدا در flow.
Guideline cognitive load: سعی کنید flow اصلی حداکثر ۷ step باشد (هر screen یا decision مع significant یک step). اگر بیشتر شد، کدام step را merge یا defer میکنید؟ برای MVP سارا، onboarding را یک screen welcome + skip نگه دارید، نه ۵ screen.
flow map را با problem statement cross-check کنید: آیا هر step به job «ثبت سریع deadline» یا «visibility هفته» کمک میکند؟ step اضافه = friction. خروجی: flow diagram labeled که در کنار wireframe در file Figma لینk شود.
قدم دوم: Low-fi wireframe
Low-fi یعنی grayscale، بدون brand color و typography نهایی. هدف communicate layout و hierarchy است، نه visual delight. در Figma frame موبایل (مثلاً ۳۹۳×۸۵۲) بسازید یا از wireframe kit Nova Lab استفاده کنید — rectangles خاکستری، placeholder icon، text واقعی طول approximate.
Screen 1 — Dashboard: header با salutation کوتاه، list پروژهها (name + due date)، FAB پایین راست برای add. empty state جدا wireframe کنید: illustration ساده + CTA «اولین پروژه را اضافه کن».
Screen 2 — New Project form: fieldهای name، client (optional)، deadline date picker. primary button «ذخیره» thumb zone پایین. secondary «لغو» text button. validation inline زیر field — نه فقط toast.
Screen 3 — Week view: strip افقی روزهای هفته، dot یا bar برای task روی هر روز. tap روی task → bottom sheet detail (name، client، edit). Screen 4 — Task detail sheet: ۸۰٪ height، drag handle بالا، dismiss swipe down.
Annotation با خط قرمز یا sticky: «FAB → New Project»، «Save → duplicate dashboard frame with new row». annotation به dev و moderator test کمک میکند بدون حدس فهمید behavior چیست. version v1 در page «Wireframes v1» نگه دارید.
قدم سوم: Information architecture
IA answers: user کجا است و چطور به جای دیگر میرود. برای سارا mobile-first، bottom navigation با ۳ tab: Dashboard، Calendar/Week، Settings. FAB global برای add از هر tab در دسترس — pattern آشنا (Gmail، Google Keep).
Content hierarchy برای scan سریع: F-pattern — title بالا چپ، critical info (deadline) زیر title، action primary پایین در thumb reach (ناحیه انگشت شست). secondary actions (edit، delete) در overflow menu یا detail sheet، نه compete با primary.
Empty states part of IA هستند، نه afterthought. no projects: message empathy + one CTA. no deadlines this week: «هفته خالی — deadline اضافه کن». error states: network fail، invalid date — هر کدام wireframe جدا با recovery action.
Labeling: از language سارا استفاده کنید، نه jargon داخلی. «پروژه» vs «کار» — اگر در interview «پروژه client» گفت، همان term. consistency: everywhere «deadline» نه جایی «due date» و جایی «تاریخ».
Depth: چند level navigation؟ برای MVP سعی کنید حداکثر ۳ tap به any core task برسید. Dashboard → FAB → Save = ۳ action. Week → detail = ۲ tap. اگر بیشتر شد، IA را simplify کنید قبل از prototype.
قدم چهارم: Interactive prototype در Figma
در Figma tab Prototype را باز کنید. starting frame = Dashboard (happy path start). connection: FAB on tap → navigate to New Project (instant یا smart animate سبک). Save button → navigate to Dashboard variant که یک row project بیشتر دارد — duplicate frame beforehand.
برای low-fi، transition Instant کافی است؛ Smart Animate وقتی mid-fi layer names match دارید مفید است. مهم این است که path complete باشد، نه animation flashy. dead end نگذارید — هر clickable در test path باید lead somewhere meaningful.
Week view: tab bar Calendar → Week frame. task dot on tap → open overlay bottom sheet (Open overlay action، ۸۰٪ height). backdrop tap یا drag dismiss → back Week. Settings minimal: profile placeholder، notification toggle — فقط اگر flow test نیاز دارد wire کنید.
Prototype را خودتان ۳ بار end-to-end walk کنید با scenario واقعی: «پروژه Logo برای client X، deadline جمعه». هر بار timer بزنید. گیر کردید = wireframe issue قبل از user test. link share-only برای stakeholder بفرستید با comment mode.
Device frame و scroll: اگر list long است، vertical scroll فعال کنید. fixed FAB و bottom nav در scroll behavior مشخص (usually fixed). preview در Figma mirror یا mobile browser برای feel واقعی thumb.
قدم پنجم: آمادهسازی برای usability test
Prototype برای test باید taskهای مشخص را support کند، نه entire product. scenario written: «فرض کن client جدید به نام رستوران X پروژه logo داده و deadline پنجشنبه است. پروژه را در app ثبت کن و تأیید کن در dashboard دیده میشود. سپس در نمای هفته پیدایش کن.»
Success criteria: project در list با name و date درست؛ user بدون hint بیش از ۲ به FAB یا form برسد؛ در week view task visible. time on task را بعداً record میکنید — wireframe الان باید path ممکن باشد.
Think-aloud instructions را draft کنید: «هر چه فکر میکنید با صدای بلند بگویید. ما محصول را test میکنیم، نه شما. سؤال بپرسید اگر confused شدید — ما lead نمیکنیم.» moderator این را در intro میخواند.
Recruit: ۵ participant با profile نزدیک سارا (freelance creative، multi-project). برای class Nova Lab، همکلاسی با brief persona OK. incentive optional. session ۳۰–۴۵ دقیقه برای ۳–۴ task کافی است.
Recording: screen share Figma prototype + audio با consent written. timestamp notes: «02:14 — گشت در nav، FAB پیدا نکرد». این notes در tutorial usability test به analysis تبدیل میشود.
قدم ششم: Iterate از feedback داخلی
قبل از user خارجی، یک internal walkthrough با ۲ colleague انجام دهید. role-play moderator و participant. issues رایج low-fi: FAB بدون label، label form مبهم («title» vs «نام پروژه»)، date picker unclear، week view شلوغ.
Version v2: duplicate page «Wireframes v2»، fix top ۳ issue. changelog sticky در FigJam: «v2: FAB extended با label پروژه»، «v2: date field با calendar icon». history برای stakeholder و report test مفید است.
Mid-fi optional: real copy فارسی، font size readable، spacing 8pt grid — هنوز بدون final color. mid-fi قبل hi-fi UI handoff confidence میدهد IA درست است. Nova Lab UI track بعداً visual polish میدهد؛ UX track روی flow میماند.
Prototype link را freeze کنید برای test day — version مشخص. اگر حین test تغییر دهید، data قابل compare نیست. annotation روی frame برای moderator: «اگر user گیر کرد، بعد ۲ دقیقه بگو چه would try next — نه click there».
Checklist خروجی: flow diagram، ۴+ wireframe screens، empty/error states، clickable prototype link، ۳ task scenarios written، internal walkthrough notes. با این pack به tutorial usability test میروید.
سوالات متداول
Figma یا ابزار اختصاصی wireframe؟
برای stack Nova Lab، Figma از low-fi تا hi-fi و prototype یکجا کافی است. Balsamiq برای speed sketch؛ Axure برای logic پیچیده. تیم کوچک و learning path: Figma انتخاب پیشفرض.
چقدر detail در wireframe لازم است؟
Enough که layout، hierarchy، label، و flow واضح باشد — نه color، shadow، یا icon نهایی. placeholder text با طول realistic بهتر از lorem یک کلمهای است چون truncation و wrap را نشان میدهد.
آیا prototype باید every pixel clickable باشد؟
خیر. فقط paths under test و navigation اصلی. dead end و dummy link usability session را خراب میکند — participant فکر میکند bug است. Settings can be static اگر task نیست.
Mobile-first wireframe اجباری است؟
برای persona سارا که mobile primary است، بله — اول mobile frame. desktop بعداً adapt اگر data نشان دهد. test روی device یا frame size واقعی که user استفاده میکند.