اضافه‌کردن وایرفریم به User Story های اجایل

خیلی‌ها فکر می‌کنند User Story فقط باید یک متن کوتاه باشد، اما در عمل یوزر استوری می‌تواند شامل هر چیزی باشد که به تیم کمک می‌کند ویژگی را بهتر بفهمند. User Storyها نشان می‌دهند یک قابلیت چه ارزشی برای کاربر دارد و از زاویه‌ی دید کاربر نوشته می‌شوند. تیم با خواندن یک یوزر استوری می‌فهمد چرا باید چیزی بسازد و چه ارزشی ایجاد می‌کند.

توضیح یک یوزر استوری شامل هر چیزی می‌شود که تیم برای طراحی و توسعه لازم دارد:
از یک توضیح کوتاه درباره مسیر کاربر گرفته تا فلوچارت، Use Caseها — و حتی وایرفریم.
وایرفریم‌ها به‌خصوص برای توسعه‌دهندگان فرانت‌اند که باید UI را بسازند بسیار ارزشمندند.

دیدن نمونه‌هایی از اضافه‌کردن وایرفریم به User Story بهترین راه برای یادگرفتن نحوه‌ی استفاده از آن‌ها در پروژه‌های خودتان است.

مرحله 1: نوشتن User Story و Acceptance Criteria

فرض کنید کلاینت شما — یک وب‌سایت اخبار و سرگرمی — می‌خواهد اطلاعات بیشتری از کاربران جمع کند و آن‌ها را تشویق به ثبت‌نام کند. راه‌حل پیشنهادی این است که گزینه لایک و کامنت اضافه شود؛ همه کاربران آن را ببینند، اما فقط کاربران ثبت‌نام‌شده بتوانند از آن استفاده کنند.

در این اسپرینت، یوزر استوری‌ای که باید انجام دهید این است:

«به‌عنوان یک کاربر ثبت‌نام‌شده، می‌خواهم وارد حسابم شوم تا بتوانم پست‌ها را لایک کنم و کامنت بگذارم.»

Acceptance Criteria:

• سریع، ساده و سرراست باشد
• کمترین اطلاعات ممکن را درخواست کند
• تجربه‌ی مرور را مختل نکند

نکته حرفه‌ای: قبل از نوشتن یوزر استوری، با کلاینت درباره مسیر و هدف کاربر صحبت کنید.

مرحله 2: نوشتن توضیحی کوتاه درباره User Journey

از دید یک کاربر واقعی مسیر را بنویسید.
مثلاً: «مایک»، یک باریستای ۲۶ ساله، در حال دیدن یک مقاله‌ی «گربه‌های بامزه» است. او زیر یکی از عکس‌ها دکمه Like را می‌زند. حالا چه اتفاقی می‌افتد؟ (فرض کنید مایک کاربر ثبت‌نام‌شده است.)

در نوشتن User Journey:

• از زبان غیرتکنیکال استفاده کنید
• بیش از حد طولانی‌اش نکنید
• فقط راه‌حل مشکل کاربر را توضیح دهید

مرحله 3: ساخت فلوچارت

بعد از نوشتن User Journey، حالا باید آن را روی یک فلوچارت رسم کنید.
لازم نیست کل مسیر «ثبت‌نام/ورود» را رسم کنید؛ فقط همان بخشی که مربوط به یوزر استوری است:

• کاربر دکمه Like یا Comment را می‌زند
• وارد صفحه ورود می‌شود
• ورود موفق
• بازگشت به صفحه‌ای که روی آن بود

با برنامه‌ریزی این مسیر، متوجه می‌شوید چند صفحه لازم دارید. در این مثال:

• صفحه لاگین
• صفحه تلاش مجدد لاگین (Retry)
• مودال تأیید

مرحله 4: طراحی چند وایرفریم مختلف برای هر صفحه

وقتی متوجه شدید چند صفحه لازم دارید، تصمیم بگیرید چه عناصری باید روی هر صفحه باشند و طراحی را شروع کنید.

برای صفحه‌ی Login می‌توانید به این موارد نیاز داشته باشید:

• ورود با سرویس‌های محبوب بین مخاطبان شما
• فرم ورود با ایمیل/نام کاربری و رمز عبور + دکمه Log In
• لینک بازیابی رمز عبور
• لینک ثبت‌نام
• لوگوی برند
• یک تیتر مناسب

بعد از مشخص‌کردن عناصر ضروری، برای هر صفحه چند وایرفریم مختلف بسازید تا مسیرهای مختلف را بررسی کنید.

مرحله 5: الهام گرفتن از رقبا

از دیدن نمونه‌های رقبا نترسید.
محصولات و سرویس‌های مشابه را بررسی کنید.

هدف این نیست که آن‌ها را کپی کنید — هدف این است که:

• چیزهایی که ممکن است در طراحی‌تان جا افتاده باشد را پیدا کنید
• راه‌حل‌های بهتر برای مشکلات کاربران پیدا کنید

مثلاً ممکن است ببینید باید لینک‌های «قوانین و مقررات» یا «حریم خصوصی» را هم اضافه کنید.
یا راه‌حل بهتری برای سازماندهی صفحه پیدا کنید.

مرحله 6: رساندن وایرفریم‌ها به حد فیدلیتی مورد نیاز

بعد از اینکه ساختار کلی صفحات را مشخص کردید، وقت اضافه‌کردن جزئیات است. در این مرحله وایرفریم باید متن واقعی داشته باشد، نه Lorem Ipsum.

در این مرحله:

• چینش و سلسله‌مراتب را مرتب کنید
• رنگ‌های برند را اضافه کنید
• اگر زمان دارید تصویر واقعی بگذارید

نیازی نیست که وایرفریم‌ها را خیلی High Fidelity کنید؛ فقط به اندازه‌ای که بقیه تیم راحت‌تر متوجه یوزر استوری شوند.

مرحله 7: افزودن Annotation برای آماده‌شدن جهت همکاری تیمی

در واقع سخت است بعد از تمام‌شدن طراحی، انوتیشن‌های خوب اضافه کنید.
بهترین روش این است که در طول کار انوتیشن بنویسید و در آخر نهایی‌اش کنید.

Annotationها توضیح می‌دهند چیزهایی که با وایرفریم نمی‌شود نشان داد، مثل:

• منطق طراحی
• سناریوها و Edge Caseها
• تعاملات و رفتار عناصر (Interaction)

مثال:
اگر کاربر روی این بنر کلیک کند چه می‌شود؟
آیا این پیام برای همه کاربران نشان داده می‌شود یا فقط کسانی که از صفحه خاصی آمده‌اند؟

اگر توسعه‌دهنده یا کلاینت بتواند با خواندن انوتیشن‌ها بفهمد هر عنصر چه می‌کند و چرا هست، یعنی کارتان را درست انجام دادید.