صمّم للجوال أولاً: طريقة تفكير تجبرك تختار الأهم قبل ما تزحم الشاشة

كثير يصمّم الموقع على شاشة كمبيوتر عريضة، ثم «يضغطه» للجوال في آخر يوم. النتيجة: قوائم مخفية في مكان محد يلقاه، وأزرار صغيرة، وأهم معلومة نازلة في آخر الصفحة. التصميم للجوال أولاً مو مقاس؛ هو انضباط يجبرك تجاوب: وش الشيء الوحيد اللي لازم يشوفه المستخدم أولاً؟

لماذا تبدأ من الشاشة الصغيرة؟

المساحة الصغيرة ما تسمح بالمجاملة. ما تقدر تحط ستة أزرار متساوية وثلاثة بانرات. لازم ترتّب. ولما ترتّب للجوال، التوسّع للشاشة الكبيرة يصير سهلاً: تضيف مساحة ومعلومات مساندة. العكس — حذف أشياء من تصميم كبير — دايماً مؤلم ومليء بالتنازلات الغلط.

الخطوة الأولى: رتّب المحتوى في عمود واحد

قبل أي شكل، اكتب محتوى الشاشة كقائمة مرتبة من الأهم للأقل أهمية. في صفحة منتج مثلاً: الصورة، الاسم والسعر، زر الشراء، المواصفات المختصرة، التقييمات، ثم التفاصيل. هذا الترتيب هو تصميم الجوال نفسه تقريباً.

منطقة الإبهام

• أغلب الناس يمسكون الجوال بيد وحدة، والإبهام يوصل بسهولة للنصف السفلي من الشاشة.
• ضع الإجراء الأهم (شراء، حجز، إرسال) في مكان يوصله الإبهام، مثل زر ثابت في الأسفل.
• الأعلى مناسب للمعلومات والعناوين، مو للأزرار اللي تنضغط كثيراً.
• في الواجهات العربية تنعكس الجهات: شريط الرجوع والقوائم يبدأ من اليمين، فانتبه لتوازن اليد.

أزرار تُضغط من أول مرة

• مساحة لمس مريحة لكل زر وأيقونة، حتى لو الأيقونة نفسها صغيرة.
• مسافة كافية بين الأزرار المتجاورة عشان ما يضغط المستخدم الغلط.
• الروابط داخل النص تحتاج مساحة أكبر مما تتوقع.
• لا تعتمد على التمرير فوق العنصر (hover) لإظهار معلومة؛ الجوال ما فيه hover.

النماذج في الجوال: كل حقل يكلّف

كتابة على شاشة صغيرة مزعجة. احذف كل حقل ما تحتاجه الآن، واستخدم نوع لوحة المفاتيح المناسب (أرقام لرقم الجوال، بريد للإيميل)، واسمح بالتعبئة التلقائية. وبدل صفحة طويلة فيها عشرين حقل، قسّمها لخطوات قصيرة مع مؤشر تقدّم.

التوسع للشاشات الأكبر

بعد ما يستقر الجوال، وسّع: العمود الواحد يصير عمودين، والمعلومات المساندة تطلع جنب المحتوى الأساسي، والقائمة المخفية تصير ظاهرة. لكن حافظ على نفس ترتيب الأولويات. لا تخلّ الشاشة الكبيرة «منتجاً ثانياً» مختلفاً.

التنقل: القائمة المخفية مو حل لكل شيء

أيقونة الخطوط الثلاثة مغرية لأنها تخفي كل شيء بضغطة. لكن اللي مخفي، غالباً ما يُستخدم. لو عندك من ثلاث إلى خمس وجهات رئيسية، شريط تنقل سفلي ظاهر أفضل بكثير، لأن المستخدم يشوف الخيارات دائماً ويوصلها بإبهامه. واحتفظ بالقائمة الجانبية للأشياء الثانوية مثل الإعدادات والمساعدة وسياسة الخصوصية.

وهنا تأتي مرحلة يستعجل فيها كثيرون ويتجاوزونها، مع إنها أرخص مرحلة لاكتشاف الأخطاء: التجربة الفعلية باليد، بعيداً عن شاشة الكمبيوتر الكبيرة ومعاينات برامج التصميم المرتبة اللي تخفي نصف المشاكل.

تصغير نافذة المتصفح على الكمبيوتر يعطيك فكرة عن المقاس، لكنه ما يعطيك الإحساس. قبل الاعتماد، افتح التصميم على جوال فعلي وجرّب:

• استخدمه بيد وحدة وأنت واقف أو ماشي.
• جرّبه في ضوء الشمس، مو داخل غرفة مظلمة.
• افتحه على شبكة ضعيفة وشوف وش يظهر أولاً.
• جرّب جوالاً صغيراً وجوالاً كبيراً، مو جوالك أنت فقط.
• كبّر حجم الخط من إعدادات النظام، وتأكد إن التصميم ما ينكسر.
• املأ نموذجاً كاملاً وشوف هل لوحة المفاتيح تغطي زر الإرسال.

هذي التجارب البسيطة تكشف مشاكل ما تظهر أبداً في ملف التصميم المرتب، وتصحيحها قبل البرمجة أرخص بكثير من بعدها.

وتذكّر إن التصميم للجوال أولاً ما يعني إهمال الكمبيوتر. بعض الأنظمة مثل لوحات التحكم يستخدمها الموظفون على شاشات كبيرة أغلب الوقت، وهنا يكون الترتيب معكوساً. القاعدة الحقيقية: صمّم أولاً للجهاز اللي يستخدمه أغلب جمهورك في أهم لحظة، وفي مواقع ومتاجر العملاء غالباً هذا الجهاز هو الجوال.

في منصة أزهل الرقمية تبدأ التصميمات المبدئية المجانية من شاشة الجوال، لأن أغلب زوّار مشروعك غالباً يوصلونه من جوالهم. تواصل مع أزهل على واتساب واطلب تصميماً مبدئياً لصفحتك الأهم على الجوال قبل أي شيء آخر.