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

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

mobile-strategy

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

 

این نوشته را به اشتراک بگذارید:

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

۱۳ دیدگاه

  1. محسن برجی گفت:

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

  2. نکات جالبی بود. با این که طراح وب نیستم ولی بنظرم جالب اومد و باید حتما رعایت بشه.

  3. پيمان گفت:

    سلام
    مقاله جالبي بود انشالله كه هرجا كه هستيد موفق باشيد
    راستي هر كس آموزش HTML به صورت ويدئويي مي خواد به وبلاگ ما بياد
    ازتون خواهش ميكنم اين پيام رو حذف نكنيد

  4. مهدی گفت:

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

  5. هادی گفت:

    سلام
    مطلب جالب بود.

    حالا ازکجا مطمئن بشیم قالبمون اوکیه از این جهت؟

    سایتمونو چک کنید با موب، بهمون اطلاع بدید لطفا :D

  6. Amir گفت:

    خیلی عالی بود…
    ممنون…

  7. مرتضی گفت:

    مقاله مفیدی بود ممنون

  8. […] این مقاله سعی دارم با توجه به مقاله پیشین که درمورد معنای استراتژی موبایل وب بود، به شرح چند نکته کلیدی در قالب سوال بپردازم که هر […]

  9. بهناز گفت:

    برای من این نکته که فرمودید از جاوا اسکریپت برای تغییر سایز عکس و افزایش سرعت لود استفاده کنید گنگه. مطلب مرتبطی دارید ازش؟

شما چه دیدگاهی دارید؟

قوانین

۱- لطفا از دیدگاه‌ها برای تبلیغ مستقیم سایت خود استفاده نکنید.

۲- دیدگاه‌‌هایی که در بخش نامشان، کلمه کلیدی به کار رفته باشد تایید نخواهند شد.

برای اطلاعات بیشتر قوانین کاربری را بخوانید

آخرین نوشته‌های یک ادمین را در ایمیلتان دریافت کنید

عضو لیست ایمیلی ما شوید تا آخرین نوشته‌های یک ادمین برایتان ایمیل شود