چند نکته کاربردی در طراحی فرم های استاندارد:

[sitecup1]

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

در ادامه به چند نکته مهم که با رعایت آنها میتوانید فرمهای استاندارد و خوب طراحی کنید، اشاره میکنیم:

سهولت در خواندن و اسکن کردن فرم

همانطور که میدانید کاربران در وب سایت ها معمولاً مطالبرا اسکن میکنند یعنی نگاه اجمالی به همه مطالب می اندازند تا مطلب مورد نظر خود را پیدا کنند یا تصمیم بگیرند که چه عملیاتی را در سایت انجام خواهند داد. همین مسئله برای فرم ها هم صدق میکند. کاربر با دیدن فرم باید به سرعت متوجه شود که آن فرم چه کاربردی دارد و چه اطلاعاتی میخواهد.

ویژگی های مورد نیاز برای اینگونه فرم ها عبارتند از:

• تضاد یا کنتراست: متنها فرم باید کوتاه و به راحتی قابل خواندن باشند. هرگز از رنگ های مختلف در فرم استفاده نکنید و سعی کنید همان حالت استاندارد و رایج نوشته تیره بر روی زمینه روشن را به کار ببرید.

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

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

قرار دادن برچسب های شناور

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

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

فرمت گذاری یا ماسک فیلد

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

به مثال زیر توجه نمایید، یک شماره تلفن در فرمت های مختلف:

• (000) 000-0000

• 000-000-0000

• 0000000000

کاربر میتواند شماره تلفن را به هر 3 مدل بالا وارد کند، چطور باید تشخیص دهد که فرمت درست و مدنظر شما کدام است؟ اینجاست که ماسک فیلد یا همان فرمت گذاری به کمکتان می آید. با استفاده از این ویژگی خود فیلد به طور خودکار کاربر را راهنمایی میکند و کاربر بدون فکر کردن تنها نیاز دارد که شماره را وارد کند. (این کار همچنین باعث راحتی کاربران موبایل میشود چون دیگر نیازی به سوئیچ کردن بین اعداد و نوشته در کیبورد ندارند).

ایجاد فرم های سازگار با کیبورد

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

در دسکتاپ، کاربر باید بتواند بدون نیاز به کلیک کردن برروی هر فیلد، فیلد ها را به ترتیب پر کرده و به طور اتوماتیک با پر کردن فیلد یا فشار دادن دکمه هایtab یاenter ، جلو برود. سایت w3.org مجموعهکاملی از کیبوردها را ارائه کرده است.

در موبایل، نوع کیبورد را با نوع داده ای که مورد نیازاست هماهنگ تنظیم نمایید. اگر داده ورودی از نوع حروف میباشد، از کیبورد آلفا و برای اعداد از کیبوردnumeric استفاده کنید.

استفاده از فرم های عمودی

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

فرم های افقی تنها در صورتی که فرم خیلی کوتاه باشد مثلافقط نیاز به وارد کردن ایمیل و رمز عبور باشد میتوانند به کار برده شوند. در غیر این صورت کلا بهتر است فرم را به صورت عمودی طراحی نمایید.

همچنین فیلدهای فرم باید یک ترتیب منطقی داشته باشندمثلاً بعد از نام همیشه نام خانوادگی را قرار میدهیم و بعد فیلدهای دیگر. برای مثال ترتیب نام، ایمیل، نام خانوادگی یک ترتیب غیرمنطقی میباشد.

حالت تشخیص اتوماتیک

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

در نهایت بعد از پر کردن فرم و ثبت آن توسط کاربر از کاربر تشکرکرده و فیدبک بدهید. ایجاد یک فرم استاندارد و کاربرپسند شانس شما را برای جمع آوری اطلاعات و تبدیل یک بازدید کننده به کاربر دائمی وب سایت را افزایش میدهد.