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

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

بیایید کار کنیم!

چرا فرم های شما برای موبایل مناسب است

فرم ها در هر شکل و اندازه ای وجود دارد. اغلب اوقات ، شما با فرم های تماس برخورد خواهید کرد:

مثال تماس form.png

فرم های ثبت نام (اشتراک) نیز بسیار محبوب هستند زیرا به شما امکان می دهند ایمیل ها را جمع آوری کرده و در طول کمپین ها آنها را هدف قرار دهید:

ایمیل های هدف در طول campaigns.png

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

به عبارت دیگر ، فرم ها بسیار متنوع هستند و تقریباً همه سایت ها به یک روش یا دیگری از فرم ها استفاده می کنند. بنابراین ، استفاده از فرم های شما ضروری است (مگر اینکه بخواهید تجربه ناامیدکننده ای را برای بازدیدکنندگان خود فراهم کنید).

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

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

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

نکات 5 برای طراحی فرم های آسان برای استفاده در تلفن همراه

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

1. تمام بخش های غیر ضروری را حذف کنید

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

در اینجا یک مثال سریع از a است فرم تماس با چند فیلد اضافی که در موبایل ضروری نیست:

زمینه های مورد نیاز در تلفن همراه.png

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

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

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

2. در صورت امکان از لیست کشویی استفاده کنید

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

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

رزرو کنید .png

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

  1. فیلدی را پیکربندی کنید که فقط ورودی های عددی را بپذیرد.
  2. یک لیست کشویی شامل تمام زمان های موجود برای رزرو را طراحی کنید.

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

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

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

3. اطمینان حاصل کنید که دکمه های ارسال شما به راحتی قابل لمس هستند

این نکته بسیار ساده است ، اما هنوز هم لازم به ذکر است. هر شکلی که شما طراحی می کنید باید شامل روشی باشد تا کاربران تأیید کنند که می خواهند داده های وارد شده را ارسال کنند. در بیشتر موارد ، این به معنای ایجاد یک دکمه ارسال است:

یک دکمه ارسال.png ایجاد کنید

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

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

برای طراحی دکمه ارسال بهتر برای تلفن همراه، در اینجا سه ​​راهنمایی برای بررسی وجود دارد:

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

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

4. اطمینان حاصل کنید که فرمهای شما به سرعت بارگذاری می شوند

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

با سرعت بیشتر اینترنت ، صبر کردن برای بارگیری طولانی مدت یک وب سایت دشوار است. علاوه بر این ، سرعت اینترنت تلفن همراه بسیار بیشتر از اتصالات معمولی خانه متغیر است. این بدان معنی است که اگر بخواهید این کاربران را راضی نگه دارید ، وب سایت شما باید برای دستگاه های همراه بسیار بهینه شود ، زیرا همه آنها به اینترنت دسترسی ندارند (یعنی سریع).

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

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

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

5. فرم های خود را قبل از انتشار منتشر کنید

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

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

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

مروری بر ابزارهای توسعه Chrome.

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

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

طراحی فرم برای mobile.png

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

نمونه ای از فرم بدون مشکلات مقیاس گذاری.

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

نتیجه

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

هنگامی که برای طراحی فرم های دوستانه همراه می شود، پنج نکته برای ساده کردن زندگی شما وجود دارد:

  1. تمام بخش های غیر ضروری را حذف کنید.
  2. در صورت امکان از لیست کشویی استفاده کنید.
  3. اطمینان حاصل کنید که دکمه های ارسال شما آسان هستند.
  4. اطمینان حاصل کنید که فرمهای شما به سرعت بارگذاری می شوند.
  5. فرم های خود را قبل از انتشار آنها تست کنید.