Mobile First چیست و چطور میتواند جایگاه سایت را بهبود بخشد؟

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

تغییرات رفتاری و اینترنت

تغییر همیشه جزو جدا نشدنی زندگی انسان بوده و خواهد بود. اساسا چیزی که بشر را از گونه‌های جانوری دیگر متمایز می‌کند، همین تغییر دائمی و ایستا نبودن ماست. برای درک تغییرات بزرگ زندگی آدم‌ها کافی است نگاهی به سیر تکامل بشر و تغییر عادات و رفتارهایش در صده‌های مختلف بیندازیم. 

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

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

اینترنت برای موبایل

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

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

الگوریتم Mobile First Index

گوگل الگوریتم‌های متنوعی طراحی کرده که طراحی هر کدامشان دلایل خودشان را دارند. در سال 2016 بود که گوگل در آمارش متوجه شد که بیش از 50 درصد جستجوها (حدود 55 درصد) با گوشی‌های هوشمند صورت گرفته‌اند. این علامتی بود که گوگل به آن نیاز داشت تا کارش را شروع کند. 

از آنجایی که شاید همۀ وبسایت‌ها درک درستی از تغییر رفتار کاربران ندارند، یا شاید اهمیتی به آن نمی‌دهند، گوگل با تغییر الگوریتم ایندکسینگ خودش نقش مهمی در مجبور کردن دنیای اینترنت به تغییر رفتار داشت.

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

اوایل سال 2018 بود که گوگل این الگوریتم را برای برخی از سایت‌ها به کار گرفت و به صورت تدریجی آن را گسترش داد.

سایت ریسپانسیو چیست؟

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

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

 این طراحی، همان طراحی ریسپانسیو است و گوگل در الگوریتمش این وبسایت‌ها را در اولویت قرار می‌دهد. حالا اولویت اول گوگل در رتبه‌بندی وبسایت‌ها، نسخۀ موبایلی آن‌هاست و دسکتاپ‌ها در اولویت دوم قرار دارند. همین موضوع باعث شده بسیاری از وبسایت‌ها روشی از طراحی را در پیش بگیرند که به آن Mobile First Design می‌گویند.

Mobile First Design

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

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

تعریف خلاصۀ Mobile First Design یعنی استراتژی مشخصی که می‌گوید در طراحی و پروتوتایپینگ یک وبسایت (یا اپ)، با طراحی صفحۀ کوچکتر شروع کنید و از آنجا به سوی صفحه‌های بزرگتر بروید. این استراتژی مهم به صفحات وب خلاصه نمی‌شود و اپ‌ها را هم شامل می‌شود.

چرا مردم عاشق و شیدای طراحی Mobile First Design می‌شوند؟

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

از طرف دیگر، آماری که Merkleinc منتشر کرده نشان می‌دهد که (حدودا) بیش از دو برابر ترافیک گوگل از دستگاه‌های موبایلی، تبلت‌ها و دیگر دستگاه‌های قابل حمل می‌آیند. به پیش بینی Emarketer تا سال 2021 این عدد به حدود 83.7 درصد خواهد رسید. از همۀ این آمار و اطلاعات می‌توان نتیجه گرفت که آینده و به‌خصوص آیندۀ اینترنت روی دستگاه‌های موبایل است.

مزایای Mobile First Design

آیا می‌دانستید در مقایسه با دسکتاپ، نرخ تبدیل در گوشی‌های موبایل 64 درصد بیشتر است. بنابراین استراتژی Mobile First Design برای کسب و کارها می‌تواند به سود بیشتری منجر شود. بحث رتبۀ گوگل و رشد در نتایج آن، که پیشتر گفتیم هم بر همگان روشن است.

این روش طراحی روی دفعات دانلود و دسترسی هر چه سریعتر کاربر به محتوای شما تاثیر زیادی دارد. وقتی المان‌های کمتری به کار برده باشید، صفحه سریعتر لود می‌شود. کافی است این موضوع باور نکردنی را مد نظر قرار دهید تا به اهمیت استراتژی Mobile First Design پی ببرید: هر ثانیه در تاخیر لود شدن سایت، 7 درصد نرخ تبدیل را کاهش می‌دهد.

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

 با استفاده از استراتژی Mobile First Design پایه‌های قدرتمندتان را می‌سازید. این پایه‌های قوی اجازۀ انعطاف بی‌نظیری در طراحی المان‌های مخصوص گوشی به شما می‌دهند و در عین حال طراحی‌های تبلتی و دسکتاپی‌تان را هم ارتقا می‌دهند. اساس طراحی Mobile First Design روی محتوا و گشت و گذار است. کاربر باید بتواند در سریع‌ترین زمان ممکن به اطلاعاتی که نیازشان دارد دست پیدا کند.

از طرف دیگری پیروی از استراتژی Mobile First Design کار خودتان را هم ساده‌تر می‌کند. چرا که صفحۀ کوچک همیشه سخت‌ترین بخش طراحی است. وقتی از پس آن فضای محدود بر آمدید، بقیۀ چیزها خود به خود سر جایشان قرار می‌گیرند.

یکی دیگر از مزایای عالی این روش این است که در طراحی Mobile First Design مجبورید که روی وضوح و شفافیت اطلاعات کار کنید و بی‌خیال عناصر تزئینی بی‌فایده و بی‌هدف شوید. با حذف همۀ عوامل حواس پرت کن، ناخودآگاه دارید تجربۀ کاربری بهتری برای کاربرانتان به ارمغان می‌آورید.

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

محتوا در Mobile First Design

محتوا اصلی‌ترین اسپات لایت Mobile First Design را از آن خود می‌کند. در این استراتژی، باید محتوایی را به کاربر ارائه دهید که صد در صد به آن نیاز دارد نه هیچ چیز دیگری. طراحی به این روش به‌خصوص، با همۀ محدودیت‌هایی که دارد، طراح UX را وادار می‌کند که همۀ عناصر و المان‌های غیر‌ضروری و مزاحم را کنار بگذارد و تنها روی موضوع اصلی تمرکز کند.

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

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

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

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

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

منظور تعیین برک پوینت برای زمانی است که محتوا دیگر به سادگی قابل استفاده (خواندن یا مشاهده) نیست. بهترین روش طراحی روشی است که در آن مشکلات آینده را پیش از آنکه به وجود بیایند حل کند.

درک درستی از طراحی Mobile First داشته باشید

محیط روشن و دقیق Mobile First ، پروسۀ توسعۀ اپلیکیشن‌های احتمالی را هم ساده خواهد کرد. بیشترین کاربری را خواهد داشت و خرج منابعتان را به حداقل میزان خودش می‌رساند.

ارزش‌های بیزینسی‌تان را ارتقا بدهید

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

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

پیش از همه خودتان یک کاربر باشید

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

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

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