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