أغلب من سيزور صفحتك الشخصية أو صفحة روابطك سيفتحها من هاتف، غالباً داخل متصفح تطبيق اجتماعي، وبيد واحدة، وربما أثناء التنقل. هذا الواقع يفرض أسلوباً مختلفاً في التصميم عن الصفحات التي تُصمَّم لشاشة حاسوب واسعة. وفيما يلي القواعد العملية التي تجعل صفحتك سهلة القراءة والاستخدام على الشاشات الصغيرة.
فكّر بالجوال أولاً
عند التصميم ابدأ بالشاشة الصغيرة ثم وسّع للشاشات الأكبر، وليس العكس. اسأل نفسك: ماذا سيرى الزائر في أول شاشة بدون أي تمرير؟ هذه المساحة الأولى أهم جزء في الصفحة، ويجب أن تحتوي على اسمك وتعريفك المختصر وأهم زر.
الأحجام والمسافات
حجم الأزرار
الإصبع أقل دقة من مؤشر الفأرة. اجعل ارتفاع كل زر مريحاً للمس، وليكن بين الأزرار فراغ كافٍ حتى لا ينقر الزائر الرابط الخطأ. كحد عملي، لا يقل ارتفاع الزر المهم عن 44 بكسلاً تقريباً مع مسافة واضحة من الأزرار المجاورة.
حجم الخط
اختر خطاً مقروءاً، وتجنب النصوص الصغيرة جداً. نص الفقرات يستحسن ألا يقل عن 15 بكسلاً تقريباً، والعناوين أكبر بوضوح. وللعربية خاصة اختر خطوطاً صُممت لها فعلاً وتتحمل أحجاماً صغيرة دون أن تتشابه الحروف.
المسافات البيضاء
لا تخف من الفراغ. المساحات الفارغة تمنح العين راحة وتبرز العناصر المهمة. الصفحة المزدحمة تُشعر الزائر بالإرهاق حتى لو كانت مليئة بالمعلومات القيّمة.
الألوان والتباين
التباين بين النص والخلفية هو أساس القراءة. أخطر خطأ هنا هو النص الرمادي الباهت على خلفية فاتحة. اتبع القواعد التالية:
- استخدم نصاً غامقاً على خلفية فاتحة أو نصاً فاتحاً على خلفية داكنة، وتجنب الألوان المتقاربة.
- لا تضع نصاً مباشرة فوق صورة معقدة دون طبقة تُضعف الصورة أو لوح خلفي يجعل القراءة أوضح.
- اختر لوناً رئيسياً واحداً للأزرار المهمة ليتميز عن بقية العناصر.
- اختبر الصفحة في الإضاءة العالية، ففي الشمس تختفي الألوان الباهتة.
ترتيب المحتوى
على الجوال يتحرك الزائر عمودياً فقط، لذلك الترتيب هو التصميم. اتبع هذا التسلسل في الأغلب:
- صورة أو شعار واسم وتعريف قصير.
- الإجراء الأهم بزر بارز.
- بقية الروابط والمنتجات بحسب الأولوية.
- دليل الثقة: التقييمات والأعمال.
- وسائل التواصل والمعلومات الإضافية.
وللتعمق في ترتيب الروابط وعدد العناصر راجع 7 أخطاء تجعل صفحة الروابط الخاصة بك أقل احترافية.
السرعة ليست رفاهية
الصفحة التي تتأخر في الظهور تفقد زوارها. أبطأ ما في الصفحات عادة هو الصور والفيديوهات الثقيلة. لتسريع صفحتك:
- صغّر أبعاد الصور وضغطها قبل الرفع.
- استخدم صوراً بالأبعاد المطلوبة فقط ولا ترفع صورة كبيرة لتُعرض صغيرة.
- قلّل عدد الخطوط والعناصر المتحركة.
- تجنب الفيديوهات الثقيلة في الخلفية ما لم تكن ضرورية.
الهوية البصرية
التصميم الجيد لا يعني تصميماً مزخرفاً، بل متسقاً مع هويتك. اختر لوناً رئيسياً ولوناً مساعداً وخطاً واحداً أو اثنين، وكرّرها في كل مكان. للاستزادة اقرأ بناء هوية بصرية بسيطة لمشروعك الصغير.
إمكانية الوصول
صفحة جيدة هي التي يستطيع الجميع استخدامها، بمن فيهم من يعانون ضعفاً في النظر أو صعوبة في التمييز بين الألوان. استخدم تبايناً كافياً، ولا تعتمد على اللون وحده لتوصيل المعنى، وأضف وصفاً نصياً للصور المهمة، وتأكد أن النص قابل للتكبير دون أن تتشوه الصفحة.
اختبر على أجهزة حقيقية
قبل النشر افتح الصفحة على:
- هاتفك الشخصي بمتصفح التطبيق الاجتماعي الذي سيستخدمه أغلب زوارك.
- هاتف بحجم شاشة مختلف إن أمكن، صغير وكبير.
- اتصال بطيء لترى كيف تتصرف الصفحة.
- وضع الإضاءة العالية والمنخفضة.
واطلب من شخص لم يرَ الصفحة من قبل أن يستخدمها وراقب أين يتردد.
أمثلة على أخطاء تظهر على الجوال فقط
كثير من العيوب لا تُرى على الحاسوب وتظهر فقط على الهاتف، ولذلك افحص هذه النقاط تحديداً:
- زران متجاوران بدرجة تجعل الإصبع يضغط الخطأ منهما.
- نص طويل في زر ينكسر على ثلاثة أسطر فيشوّه الشكل.
- صورة خلفية تغطي النص فتصبح القراءة صعبة عند تدوير الهاتف.
- نافذة منبثقة تغطي الشاشة ولا يظهر زر إغلاقها بوضوح.
- عناصر تتجاوز عرض الشاشة فيضطر الزائر إلى التمرير أفقياً.
وإذا أمكن، جرّب الصفحة بوضع الطباعة العمودي والأفقي وبخط النظام الكبير الذي يفعّله بعض المستخدمين لتسهيل القراءة.
قائمة تحقق للتصميم على الجوال
- الاسم والتعريف والزر الأهم تظهر في أول شاشة.
- الأزرار كبيرة ومتباعدة.
- الخط واضح والتباين جيد.
- الصور خفيفة والصفحة سريعة.
- لا يوجد نص صغير أو متقارب يصعب النقر عليه.
- الصفحة تبدو سليمة بالاتجاه من اليمين إلى اليسار دون تراكب.
خلاصة
التصميم الجيد للجوال هو تصميم بسيط وواضح وسريع. ابدأ بما يراه الزائر أولاً، واجعل الإجراء الأهم سهلاً، واختبر على أجهزة حقيقية، وستجد أن التحسينات الصغيرة في الأحجام والتباين تصنع فرقاً كبيراً. ولبناء الصفحة نفسها خطوة بخطوة انظر كيف تنشئ صفحة روابط احترافية تجمع حضورك الرقمي في مكان واحد.