چرا طراحی Mobile First؟
آیا تا به حال شده سایتی را با گوشی باز کنید و برای زوم کردن، مجبور شوید با دو انگشت در هر دو جهت(بالا -پایین و چپ-راست) باز و بسته کنید؟ یا دکمههایی آنقدر ریز که انگشتتان سه بار خطا کند تا بالاخره روی لینک مورد نظر جا خوش کند؟ این تجربهها نتیجه یک تفکر قدیمی به نام Desktop First است. دوران این تفکر و طراحی تمام شده است ولی در این نوشته میخواهیم واقعبینانه نگاه کنیم به اینکه چرا طراحی Mobile First نه یک انتخاب، که یک الزام است و چه تفاوتی با دو رویکرد دیگر دارد و از طرفی مزایا و معایب هر روش را مطرح کنیم. همچنین سایت جینجت و نئوماز را به عنوان دو نمونه کار برپایه طراحی اول موبایل ببنید. در هر دو پروژه ui توسط همکاران ما در بیرون از تیم رایانیک طراحی شده اند ولی اجرا توسط تیم ما بود.
۱. نگاهی به گذشته: طراحی دسکتاپمحور (Desktop First) چگونه بود؟
در این رویکرد، طراح ابتدا وبسایت را برای صفحه نمایش عریض کامپیوترهای رومیزی و لپتاپ طراحی میکند. همه چیز در ابعاد بزرگ، با جزئیات بصری فراوان و منوهای کشویی گسترده طراحی میشود. سپس در مرحله بعد، سعی میشود این طرح بزرگ را برای نمایش در صفحات کوچکتر (تبلت و موبایل) جمعوجور کند. نتیجه این کار معمولاً وبسایتی است که روی موبایل:
فونتها ریز و غیرقابل خواندن میشوند.
کاربر باید مدام زوم کند و صفحه را به چپ و راست اسکرول کند.
منوها شلوغ و دسترسی به آنها سخت است.
زمان لمس یک دکمه، ممکن است به اشتباه لینک کناری فعال شود.
این روش مانند این است که یک ساختمان چندطبقه را برای یک شهر بزرگ طراحی کنید، بعد بخواهید همان ساختمان را بدون تخریب، در یک محله کوچک جا دهید! نتیجه چیزی جز یک سازه ناهماهنگ و غیرکارآمد نخواهد بود.
۲. طراحی واکنشگرا (Responsive)؛ قدمی به جلو
طراحی واکنشگرا یک پیشرفت بزرگ بود. در این روش، وبسایت با استفاده از تکنیکهایی مثل «Fluid Grids» و «تصاویر منعطف» و «Media Queries » سعی میکند خود را با اندازه صفحه نمایش تطبیق دهد. این رویکرد نسبت به روش قبلی بسیار بهتر است، زیرا سایت در موبایل کاملاً خراب نمیشود و عناصر آن تا حدی مرتب میشوند.
اما مشکل اصلی اینجاست: باز هم نقطه شروع، دسکتاپ است. طراح هنوز با نگاه دسکتاپی فکر میکند و اولویتها و تجربه کاربری را از منظر یک صفحه بزرگ میبیند. نتیجه سایتی است که در موبایل «کار میکند» اما ذاتا برای موبایل «ساخته نشده است». تفاوت این دو را در تجربه کاربری (UX) به وضوح میتوان حس کرد. سایت واکنشگرا ممکن است محتوا را نشان دهد، اما سرعت بارگذاری، نحوه چینش اطلاعات و سادگی تعامل، هنوز قربانی نگاه دسکتاپی شده است.
۳. طراحی (Mobile First)؛ طراحی از کوچک به بزرگ
اینجا نقطه عطف ماجراست. در رویکرد Mobile First، طراح فرآیند خود را با کوچکترین صفحه نمایش ممکن (یک گوشی هوشمند) آغاز میکند. او مجبور است به ذات و هسته اصلی مطلب فکر کند: مهمترین کاری که کاربر با این صفحه باید انجام دهد چیست؟!
در این فضا، جایی برای عناصر اضافی و تزئینی زائد نیست. همه چیز باید ساده، سریع و هدفمند باشد. تمرکز بر محتوای اصلی و وظایف کلیدی کاربر است. سپس، وقتی طرح برای موبایل آماده شد، آن را برای صفحات بزرگتر (تبلت و دسکتاپ) توسعه میدهیم. به این ترتیب، ویژگیهای اضافی به تدریج و متناسب با فضای بیشتر، به طرح افزوده میشوند. این یعنی:
سرعت: وبسایتی که برای موبایل بهینه شده، سبکتر و سریعتر است.
تجربه کاربری (UX): مسیری که کاربر برای رسیدن به هدف خود طی میکند، در موبایل مستقیمترین و سادهترین مسیر ممکن است.
سئو (SEO): گوگل از سالها پیش، خزیدن و ایندکس کردن سایتها را با دید موبایل انجام میدهد. سایتهای Mobile First در رتبهبندی جستجو، اولویت دارند.
مقایسه سه رویکرد در یک نگاه واقعبینانه
1- طراحی دسکتاپمحور (Desktop First)
نقطه شروع: صفحه نمایش بزرگ (کامپیوتر)
اولویت اصلی: نمایش همه جزئیات و ویژگیها
تجربه کاربر در موبایل: ضعیف (نیاز به زوم و اسکرول افقی)
سرعت بارگذاری در موبایل: پایین (حجم بالای تصاویر و کد)
سئو (از نگاه گوگل): ریسک بالا
مناسب برای: سایتهای بسیار تخصصی که کاربر حتماً با دسکتاپ وارد میشود (مثل برخی داشبوردهای مدیریتی)
2- طراحی واکنشگرا (Responsive)
نقطه شروع: صفحه نمایش بزرگ (کامپیوتر)
اولویت اصلی: تطبیق طرح دسکتاپ با موبایل
تجربه کاربر در موبایل: قابل قبول
سرعت بارگذاری در موبایل: متوسط
سئو (از نگاه گوگل): قابل قبول
مناسب برای: سایتهایی که نیاز به حضور در همه دستگاهها دارند، اما بودجه یا زمان محدودی برای طراحی اختصاصی موبایل دارند.
3-طراحی موبایلمحور (Mobile First)
نقطه شروع: صفحه نمایش کوچک (موبایل)
اولویت اصلی: تمرکز بر محتوا و وظایف اصلی کاربر در موبایل
تجربه کاربر در موبایل: عالی (طراحی شده برای لمس «تاچ » و سرعت)
سرعت بارگذاری در موبایل: بالا (بهینهسازی شده برای شبکههای موبایل)
سئو (از نگاه گوگل): مطلوب (دارای امتیاز بالاتر در ایندکس موبایل)
مناسب برای: تمامی سایتهای مدرن با کاربران عمومی (فروشگاهی، شرکتی، خدماتی، خبری و...) غیر از موارد نادر که کاربران دسکتاپ الزاما باید در اولویت باشند.
جمعبندی: انتخاب با شماست، اما آینده از آن طراحی Mobile First
در رایانیک، تجربه پروژههای متعدد به ما نشان داده که مشتریان و کاربران نهایی، به سرعت و سادگی اهمیت زیادی میدهند. همانطور که در پست قبلیمان درباره ساخت وبسایتهای موفق گفتیم، «تمرکز بر کارایی، پیش از ظواهر فانتزی» یک اصل کلیدی است. طراحی موبایلمحور، دقیقاً تجلی همین اصل است.
این رویکرد به ما اجازه میدهد از همان ابتدا، طراحی مبتنی بر داده داشته باشیم و بفهمیم کاربر واقعی با یک گوشی در دست، دقیقاً چه میخواهد. این یعنی خلق یک «خانه امن» دیجیتال برای کسبوکار شما که در آن کاربر به راحتی میتواند راهش را پیدا کند، نه اینکه در پیچ و خم عناصر طراحی شده برای مانیتورهای عریض، گم شود.
انتخاب رویکرد طراحی، سرمایهگذاری روی آینده دیجیتال شماست. اگر به دنبال وبسایتی هستید که نه فقط برای امروز، که برای فردای دیجیتال ساخته شده باشد، وقت آن رسیده که نگاه خود را از کامپیوترهای رومیزی برداشته و به جیب کاربرانتان معطوف کنید.