۶ نکته کلیدی برای درک استراتژی موبایل وب

از زمانی که گوگل اعلام کرد الگوریتم خود را تغییر داده و قرار است به وب سایت های دوست‌دار موبایل (mobile-friendly) اهمیت بیشتری بدهد تصورات غلطی درباره موبایل وب در ذهن افراد شکل گرفت. چون تصور عموم بر این است که “سئو” در همه جا حرف اول را می زند. اما شاید دلیل کاهش بازدید وبسایت هایی که رسپانسیو نیستند الگوریتم گوگل نباشد، به عیقده من دلیل کاهش بازدید نامناسب بودن وبسایت شما برای کاربران موبایل است.

شاید سئو روی نتایج جستجو تاثیر بسزایی داشته باشد اما نگه داشتن کاربران در وبسایت بر عهده شماست ! بنابراین شما به عنوان یک طراح یا توسعه دهنده باید به فکر طراحی و پیاده سازی وبسایت هایی باشید که هم نیاز کاربران را به خوبی برطرف می کند و هم مورد پسند کارفرماست.

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

۱ – آیا طرح در صفحه نمایش های مختلف به خوبی نمایش داده می‌شود ؟

نمونه یک وبسایت رسپانسیو

تلفن های همراه در اندازه های مختلفی ساخته می شوند بنابراین مطالعات جدید نشان می دهند که نباید طرح را براساس مقیاس طراحی کنیم بلکه بر اساس اولویت کوچک به بزرگ (mobile-first) طراحی کنیم. یعنی برخلاف گذشته که اندازه تلفن های پرچمدار را شاخص قرار می دادیم و در پیاده سازی طبق فرایند کاهش اندازه پیش می رفتیم. این بار اول از موبایل شروع کنیم و سپس باتوجه به افزایش اندازه صفحه اجزای دیگر را به طرح اضافه کنیم.

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

من شدیدا توصیه می کنم برای پیاده سازی طرح هایتان از فریم ورک های mobile-first استفاده کنید. (نمونه: + + + + +) استفاده از یک فریم ورک مناسب و پیروی از قوانین آن کار بسیار عاقلانه ای است اما فراموش نکنید، فریم ورک ها ضامن تجربه کاربری نیستند. آنها فقط زمینه را برای پیاده سازی طرح آسان تر می کنند.

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

۲ – آیا کاربر می تواند به راحتی فعالیت های ساده را انجام دهد؟

فعالیت ساده در هر طرح می تواند تعریف بخصوصی داشته باشد به طور کلی کلیک کردن، تکمیل کردن فرم ها رفت و آمد بین صفحات و … جز فعالیت های ساده هستند. از چه نظر !؟ خب در نسخه دسکتاپ کاربر به سادگی می تواند روی شماره صفحه موردنظر کلیک کند و به آن صفحه برود. اما در موبایل شماره صفحات عذاب آور هستند، پس باید فعالیت را ساده کنید. فراموش نکنید که تعامل لمسی حالت کلی موبایل است بنابر این نمی توان از دکمه های کوچک برای نمایش شماره صفحات استفاده کرد.

۳ – آیا طرح من دچار مرگ محتوا شده است؟

تایپوگرافی ناخوانا

زمانی که محتوای شما خوانا نباشد کاربر سعی می کند آنرا به صورت روزنامه وار بخواند و رفته رفته علاقه‌اش به خواندن آن کم می‌شود. اینجاست که “مرگ محتوا” رخ می‌دهد. وقتی که به تصویر بالا نگاه می‌کنید به نظر همه چیز مرتب است هرچند که اندازه فونت ها و چیدمان آن چندان مناسب نیست اما باز هم برای نمای دسکتاپ قابل قبول است.

ولی وقتی که نمای موبایل را بررسی می کنیم علائم مرگ محتوا نمایان می شود.

تایپوگرافی ناخواناتایپوگرافی نامناسب عامل اصلی مرگ محتواست، اما چگونه با آن مبارزه کنیم !؟

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

