وب سایت موبایل فرندلی چه تفاوتی با طراحی واکنش گرا دارد؟
امروزه اینترنت و جستجو های اینترنتی بخشی جدا نشدنی از زندگی روزمره مردم است. کاربران اینترنتی روزانه در مورد اخبار روز، محتوای مورد نظرشان یا برای سرگرمی جستجوی اینترنتی انجام میدهند و به وب سایت های زیاد و متنوعی سر میزنند. از طرف دیگر وب سایت ها هر کدام با توجه به نوع فعالیتشان قصد در جذب هرچه بیشتر کاربران دارند. از این رو در تلاش هستند با تولید محتوای مناسب مخاطبان را جذب نمایند. اما تجربه ثابت کرده است محتوای یک وب سایت به تنهایی، نمی تواند مخاطبان را به خود جذب کند. طراحی وب سایت و کاربر پسند بودن آن از جمله مسائلی است که در جذب مخاطب موثر است. یکی از مسائلی که در راستای کاربر پسند بودن برای شرکت ها مهم می باشد، این است که مطالب وب سایت به بهترین شکل ممکن در دسترس تمامی کاربران قرار گیرد. از طرف دیگر با افزایش ترافیکی که وب سایت ها از سوی کاربران موبایل ها و تلفن های هوشمند میگیرند، فقط کاربر پسند بودن مطرح نیست و مسئله موبایل فرندلی بودن یک وب سایت نیز باید بررسی شود. قدم اول برای تشخیص موبایل فرندلی بودن یک وب سایت میتواند پاسخ به سوالات زیر باشد: -آیا وب سایت مورد نظر، کاربران موبایل را به مشارکت وا می دارد؟ -آیا وب سایت مورد نظر، بدون توجه به اینکه با چه وسیله ای باز می شود خوب به نظر میرسد؟ اگر جواب شما به سوالات بالا “خیر” می باشد، پس زمان پاسخ دادن به این سوال هست که آیا وب سایت شما بر اساس طراحی وب سایت های واکنش گرا ساخته شده است؟ ممکن است وب سایت شما موبایل فرندلی باشد، در صورتی که برای دستگاه هایی با صفحات نمایش متفاوت و کوچکتر واکنش گرا نباشد.
تفاوت موبایل فرندلی بودن یک وب سایت با طراحی واکنش گرا
در اینجا میتوانید تفاوت این دو مورد را ببینید: زمانی که شما یک سایت بهینه سازی شده برای موبایل یا موبایل فرندلی دارید، در واقع شما دو وب سایت متفاوت دارید. یک وب سایت برای حالت دسکتاپ و دومی برای موبایل! در واقع یک وب سایت دیگر مخصوص صفحه نمایش های کوچک طراحی شده است. بنابراین زمانی که کاربری از طریق موبایل به وب سایت دسترسی پیدا میکند، به وب سایت بهینه سازی شده برای موبایل راهنمایی می شود. از آنجایی که این وب سایت برای موبایل و صفحات نمایش کوچک بهینه سازی شده است، کاربران دیگر نیازی به زوم کردن برای مشاهده بهتر مطالب ندارند. از طرفی معمولا مطالب در این وب سایت کمتر از وب سایت اصلی است. در واقع این امکان وجود دارد که مطالب این وب سایت نسبت به نسخه دسکتاپ ناقص تر باشد! این گونه از وب سایت ها معمولا توسط URL شان قابل شناسایی می باشند. آدرس این سایت ها معمولا شامل m یا mobile میباشد.
طراحی واکنش گرا چیست؟
در طراحی وب واکنش گرا، یک وب سایت را که بر روی سایز حساس می باشد و نسبت به آن واکنش نشان میدهد. در واقع در طراحی واکنش گرا، با توجه به سایز صفحات نمایش بهترین و موثر ترین حالت، نمایش داده می شود! از آنجایی که وب سایت های ریسپانسیو یا واکنش گرا فقط یک نسخه می باشند و مانند حالت موبایل فرندلی در دو نسخه دسکتاپ و موبایل طراحی نمیشوند، حتی زمانی که پنجره مرورگر را روی مانیتور تغییر سایز میدهید هم بر روی نحوه نمایش وب سایت تاثیر گذار است زیرا نیازی به ارجاع دادن به یک URL دیگر ندارد.
ویژگی وب سایت های ریسپانسو یا واکنش گرا در چیست؟
از جمله ویژگی های وب سایت های واکنش گرا میتوان به موارد زیر اشاره کرد: -زمانی که دو وبسایت، یکی برای موبایل و یک نسخه دسکتاپ موجود است، شما باید همواره چک کنید که محتوا بر روی وب سایت موبایل مانند وب سایت اصلی کامل و به صورت واضح قابل نمایش باشد. -زمانی که دو نسخه از یک وب سایت موجود است، این موضوع همواره مطرح است که آیا وب سایت بر روی دستگاه های دیگر، با سایز صفحه نمایش متفاوت هم به درستی نمایش داده می شود؟زمانی که از یک وب سایت استفاده میکنید دیگر لازم نیست برای چک کردن وضعیت وب سایت بر روی دستگاه های دیگر استرس داشته باشد. – وب سایت های واکنش گرا نسبت به موبایل فرندلی با دو طراحی وب سایت ، تاثیر مثبت تری بر روی سئو وب سایت دارند!
چگونه ابزار آمار گیر به افزایش نرخ تبدیل کمک میکند؟
آشنایی با مفهوم نرخ تبدیل در کسب و کارآنلاین و بازاریابی اینترنتی، نرخ تبدیل یا Conversion Rate نشان دهنده درصدی از بازدیدکنندگان وب سایت است که به مشتری یا مشترک محصولات یا خدمات ما تبدیل می شوند. مثلا درمورد یک فروشگاه آنلاین، با بهینه سازی نرخ تبدیل، درصد افرادی که تمام مراحل ثبت سفارش را با موفقیت طی می کنند و محصول مورد نظر را می خرند به نسبت کل تعداد بازدیدکننده های سایت افزایش می یابد. برای سایتی که انواعی از محتوا را ارائه می دهد ، بهینه سازی نرخ تبدیل باید منجر به افزایش ثبت نام ، اشتراک و یا عضویت بیشتر در خبرنامه سایت شود. به طور کلی کسب در آمد بیشتر در کسب و کار آنلاین از دو طریق امکان پذیر است : راه اول، افزایش فروش یا اشتراک از طریق افزایش میزان ترافیک است. راه دوم، این است که از طریق بهینه سازی سایت با همان میزان ترافیک معمول و قبلی باعث افزایش فروش شویم. که مفهوم بهینه سازی نرخ تبدیل (Conversion Rate Optimization _ CRO) روی حالت دوم تمرکز می کند.
چرا بهینه سازی نرخ تبدیل برای ما مهم است ؟
ما میتوانیم با بهینه سازی قیف فروش و افزایش مشتریان راغب و وفادار نسبت به کل بازدید کنندگان سایت به فروش بیشتر برسیم . با کوچک ترین تغییرات هدفمند و موثردر باز طراحی وب سایت یا محتوای سایت بر اساس نیاز و سلیقه مخاطب، میتوانیم بهترین نتیجه را بدست بیاوریم. بهتر است با یک مثال ساده با مفهوم بهینه سازی نرخ تبدیل و نتایج آن بیشتر آشنا شویم : فرض کنید ما یک سایت ارائه دهنده خدمات نرم افزاری داریم، با این رویکرد که در آن تولید کننده نرم افزار اجازه استفاده از نرم افزار را در ازای دریافت حق اشتراک ماهیانه در اختیار مصرف کننده قرار می دهد. قبل از بهینه سازی سایت 5% از کل افرادی که به عنوان بازدید کننده به سایت ما سر میزدند برای استفاده از خدمات ما مشترک می شدند. اگر فرض کنیم هر مشترک برای کسب و کار ما 50 هزار تومان در هر ماه پرداختی دارد . با 50 مشتری در هر 1000 بازدید کننده 2.500.000 تومان در آمد هر ماه ما میشود . حالا اگر ما با بهینه سازی سایت ، نرخ تبدیل را از 5% به 5/7 % افزایش دهیم. در این نرخ تبدیل در هر 1000 بازدید کننده 75 مشتری داریم که در آمدی معادل 3.750.000 تومان برای ما در هر ماه به همراه دارد . دیدید چه اتفاقی افتاد ؟ ما بدون نیاز به تغییرات اساسی و پیچیده و هزینه بر با همان تعداد از بازدید کنندگان قبلی و با صرف همان هزینه ، به میزان 1.250.000 تومان افزایش درآمد داشتیم! پس یک فرمول کلیدی را باید به خاطر بسپاریم : اگر ما نرخ قیف تبدیل را دوبرابر کنیم میتوانیم هزینه را به ازای جذب هر مشتری جدید نصف کنیم . به این معنی که اگر در حال حاضر جذب هر مشتری مثلا 10 هزار تومان برای ما هزینه دارد، بعد از بهینه سازی سایت و دو برابر کردن نرخ تبدیل میتوانیم برای هر مشتری نصف این مقدار را هزینه کنیم و باقی مانده را در انواع تبلیغات دیگر هزینه کنیم و یا به روش ساده تر با این روش میزان سود خود را افزایش دهیم .
چگونه ابزارآمارگیری مانند Overheat میتواند به افزایش سریع نرخ تبدیل وب سایت ما کمک کند؟
“نقشه حرارتی راهنمایی برای شناخت رفتار و سلیقه مشتریان و افزایش نرخ تبدیل” ارائه نقشه حرارتی یا Heatmap ،یکی از قابلیت های ابزارهای آمارگیری مانند Overheat می باشد. نقشه حرارتی یک تصویر گرافیکی از تمام صفحات سایت است که به شناخت بیشتر مشتریان و تجزیه و تحلیل رفتار آنها در هنگام حضور در سایت به ما کمک میکند. به عنوان نمونه به کمک نقشه حرارتی میتوانیم به میزان تراکم بازدید در قسمت های مختلف سایت پی ببریم و به این طریق نسبت به جاگذاری بهتر و کاراتر محصولات یا محتوای سایت اقدام کنیم . همچنین به کمک این ابزار میتوانیم Call To Action یا هر عاملی که در سایت ما باعث جلب توجه مخاطب میشود را ردیابی و شناسایی کنیم . به عنوان مثال یک تحقیق نشان میدهد که حتی تغییر یک کلمه یا تغییر رنگ در دکمه ها، میتواند تاثیر زیادی در میزان تمایل افراد به خرید یا اشترک در سایت ما داشته باشد . برای موفقیت در افزایش نرخ تبدیل باید به اطلاعات آماری کمی و کیفی در ارتباط با سایت خود دسترسی داشته باشیم . اطلاعات کمی ارائه شده توسط ابزار آمارگیری مانند گوگل آنالیتیکس برای قدم گذاشتن در این مسیر یک نقطه شروع خوب است اما هم کار کردن با آمار و ارقام به مهارت و تخصص نیاز دارد و هم تصویر واضح و کاملی از سایت را به ما ارائه نمی دهد. پس در کناراستفاده از این ابزار کمی بهتر است از ابزار آمارگیری کیفی مانند Overheat برای تجزیه و تحلیل بهتر وب سایت خود استفاده کنیم .
دکمه CTA _ تاثیر رنگ ها بر افزایش نرخ تبدیل
از اهمیت رنگ ها میتوان به این آمار اشاره کرد که رنگ یک محصول، 90 درصد بر روی انتخاب شما برای خرید آن محصول تاثیر دارد. یا تبلیغات در مجله هایی با صفحات رنگی 26 درصد بیشتر از مجله های سیاه و سفید بازخورد دارد! رنگ ها به این دلیل که میتوانند توجه مخاطب را به خودشان جلب کنند، و پیام یا انرژی و احساس خاصی را به مخاطب منتقل کنند در بازاریابی و تجارت از اهمیت ویژه ای برخوردارند.
برای داشتن نرخ تبدیل بیشتر از رنگ ها استفاده کنیم!
نرخ تبدیل زمانی افزایش میابد که تعداد بازدیدکنندگانی که عمل (اکشن) مورد نظر را انجام میدهند افزایش یابند. بنابراین یکی از مهم ترین عواملی که در افزایش نرخ تبدیل تاثیر دارد،میتواند دکمه Call to Action (فراخواندن بازدیدکنندگان به انجام دادن کاری مثل ثبت نام یا خرید) باشد! برای مثال هدف ما این است که بازدیدکنندگان یک فرم نظر سنجی را پر کنند. در صورتی که دکمه ای که بازدیدکنندگان را به صفحه فرم نظر سنجی راهنمایی میکند در دید باشد و توجه مخاطب را به خود جلب کند، امکان اینکه افراد بیشتری به صفحه فرم راهنمایی شوند افزایش میابد، و در نهایت باعث افزایش نرخ تبدیل میشود!
با توجه به اینکه رنگ ها میتوانند نظر مخاطبان را به خودشان جلب کنند، کدام رنگ برای دکمه CTA مناسبتر خواهد بود؟
ممکن ست جواب بنظرتان خیلی ساده بیاید. رنگ های روشن بهترین رنگ ها هستند، و رنگ های تند به این دلیل که چشم را خسته میکنند مناسب نیستند! ولی کارشناسان جدا از رنگ های روشن و تند به این موضوع نگاه میکنند و بیشتر بر روی رنگ های سبز و قرمز تاکید دارند. اما علت چیست؟ یکی از مواردی که کارشناسان برای انتخاب رنگ دکمه CTA در نظر گرفتند، واکنش متفاوت مردان و زنان، به رنگ های متفاوت بوده ست. با توجه به تحقیقات حدود 8% از مردان و 0.05 % از زنان به کور رنگی یا عدم تشخیص درست رنگ ها دچارند!کارشناسان به این دلیل که رنگ سبز و قرمز آسیب پذیری کمتری در مقابل عدم تشخیص دارند و به راحتی از هم تمییز داده میشوند. ولی ماجرا به همین جا ختم نمیشود! مسئله اصلی انتخاب بین این دو رنگ است. یکی از بحث هایی که همیشه بین کارشناسان تجارت الکترونیک در جریان ست این ست که کدامیک از رنگ های قرمز یا سبز بازخورد بهتری دارد؟ بسیاری از کارشناسان معتقد هستند که رنگ سبز برای دکمه CTA بازخورد بهتری نسبت به رنگ قرمز دارد. زیرا حس اعتماد را به مخاطب القا میکند. برخی دیگر از کارشناسان تاثیر رنگ قرمز را بیشتر میدانند. زیرا در زمان کوتاه تری توجه مخاطب را به خود جلب میکند. چندی پیش HubSpot در تست A/B که برای انتخاب رنگ دکمه فراخوان عضویت در سایت داشت، (همانطور که در عکس زیر میبینید) از رنگ های قرمز و سبز استفاده کرد. نتیجه به دست آمده بسیار متفاوت تر از چیزی بود که Hupspot انتظار داشت. مشارکت در فرم با کلید قرمز 21 درصد بیشتر از فرم ثبت نام با دکمه CTA سبز بود! بعد از آن HubSpot با انتشار مقاله ای اعلام کرد که “واکنش بازدیدکنندگان در صفحات متفاوت میتواند نتیجه ای متفاوت رقم زند” و انتخاب فرم ثبت نام با کلید قرمز توسط بازدیدکنندگان، به این دلیل بوده ست که در آن فرم، رنگ قرمز بیشتر از هر رنگ دیگری داخل دید است و توجه مخاطب را جلب میکند. مقاله ای که HubSpot منتشر کرد به این معنی بود که هیچ جواب قطعی برای سوال ” بهترین رنگ برای دکمه call to action چیست ؟ ” وجود ندارد و این جوابی ست که خودتان باید بدست بیاورید! برای مثال اگر در طراحی وب سایت یا اپلیکیشن شما رنگ سبز استفاده شده باشد، و تم رنگی صفحتان به رنگ سبز نزدیک باشد، هیچ کسی به دکمه CTA سبز توجهی نخواهد کرد و شاید برای شما رنگ قرمز انتخاب بهتری باشد! در اینجا تست A/B یک شرکت دیگر و نتیجه بدست آمده اصلا مهم نیست! تنها چیزی که مهم میباشد، این است که میتوانید با ایجاد تغییر جزئی در رنگ دکمه CTA نرخ تبدیل خود را افزایش دهید! اگر نمیدانید که کدام رنگ نتیجه بهتری دارد از تست A/B استفاده کنید! یا با استفاده از ابزار آمارگیر و یا ردیابی بازدیدکنندگان، ببینید که بازدیدکنندگان شما به چه رنگی بیشتر واکنش نشان میدهند!
چرا طراحی واکنش گرا ؟ وب سایت واکنش گرا چه مزیت هایی دارد ؟
طراحی وب واکنش گرا فارسی شده کلمه “Responsive web design” میباشد. در طراحی وب واکنش‌گرا سعی بر این ست که محتوای یک وب سایت را در صفحه نمایش هایی با سایزهای متفاوت به بهترین نحوه ممکن نمایش داد. در واقع وب سایت واکنش گرا با تمامی صفحات نمایش سازگار ست.
حتما تا به حال موقع جستجو در اینترنت با صفحاتی مواجه شده اید که به شکل درستی نمایش داده نمیشوند و یا مطالب داخل آن وب سایت به قدری ریز هستند که برای مطالعه مجبور شدید صفحه را zoom in کنید!
یا اینکه بر روی صفحه ای که مطالعه میکردید تبلیغاتی به صورت pop up ظاهر شده و زمانی که خواستید تبلیغات رو ببندید، برای بستن با مشکل روبرو شدید و در نهایت از خوندن اون مطلب صرف نظر کردید! از این دست مشکلات نمونه های زیادی وجود داره ولی اینکه چرا این مشکلات ظاهر میشن قطعا یک جواب داره، وب سایت ریسپانسیو نیست!
چرا طراحی وب واکنش گرا ؟
چند سال پیش که بیشتر کاربران اینترنت با کامپیوتر های شخصی به این فضا دسترسی پیدا میکردند نیاز یه ریسپانسیو حس که نمیشد، بلکه هیچ معنایی هم نداشت . در اون زمان صفحه نمایش هایی که کاربران استفاده میکردند تقریبا در یک سایز بود.
ولی بعدها صفحه نمایش های بزرگتر اومد و بعد از اون با به روی کار اومدن گوشی های هوشمند با صفحه نمایش های متفاوت لازم شد که طراحی سایت ها واکنش گرا باشد تا تمام صفحه نمایش ها را پوشش بدهند!
اهمیت این موضوع زمانی بیشتر حس میشه که نگاهی به آمار و ارقام hubspot در مورد کاربران تلفن های هوشمند میندازیم . چند نمونه از حقایقی که در مورد کاربران تلفن های هوشمند منتشر شده:
_زمین تقریبا ۷ میلیارد جمعیت داره ، گوشی های هوشمند ۴ میلیارد کاربر دارند و این در حالیه که ۳.۵ میلیارد نفر از مسواک استفاده میکنند!!!!!
_۷۴% از مردم برای کمک در انتخاب خرید هاشون از گوشی های هوشمند استفاده میکنند.
_۲۵% از آمریکایی ها برای دسترسی به اینترنت فقط از گوشی های هوشمند استفاده میکنند.
در طراحی وب آینده نگر باشید! وب سایت واکنش گرا راه حلی طولانی مدت با همه گیر شدن استفاده از گوشی های هوشمند در ایران تعداد کسانی که به اینترنت دسترسی پیدا کردند افزایش یافته و حتی کسانی هم که استفاده از کامپیوتر رو بلد نیستن با گوشی های خود به صورت دائمی به اینترنت دسترسی دارند و به جستجو در فضای مجازی میپردازند.
ولی مشکلاتی که با واکنش گرا نبودن وب سایت ها برای کاربران پیش میاد فقط با طراحی وب سایت سازگار با صفحه نمایش کوچک (گوشی های هوشمند) حل نمیشود . امروزه تلوزیون های هوشمند(smart TV) ها هم در حال همه گیر شدن هستند .
در چند سال آینده شاید موقع دیدن یک سریال زمانی که داره پیام های بازرگانی پخش میشه بر روی تبلیغات کلیک کنیم و بتوانیم وارد وب سایت مربوط به اون تبلیغات بشیم .(کاری که در حال حاضر در وب سایت هایی مثل یوتیوب انجام میشه.) این یعنی ما با طیفی از سایز های صفحه نمایش روبرو هستیم که هر کدوم طراحی مخصوص به خودشان را نیاز دارند.
وقتی که تکنولوژی پیشرفت میکنه و به راحتی ما کمک میکنه چرا نباید ملزمات استفاده از اون رو آماده کنیم؟
حالا شما به عنوان مدیر یک تجارت آنلاین تصور کنید که مخاطبتان بعد از ورود به سایت شما با منو های به هم ریخته رو برو میشود یا طراحی صفحه ها به صورتی ست که در یک لحظه نمیشود به تمامی قسمت های آن دسترسی داشت!
مطمئنا شما هم هیچ تمایلی به این ندارید که مخاطبتان را به خاطر تجربه بدی که از حضور در وب سایت تان داشته، از دست بدهید!
اگر در حال حاضر از یک وب سایت غیر واکنش گرا استفاده میکنید با سرویس تحلیلگر وب اورهیت میتوانید ببینید که کاربران شما با صفحه نمایش متفاوت با چه مشکلاتی روبرو میشوند. (برای دریافت اطلاعات بیشتر از این تحلیلگر وب و رفتار مشتری از سایت overheat.ir دیدن فرمایید.)
اگر هنوز تصمیمی برای داشتن یک تجارت آنلاین ندارید راهنمای “کسب و کار آنلاین چه مزایایی برای صاحب کسب و کار دارد!” برای شماست .