فرم‌ها از جمله مواردی هستند که در طراحی باید به آن توجه شود. افرادی که از وب سایت یا اپلیکیشن شما بازدید می کنند هدفی را دنبال می کنند و به احتمال زیادی چیزی که با آنها در ارتباط خواهد بود، همان فرم ها می باشند. ما هر روز از فرم ها برای خرید محصولات، عضویت و یا ورود در شبکه های اجتماعی، ارسال دیدگاه و غیره استفاده می کنیم.
در نتیجه، برای کاربران مهم می باشد که بتوانند فرم های آنلاین را با سرعت پر کنند و چیزی کار آنها را پیچیده نکند. ما به عنوان طراح سایت و توسعه دهنده وب باید فرم ها را به گونه‌ای طراحی کنیم که کاربران با کمترین تلاش بتوانند خواسته خود را عملی کنند. پس اگر می خواهید که فرم های کاربر پسند ایجاد کنید؛ تا انتهای مقاله با ما همراه باشید.
1- فقط موارد ضروری
اگر می خواهید که فرم هایتان ساده باشند، پس فیلدهای اضافی را حذف کنید.
همیشه از خودتان بپرسید که چه اطلاعاتی نیاز هستند و در کجا از آنها استفاده خواهید کرد. اگر نتوانستید جواب درست و منطقی به این سوال دهید، پس به احتمال زیاد آن فیلد اضافی می باشد و تنها کار افراد را بیشتر می کند. سعی کنید تا جایی که می توانید فیلدهای فرم را کم کنید، چراکه هر یک فیلدی که به فرم اضافه می کنید بر روی نرخ تبدیل اثر خواهد گذاشت.
2- طبقه بندی فیلدها و اولویت ها
فرم ها را به گونه‌ای طراحی کنید که حالت گفتگو داشته باشند تا ارتباط بهتری با کاربران برقرار کنند. در این حالت باید اطلاعات به صورت طبقه بندی شده از کاربر دریافت شود تا مردم بداند که آن فیلد را به چه دلیلی پر می کنند. در اینجا طبقه بندی صحیح فیلدها مد نظر می باشد. برای مثال، قبل از اینکه آدرس کاربر را بپرسید، لازم است که نام وی را دریافت کرده باشید.
از دیگر موارد مهم می توان به طبقه بندی فیلدها اشاره کرد. در صورتی که در فیلدتان اطلاعاتی مختلفی از کاربر را دریافت می کنید، بهتر است که سوالات مرتبط را در یک بلاک قرار دهید. برای درک بهتر موضوع به تصویر فوق نگاه کنید، فرم سمت چپ نسخه بهینه سازی شده سمت راست می باشد.
برای گروه بندی لازم است که در کدنویسی فرم از المان های <fieldset> و <legend> استفاده کنید.
3- برچسب ها را کوتاه نگه دارید
کاربران از طریق برچسب ها (label) متوجه می شوند که در فیلدها باید چه اطلاعاتی را وارد کنند. یکی از راه های اصلی بهبود رابط کاربری فرم ها کوتاه نگه داشتن متن برچسب ها می باشد.
برچسب ها کاربرد فیلد را به کاربران تشریح می کنند، اما خودشان متن های چندان کاربردی نیستند. بنابراین لیبل ها را کوتاه و مختصر انتخاب کنید.
4- از فیلدهای تکراری استفاده نکنید
این مشکل بیشتر در فرم های عضویت دیده می شود. جایی که شما باید به اجبار آدرس ایمیل و رمز عبور را برای دو مرتبه وارد کنید!
شاید بگویید که این کار برای جلوگیری از بروز اشتباه تایپی می باشد، اما بهتر است بدانید که کاربران وقتی به چنین فیلدهایی می رسند، اطلاعات را از فیلد اولیه کپی می کنند. در نتیجه، اگر اشتباهی هم رخ داده باشد، همان اشتباه مجددا تکرار خواهد شد.
5- فیلدهای اختیاری را متمایز کنید
بهتر است که اصلا فیلد اختیاری نداشته باشید. قانون شماره 1 را به خاطر بیاورید: هر قسمت از اطلاعات را که الزامی نیست حذف کنید تا وقت کاربران گرفته نشود. اما اگر می خواهید که از آنها استفاده کنید، آن موقع باید به وضوح مشخص کنید که کدام فیلدها باید پر شوند. حالت رایج برای این مورد استفاده از علامت ستاره (*) می‌باشد.
6- مراقب مقادیر پیشفرض باشید
از مقادیر پیشفرض برای فیلدها استفاده نکنید، به خصوص اگر مقدار آن فیلد مهم باشد.
بررسی ها نشان داده است که کاربران فرم ها را به سرعت مرور می کنند، در نتیجه اگر فیلدی به صورت پیشفرض مقدار داشته باشد، بخش بزرگی از کاربران آن فیلد را نادیده گرفته و همان مقدار پیشفرض را بدون تغییر ثبت خواهند کرد.
البته استثناهایی هم وجود دارد. برای مثال می توانید کشور کاربر را با استفاده از اطلاعات جغرافیایی بدست آورید. بدین طریق کاربران می توانند با سرعت بیشتری فرم را پر کنند. البته در استفاده از این گونه موارد باید محتاط باشید، چون کاربران تمایل دارند که فیلدهای حاوی مقدار را نادیده بگیرند.
7- تا حد امکان نیاز به تایپ را کم کنید
شما به عنوان یک طراح و کدنویس قطعا سرعت تایپ بالایی دارید، اما بسیاری از مردم به کندی و با اشتباه تایپ می کنند. به خصوص اگر قرار باشد که فرم را در تلفن همراه پر کنند که با محدود بودن اندازه صفحه نمایش، این فرایند را برای افراد آزار دهنده می کند. پس اگر می خواهید رابط کاربری فرم ها کاربر پسند باشد، تایپ موارد غیرضروری را حذف کنید.
این کار را می توانید از طریق ویژگی همچون تکمیل خودکار پیاده سازی کنید، تا کاربران تنها مقدار اندکی از اطلاعات را وارد کنند.
8- استفاده از اعتبار سنجی بلادرنگ (real-time)
در دنیای ایده آل کاربران فرم ها را با اطلاعات مورد نیاز پر کرده و کار خود را با موفقیت به انجام می رسانند، اما در دنیای واقعی، اغلب افراد دچار اشتباه می شوند. در نتیجه اگر شخصی پس از ثبت فرم متوجه شود که اشتباهی رخ داده است، باید کل فرم را برای پیدا کردن آن فیلد مشکل دار بررسی کند.
ما می‌خواهیم که یک رابط کاربری حرفه‌ای ایجاد کنیم تا رضایت حداکثری کاربران را جلب کنیم، به همین دلیل پیشنهاد اعتبار سنجی بلادرنگ (real-time) را مطرح کرده ایم. در این حالت اگر اشتباهی هم در پر کردن فیلدها رخ داده باشید، دیگر لازم نیست تا زدن دکمه “ثبت” منتظر ماند.
به خاطر داشته باشید که در اعتبار سنجی تنها مشکل کاربر را نشان ندهید؛ بلکه باید نحوه انجام صحیح را هم به آنها بگویید. این مورد باعث افزایش اعتماد کاربران خواهد شد و فرم را با دقت بیشتری پر خواهند کرد.
9- عدم استفاده از متن در داخل فیلدها
در برخی از طراحی فرم ها دیده می شود که متن برچسب داخل خود فیلد قرار می گیرد. به این حالت که در اصطلاح متن placeholder گفته می شود، هرگز توصیه نمی شود. زمانی که از چنین سبکی برای فرم ها استفاده می کنید، کابران با مشاهده مقدار در داخل فیلد، از کنار آن رد می شوند (مگراینکه تمام فیلدها بدین شکل باشند).
10- از دکمه “تنظیم مجدد” استفاده نکنید
تقریبا می توان گفت که این دکمه هیچ کمکی به کاربر نمی کند. تصور این موضوع که شخصی به یک دکمه احتیاج داشته باشد تا تمام کارهایش را از بین ببرد سخت است. احتمالا اینترنت با حذف دکمه های تنظیم مجدد به جایی بهتر تبدیل خواهد شد.