راهنمای کامل یادداشت نویسی و مستندسازی وایرفریم‌ها

یادداشت توضیحی چیه و چرا مهمه؟

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

این یادداشت‌ها معمولاً چیزهایی رو پوشش می‌دن که داخل وایرفریم قابل نمایش نیستن؛ مثل:

• منطق پشت طراحی
• سناریوها و حالت‌های مختلف
• اینتراکشن‌ها
• Edge caseها
• نکات فنی یا محدودیت‌ها

وقتی کسی بدون حضور تو نگاهش کنه و بفهمه همه‌چی چیه، یعنی کارت رو درست انجام دادی.

یادداشت برای همه‌ست

اول باید بدونی مخاطب یادداشت هات کیه. معمولاً این افراد با وایرفریم درگیرن:

• مشتری: آیا طراحی مطابق اهداف کسب‌وکار هست؟
• توسعه‌دهنده: چی باید پیاده‌سازی بشه؟ منطقش چیه؟
• طراح بصری (UI): کدوم اجزای بصری لازم هستن؟
• کپی‌رایتر: چی باید نوشته بشه و لحن متن چیه؟

یادداشت باید توضیح بده وایرفریم چطور کار می‌کنه

خیلی چیزها داخل وایرفریم دیده نمی‌شن. مثلاً:

• این دکمه بعد از کلیک چی کار می‌کنه؟
• این تب چند حالت مختلف داره؟
• وقتی کاربر اشتباه بزنه، چی نمایش داده می‌شه؟

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

توضیح محتوا و عملکرد

Annotationها معمولاً دو دسته اطلاعات رو پوشش می‌دن:

۱) توضیحات محتوا (Content Notes)

• متن دکمه چی باشه؟
• این متن با چه لحنی نوشته می‌شه؟
• چه اطلاعاتی باید نمایش داده بشه؟

۲) توضیحات عملکرد (Functional Notes)

• بعد از کلیک کاربر چه اتفاقی رخ می‌ده؟
• چه حالت‌هایی وجود داره؟
• در چه شرایطی این بخش نمایش داده می‌شه؟

برای شماره‌گذاری از دایره رنگی کنار اجزا استفاده کن و متن توضیحات رو پایین یا کنار صفحه بنویس.

عنصرهای شرطی را حتماً یادداشت کن

موارد شرطی مثل:

• بنری که فقط برای برخی کاربران نمایش داده می‌شه
• پیامی که فقط وقتی کاربر لاگین نکرده نشون داده می‌شه

این‌ها بدون توضیح ۱۰۰٪ مبهم هستن، پس حتماً باید یادداشت داشته باشن.

لینک‌ها و دکمه‌ها را دقیق توضیح بده

برای هر المان تعاملی، باید این‌ها مشخص بشن:

• چند حالت دارد؟ (Normal, Hover, Active, Disabled)
• چه چیزی باعث تغییر حالت می‌شود؟
• کلیک/تاچ کاربر چه نتیجه‌ای دارد؟
• کاربر به کجا هدایت می‌شود؟
• Linkهای بازدیدشده چطور نمایش داده می‌شن؟

 چیزهایی که جا نمی‌شن رو در یادداشت توضیح بده

گاهی فضای وایرفریم محدود می‌شود. مثلاً:
لیست کامل آیتم‌ها در یک منوی کشویی.

فقط ۲–۳ آیتم اصلی را در وایرفریم بگذار و بقیه را داخل یادداشت کن.

موارد مرتبط با محدودیت فنی یا کسب‌وکاری

هر چیزی که به یک «محدودیت» مربوط می‌شود باید یادداشت شود. مثل:

• حداکثر طول یوزرنیم
• قوانین پسورد
• محدودیت API

توضیح بده چه چیزی نمایش داده می‌شود و چرا. مثلا:

«به دلیل تعداد بالای پیام‌ها، فقط ۱۰ پیام جدید نمایش داده شود.»

همزمان با طراحی یادداشت کن

بهترین روش اینه که هنگام طراحی، یاداشت ها رو به‌مرور بنویسی و در پایان نهایی‌سازی‌شون کنی.

سطح جزئیات Annotation باید با Fidelity هماهنگ باشه

اسکچ‌ها

• ایده‌های اولیه
• سناریوهای ساده
• پرسوناهای مرتبط

وایرفریم Low-Fidelity

• تصمیم‌های اولیه طراحی
• آزمایش نسخه‌های مختلف چیدمان

وایرفریم Medium-Fidelity

• توضیح عملکرد
• دلیل چیدمان بخش‌ها

وایرفریم High-Fidelity

• جزئیات دقیق عملکرد
• استایل‌ها، محتوا، منطق
• سناریوی کامل کاربر