اختلفت معايير نجاح التصميم التفاعلي  Interaction Design في السنوات الأخيرة، فأصبحت تعتمد على معيارين أساسيين :

•  الجانب الوظيفي للتصميم Functionally side، و الذي يعتبر مفتاح النجاح لأى منتج.
• جمال التصميم وتفاصيلة البصرية aesthetics visual details، التي تحسن من الجانب الوظيفي للتصميم مثل الظل Shadow و الطمس blur effect ويمكنك إختبارها باستخدام برنامج Adobe XD .

الظل وواجهة المستخدم UI و الرابط بينهما.

استخدم مصممي واجهة المستخدم دمج الظلال في التصميم ، لتكوين إشارات بصرية visual cues لتساعد عقل المستخدم للوصول إلى ما يبحث عنه.

تصميم إمكانيات الفعل DESIGN AFFORDANCE.

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

• العناصر الظلية Shadow objects التي تبدو وكأنه يمكن الضغط عليها ،و تستخدم  هذه التقنية كإشارة مرئية للأزرار.
• العناصر الغائرة Sunken objects التي تبدو وكأنه يمكن ملأها، وتستخدم هذه التقنية كإشارة مرئية لمكان إدخال البيانات المطلوبة.

استفادت  ويندوز 2000 من تقنية الظل وتسليط الضوء لمساعدة المستخدمين في فهم العناصر التفاعلية لمربع الحوار.

إنشاء تسلسل هرمي مرئي VISUAL HIERARCHY .

استخدام الظل في التسلسل الهرمي يفيد في نقطتين :

1- واجهات المستخدم الحديثة تستخدم الـ Layers للإستفادة من المحور Z التى تقع علية معظم الإشارات البصرية التي تفيد المستخدم ،حيث يتم محاذاة المحور Z بشكل عمودي على مستوى الشاشة مع محور Z الإيجابي الذي يمتد نحو المشاهد.

2- يساعد الظل في تحديد التسلسل الهرمي Visual Hierarchy للعناصر من خلال وجود إختلاف بين عنصرين، أو مساعدة المستخدم في إدراك وجود عنصر مخفي تحت الأخر.

عليك كمصمم واجهة مستخدم رسومية GUI Designer أن تتصور وتتخيل مكان كل عنصر في هذا الفضاء ثلاثي الأبعاد  3Dimensional Space   لماذا؟!

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

يعتقد الكثير أن تصميم جوجل تصميم Flat ،لكنه يتميز بكونه تصميم ذو بعد ،وأنه استخدم استعارات metaphor ومباديء الفيزياء لمساعدة المستخدمين في فهم الواجهات و تفسير التسلسلات الهرمية البصرية في سياقها الصحيح.

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

تقديم  Visual Feedback باستخدام  Elevation.

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

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

Blur Effects

الـ Blur Effects في تطبيقات الجوال.

عند إطلاق Apple لـ IOS 8 رفعت شريط لتصميم التطبيق APP design، وكان من أهم التغيرات استخدام الـ blur effect في التصميم ككل وخاصة في الخلفية الغير واضحة و مركز التحكم، فعند الضغط على الهامش في أسفل الشاشة يظهر مركز التحكم ، ويحدث هذا الطمس بطريقة تفاعلية حيث يمكن للمستخدم التحكم به من خلال حركة الأصابع.

ولكن Apple أخذ إتجاه جديد في النسخة الأخيرة من IOS ، وهى إستخدام تقنية الـ3D فجعلت أشكال الـ camera، calculator  وtimer icon عبارة عن مجسمات ثلاثية الأبعاد ، عندما يضغط المستخدم على هذه الرموز ينتهي الوقت الفعلي لهذه التأثيرات الضبابية.

فوائد Blur Effects في تصميم واجهات الجوال الحديثة.

1- مساعدة المستخدم على الفهم الواضح للتصميم.

حيث تسمح هذه التقنية باللعب في طبقات التصميم والتسلسل الهرمي لواجهة المستخدم، كما أنها حل فعال في تصميم واجهة المستخدم لتطبيقات الجوال Mobile APP، حيث تعطي للمستخدم فهم واضح للتطبيق.

تطبيق Yahoo Weather لنظام IOS الذي يظهر صورة للطقس في كل موقع وعليها المعلومات الأساسية التي تحتاجها على الفور، وما إن تنقر نقرة واحده يظهر لك الكثير من المعلومات عن المكان الذي تريده مع الاستمرار في عرض الصورة .

