استراتژی موبایل‌وب به چه معناست؟

چه چیزی را هنگام ترک منزل هرگز فراموش نمی کنید و همیشه همراهتان هست حتی در هنگام خواب !؟ – بله ! تلفن های هوشمند جزئی از زندگی روزمره ما هستند و فراموش کردن آنها کارآسانی نیست. اینجاست که انتخاب یک استراتژی مناسب برای طراحی موبایل وب به شما کمک می کند تا کاربران موبایل را راضی نگه دارید.

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

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

 تفاوت کلیدی بین دسکتاپ و موبایل

در قدم اول شما باید درک کنید که دستگاه های تلفن همراه در مقایسه با دستگاه های رو میزی، تجربه کاربری متفاوتی را ارائه می دهند.

• موبایل یک دستگاه شخصی است.

اندازه یک تلفن هوشمند مناسب نهایتا ۵ اینچ است. برای همین ما نمی توانیم “همه چیز” را به نمایش بگذاریم.پس صرفا کوچک کردن اندازه اجزای صفحه به معنای موبایل وب نیست. بلکه باید روی محتوا تمرکز کنید، تایپوگرافی خوانا یک عامل مهم است.

• هدف موبایل، استفاده آسان و دسترسی سریع.

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

• تعامل لمسی، حالت کلی موبایل است.

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

فقط مقیاس صفحه را کاهش ندهید

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

طراحی واکنش گرا؛ صفحات یکسانی را در همه دستگاه ها به نمایش می گذارد. اما این پایان کار نیست. به عنوان مثال شما تصمیم می گیرید که در حالت دسکتاپ منو ها در بالای سایت و به صورت یک نوار باشد. اما در نسخه موبایل ارجحیت با محتواست بنابر این با کوچک کردن مقیاس صفحه صرفا همه چیز را «سرهم بندی» می کنید. برای پیروی از استراتژی موبایل وب باید منو ها را از دید کاربر مخفی نگه دارید و با فشردن یک دکمه آنرا به کاربر نمایش دهید (مانند پوسته فعلی یک ادمین).

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

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

روی تجربه کاربری تمرکز کنید

در عوض طراحی یک پوسته «سرهم بندی شده» به این فکر کنید که کاربر هنگام مشاهده صفحات چه انتظاری دارد. شما انتظار دارید چگونه با هر بخش ارتباط بر قرار کند؟. همیشه به سراغ اصل مطلب بروید. لزومی ندارد که تبلیغات تصویری را در نسخه موبایل نمایش دهید. (درواقع تبلیغات متنی در پایان هر مطلب بازدهی بیشتری دارد)

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

ساختار صحیح قرارگیری محتوا

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

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

صادقانه بگویم، پاسخ و استاندارد دقیقی برای توسعه موبایل وب وجود ندارد و همه ی معیار ها به سن کاربران و محصولی که ارائه می دهید بستگی دارد. اما هدف اصلی استراتژی موبایل وب، ارائه بهترین تجربه به کاربر است.

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