ما هو تأثير اللمعان، وكيف يحسّن تجربة المستخدم في التطبيقات؟

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

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

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

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

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

يمكن تنفيذ تأثير اللمعان على معظم المنصات. فعلى Android، نشرت Facebook مكتبة Shimmer for Android، وفي Jetpack Compose يمكن إنشاء التأثير بتدرج لوني متحرك أو بمكتبات الأطراف الثالثة. وعلى iOS، كثيرًا ما تُستخدم مكتبات مثل SkeletonView، أو يُبنى التأثير بتدرج لوني متحرك في UIKit أو SwiftUI.

وفي تطوير الويب، يُنشأ التأثير عادة باستخدام CSS، حيث يُحرَّك تدرج خطي عبر العناصر النائبة بواسطة الإطارات المفتاحية. وتتضمن مكتبات مكونات كثيرة، مثل MUI لـ React، مكونات هيكل جاهزة. ولدى Flutter حزمة shimmer، ولدى React Native عدة مكتبات مماثلة.

ينبغي أن يكون تشغيل تأثير اللمعان خفيفًا. فعلى الويب، يُستحسن تحريك خصائص مثل transform، التي يستطيع معالج الرسوميات التعامل معها بكفاءة، بدلًا من الخصائص التي تجعل المتصفح يعيد حساب التخطيط. كما يتجنب تحريك background-position إعادة حساب التخطيط، لكنه يتطلب إعادة رسم العنصر.

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

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

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

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

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