طراحی فرمی که پر می‌شود

تیم آرادتیم مهندسی

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

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

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

قاعدهٔ اول: فیلد کمتر

هر فیلد اضافه، درصدی از کاربران را می‌پراند.

برای هر فیلد بپرسید: اگر این را نپرسیم چه می‌شود؟

  • لازم است برای انجام کار؟ بماند.
  • بعداً هم می‌شود پرسید؟ بعداً بپرسید.
  • برای تحلیل و بازاریابی است؟ حذف کنید — یا اختیاری.

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

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

چیدمان

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

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

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

گروه‌بندی منطقی. اطلاعات شخصی، آدرس، پرداخت.

فرم بلند را بشکنید و پیشرفت را نشان دهید. سه مرحلهٔ کوتاه بهتر از یک فرم بلند دیده می‌شود، حتی با تعداد فیلد یکسان.

اندازهٔ فیلد را متناسب کنید. فیلد کد پستی نباید به عرض فیلد آدرس باشد — خودش راهنمای طول ورودی است.

اعتبارسنجی

در لحظهٔ ترک فیلد، نه در هر کلید. پیام «ایمیل معتبر نیست» وقتی هنوز مشغول تایپ‌اید، آزاردهنده است.

تأیید مثبت هم نشان دهید. تیک سبز کنار فیلد درست، اطمینان می‌دهد.

در سرور تکرار کنید. اعتبارسنجی سمت کاربر تجربهٔ کاربری است، نه امنیت — همان اصلی که در امنیت سمت کاربر گفتیم.

سخت‌گیری بی‌مورد نکنید. فیلد نام که نیم‌فاصله یا فاصله را رد می‌کند، فیلد تلفنی که فقط یک قالب می‌پذیرد، فیلد آدرسی که طولش کم است — همه‌شان کاربر واقعی را رد می‌کنند.

پیام خطا

سه ویژگی:

کنار همان فیلد، نه در بالای صفحه. کاربر باید بداند کجا را درست کند.

بگوید چه چیزی اشتباه است و چطور درست شود. «شمارهٔ موبایل باید ۱۱ رقم باشد و با ۰۹ شروع شود» بهتر از «مقدار نامعتبر» است.

سرزنش نکند. «شما اشتباه وارد کردید» در برابر «این قالب پذیرفته نمی‌شود».

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

نکاتی که فقط در فرم فارسی پیش می‌آیند

اینها را در پروژه‌های واقعی بارها دیده‌ایم:

اعداد فارسی را بپذیرید. کاربری که با صفحه‌کلید فارسی «۰۹۱۲» می‌زند نباید خطا بگیرد. در لحظهٔ ذخیره به لاتین تبدیل کنید، نه اینکه کاربر را مجبور به تغییر صفحه‌کلید کنید.

«ی» و «ک» عربی. کاربری که با صفحه‌کلید عربی تایپ می‌کند، نامش با بقیه تطبیق نمی‌خورد. نرمال‌سازی در لحظهٔ ذخیره.

نیم‌فاصله در نام و آدرس.

شمارهٔ موبایل با قالب‌های مختلف: 09121234567، +989121234567، 0912 123 4567. همه را بپذیرید و خودتان یکسان کنید.

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

تاریخ شمسی با تقویم‌گزین شمسی. کاربر ایرانی 2027-03-17 را نمی‌فهمد.

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

جهت فیلد. فیلد ایمیل و آدرس اینترنتی باید dir="ltr" باشند حتی در فرم راست‌به‌چپ. تفصیلش در وب فارسی.

موبایل

بیشتر فرم‌های شما روی موبایل پر می‌شوند:

نوع صفحه‌کلید درست. فیلد عددی، صفحه‌کلید عددی بیاورد. این ساده‌ترین بهبود با بیشترین اثر است.

فیلدها به‌اندازهٔ کافی بزرگ برای لمس.

تکمیل خودکار را فعال کنید. صفت‌های استاندارد autocomplete باعث می‌شوند مرورگر نام و آدرس و شماره را خودش پر کند.

کد پیامک خودکار خوانده شود. کاربری که باید بین دو برنامه جابه‌جا شود، بخشی‌شان رها می‌کنند.

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

دسترس‌پذیری

  • هر فیلد <label> واقعی با for داشته باشد.
  • پیام خطا به فیلد وصل باشد تا صفحه‌خوان بخواندش.
  • ترتیب Tab منطقی باشد.
  • فقط با رنگ خطا را نشان ندهید؛ متن هم بگذارید.

چه چیزی را بسنجید

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

آزمون ساده

فرم را روی موبایل، با یک دست، در نور آفتاب پر کنید.

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

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

پروژه یا ایده‌ای دارید؟

متخصصین ما آماده برگزاری یک جلسه مشاوره رایگان هستند.

مشاوره رایگان

پروژه‌تان را با هم بررسی کنیم

جلسهٔ اول رایگان است و معمولاً همان یک جلسه روشن می‌کند پروژه چقدر کار دارد.

چطور با شما تماس بگیریم؟

برای هماهنگی سریع‌تر — اگر تماس تلفنی را ترجیح نمی‌دهید، همان شماره را در پیام‌رسان پیام می‌دهیم.

راه دوم برای رساندن پاسخ — اگر تلفن در دسترس نبود، ایمیل می‌زنیم.

در حال ارسال…

درخواست شما ثبت شد.

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