ویرگول
ورودثبت نام
Sara Ghasemi
Sara Ghasemi
Sara Ghasemi
Sara Ghasemi
خواندن ۵ دقیقه·۶ ماه پیش

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

وضعیت موجود: فرم یکپارچه (Single-Page Form)

در گذشته، فرم ایجاد محصول ما یک صفحه‌ی عمودی بسیار بلند بود. این فرم، همه‌ی اطلاعات مرتبط با محصول – از نام و دسته‌بندی گرفته تا تصاویر، ویژگی‌ها، توضیحات متنی، سئو – را در یک ساختار فشرده اما پیوسته در خود جای داده بود. برای جداسازی فیلدهای مختلف، از تیترهای تو در تو استفاده شده بود و گاهی اوقات هم باکس‌های رنگی یا خطوط مرزی کمرنگ به تفکیک آن‌ها کمک می‌کردند. صادقانه بگویم، فرم خام کمی پیچیده و سنگین به نظر می‌رسید و وقتی پر می‌شد، شلوغی داده‌ها را بیشتر نشان می‌داد.

در بسیاری از پنل‌های فروشندگان محصول، فرم‌های ورود اطلاعات به همین شکل طراحی شده‌اند. در این رویکرد، تمامی بخش‌ها، شامل مشخصات اصلی کالا، تصاویر، ویژگی‌ها، توضیحات، تنظیمات سئو و سایر جزئیات، همگی در یک صفحه بلند به کاربر نمایش داده می‌شوند. از دیدگاه من، این روش برای کاربران باتجربه که به فرایند آشنایی کامل دارند، ممکن است سریع‌تر باشد، اما برای کاربران عمومی، باعث خستگی، گم‌ شدن در اسکرول و خطاهای زیاد می‌شود – به خصوص در فرم‌هایی که ده‌ها فیلد و تنظیمات مختلف دارند.

فرم یک صفحه‌ای با اسکرول
فرم یک صفحه‌ای با اسکرول

وضعیت جدید: فرم چندمرحله‌ای (Multi-Step Form)

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

در نسخه‌ی جدید، اطلاعات محصول را به ۶ مرحله کلیدی تقسیم کردیم:

  • تعیین نام و دسته‌بندی کالا

  • ورود ویژگی‌ها و متغیرهای محصول

  • اطلاعات توصیفی و فنی محصول

  • بارگذاری تصاویر

  • تنظیمات سئو

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

فرم چند مرحله‌ای
فرم چند مرحله‌ای

مقایسه فرم یکپارچه و فرم چندمرحله‌ای

مقایسه فرم یک‌جا و چندمرحله‌ای
مقایسه فرم یک‌جا و چندمرحله‌ای

تحقیقات پیشین: یافته‌های متخصصین چه می‌گویند؟

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

🟢 افزایش نرخ تبدیل با فرم‌های چندمرحله‌ای

طبق مقاله‌ای از WPManageNinja که مطالعه کردم، فرم‌هایی که تعداد فیلدهای هر مرحله را از ۱۱ به ۴ کاهش داده بودند، بهبود قابل‌توجهی در نرخ تبدیل نشان دادند. در این مقاله به نقل از متخصصین آمده بود:

داشتن تنها سه فیلد در هر مرحله، نرخ تبدیل را به‌طور چشم‌گیری افزایش می‌دهد.

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

🟢 نقش نوار پیشرفت در انگیزه کاربران

مقاله‌ی دیگری از Growform که آن را خواندم، بر اهمیت نوار پیشرفت تأکید داشت. این مقاله به وضوح بیان می‌کرد:

نوار پیشرفت یکی از قدرتمندترین ابزارها برای افزایش انگیزه کاربر در ادامه دادن فرم چندمرحله‌ای است.

این موضوع مهر تاییدی بود بر تصمیم ما برای افزودن نوار پیشرفت در طراحی جدیدمان.

🟢 تحلیل‌های تجربی از برندهای بزرگ

در تحقیقاتم، به مطالعات موردی از برندهای بزرگ هم برخورد کردم.

  • مطالعه‌ی HubSpot نشان داده بود که فرم‌های چندمرحله‌ای تا ۸۶٪ نرخ تبدیل بیشتری نسبت به فرم‌های یکپارچه داشته‌اند.

  • Zuko نیز تأیید کرده بود که در پروژه‌های خود، میانگین افزایش تبدیل ۱۴٪ بوده‌است.

  • حتی در صنعت خیریه، استفاده از فرم چندمرحله‌ای باعث افزایش تا ۹۰٪ در مجموع کمک‌های مالی شده بود.

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

🟡 موارد استثناء

البته، در میان این یافته‌ها، به مواردی هم برخوردم که کمی متفاوت بودند. به عنوان مثال، مقاله‌ای از PubMed Central نشان داده بود که در فرم‌های بسیار ساده (مثلاً ۳-۴ فیلد)، فرم‌های تک‌مرحله‌ای عملکردی مشابه یا حتی بهتر داشته‌اند. این نشان می‌دهد که هیچ راه‌حل واحدی برای همه موقعیت‌ها وجود ندارد و باید همیشه شرایط خاص هر فرم را در نظر گرفت.

🎯 نتیجه مشاهدات و بازخورد میدانی

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

با وجود نواقص اولیه که در هر طراحی جدیدی طبیعی است، تجربه کلی تیم از فلو جدید مثبت ارزیابی شد. ساختار مرحله‌ای به بهبود نظم ذهنی، کاهش سردرگمی، و به‌ویژه ساده‌سازی آموزش نیروهای جدید کمک کرده است. به‌طور مشخص، یکی از اعضای کلیدی تیم محتوا این‌طور جمع‌بندی کرد:

درسته که فلو باز هم نیاز به بازبینی داشت، اما از فلوی قبلی منطقی‌تر و درست‌تر بود... در کل نمره‌ای که به فلوی جدید می‌دم، ۸ از ۱۰ هست.

این بازخوردها برای من به عنوان یک طراح محصول، نشان می‌دهد که طراحی تجربه کاربر (حتی برای کاربران داخلی سیستم) نیازمند توازن بین ساختار بهتر و اجرای بدون نقص فنی است. نسخه جدید از نظر تجربه ذهنی و منطقی بهبود یافته، اما موفقیت کامل آن وابسته به بهینه‌سازی تدریجی و رفع ایرادات باقی‌مانده در عملکرد سیستمی‌ است.

کدام رویکرد بهتر است؟

با توجه به تمام این بررسی‌ها، اگر فرم شما شامل داده‌های متنوع و چند دسته باشد (مثل ویژگی‌های محصول، اطلاعات فنی، تصاویر، توضیحات، سئو و غیره)، استفاده از فرم چندمرحله‌ای یک انتخاب هوشمندانه است. زیرا این رویکرد:

  • نرخ تبدیل را افزایش می‌دهد.

  • بار شناختی کاربر را کاهش می‌دهد.

  • تجربه موبایلی را ارتقا می‌دهد.

  • احتمال خطا را کم می‌کند.

اما در صورتی که فرم بسیار ساده و کوتاه باشد، استفاده از فرم یکپارچه می‌تواند سریع‌تر و کارآمدتر باشد. در نهایت، من همواره توصیه می‌کنم که تست A/B روی کاربران واقعی بهترین روش برای تصمیم‌گیری نهایی است.

فرمتجربه کاربرطراحی
۷
۰
Sara Ghasemi
Sara Ghasemi
شاید از این پست‌ها خوشتان بیاید