اول موبایل بعد دسکتاپ!

اول موبایل بعد دسکتاپ!
زمان تقریبی مطالعه : ۴ دقیقه

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

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

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

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

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

 

طراحی موبایل محور چیست؟

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

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

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

 

Designing and developing for small screens compels designers to remove anything that isn’t necessary for seamless website rendering and navigation.

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

 

چرا طراحی سایت موبایل محور مهم است؟

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

 

اول موبایل بعد دسکتاپ!

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

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

 

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

قبل‌از پرداختن به اصول موبایل فرست دیزاین یا شیوه‌هایی برای طراحی سایت موبایل فرست باید بگویم که این نوع از طراحی را برای اولین‌بار طراح محصول معروفی به‌نام  Luke Wroblewski در کتابی با‌عنوان Mobile First در سال ۲۰۱۱ به جهان معرفی کرد. او در این کتاب از اهمیت طراحی سایت برای موبایل به‌جای دسکتاپ و لپ‌تاپ گفت و همچنین به طراحان سایت و محصول پیشنهاداتی برای پیاده‌سازی طراحی موبایل فرست داد.

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

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

 

اصول طراحی موبایل محور چیست؟

دیزاین موبایل فرست ۴ اصل دارد که طراح سایت ازآغاز پروسه‌ی وب دیزاین باید براساس این ۴ اصل پیش رود. با رعایت‌کردن اصول زیر در طراحی سایت، وب دیزاینر به بهترین شکل از فضا و المان‌ها بهره می‌گیرد. البته ممکن است در بعضی منابع اصل پنجمی به لیست زیر اضافه شود: طراحی واکنش‌گرا.

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

۱. در طراحی موبایل فرست اولویت با محتوایی است که کاربر می‌خواهد 

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

برای امتیاز به این نوشته کلیک کنید!
[کل: ۰ میانگین: ۰]