از زمانی که گوگل اعلام کرد الگوریتم خود را تغییر داده و قرار است به وب سایت های دوست‌دار موبایل (mobile-friendly) اهمیت بیشتری بدهد تصورات غلطی درباره موبایل وب در ذهن افراد شکل گرفت. چون تصور عموم بر این است که “سئو” در همه جا حرف اول را می زند. اما شاید دلیل کاهش بازدید وبسایت هایی که رسپانسیو نیستند الگوریتم گوگل نباشد، به عیقده من دلیل کاهش بازدید نامناسب بودن وبسایت شما برای کاربران موبایل است.
شاید سئو روی نتایج جستجو تاثیر بسزایی داشته باشد اما نگه داشتن کاربران در وبسایت بر عهده شماست ! بنابراین شما به عنوان یک طراح یا توسعه دهنده باید به فکر طراحی و پیاده سازی وبسایت هایی باشید که هم نیاز کاربران را به خوبی برطرف می کند و هم مورد پسند کارفرماست.
در این مقاله سعی دارم با توجه به مقاله پیشین که درمورد معنای استراتژی موبایل وب بود، به شرح چند نکته کلیدی در قالب سوال بپردازم که هر طراح و توسعه دهنده ای برای درک بهتر موبایل وب باید از خود بپرسد.
تلفن های همراه در اندازه های مختلفی ساخته می شوند بنابراین مطالعات جدید نشان می دهند که نباید طرح را براساس مقیاس طراحی کنیم بلکه بر اساس اولویت کوچک به بزرگ (mobile-first) طراحی کنیم. یعنی برخلاف گذشته که اندازه تلفن های پرچمدار را شاخص قرار می دادیم و در پیاده سازی طبق فرایند کاهش اندازه پیش می رفتیم. این بار اول از موبایل شروع کنیم و سپس باتوجه به افزایش اندازه صفحه اجزای دیگر را به طرح اضافه کنیم.
به عبارت دیگر فرایند تولید یک خودرو را در نظر بگیرید. همه چیز از مواد اولیه شروع می شود سپس سرهم بندی قطعات و در نهایت طرح به خودرو تبدیل می شود. اما فراید خرد کردن خودرو چطور؟ آیا می توانیم به آسانی بدنه را به حالت قبل (مواد اولیه) برگردانیم؟ خیر، بدنه آن تا حد مشخصی قابل کوچک شدن است.
من شدیدا توصیه می کنم برای پیاده سازی طرح هایتان از فریم ورک های mobile-first استفاده کنید. (نمونه: + + + + +) استفاده از یک فریم ورک مناسب و پیروی از قوانین آن کار بسیار عاقلانه ای است اما فراموش نکنید، فریم ورک ها ضامن تجربه کاربری نیستند. آنها فقط زمینه را برای پیاده سازی طرح آسان تر می کنند.
بنابر این حتما هنگام طراحی رابط کاربری تمامی جزئیات را برای نسخه موبایل، تبلت و دسکتاپ درنظر بگیرید. در طراحی هم سعی کنید ابتدا از موبایل شروع کنید این کار کمی سخت به نظر می رسد اما غیر ممکن نیست. هرچند اگر هم از دسکتاپ شروع کنید مانع بخصوصی در پیاده سازی ایجاد نمی شود فقط به گرید بندی طرح فوقالعاده توجه کنید.
فعالیت ساده در هر طرح می تواند تعریف بخصوصی داشته باشد به طور کلی کلیک کردن، تکمیل کردن فرم ها رفت و آمد بین صفحات و … جز فعالیت های ساده هستند. از چه نظر !؟ خب در نسخه دسکتاپ کاربر به سادگی می تواند روی شماره صفحه موردنظر کلیک کند و به آن صفحه برود. اما در موبایل شماره صفحات عذاب آور هستند، پس باید فعالیت را ساده کنید. فراموش نکنید که تعامل لمسی حالت کلی موبایل است بنابر این نمی توان از دکمه های کوچک برای نمایش شماره صفحات استفاده کرد.
زمانی که محتوای شما خوانا نباشد کاربر سعی می کند آنرا به صورت رومه وار بخواند و رفته رفته علاقه‌اش به خواندن آن کم میشود. اینجاست که “مرگ محتوا” رخ می‌دهد. وقتی که به تصویر بالا نگاه می‌کنید به نظر همه چیز مرتب است هرچند که اندازه فونت ها و چیدمان آن چندان مناسب نیست اما باز هم برای نمای دسکتاپ قابل قبول است.
ولی وقتی که نمای موبایل را بررسی می کنیم علائم مرگ محتوا نمایان می شود.
هنگامی که صفحه کوچک یا بزرگ می شود اندازه قلم نیز باید با اندازه صفحه همخوانی داشته باشد. به خاطر داشته باشید که چشم انسان قادر به دنبال کردن خطوط طولانی نیست (همچنین خطوط بسیار کوتاه هم باعث ایجاد فاصله می شود).
یک قانون طلایی برای حل این مشکل وجود دارد، تعداد حروف در یک خط باید بین ۴۵ تا ۷۵ کاراکتر باشند و همچنین باید در هر خط تقریبا ۱۰ واژه وجود داشته باشد. (فاصله های بسیار زیاد در تصویر نمای موبایل ناشی از عدم رعایت این قانون است).
بنابر این عرض یک ستون نباید کمتر از ۳۲۰ و بیشتر از ۸۰۰ پیکسل باشد، البته این موضوع به زبان و نوع فونت وابسته است. درضمن بهتر است برای تعیین اندازه از واحد em استفاده کنید(برای تبدیل px به em مقدار را بر حسب پیکسل در عدد ۱۶ تقسیم می کنیم).
مسیری که کاربر برای دسترسی به صفحات سایت، پست های وبلاگ و یا محصولات طی می کند چقدر طول می‌کشد است !؟ قبلا هم به این نکته اشاره کردم که اگر کاربر با یک یا دو کلیک نتواند به محتوای موردنظرش دسترسی پیدا کند بازگشت مجددی درکار نیست!
اکثر کاربران هنگامی که روی لوگوی سایت کلیک می کنند انتظار دارند که به صفحه اصلی برگردند، اما زمانی که این امکان وجود نداشته باشد آنها نا امید می شوند و همین مسئله برای شما می تواند یک زنگ خطر باشد.
خب معلوم است، آنها می توانند روی دکمه منو کلیک کنند و از آنجا گزینه صفحه اصلی را انتخاب کنند. اما چه کسی دوست دارد لقمه را دور سرش بچرخاند !؟ وقتی که با یک کلیک می شود به صفحه اصلی برگشت چرا راه طولانی تری را انتخاب کنند؟ بنابر این منوی سایت باید بسیار ساده باشد، سعی کنید حد اقل ۷ لینک را در آن بگنجانید.
پیچیدگی فرم جستجو را کاهش دهید، تاحد امکان طول و عرض فیلد را بزرگ در نظر بگیرید که هنگام تعامل لمسی به خوبی قابل انتخاب کردن باشد. اگر درحال پیاده سازی یک فروشگاه هستید استفاده از گزینه هایی برای فیلتر کردن نتایج جستجو می‌تواند به کاربران در رسیدن به نتیجه موردنظر کمک کند.
کاربر را مجبور به تکرار یک عملیات نکنید، به عنوان مثال هنگام ثبتنام ومی در واردکردن مجدد رمز عبور نیست. به جای آن می توانید پیش نمایش اطلاعات را به کاربر نشان دهید تا درصورت تایید ثبتنام انجام شود.
همچنین کیبورد مجازی می تواند نقش بسزایی را در ساده کردن فرایند پرکردن فرم ایفا کند. به عنوان مثال اگر کاربر مجبور است در فرم تاریخ تولد خودش را وارد کند. بهتر است یک تقویم مجازی به صورت پاپ آپ نمایش داده شود تا تاریخ را از طریق آن انتخاب کند تا اینکه برای هریک از فیلد های روز/ماه/سال عملیات یکسانی را انجام دهد.
بجز تایپوگرافی به کاربردن عبارات پیچیده و پیغام های سطحی (مثل رمزعبور یا نام کاربری صحیح نیست) ممکن است منجر به مرگ محتوا شود. برای نمایش ویدئو در سایت سعی کنید از تگ های html5 و همچنین فرمت های شناخته شده استفاده کنید. پخش فایل های فلش را در نسخه موبایل متوقف کنید. وبسایتی که برای کاربر بهینه باشد قطعا برای الگوریتم جدید گوگل هم بهینه است پس به این مسئله از دید تجربه کاربری نگاه کنید نه سئو.
درباره این سایت