طراحی ریسپانسیو (Responsive) به معنای نمایش صحیح سایت در دستگاه‌های مختلف با سایز صفحه نمایش مختلف است. طراحی ریسپانسیو (پاسخ‌گرا یا واکنش‌گرا) به طراحان وب‌سایت کمک می‌کند تا ظاهر وب‌سایتِ طراحی‌شده در ابزارها و رزولوشن‌های متفاوت به درستی نمایش پیدا کند تا کاربران با هر ابزاری که از سایت شما بازدید می‌کنند محتوا و ظاهر سایت را استاندارد و خوشایند ببینند.
این یعنی ظاهر یک وب‌سایت به طور خودکار با توجه به صفحه نمایش دستگاهی که در دست کاربر است تغییر کند و قالب‌بندی آن منطبق با ابعاد هر دستگاهی شود و این بدان معنی است که طراحی باید نهایت انعطاف را در هر صفحه نمایشی داشته باشد.
جهت بررسی اینکه آیا سایت شما به صورت ریسپانسیو و استاندارد طراحی شده است یا خیر می‌توانید از ابزار Google Mobile-Friendly استفاده کنید. اگر مشکلی وجود داشته باشد می‌توانید گزارشی در مورد خطاها مشاهده کنید.
در ادامه یک نمونه موردی مرتبط با اهمیت بحث طراحی ریسپانسیو سایت را مطالعه خواهیم کرد.
معرفی نمونه موردی:
“SHirtinator” یکی از ارائه‌دهندگان محصولات به صورت آنلاین و پیشرو در اروپا است که در زمینه چاپ روی هدایا و سفارشاتی مانند تی‌شرت، پیراهن، لباس و… فعالیت می‌کند و ترافیک خوبی را به سمت خود جذب‌کرده‌است. این وب‌سایت چندی پیش با بررسی واکنش بازدیدکنندگان و میزان تاثیر‌گذاری طراحی وب‌سایت روی مبحث ریسپانسیو(واکنش‌گرا) تمرکز کرد.
-
فرآیند طراحی فرضیه A/B Testing:
“Shirtinator” با نمایش صفحات وب‌سایتش روی دسکتاپ یا لپ تاپ هیچ مشکلی نداشت و برای ترافیکی که از سمت دستگاه‌های تلفن همراه جذب می‌شدند طراحی ریسپانسیو انجام داده بود پس از چندی متوجه شد که برای توسعه و بهینه‌سازی صفحات وب باید به فکر ترافیکی که از سمت دستگاههایی با صفحه نمایش بزرگ‌تر از گوشی همراه باشد و این موضوع را مورد بررسی قرار داد؛
ترافیکی که به وسیله دستگاههایی مانند تبلت وارد سایت می‌شوند این صفحات را چگونه می‌بینند؟
طراحی ریسپانسیو برای تلفن همراه با در نظر گرفتن صفحه نمایش کوچک انجام شده بود اما این ظاهر جدید در سایزی کوچک، منجر به تولید یک ضعف بصری در تبلت‌ها به شکل فضاهای پرت و خالی شد که تمرکز بیننده روی محتوا به هم می‌زد. به همین دلیل این وب‌سایت تصمیم گرفت از نشان دادن نسخه موبایل در تبلت‌ها صرف نظر کند و نسخه دسکتاپ را در تبلت‌ها به نمایش بگذارد. سپس این راه‌حل را برای حذف ضعف بصری در قالب یک آزمایش بررسی کرد تا میزان فروش و واکنش کاربران را بررسی کند.
-
فرضیه A/B Testing:
این وب‌سایت نسخه دسکتاپ را در تبلت‌ها به نمایش گذاشت و طراحی ریسپانسیو را فقط در در گوشی‌ها به کار گرفت و این حالت را نسبت به حالت قبل بررسی کرد.
حالت A: نمایش نسخه موبایل در تبلت
حالت B: نمایش نسخه دسکتاپ در تبلت‌ها
می‌توانید مشاهده کنید که فضاهای خالی چطور طراحی صفحه را در تبلت غیر جذاب می‌کند.
-
نتیجه A/B Testing:
نمایش نسخه دسکتاپ در تبلت‌ها عملکرد بهتری نسبت به نسخه تلفن همراه داشت و درآمد به میزان شگفت‌آوری تا نرخ ۷۲٪ افزایش یافت.
-
آنالیز A/B Testing:
- دسته‌بندی بازدیدکنندگان از نظر نیازهای مشترک، تنظیمات، لوکیشن، دستگاهی که برای دسترسی به یک سایت استفاده می‌کنند، ساعت مراجعه در طول روز و خیلی از رفتارهای موجود دیگر به شما در کشف چالش‌ها و طراحی راه‌حل‌ها برای بهینه‌سازی وب‌سایت‌ها کمک می‌کند.
- حواستان به تکنولوژی و بروزرسانی‌ها باشد زیرا اگر اطلاعات دیجیتالی شما با بروزرسانی‌ها خود را تطبیق ندهند، دیده نخواهند شد پس باید بهینه‌سازی‌ها در راستای تکنولوژی در دسترس کاربران باشد.
- با مراجعه به گوگل آنالاتیکس اگر متوجه شدید درصد قابل توجهی از ترافیک خود را از دستگاه خاصی جذب می کنید حتما روی بهینه بودن آن تمرکز کنید و این کار همان دسته‌بندی بازدیدکنندگان به حساب میآید.
- در حال حاضر با حضور گجت‌های مختلف، درصد زیادی از وبگردی‌ها به وسیله تلفن همراه و تبلت اتفاق می‌افتد و با افزایش این دسته از کاربران اگر وب‌سایتی به درستی ریسپانسیو نباشد بازدید کنندگانی را که وبگردی در وب‌سایت شما برایشان آسان نیست، از دست خواهید داد و کاهش بازدید و از دست دادن مخاطبانتان روی فروش شما تاثیر زیادی می‌گذارد.
- به طور کلی عدم ریسپانسیو بودن فرآیند پیمایش کاربر را بسیار سخت می‌کند به خصوص اگر خریدی بخواهد اتفاق بیفتد. باید تمام آن چیزی که کاربر را به سمت خرید جذب می‌کند در یک قاب تعریف شود تا کاربر مجبور به بزرگ و کوچک کردن صفحات نشود.
- در نسخه‌های موبایل جستجو به صورت عمودی خواهد بود و اگر کمی صفحه وایدتر یا کشیده‌تر شود، چیدمان محتوا و تصاویر به درستی اتفاق نمی‌افتد، فضاهای کشیده و دِفرم ایجاد میشود گویی که یک عکس کش آمده باشد یا طراح خواسته به زور یک فضای خالی را پر کند.
تگ ها :
نظرات