pixelz_optimize-product-images-for-mobile-responsive-design

بهینه‌سازی صفحات وب با طراحی واکنش‌گرا

بررسی نمونه‌های موردی - نویسنده : نگین منصوری - ۱۴ آذر ۱۳۹۵

تکنولوژیِ این روزها و وجود دستگاه‌های متفاوتی از قبیل موبایل، تبلت، لب‌تاپ، آی‌فون و… مسئله‌ای را تحت عنوان ریسپانسیو(responsive) بودن یک وب‌سایت را با خود به همراه می‌آورد. طراحی ریسپانسیو(پاسخ‌گرا یا واکنش‌گرا) به طراحان وب‌سایت کمک می‌کند تا ظاهر وب‌سایتِ طراحی‌شده در ابزارها و رزولوشن‌های متفاوت به درستی نمایش پیدا کند تا کاربران با هر ابزاری سایت شما را نگاه می‌کنند محتوا و ظاهر سایت را استاندارد و خوشایند ببینند. این یعنی به طور خودکار ظاهر یک وب‌سایت با توجه به صفحه نمایش دستگاهی که در دست کاربر است تغییر کند و قالب‌بندی آن منطبق با ابعاد هر دستگاهی شود و این بدان معنی است که طراحی باید نهایت انعطاف را در هر صفحه نمایشی داشته باشد. خوشبختانه امروز هرکسی وب‌سایت خود را طراحی می‌کند نمونه موبایل آن را چک می‌کند تا ظاهر وب‌سایتش ریسپانسیو  و مطالب آن در همه دستگاه‌ها خوانا باشند تا Zoom In و zoom out مکرر اتفاق نیفتد.

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

معرفی نمونه موردی:

“SHirtinator” یکی از ارائه‌دهندگان محصولات به صورت آنلاین و پیشرو در اروپا است که در زمینه چاپ روی هدایا و سفارشاتی مانند تی‌شرت، پیراهن، لباس و… فعالیت می‌کند و ترافیک خوبی را به سمت خود جذب‌کرده‌است. این وب‌سایت چندی پیش با بررسی واکنش بازدیدکنندگان و میزان تاثیر‌گذاری طراحی وب‌سایت روی مبحث ریسپانسیو(واکنش‌گرا) تمرکز کرد.

  • فرآیند طراحی فرضیه A/B Testing:

“Shirtinator” با نمایش صفحات وب‌سایتش روی دسکتاپ یا لپ تاپ هیچ مشکلی نداشت و برای ترافیکی که از سمت دستگاه‌های تلفن همراه جذب می‌شدند طراحی ریسپانسیو انجام داده بود پس از چندی متوجه شد که برای توسعه و بهینه‌سازی صفحات وب‌ باید به فکر ترافیکی که از سمت‌ دستگاه‌‌هایی با صفحه نمایش بزرگ‌تر از گوشی همراه باشد و این موضوع را مورد بررسی قرار داد؛

ترافیکی که به وسیله دستگاه‌هایی مانند تبلت وارد سایت می‌شوند این صفحات را چگونه می‌بینند؟

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

  • فرضیه A/B Testing:

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

حالت A: نمایش نسخه موبایل در تبلت

حالت B: نمایش نسخه دسکتاپ در تبلت‌ها

a-b-test

می‌توانید مشاهده کنید که فضاهای خالی چطور طراحی صفحه را در تبلت غیر جذاب می‌کند.

  • نتیجه A/B Testing:

نمایش نسخه دسکتاپ در تبلت‌ها عملکرد بهتری نسبت به نسخه تلفن همراه داشت و درآمد به میزان شگفت‌آوری تا نرخ ۷۲٪ افزایش یافت.

  • آنالیز A/B Testing:

  1. دسته‌بندی بازدیدکنندگان از نظر نیازهای مشترک، تنظیمات، لوکیشن، دستگاهی که برای دسترسی به یک سایت استفاده‌ می‌کنند، ساعت مراجعه در طول روز و خیلی از رفتارهای موجود دیگر به شما در کشف چالش‌ها و طراحی راه‌حل‌ها برای بهینه‌سازی وب‌سایت‌ها کمک می‌کند.
  2. حواستان به تکنولوژی و بروزرسانی‌ها باشد زیرا اگر اطلاعات دیجیتالی شما با بروزرسانی‌ها خود را تطبیق ندهند، دیده نخواهند شد پس باید بهینه‌سازی‌ها در راستای تکنولوژی در دسترس کاربران باشد.
  3. با مراجعه به گوگل آنالاتیکس اگر متوجه شدید درصد قابل توجهی از ترافیک خود را از دستگاه خاصی جذب می کنید حتما روی بهینه بودن آن تمرکز کنید و این کار همان دسته‌بندی بازدیدکنندگان به حساب می‎‌آید.
  4. در حال حاضر با حضور گجت‌های مختلف، درصد زیادی از وبگردی‌ها به وسیله تلفن همراه و تبلت اتفاق می‌افتد و با افزایش این دسته از کاربران اگر وب‌سایتی به درستی ریسپانسیو نباشد بازدید کنندگانی را که وبگردی در وب‌سایت شما برایشان آسان نیست، از دست خواهید داد و کاهش بازدید و از دست دادن مخاطبانتان روی فروش شما تاثیر زیادی می‌گذارد.
  5. به طور کلی عدم ریسپانسیو بودن فرآیند پیمایش کاربر را بسیار سخت می‌کند به خصوص اگر خریدی بخواهد اتفاق بیفتد. باید تمام آن چیزی که کاربر را به سمت خرید جذب می‌کند در یک قاب تعریف شود تا کاربر مجبور به بزرگ و کوچک کردن صفحات نشود.
  6. در نسخه‌های موبایل جستجو به صورت عمودی خواهد بود و اگر کمی صفحه وایدتر یا کشیده‌تر شود، چیدمان محتوا و تصاویر به درستی اتفاق نمی‌افتد، فضاهای کشیده و دِفرم ایجاد می‌شود گویی که یک عکس کش آمده باشد یا طراح خواسته به زور یک فضای خالی را پر کند.

 

برچسب ها : , ,

start campaign

کسب‌وکار خود را رشد دهید...

راه‌کارهای ای‎نتورک برای رشد کسب‌وکار شما

بیشتر بدانید

نگین منصوری

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

تبلیغات

یک دیدگاه در رابطه با “بهینه‌سازی صفحات وب با طراحی واکنش‌گرا
  1. تیبا بلاگ
    آذر ۲۲, ۱۳۹۵ — ۳:۲۳ ب٫ظ

    ممنون از راه کارهایی که ارائه می کنید

درباره این مطلب دیدگاهی بنویسید...

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز با * علامت‌گذاری شده‌اند.

unilever-case-study

نگاهی دقیق به یک کمپین موفق تبلیغات دیجیتال

بررسی نمونه‌های موردی - ۴ تیر ۱۳۹۶

عضویت در خبرنامه

ایمیل شما برای هیچ منظور دیگری استفاده نخواهد شد !