مشاوره: 23087 21 (98+)

نقش فرم ها در طراحی سایت

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

فرم در طراحی سایت

اهمیت فرم ها د ر طراحی سایت

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

نرخ تبدیل یک فرم به درصدی از کاربران گفته میشود که به آن فرم رسیده اند و آن را با موفقت تکمیل میکنند.برای مثال شما در صفحه اصلی سایت خود یک فرم ثبت نام در خبرنامه دارید و از ۱۰۰ نفر بازدید کننده سایت شما فقط ۱۰ نفر آن فرم را تکمیل میکنند پس در این حالت نرخ تبدیل آن فرم در سایت شما ۱۰% است.

زیبای بصری :

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

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

توضیح دادن فیلد ها :

هر فرم از چندین فیلد تشکیل شده که کاربران در هر فیلد باید اطلاعات خاصی را وارد کنند . مانند فیلد نام , آدرس , شماره همراه و…… برای فیلدهایی که ممکن است برای کاربر گیج کننده باشد حتما بخش توضیحات قرار دهید تا جلوی بروز اشتباه گرفته شود:

  • در فیلد شماره ملی بنویسید که شماره ملی را بدون فاصله یا خط تیره وارد کنند
  • در فیلد شماره کارت بانکی بنویسید که شماره کارت را بدون فاصله یا خط تیره وارد کنند
  • در فیلد شماره همراه بنویسید که شماره موبایل را بدون +۹۸ و با ۰ وارد کنند
  • در فیلد ایمیل تذکر بدهید که آدرس ایمیل با www شروع نمیشود

سنجش امنیت رمز عبور :

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

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

این قابلیت را در فیلد رمز عبور قرار دهید که اگر در هنگام تکمیل فرم دکمه Caps lock روشن بود یا زبان سیستم به غیر از انگلیسی تغییر کرده بود با پیغام مناسب به کاربر هشدار داده شود.

اعتبار سنجی داخلی :

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

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

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

validation فرم

به طور کلی استفاده از اعتبار سنجی بلادرنگ Real time Validation در طراحی سایت و طراحی فرم ها میتواند نرخ تبدیل آن فرم را بسیار زیاد کند و باعث رضایت کاربر شود.

فیلدهای ضروری :

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

  1. نام کاربری
  2. رمز عبور
  3. ایمیل

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

نسخه موبایل :

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

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

مفید و مختصر :

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

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

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

کد امنیتی :

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

 

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

 

کلمات کلیدی:

آخرین مقالات

رازهای طراحی سایت

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

طراحی سایت

رازهای طراحی سایت

راز اول : محتوی همه چیز است Content Is The King :

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

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

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

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

محتوی پادشاه سایت شماست , پس به محتوی بیشتر از طراحی سایت خود اهمیت بدهید.

راز دوم :استفاده درست از گرافیک

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

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

اگر میخواهید سایت کم حجم و زیبایی داشته باشید :

  • از تصاویر به تعداد زیاد استفاده نکنید
  • حجم و سایز تصاویر را مناسب با مطلب خود انتخاب کنید
  • از رنگ روشن برای پس زمینه و رنگ تیره برای متن استفاده کنید
  • متن خود را پرارگراف بندی کنید و کلمات مهم را به صورت پر رنگ یا زیر خط نمایش دهید
  • در انیمیشن ها و فایلهای Gif تعداد فریم ها را کم کنید تا حجم نهایی آن کاسته شود
  • از موسیقی پس زمینه استفاده نکنید
  • از اپلت های زیباساز جاوا استفاده نکنید
  • اگر ویدئو دارید برای آن دکمه پخش/ توقف قرار دهید

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

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

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

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

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

کلمات کلیدی:

آخرین مقالات