طراحی واکنش‌گرا و تاثیر آن بر نرخ تبدیل

[mgp.co.ir]

طراحی واکنش‌گرا (Responsive) دو سوم نرخ تبدیل شما را از بین می‌برد

راهکارهایی برای حل این مسئله در این مقاله ارائه شده است

ابتدا خلاصه‌ای از این مقاله را با موضوع تاثیر طراحی واکنش‌گرا بر روی نرخ تبدیل ارائه می دهیم:
شکاف ۲۷۰ درصدی در نرخ تبدیل بین دسکتاپ (desktop) و تلفن‌همراه وجود دارد، زیرا وب‌سایت‌های تلفن‌همراه امروزی به اندازه کافی مناسب نیستند و همه ما نیز در طراحی آن‌ها اشتباه کرده‌ایم.
همانطور که از ماهیت طراحی واکنش‌گرا مشخص است، هدف آن باید یکپارچه‌سازی تجربه در دنیای بین‌دستگاه‌ها باشد و بدین منظور باید طراحی دسکتاپ شما با یک صفحه‌نمایش کوچک تلفن‌همراه به خوبی مطابقت داشته باشد. متاسفانه، مختصرسازی تمامی محتوای دسکتاپ درون یک صفحه‌نمایش کوچک دارای آثاری کاملا مخرب و متضاد است و در حقیقت سبب زیان زیادی در نرخ‌ تبدیل شما خواهد شد. ولی چگونه این اتفاق روی می‌دهد؟
طراحی واکنش‌گرا سبب بهم‌ریختگی وب‌سایت‌های تلفن‌همراه با محتوای نامرتبط برای کاربران بازدید‌کننده می‌شوند. زمانی که طراحی با درنظرگیری دسکتاپ صورت پذیرفته باشد، بازدید‌کننده نسخه تلفن‌همراه آن که دارای اهداف و ذهنیت متفاوتی است، ممکن است آنچه را که به دنبال آن آمده بود در وب‌سایت شما پیدا نکند و وب‌سایت شما را در حالیکه احساس ناامیدی و گیجی می‌کند، ترک کند. این موضوع اصلی‌ترین منبع زیان شدید شما در نرخ تبدیل است.
البته این موضوع بدین معنی نیست که شما باید طراحی واکنش‌گرا را به کل کنار بگذارید، بلکه به جای آن شما باید به جای تبدیل ساده نسخه دسکتاپ به تلفن همراه، به تجربه کاربر تلفن‌همراه و طرز تفکر وی نیز در هنگام بازدید از وب‌سایت خودتان نیز فکر کنید.
برای توسعه یک تجربه تلفن‌همراه واکنش‌‌گرای مفید، شما باید دو کار انجام دهید:

1. مورد اولی که مهم‌ترین مورد نیز است این است که شما باید بدانید که چرا یک مشتری از طریق تلفن‌همراه به سایت شما آمده است و
2. قصد وی چیست

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

1. بهینه‌سازی مقیاس‌گذاری تصویر و در نظرگیری مقدار آن

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

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

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

1. ساده‌سازی هدایت (navigation)

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

۳. پاپ‌آپ های واکنش‌گرا را از بین ببرید و از همپوشانی‌های (overlays) تلفن همراه استفاده کنید.

پاپ‌آپ‌ها و همپوشانی‌هایی (overlays) که برای دسکتاپ طراحی شده‌اند، باعث منحرف‌سازی کاربران تلفن همراه از ورود به صفحه فرود مد نظرشان می‌شود. به جای این کار، کاربران را راهنمایی کنید تا به هدف اصلی خودشان برسند، هدفی که بابت آن به سایت شما آمده‌اند. استفاده از راه‌حل‌های دسکتاپ سبب نابودی نرخ تبدیل برای تجربه کاربران تلفن همراه خواهد شد. از آنجایی که پاپ‌آپ‌ها و همپوشانی‌ها برای صفحه نمایشی ترکیبی دستگاه‌های تلفن همراه امروزی به اندازه و رزلوشون ۱۹۰۰۰ طراحی نشده‌اند، بنابراین توصیه می‌شود از آن‌ها در تلفن همراه استفاده نکنید. بنابراین از پاپ‌آپ‌ها و همپوشانی‌هایی که مناسب اندازه نسخه دسکتاپ هستند در نسخه تلفن همراه استفاده نکنید زیرا استفاده از آن‌ها در نسخه تلفن‌همراه برای کاربران غیرقابل تحمل خواهد بود.
یک همپوشانی بد، مانند مثال‌های زیر، به طور کامل بر روی صفحه‌نمایش تلفن همراه همپوشانی ایجاد می‌کنند و مانع از نمایش سایر محتواها برای کاربران می‌شود و حتی کلیک برای خروج از آن‌ها امری دشوار است زیرا متناسب با اندازه صفحه نمایش تلفن‌همراه نیستند (در مثال LastKings مشاهده می‌کنید که چگونه بخش ایمیل بریده شده است).

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

۴. سادگی بهترین انتخاب است: به کوتاه‌سازی، ساده‌سازی و بهینه‌سازی متون خود بپردازید

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

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

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

ایجاد طراحی یکپارچه در روزگار کنونی ( طراحی واکنش‌گرا )

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

منبع: https://moz.com/blog/responsive-design-fix-conversions
منبع ترجمه : http://mag.betarjom.com/%d8%b7%d8%b1...f%db%8c%d9%84/
سفارش ترجمه محتوای انگلیسی به فارسی