ساخت وایرفریم برای موبایل

مرحله ۱: شناخت کاربر و مشکل

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

• چه کسی از این ویژگی استفاده می‌کنه؟
• هدف کاربر چیه و این ویژگی چه مشکلی ازش حل می‌کنه؟
• کاربر احتمالاً چه کارهایی انجام می‌ده؟

اگه جواب‌هاشون مشخص نیست، باید تحقیق بیشتری انجام بدی: مصاحبه با کاربر و سهام‌داران، پرسشنامه، گروه‌های متمرکز، تحقیقات میدانی و مشاهده. وقتی جواب‌ها روشن شد، آماده مرحله بعدی‌ای.

مرحله ۲: ایجاد جریان کاربر (User Flow)

قبل از شروع وایرفریم، باید بدونی چند صفحه نیاز داری و کاربر چطور بین صفحات حرکت می‌کنه. جریان کاربر یا User Flow مسیرهای کاربر برای رسیدن به هدفش رو نشون می‌ده و کمک می‌کنه بفهمی چه وایرفریم‌هایی لازم داری و چطوری به هم وصل می‌شن.
نکته مهم: مسیرهای کاربر همیشه خطی نیست، کاربر ممکنه چند راه برای رسیدن به هدف داشته باشه.

مرحله ۳: اسکچ صفحه‌های اصلی

بعد از اینکه جریان کاربر مشخص شد، وقتشه که شروع به اسکچ کردن کنی. تو این مرحله مهم نیست که طرح‌ها کامل باشن، هدف تولید ایده‌های زیاد هست. می‌تونی با قلم و کاغذ یا ابزار دیجیتال کار کنی.
همیشه هدف کاربر رو در ذهن داشته باش و برای هر صفحه از خودت بپرس:

• این صفحه چه هدفی داره؟
• چطور کمک می‌کنه کاربر به هدفش برسه؟

چند نسخه از هر صفحه بساز، بازخورد بگیر و تا وقتی چند ایده قابل استفاده پیدا نکردی، اصلاح و دوباره طراحی کن.

مرحله ۴: تعیین فریم موبایل

بعد از اسکچ و تست وایرفریم ساده، وقتشه بری سراغ وایرفریم با جزئیات متوسط. ابتدا یه فریم موبایل درست کن تا حس طراحی واقعی رو بده و از ریختن خیلی آیتم روی صفحه جلوگیری کنه. معمولاً بهتره با دستگاه با صفحه متوسط شروع کنی، مثل iPhone 7 برای مثال.

مرحله ۵: تعیین چینش با باکس‌ها

تو مرحله ابتدایی وایرفریم، هدف اینه که یک هرم بصری واضح بسازی. فعلاً روی محتوا تمرکز نکن، بیشتر روی ساختار و ترتیب نمایش اطلاعات فکر کن. باکس‌هایی برای محتوا رسم کن و بر اساس اولویت بچین. اطلاعات مهم رو جایی بذار که کاربر بیشتر نگاه می‌کنه. الگوی F شکل برای موبایل و دسکتاپ معمولیه، اما الگوهای دیگه هم هستن.

مرحله ۶: استفاده از الگوهای طراحی

آشنایی با الگوها یکی از کلیدهای طراحی خوبه. کاربران وقتی با محصول جدید روبرو می‌شن، توقعشون بر اساس تجربه قبلیشونه. iOS و Android الگوهای مخصوص خودشون رو دارن که طراح رو راحت‌تر می‌کنه. می‌تونی از این الگوها به عنوان بلوک‌های قابل استفاده دوباره بهره ببری، مثل نوار پایین صفحه، منوی کشویی کناری یا دکمه شناور (FAB).

مرحله ۷: قرار دادن محتوا واقعی

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

مرحله ۸: بررسی مقیاس محتوا

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

مرحله ۹: اتصال صفحه‌ها برای ایجاد جریان

می‌تونی طراحی رو به صورت صفحه‌های جداگانه تحویل بدی، اما بهتره یک جریان (Wireflow) بسازی.
مزایا:

• جریان‌ها راحت‌تر فهمیده می‌شن چون تعامل‌ها رو با فلش‌ها نشون میدن.
• فکر کردن به عملکرد کل اپ راحت‌تر می‌شه. ممکنه متوجه بشی زمان لود یه صفحه طولانیه و نیاز به صفحه لودینگ داری.
  نکته: به هر صفحه یک شماره اختصاص بده، بحث و بررسی با تیم یا مشتری راحت‌تر می‌شه.

مرحله ۱۰: تست تصمیمات طراحی

تست وایرفریم بهت کمک می‌کنه ایده‌ها رو اعتبارسنجی کنی، مشکلات عملکردی و جریان کاربر رو پیدا کنی و کلی زمان و هزینه صرفه‌جویی کنی. مطالعات نشون می‌ده رفع مشکل تو این مرحله ۱۰ برابر ارزان‌تر از مرحله توسعه کامل محصوله.
روش‌ها متنوع هستن؛ از مشاهده ساده تا Eye-tracking حرفه‌ای. NNG پیشنهاد می‌کنه تو گروه‌های کوچک ۵ نفره تست کنی، بیشتر از اون معمولاً اضافیه.
برای جلسه تست، مشخص کن چه بخش‌هایی رو می‌خوای تست کنی و یه سناریوی کوتاه بنویس. بهتره تمرکز روی یک کار باشه. بعد از تست، نتایج رو تحلیل کن و دوباره روی طراحی اعمال کن.