اصول طراحی وبسایت برای موبایل

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

24 نکته گوگل برای طراحی سایت برای موبایل:

۱- دکمه های “call to action” را در بالا و وسط صفحه و به نحوی قرار دهید که به راحتی توسط کاربر قابل مشاهده باشد.
call to action on mobile design

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

۳- راه برگشت به صفحه اصلی را تسهیل کنید. از لوگو برای لینک به صفحه اصلی استفاده کنید.
لینک لوگو به صفحه اصلی سایت موبایل قرندلی

۴- پیامهایی مانند فروش ویژه و غیره نباید کل صفحه را بگیرند و مانع از دیده شدن لوگو و منو بشود.
نمایش پیام در سایت موبایل

۵- قسمت جستجو در همه صفحات به راحتی دیده شود.
وجود جستجو در همه صفحات موبایل

۶- نتیجه جستجو با عبارت جستجو شده همخوانی داشته باشد تا کاربر سریع تر به هدفش برسد.
همخوانی نتیجه جستجو در سرچ با موبایل

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

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

۹- اجازه خرید به کاربر مهمان را بدهید ولی هر جایی که ممکن بود، او را تشویق به ثبت نام در سایت کنید.
خرید کاربر مهمان در سایت موبایل

۱۰- کار را برای کاربر راحت کنید. فیلدها را از قبل برای کاربرانی که ثبت نام کرده اند پر کنید.
پر کردن فیلدها از قبل برای کاربر موبایل ثبت نام شده

۱۱- از دکمه کلیک برای تماس استفاده کنید که کاربر بتواند به راحتی با کلیک بر آن با اپراتور مربوطه تماس بگیرد.
دکمه تماس در طراحی سایت موبایل

۱۲- کاربر موبایل باید بتواند به راحتی در دستگاههای مختلف به ادامه کارش بپردازد.
کار کردن با موبایل و تبلت و دسکتاپ

۱۳- در مواقعی که قرار است کاربر موبایل، اعدادی را وارد کند، صفحه کلید اعداد را به او نشان دهید.
صفحه کلید اعداد در طراحی سایت برای موبایل

۱۴- آسوده ترین راه برای وارد کردن اطلاعات را برای کاربر موبایل در نظر بگیرید. مانند منوی آبشاری و یا امکان تیک زدن.
منوی آبشاری در طراحی سایت برای موبایل

۱۵- از تقویم دیداری برای راحتی کاربر جهت انتخاب تاریخ و برنامه ریزی استفاده کنید.
تقویم در سایت موبایل فرندلی

۱۶- به صورت شفاف توضیح دهید. از اعتبارسنجی لحظه ای استفاده کنید و به کاربر بگویید که علت اشتباه بودن اطلاعاتی که وارد کرده چه بوده است.
اعتبارسنجی لحظه ای در طراحی سایت برای موبایل

۱۷- طراحی فرم حائز اهمیت است. کوتاه و راحت خوانده شدن، کلید طراحی فرم برای طراحی سایت موبایل است.
طراحی فرم برای سایت رسپانسیو

۱۸- همه صفحات وبسایت هم با دسکتاپ و هم با موبایل به صورت اصولی دیده شوند.
طراحی صفحات موبایل برای همه صفحات دسکتاپ

۱۹- عکسها و همه المان های سایت خوانا باشند.
عکسهای خوانا در طراحی سایت برای موبایل

۲۰- از عکسهای کلیدی با کیفیت و از نمای نزدیک استفاده کنید. مانند عکس محصولات.
استفاده از عکسهای باکیفیت در طراحی سایت موبایل

۲۱- به کاربران بگویید که وبسایت در حالت افقی بهتر دیده می شود یا عمودی.
افقی یا عمودی بودن صفحه روی موبایل

۲۲- کاربران را در یک صفحه browser نگاه دارید. از هدایت کاربر به صفحه دیگر و یا تب دیگر خودداری کنید.
کاربر موبایل را در یک صفحه نگاه دارید

۲۳- از برچسب موبایل/دسکتاپ استفاده کنید.
برچسب موبایل و دسکتاپ در طراحی سایت

۲۴- به کاربر اجازه دهید شعبات و یا فروشگاه های نزدیک خودش را پیدا کند.
نمایش فروشگاه های اطراف کاربر موبایل

مقاله انواع فیلد input در HTML5 برای طراحی فرم به شما کمک می کند که کیبورد یا کیپد متناسب با دیتای ورودی را به کاربر موبایل نمایش دهید.

7 دیدگاه

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

  2. سلام و خسته نباشید بابت سایت پربارتان. سایت ما یک سایت فروشگاهی است و میانگین ورودی کاربران موبایلی ما در دو ماه اول 96 در حدود 65 درصد در ساعات اداری و در حدود 75 درصد در شب ها است.تلاش میکنم که از نکات ذکر شده در این مقاله استفاده کنم تا بتوانم کاربران موبایلی را بیشتر جذب کنم.

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

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

  4. سایت ما یک سایت خبری است و بازدید روزانه آن توسط موبایل بیش از 65 درصد است. دو سال پیش حداکثر ۳۵ درصد از کاربران سایت ما با دستگاه موبایلشان سایت ما را چک میکردند و این روند صعودی همچنان ادامه دارد ولی شیب افزایشش نسبت به پارسال کمتر شده.

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

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

پاسخی بگذارید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *