اتجاه نجد للمقاولات

شركة مقاولات سعودية تعمل منذ 2008، وتقدّم تسعة خطوط خدمة تبدأ من أعمال الخرسانة والحفر وتنتهي عند دعم الشبكات وأنظمة الأمن. التحدي التصميمي هنا ليس إخراج موقع أنيق، بل ترتيب هذا التنوّع في بنية يفهمها الزائر من أول نظرة. تولّيت في مشروع «اتجاه نجد» تصميم الواجهة وتجربة التصفّح وتنفيذها بلغتين.

تسع خطوط خدمة لا يجمعها تصنيف واحد

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

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

لماذا بدأت من الوضع الداكن

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

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

بناء شجرة الخدمات

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

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

معرض المشاريع: الصورة هي الدليل الوحيد

في قطاع المقاولات، الصورة ليست تزييناً بل هي الشهادة. الزائر لا يصدّق ادعاء الخبرة من نصٍّ مكتوب، لكنه يصدّقه من مشروع منفّذ يراه بعينه. لذلك أعطيت معرض المشاريع مساحة أكبر مما تعطيه المواقع المماثلة عادةً، ووضعته في موقع مبكر نسبياً من الصفحة الرئيسية.

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

رسالة الرئيس التنفيذي كعنصر تصميمي

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

الفكرة أن يلتقط الزائر المعنى في ثانيتين حتى لو لم يقرأ سطراً واحداً. القسم الذي لا يُقرأ ليست مشكلته في المحتوى بل في افتراض أن الزائر سيمنحه وقتاً لم يقرّر منحه بعد؛ ومهمة التصميم أن يوصل الرسالة قبل أن يُطلب هذا الوقت.

الازدواج اللغوي وأثره على التخطيط

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

رقم الهاتف تحديداً حالة كلاسيكية: إن لم يُعالج بشكل صحيح داخل سياق من اليمين لليسار، تنقلب أجزاؤه على الشاشة فيقرأه الزائر خطأً — وهو خطأ يكلّف الشركة اتصالاً حقيقياً. تعاملت مع كل رقم على الموقع كحالة خاصة تحتاج ضبطاً صريحاً، لا كنصّ عادي.

مسار طلب عرض السعر

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

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

الأرقام كدليل مختصر

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

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

التصفّح من موقع العمل نفسه

جمهور هذا الموقع ليس جالساً أمام مكتب. مهندس أو مالك مشروع يفتح الموقع من هاتفه وهو في موقع بناء، تحت شمس مباشرة، وبيد واحدة غالباً. هذا السياق فرض قرارات محدّدة لم تكن لتُتّخذ لو كان الجمهور مكتبياً.

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

أسئلة حول المشروع

لماذا جُمعت الخدمات في عائلتين بدل عرضها كما هي؟

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

هل الوضع الداكن مناسب لكل المواقع؟

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

ما أكثر ما استغرق وقتاً؟

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