باتوجه به گسترش روز افزون گوشیهای هوشمند اگر به آمار مختلف سر بزنیم متوجه این نکته میشویم که تعداد بازدیدکنندگان ما توسط موبایل در صدر آمار قرار دارد و بیشتر بازدید کنندگان ما به وسیله موبایل از سایت ما دیدن میکنند.
بنابراین این نکته بسیار اهمیت پیدا میکند که وب سایت ما در موبایل وضعیت مناسبی داشته باشد و از لحاظ سرعت بارگذاری و همچنین شکل نمایش مطالب و ابعاد تصاویر و دیگر عناصر در وضعیت مطلوبی قرار داشته باشد.
اگر وب سایت ما در موبایل شکل ظاهری مناسبی نداشته باشد چکار کنیم؟
در این زمان نیاز است که قالب خودتان را کاملا ویرایش کرده و به شکل کاملا ریسپانسیو آن را تغییر دهید. اگر از سی ام اس های وردپرس و جوملا استفاده میکنید و در ابتدا مرحله انتخاب قالب هستید به این نکته توجه زیادی کنید که شکل ظاهری آن قالب در موبایل شیک و مناسب باشد و به موضوع ریسپانسیو بودن آن قالب توجه کنید. برای تست این موضوع می توانید از دموهای موجود در قالب و یا نمونه سایتهای که به آن قالب طراحی شدهاند استفاده کنید.
بررسی موبایل پسندانه بودن سایت توسط گوگل
شرکت گوگل دارای ابزار قدرتمند گوگل وب مستر تولز است که به وسیله آن می توانید علاوه بر کلی از امکانات دیگر وضعیت وب سایت خود را در موبایل بررسی کنید. این ابزار تمامی آدرسهای ایندکس شده شما را از نظر مناسب بودن آن در موبایل بررسی کرده و موبایل پسندانه بودن و یا نبودن صفحات شما را اعلام میکند.
همچنین شما خارج از ابزار گوگل وب مستر از طریق آدرس تست صفحات سایت تمامی صفحات دلخواه خود را بررسی کنید.
با توجه به گسترش روز افزون گوشیهای موبایل و استفاده بسیار زیاد از این دستگاه و با توجه به نتایج آمارهای مختلف بخش اعظمی از کاربران از طریق مرورگر موبایل وب سایت ما را مشاهده میکنند. بنابراین سادگی و راحتی کار آنها هنگامی که از وب سایت ما استفاده میکنند میتواند بسیار مهم باشد. در ادامه این مقاله به نکاتی اشاره میکنیم که شما را در این زمینه یاری میکند.
به فاصله بین عناصر طراحی توجه کنید
هدف از تمرکز و توجه به فاصله مناسب بین عناصر طراحی تنها به دلیل زیبایی نیست بلکه هدف اصلی ایجاد سهولت در استفاده از کاربران موبایل است. یک اشتباه رایج در طراحی سایت در موبایل که در Google Search Console خطایی آن بسیار دیده میشود این است که “عناصر قابل کلیک بسیار نزدیک به هم هستند”.
نزدیکی عناصر قابل کلیک بهم میتواند سبب کلیکهای ناخواسته و اشتباه کاربران شود و آنها تجربه بعدی را از وب سایت ما داشته باشند. بنابراین باید در کنار هم قرار دادن عناصری که داری لینک هستند توجه زیادی داشت.
در دسکتاپ، بازدیدکنندگان با ماوس حرکت میکنند که یک ابزار بسیار دقیق است اما در موبایل با انگشتان خود برای پیمایش در صفحه استفاده میکنند که دقت موس را نداشته و درصورت نزدیک بودن عناصر کلیک پذیر در کنارهم میتواند باعث دردسر شود مخصوصا زمانی که کاربر قصد دارد یک کار چند مرحلهای را انجام دهد.
از خوانایی متن و فونت اطمینان حاصل کنید
علاوه بر فاصله، یکی دیگر از خطاهای رایج استفاده از تلفن همراه در گزارشات کنسول Google این است که “متن برای خواندن بسیار کوچک است” در انتخاب اندازه و نوع فونتهای خود در سایت بسیار دقت کنید تا کاربران برای استفاده از وب سایت به دردسر نیافتند همچنین فاصله خود را در صفحه خود بصورت استاندارد قرار دهید.
هنگامی که درباره فونت و اندازه تصمیم گرفتید، باید نسبت کنتراست رنگ را نیز در نظر بگیرید. از آنجا که بازدیدکنندگان ممکن است در داخل یا خارج از منزل یا با نور ضعیف باشند، رعایت استانداردها برای تضاد بین رنگ پس زمینه و پیش زمینه مهم است.
همچنین برخی افراد دارای بینایی ضعیفی هستند و انتخاب رنگهای اشتباه میتواند سبب تجربه نامناسب کاربر از سایت ما شود. سایتهای آنلاین زیادی وجود دارد که میتواند شما را در انتخاب رنگهای مناسب همراهی کند.
حرکتهای شناور و انیمیشنها را کنترل کنید
هنگام انتخاب انیمیشن در فرایند طراحی، باید دقت کنید که آیا این تعاملات در دستگاههای تلفن همراه نیز به درستی رخ میدهند یا خیر. اگر مشکلات عملکردی در انمیشنها وجود دارد، غیر فعال کردن انیمیشنها و پس زمینههای ویدئویی پیچیده در تلفن همراه مفید است. این کار میتواند زمان بارگذاری سایت را بالا ببرد. این نوع تغییرات از سال 2018، هنگامی که سرعت صفحه تلفن همراه به یکی از عوامل رتبهبندی گوگل تبدیل شد، رواج بیشتری یافته است. بنابراین برای طراحی هر نوع انیمیشنی باید عملکرد آن در موبایل نیز بررسی کرد.
دقت برای قرار دادن پنجرههای بازشو و عناصر دیگر
از ژانویه 2017، گوگل نسبت به استفاده از واسطهای مزاحم که جلوی دید همه بازدیدکنندگان را از محتوای صفحه مسدود میکند، هشدار داده است، زیرا آنها به ویژه در تلفن همراه مشکل ساز هستند.
هنگام اتخاذ رویکرد طراحی سایت در موبایل، در نظر گرفتن نحوه قرارگیری عناصر بر روی دستگاههای کوچکتر مهم است. به عنوان مثال، یک دکمه چسبنده در سمت راست صفحه که به صورت پیمایش بازدیدکننده باقی میماند ممکن است روی دسکتاپ کار کند، اما این نوع عناصر چسبنده میتوانند فضای نمای را حتی در دستگاه تلفن همراه کوچکتر کنند.
در حالی که برخی از عناصر مانند چت زنده و ابزارکهای دسترسی ممکن است بعد از طراحی صفحه اضافه شود برنامه ریزی برای این موارد در مراحل اولیه طراحی وب می تواند به جلوگیری از رابط کاربری آشفته برای بازدیدکنندگان کمک کند.
چت زنده به یک ابزار بسیار محبوب تبدیل شده است و آیکنهای چت اغلب در گوشه سمت راست پایین یا چپ طراحی یافت میشوند بنابراین به شیوهای این دکمه ها را طراحی کنید که سبب مزاحمت برای کاربر نشود.
منبع : getflywheel
