واجهات مستخدم مظلمة. الجيد والسيئ. ما يجب فعله و ما لا يجب فعله.

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

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

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

أظهرت معظم الدراسات أن النص الداكن على خلفية فاتحة أفضل من النص الفاتح على خلفية داكنة ، أي أنه أسهل في القراءة. في إحدى الدراسات الشهيرة ، كان "التعب البصري" أكبر بشكل ملحوظ عندما يقرأ الأشخاص الأحرف الفاتحة على خلفية داكنة مقابل الأحرف الداكنة على خلفية فاتحة (Bauer ، D. ، Bonacker ، M. ، and Cavonius ، CR 1983).

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

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

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

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

حتى أن هناك أشياء مثل متلازمة رؤية الكمبيوتر (CVS) و "عدم الراحة في العين". وفقًا لدراسة ، يستخدم أكثر من 83 بالمائة من الأمريكيين الأجهزة الرقمية لأكثر من ساعتين يوميًا ، وأفاد 60.5 بالمائة أنهم يعانون من أعراض إجهاد العين الرقمي. (تعرض العيون للضوء المفرط: معضلة الأجهزة الرقمية).

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

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

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

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

عندما تعمل واجهات المستخدم المظلمة بشكل جيد

تميل غالبية واجهات المستخدم المتعلقة بالترفيه (أجهزة التلفزيون الذكية ووحدات التحكم في الألعاب وتطبيقات التلفزيون والأفلام) إلى تصميمات ذات طابع داكن لواجهة المستخدم - لسبب وجيه. تحدث معظم الأنشطة المتعلقة بالترفيه في المساء ، ويتم مشاهدتها من مسافة 6-10 أقدام ، وتتم مشاهدتها في غرف ذات إضاءة خافتة - بمعنى آخر ، تتوافق الشاشة مع البيئة. بالإضافة إلى ذلك ، يبرز المحتوى الملون (على سبيل المثال ، فن الغلاف والعروض الترويجية) بشكل كبير في واجهات المستخدم ذات الطابع الداكن.

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

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

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

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

عندما لا تعمل واجهات المستخدم المظلمة بشكل جيد

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

يكمن التحدي في محاولة الحفاظ على تباين كافٍ ، مما يؤثر على التحدي الشامل: قابلية القراءة ، والتي ترتبط بسهولة الاستخدام ، والتي تؤثر على تجربة المستخدم. بشكل عام ، تعمل كل الألوان على خلفية بيضاء ، بينما في الخلفية الداكنة ، يتم تقليل نطاق الألوان المفيد بشكل كبير.

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

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

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

ما يجب فعله وما لا يجب فعله عند استخدام واجهات المستخدم المظلمة

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

عندما يكون من المناسب استخدام واجهات مستخدم مظلمة:

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

عندما يكون من الأفضل الابتعاد عن واجهات المستخدم المظلمة:

• عندما يكون هناك الكثير من النص (يصعب القراءة على خلفية داكنة)
• عندما يكون هناك الكثير من المحتوى المختلط على الشاشة
• في حالة تطبيقات B2B التي تحتوي على الكثير من الأشكال والمكونات والأدوات
• عندما يستدعي التصميم مجموعة واسعة من الألوان

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

• • •

مزيد من القراءة على مدونة Toptal Design:

• تجربة مستخدم التجارة الإلكترونية - نظرة عامة على أفضل الممارسات (باستخدام مخطط المعلومات الرسومي)
• أهمية التصميم المتمحور حول الإنسان في تصميم المنتج
• أفضل مجموعات مصممي UX - أمثلة ودراسات حالة ملهمة
• مبادئ ارشادية للواجهات المتنقلة
• التصميم التوقعي: كيفية إنشاء تجارب مستخدم سحرية