ميدسينس

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

واجهة تخاطب مهنياً ومستخدماً عادياً في آن واحد

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

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

المجالات العلاجية كعمود فقري للتصفّح

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

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

الانعكاس الكامل بين العربية والإنجليزية

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

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

الوضع الداكن في سياق طبي

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

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

عرض العلامات والمنتجات دون فوضى

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

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

الجسر بين الموقع والمتجر

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

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

التغطية الجغرافية والقيادة: قسمان يبنيان الثقة

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

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

الأداء على اتصال الجوال

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

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

ما يُسأل عنه في مشاريع القطاع الطبي

ما الذي يجعل تصميم موقع طبي مختلفاً؟

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

هل تختلف تجربة المستخدم بين النسختين العربية والإنجليزية؟

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

لماذا الأيقونات الخطّية بدل الملوّنة؟

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