بگذارید با خلاصه‌ای کوتاه از این مقاله آموزش سئو شروع کنیم:

یک شکاف ۲۷۰ درصدی در تبدیلات بین دسکتاپ و موبایل وجود دارد، زیرا نسخه موبایل وب‌سایت‌ها خوب نیستند و همه ما طراحی آن‌ها را غلط انجام می‌دهیم. (حالا که این موضوع را مطرح کردم توضیح خواهم داد که برای رفع این مشکل چه باید کرد).

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

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

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

جهت توسعه یک تجربه واکنش‌گرای مفید برای کاربر موبایل باید دو کار را انجام دهیم:

۱- مهم‌تر از همه باید توجه داشته باشید که چرا یک کاربر موبایل به وب‌سایت شما می‌آید؛
۲- و نیت و هدف آن‌ها را درک کنید.

( در اینجا ۵ معیار ذکر شده که از طریق دنبال کردن آن‌ها می‌توانید بازدیدکنندگان وب‌سایت خود را بهتر درک کنید).

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

در زیر ۵ عنصر اصلی که باید هنگام طراحی نسخه موبایل وب‌سایت مد نظر قرار دهید، عنوان شده‌اند:

۵ گام جهت بهینه‌سازی سایت‌های واکنش‌گرا

۱- بهینه‌سازی مقیاس تصاویر و سنجش ارزش آن‌ها

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

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

از سوی دیگر سایت خرده‌فروشی REI از عکسی یکسان در نقطه مرکزی نسخه دسکتاپ و موبایل استفاده می‌کند اما مقیاس بندی آن بر اساس نیازهای کاربر در هر کدام از نسخه‌هاست.

۲- ساده‌سازی نویگیشن

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

تجزیه و تحلیل رفتار کاربران موبایل در سایت و فهمیدن اینکه به دنبال چه هستند در واقع مانند انتگرال گرفتن است تا بفهمیم که چگونه باید نسخه موبایل را بر اساس نیازهای آن‌ها طراحی کنیم. ممکن است متوجه شوید که اکثر بازدید کنندگان نسخه موبایل بیشتر از نوار جستجو استفاده می‌کنند تا بر روی فراخوان‌های طراحی شده شما (call-to-action button) کلیک کنند، در نتیجه ممکن است بخواهید نسخه موبایل سایت خود را بازطراحی کرده و نوار جستجو را در آن برجسته‌تر کنید و از این طریق کمک کنید تا بازدیدکنندگان سریع‌تر به اهداف خود دسترسی پیدا کنند. به علاوه فهمیدن اینکه کاربران واقعاً در سایت شما به دنبال چه هستند نشان می‌دهد که چه چیزی را فراموش کرده‌اید، چه چیزی واضح نیست و چه چیزی نیاز به بهینه‌سازی دارد.

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

۳- pop-upهای واکنش‌گرا را حذف کرده و از overlay های موبایل استفاده کنید

overlayها و pop-upها که جهت ایجاد تجربه دسکتاپ بر روی موبایل ساخته شده‌اند بازدیدکننده را از هدف اولیه‌اش منحرف کرده و توجه او را به سایت شما جلب می‌کند. در عوض سعی کنید تا بازدیدکننده‌های خود را راهنمایی کرده و آن‌ها را به سوی یک هدف سوق دهید، هدفی که آن‌ها دنبال می‌کنند. استفاده از راه حل‌های دسکتاپ برای موبایل تبدیلات را از بین می‌برد. از آنجایی که امروزه overlayها و pop-upهای دسکتاپ متناسب با ۱۹٫۰۰۰ سایز و رزولوشن مختلف صفحه نمایش موبایل طراحی نشده‌اند، بهتر است که از آن‌ها در طراحی نسخه موبایل سایت خود استفاده نکنید. حتماً نمی‌خواهید که overlay متناسب با رزولوشن و مشخصات دسکتاپ باشد، زیرا مقیاس آن‌ها قابل تغییر نبوده و باعث می‌شود تا نویگیشن موبایل غیر قابل تحمل شود.

یک overlay بد مانند مثال زیر کاملاً صفحه نمایش موبایل را می‌پوشاند و متناسب با آن نیست در نتیجه باعث می‌شود که نتوانید هیچ محتوای دیگری را ببینید و کلیک کردن را سخت می‌کند. (به ناقص نشان داده شدن کادر ایمیل در مثال LastKings توجه کنید).

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

۴- متن خود را ساده، کوتاه و بهینه کنید

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

درحالیکه به نظر می‌رسد این متن به خوبی بر روی دسکتاپ کار کند اما داستان در مورد موبایل کاملاً متفاوت است. متنی که همه صفحه را پر کند قابل خواندن نیست و همه عناصر تبدیل (مانند نمادهای اعتماد و فراخوان‌ها) را تحت تاثیر تراکم متن قرار می‌دهد. این نمونه دیگری از طراحی واکنش‌گرای ناموفق است:

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

۵- فراخوان‌های خود را بازبینی و شفاف‌سازی کنید

طراحی نسخه موبایل سایت باید تنها یک هدف داشته باشد و آن هم پشتیبانی از فراخوان‌ها (call-to-action button) است. فراخوان باید اولین عنصری باشد که بازدیدکننده موبایل به آن توجه می‌کند، و ضمناً باید فوراً به او بگوید که چه کاری انجام دهد. برای مثال Udemy یک پلتفرم یادگیری آنلاین است که از یک دکمه فراخوان خیلی واضح در بالای صفحه فرود نسخه موبایل خود استفاده کرده است که این فراخوان کاملاً در راستای اهداف کلی شرکت است. آن‌ها می‌دانند که مشتریان‌شان جهت یادگیری به سایت آن‌ها مراجعه می‌کنند بنابراین جهت دستیابی به این هدف به آن‌ها کمک می‌کنند. آن‌ها دکمه‌ای را برای پیدا کردن دوره‌ها و یک نوار جستجو را برای برجسته ساختن نویگیشن قرار داده‌اند.

سایتی یکپارچه و بدون نقص طراحی کنید

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

چه تاکتیک‌هایی در طراحی نسخه موبایل برای شما کارایی داشته است؟ نظرات خود را با ما به اشتراک بگذارید.