2- توجيه إنتباه المستخدم.

يميل البشر للإنتباه إلى الأشياء التي يتم التركيز عليها وتجاهل الأشياء الغير واضحة،وهذا طبقا لطبيعة عمل العين البشرية والتي تسمى بـ accommodation reflex ، لذلك يمكن لمصمم التطبيق إستخدام هذه التقنية لإظهار العناصر المهمة والتركيز عليها لجذب انتباه المستخدم user attention و طمس المعلومات الغير مهمة حتى لا تتسبب في تشتيت انتباه المستخدم.

ومثال على ذلك تطبيق Tweetbot الذي ركز على المعلومات التي تهم المستخدم وقام بطمس الخلفية.

3- وضوح النص المقروء.

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

لذلك من المهم وجود تباين واختلاف بين النص والخلفية proper contrast، فيمكن للمصمم طمس جزء من الصورة للتركيز على النص المقروء كما في المثال التالي:

الـ Blur Effects في تصميمات الويب.

يمكن إستخدامه بسلاسة في تصميم الموقع عن طريق:

1- تزيين الخلفية Decorative Background.

حيث يتم إستخدامها مع الصور الـ Full Screen Background، كما وجدت طريقها في التصميم الحديث كتأثير ديكوري للموقع web decoration، وهذا التأثير ليس من الجانب الجمالي فقط ولكنه ذو قيمة، فحينما يتم طمس عنصر يتم التركيز على الأخر تلقائياً.

فعلى سبيل المثال موقع Trellis Farm ، استخدم صورة رمزية لمزرعة ، استخدم فيها تقنية الـ Blur لجذب تركيز المستخدم على النص والإجراءات التي يجب اتباعها للمتابعة داخل الموقع.

2- الصورة التقديمية للتحميل Progressive Image Loading.

تتطلب مواقع الويب الحديثة تحميل العديد والعديد من الصور والتي بلا شك لها تأثيرها على أداء الموقع web performance وبالتالي على تجربة المستخدم UX،تقنية الـ Blur Effect تسمح بظهور  صورة تقديمية حتى يتم تحميل الصور .

وقد لجأ لهذه التقنية العديد من المواقع منها  medium.com الذي يقدم صورتين بنفس المحتوى الأولى ضبابية صغيرة لحين تحميل الصورة الأصلية بكامل تفاصيلها وحجمها الطبيعي.

3- إختبار المواقع الهرمية البصرية.

الـ Blur Effect لا تعتبر تقنية للتصميم البصري  Visual Design فقط، ولكنها تستخدم أيضا كتقنية إختبار للتسلسل الهرمي البصري Visual Hierarchy للصفحة.

فهذا الإختبار يساعدك في معرفة هل يستجيب المستخدم ويذهب إلى ما تريده أن يركز عليه؟، كل ما عليك هو أخذ لقطة screenshots من موقعك، وتقوم بإدخالها على برنامج فتوشوب ثم تضيف الـ blur Effect بمقدار من 5: 10 درجات ، ثم انظر إلى النسخة الغير واضحة هل حققت ما تريده أم تحتاج إلى بعض التعديلات؟!

متى بتسبب الـ Blur Effect في مشكلة؟

1- عند الإفراط في استخدامه في الـ Mobile APP

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

2- تأثير الـ blur Effect على قابلية قراءة النصوص.

يجب أن نراعي وضوح النصوص المكتوبة Context وألا نستخدم الـ blur Effect فوق النصوص مما يؤثر على وضوحها ويجعلها صعبة القراءة.

3- استخدام الـ blur Effect مع المحتوى الكثيف يتسبب في ثقل الصفحات.

قد تتسبب الخلفية الغير واضحة blur background في مشكلة مع الصفحات المليئة بالمحتوى Content ، في المثال التالي ستلاحظ أن صورة الخلفية الواضحة أعطت شكل أفضل مع وضوح المحتوى المكتوب على عكس الأخرى التي استخدمت تقنية الطمس فالشكل سىء كما أن المحتوى غير واضح تماماً.

الخلاصة.

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

مُترجم بتصرف عن : How To Use Shadows And Blur Effects In Modern UI Design

by Nick Babich