حين يبحث عميلك عن خدمة مثل خدمتك، فالأرجح أنه يفعل ذلك من جواله: في السيارة، أو في استراحة العمل، بيد واحدة وانتباه قصير. إذا لم يكن موقعك مصممًا لهذه اللحظة، فهو لا يعمل في الوقت الذي يحتاجه فيه العميل.
في هذا المقال
حين يراجع صاحب العمل تصميم موقعه الجديد، يفعل ذلك عادةً على شاشة حاسوب كبيرة في المكتب: الصور واسعة، والقوائم مرتبة، وكل شيء يبدو ممتازًا. لكن العميل الذي يبحث عن «ورشة سيارات قريبة» أو «عيادة أسنان مفتوحة الآن» يرى موقعًا آخر تمامًا على شاشة بعرض كف اليد. التصميم للجوال أولًا يعني أن نبدأ من هذه الشاشة الصغيرة ونبني عليها، لا أن نصمم للحاسوب ثم نضغط التصميم حتى يتسع للجوال.
ما معنى التصميم للجوال أولًا؟
الموقع المتجاوب هو موقع يتكيف مع حجم الشاشة، وهذا أصبح أمرًا أساسيًا في أي موقع حديث. لكن التكيف وحده لا يكفي. كثير من المواقع تتجاوب تقنيًا لكنها مصممة بعقلية الحاسوب: قائمة طويلة تتحول إلى أيقونة صغيرة مخفية، وصورة ضخمة تدفع المحتوى المهم إلى الأسفل، ونموذج بعشرة حقول يصبح مرهقًا على شاشة صغيرة.
التصميم للجوال أولًا يقلب الترتيب. نسأل في البداية: ما الذي يحتاجه الزائر على الجوال في أول شاشة؟ ما الزر الذي يجب أن يكون تحت إبهامه دائمًا؟ ما المحتوى الضروري، وما الذي يمكن تأجيله؟ حين تُحسم هذه الأسئلة على الشاشة الصغيرة، يصبح توسيع التصميم للحاسوب سهلًا، لأن المساحة الإضافية تُستخدم للراحة لا لإخفاء الفوضى. وهناك سبب آخر: جوجل تعتمد نسخة الجوال من موقعك أساسًا في الفهرسة، فما يظهر على الجوال هو ما تقيّمه.
موقعك في يد العميل: خمس لحظات حاسمة
لكي يتضح الفرق عمليًا، هذه خمس لحظات يمر بها الزائر على الجوال، وما يجب أن يجده في كل منها:
عنوان واضح وزر اتصال
الشاشة الأولى
قبل أي تمرير، يجب أن يعرف الزائر ما تقدمه وأين، وأن يرى طريقة واضحة للتواصل.
شريط أزرار سفلي ثابت
منطقة الإبهام
الأزرار الأهم في النصف السفلي من الشاشة، حيث يصل الإبهام بسهولة عند الإمساك بالجوال بيد واحدة.
قائمة من 5 عناصر
القائمة
قائمة قصيرة بعناوين مفهومة، تُفتح بلمسة وتُغلق بسهولة، دون قوائم فرعية متداخلة.
3 حقول وزر إرسال
النموذج
حقول قليلة، ولوحة مفاتيح مناسبة لكل حقل: أرقام لرقم الجوال، ولوحة البريد لحقل البريد الإلكتروني.
زر واتساب عائم
واتساب والاتصال
زر واتساب يفتح المحادثة برسالة جاهزة، وزر اتصال يطلب الرقم مباشرة دون نسخ ولصق.
منطقة الإبهام وحجم الأزرار
كثير من الناس يمسكون الجوال بيد واحدة ويتنقلون بالإبهام. الإبهام يصل بسهولة إلى منتصف الشاشة وأسفلها، بينما تحتاج الزوايا العلوية إلى مدّ اليد أو استخدام اليد الأخرى. لذلك فإن وضع زر «احجز الآن» في الزاوية العليا، كما يحدث في مواقع كثيرة منقولة من تصميم الحاسوب، يجعل أهم إجراء في الموقع هو الأصعب وصولًا.
حجم الزر لا يقل أهمية عن مكانه. إرشادات أبل للتصميم توصي بألا تقل المساحة القابلة للمس عن 44×44 نقطة، وإرشادات Material Design من جوجل توصي بـ48×48. وبلغة بسيطة: يجب أن يكون الزر بحجم طرف الإصبع على الأقل، مع مسافة كافية بين الأزرار حتى لا يضغط العميل «اتصال» وهو يريد «واتساب». والروابط النصية الصغيرة المتلاصقة، مثل رقم هاتف مكتوب بخط صغير في تذييل الصفحة، من أكثر ما يُحبط زائر الجوال.
السرعة على بيانات الجوال
زائر الجوال ليس دائمًا على شبكة واي فاي سريعة. قد يكون على طريق سفر، أو في مبنى إشارته ضعيفة. صورة كبيرة تُحمَّل في لحظة على إنترنت المكتب قد تأخذ وقتًا مزعجًا على بيانات الجوال، والزائر لا ينتظر طويلًا قبل أن يعود إلى نتائج البحث ويختار غيرك.
التصميم للجوال أولًا يعني أن نختار بعناية ما يُحمَّل على الشاشة الصغيرة: صور بأحجام مناسبة للجوال لا نسخ الحاسوب نفسها، وفيديو الخلفية يُستبدل بصورة ثابتة أو يُشغَّل عند الطلب، والخطوط والمؤثرات الحركية تُستخدم بقدر. أما قياس السرعة ومؤشراتها بالتفصيل فلها مقال خاص: لماذا تصنع سرعة الموقع المبيعات.
راجع موقعك من جوالك لا من مكتبك
قبل اعتماد أي تصميم، افتحه من جوالك على بيانات الجوال لا على شبكة المكتب، وحاول أن تصل إلى زر التواصل وترسل النموذج بيد واحدة. ما يزعجك خلال دقيقة سيزعج عميلك أكثر، لأنه لا يعرف موقعك كما تعرفه.
النماذج: حقول أقل، طلبات أكثر
الكتابة على لوحة مفاتيح الجوال أبطأ وأكثر عرضة للأخطاء، وكل حقل إضافي في نموذج التواصل سبب إضافي للتوقف. اسأل نفسك عن كل حقل: هل أحتاجه فعلًا قبل أول تواصل؟ في أغلب الأنشطة يكفي الاسم ورقم الجوال ونوع الخدمة، وباقي التفاصيل تُستكمل في المكالمة أو المحادثة.
وهناك تفاصيل صغيرة تصنع فرقًا كبيرًا: أن تظهر لوحة الأرقام تلقائيًا في حقل الجوال، وأن تظهر رسالة الخطأ بجانب الحقل نفسه لا في أعلى الصفحة، وأن يبقى ما كتبه العميل محفوظًا إذا أخطأ في حقل واحد، وأن تظهر رسالة تأكيد صريحة بعد الإرسال حتى لا يرسل الطلب مرتين أو يظن أنه لم يصل.
أزرار الاتصال وواتساب في مكانها الصحيح
كثير من العملاء في السعودية يفضلون رسالة واتساب سريعة على ملء نموذج. هذا ليس عيبًا في الموقع، بل فرصة. زر واتساب الجيد يفتح المحادثة مباشرة برسالة أولى جاهزة مثل «السلام عليكم، أود الاستفسار عن خدمة...»، فلا يبدأ العميل من شاشة فارغة ولا يحتار في صياغة أول سطر.
أما زر الاتصال فيجب أن يطلب الرقم بلمسة واحدة. رقم الهاتف المكتوب كنص عادي يجبر العميل على نسخه ولصقه، وهذه خطوة إضافية قد لا يكملها. ضع الزرين في مكان ثابت يسهل الوصول إليه، كشريط سفلي أو زر عائم، وتأكد أنهما لا يغطيان محتوى مهمًا أو زر إرسال النموذج. كل مواقع ويبنا تأتي بنموذج تواصل وزر واتساب، ويمكنك معرفة ما تتضمنه كل باقة في صفحة الخدمات والباقات.
كيف يتغير المحتوى على الشاشة الصغيرة
التصميم للجوال لا يعني حذف المحتوى، بل ترتيبه حسب الأولوية. هذه مبادئ نطبقها عند بناء كل صفحة:
الأهم أولًا
ما يحتاجه الزائر ليقرر يأتي في الأعلى: ماذا تقدم، وأين، وكيف يتواصل معك. قصة التأسيس والرؤية والرسالة يمكنها الانتظار.
فقرات قصيرة
الفقرة التي تبدو معقولة على الحاسوب تصبح جدارًا من النص على الجوال. سطران أو ثلاثة لكل فقرة، مع عناوين فرعية واضحة.
صور تخدم الرسالة
صورة حقيقية لعملك أو مكانك أفضل من شريط صور متحرك ثقيل. والصورة العريضة يجب أن تُقصّ على الجوال بحيث يبقى الجزء المهم ظاهرًا.
لا شيء يعتمد على الماوس
المعلومات التي تظهر فقط عند مرور مؤشر الماوس لا تعمل على شاشات اللمس. كل ما هو مهم يجب أن يكون ظاهرًا أو يُفتح بلمسة.
جداول قابلة للقراءة
جداول المقارنة والمواصفات تتحول على الجوال إلى بطاقات أو قوائم، بدل جدول عريض يحتاج إلى تمرير أفقي.
اختبر موقعك على الجوال في عشر دقائق
لا تحتاج إلى أدوات تقنية لتعرف إن كان موقعك مريحًا على الجوال. خذ جوالك وجرّب هذه الخطوات كما لو كنت عميلًا يزور الموقع لأول مرة:
- ابحث عن نشاطك في جوجل وافتح موقعك من النتائج، لا من رابط محفوظ.
- من دون تمرير: هل تعرف ما تقدمه الشركة وكيف تتواصل معها؟
- اضغط زر الاتصال ثم زر واتساب: هل يعمل كل منهما من أول لمسة؟
- املأ نموذج التواصل وأرسله بيد واحدة، وراقب لوحة المفاتيح ورسائل الخطأ.
- افتح القائمة وانتقل إلى صفحة الخدمات ثم ارجع: هل كان ذلك سهلًا؟
- بدّل بين العربية والإنجليزية: هل يبقى الترتيب واضحًا في الاتجاهين؟
إذا تعثرت في أي خطوة، فهي نقطة يتعثر فيها عملاؤك أيضًا، وغالبًا دون أن يخبروك. ولرؤية أمثلة على تصاميم مرتبة تعمل جيدًا على الشاشات الصغيرة، تصفّح نماذج التصميم لدينا.
الجوال ليس نسخة مصغرة من موقعك، بل هو في أحيان كثيرة المكان الأول الذي يلتقي فيه العميل بشركتك. حين تبدأ منه، تبني موقعًا يُستخدم بسهولة في اللحظة التي يتخذ فيها العميل قراره، وهذه هي اللحظة التي تتحول فيها الزيارة إلى مكالمة أو رسالة.
موقع مصمم لإبهام عميلك
نبني مواقعنا لتعمل على الجوال بسلاسة: أزرار واضحة، ونموذج تواصل مختصر، وزر واتساب في متناول اليد، بالعربية والإنجليزية.