یک قانون طلایی برای حل این مشکل وجود دارد، تعداد حروف در یک خط باید بین ۴۵ تا ۷۵ کاراکتر باشند و همچنین باید در هر خط تقریبا ۱۰ واژه وجود داشته باشد. (فاصله های بسیار زیاد در تصویر نمای موبایل ناشی از عدم رعایت این قانون است).

بنابر این عرض یک ستون نباید کمتر از ۳۲۰ و بیشتر از ۸۰۰ پیکسل باشد، البته این موضوع به زبان و نوع فونت وابسته است. درضمن بهتر است برای تعیین اندازه از واحد em استفاده کنید(برای تبدیل px به em مقدار را بر حسب پیکسل در عدد ۱۶ تقسیم می کنیم).

۴ – آیا منوی سایت ساده و قابل فهم است؟

منوی ساده با تودرتویی مناسب

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

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

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

۵ – آیا جستجو در سایت به آسانی امکان پذیر است؟

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

۶ – آیا فرم های مهم به سادگی قابل پر کردن اند ؟

کاربر را مجبور به تکرار یک عملیات نکنید، به عنوان مثال هنگام ثبتنام لزومی در واردکردن مجدد رمز عبور نیست. به جای آن می توانید پیش نمایش اطلاعات را به کاربر نشان دهید تا درصورت تایید ثبتنام انجام شود.

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

جمع بندی

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

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

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

۱۶ دیدگاه

  1. وحید گفت:

    اگه به کار بردن پیغام های سطحی (مثل رمزعبور یا نام کاربری صحیح نیست) اشتباهه, پس اگه نام کاربری یا رمز عبور اشتباه بود چه پیغام مناسبی باید صادر بشه؟

    • تکلیف کاربر رو مشخص کنید، بالاخره کدومش اشتباهه ؟ نام کاربری یا رمز عبور !؟ منظور اینه که برای هر خطا پیغام مناسبی صادر کنید این عبارت دیگه خیلی کلیشه ای شده.

      • وحید گفت:

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

        • نمیشه صرفا به خاطر اینکه “ممکنه” راه هکر رو هموار کنیم، مسئله تجربه کاربری رو نادیده بگیریم. برای حل این مسئله میشه از ورود دو مرحله ای و حتی راه های دیگه مثل jwt استفاده کرد.
          به هرحال یک هکر هیچگاه منتظر پیغام چاپ شده روی صفحه نمایش نمیشه، اون از طریق curl درخواست ها رو ارسال میکنه چون نتیجه http status هم میتونه موفقیت آمیز بودن درخواست رو مشخص کنه، از طرفی از این طریق زمان و سرعت بیشتری برای تلاش کردن داره.

  2. میلاد گفت:

    واقعا عالی و کامل بود مطلب، لطفا مانند مثال های مربوط به فرم، مثال های بیشتری بزنید.
    با تشکر

  3. محمدرضا گفت:

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

  4. سلام بسیار مطلب مفید و خوبی بود
    با تشکر از شما دوست عزیز و گران قدر

  5. بسیار عالی و مقاله مفیدی بود .

  6. وحید گفت:

    خیلی عالی بود ممنون بابت مقاله,فقط قبلا مقاله های بیشتری میزدید لطفا بیشتر بنویسید تا استفاده کنیم

  7. امید گفت:

    استفاده کردیم مرسی :)

  8. دکوران گفت:

    این روزها که بیشتر از ۷۰ درصد مردم در دنیا و ایران از موبایل و تبلت استفاده می‌کنند، خنده‌دار است اگر سایت خود را برای موبایل بهینه نکنیم

  9. بسیار عالی بود، ممنون بابت به اشتراک گذاری

  10. PXR گفت:

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

  11. اسکندری گفت:

    بسيار عالی بود ، ممنون بابت به اشتراک گذاري

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

قوانین

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

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

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

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

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