تحميل Spinner الخاص بك هو UX Killer! هنا بديل

نحن نعلم أنك تكره الانتظار. الجميع يفعل.

في دراسة عام 2017 ، وجدت Google ما يلي:

• أدت مرات التحميل من 1 إلى 3 ثوانٍ إلى زيادة معدلات الارتداد بنسبة 32٪.
• زادت أوقات التحميل من 1-5 ثوانٍ معدلات الارتداد بنسبة 90٪.
• زادت أوقات التحميل من 1 إلى 6 ثوانٍ معدلات الارتداد بنسبة 106٪.

لا يحب الناس الانتظار ما لم يكن هناك سبب وجيه لذلك ، وكلما طال الانتظار ، قل هذا السبب. هذا هو السبب في أن رؤية حالة النظام هي أحد أساليب الاستدلال العشر الخاصة بقابلية الاستخدام الخاصة بشركة Nielsen لتصميم واجهة المستخدم. تعني رؤية حالة النظام:

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

وهنا يأتي دور مؤشرات التحميل. مؤشر تحميل جيد:

1. يتيح للمستخدمين معرفة أن التطبيق يعمل.
2. يجعل الانتظار محتملًا.
3. يعطي المستخدمين شيئًا للنظر إليه.

مؤشر التحميل الأكثر شيوعًا في تصميم واجهة المستخدم هو - كما خمنت - أداة التحميل الدوارة.

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

تصميم الدوار: لماذا تمتص تحميل المغازل

بقدر ما يذهب تحميل الرسوم المتحركة ، فإن قرص التحميل هو خيار مؤسف ، خاصة بالنسبة للانتظار لمدة أطول من 10 ثوانٍ. لماذا ا؟

لنبدأ بقصة قصيرة.

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

صورة لمؤشر انتظار macOS من How-To Geek.

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

تجد نفسك تطرح أسئلة مثل:

• متى سينتهي التحميل؟
• هل شارفت على الانتهاء؟
• هل هي معطلة؟

لكن أسئلتك تمر دون إجابة ، لذا فأنت تستسلم.

والأسوأ من ذلك ، أن الغزالين يتباطأون في الوقت.

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

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

ومرة أخرى ، يشجع الدوار المستخدمين على الاستسلام.

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

للمراجعة ، قرص تحميل:

1. لا يعطي أي علامة على التقدم.
2. فشل في الإجابة على أسئلة المستخدم.
3. يجعل الانتظار يبدو أطول مما هو عليه.
4. لا تجهز توقعات المستخدم.

خيارات تحميل الرسوم المتحركة الخاصة بك

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

مرة أخرى ، مؤشر جيد للتحميل أو التقدم:

1. يجعل إدراك المستخدم للوقت أسرع.
2. يعطي الإحساس بأن التطبيق يحرز تقدمًا.

النوعان الرئيسيان من مؤشرات التقدم المستخدمة في تصميم تجربة المستخدم هما مؤشرات التقدم غير المحددة ومؤشرات التقدم. العامل المحدد هو الوقت.

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

مؤشر التقدم غير المحدد مقابل المحدد من التصميم متعدد الأبعاد.

تكمن مشكلة هذه الإستراتيجية في أنك لا تعرف أبدًا كم من الوقت سيستغرق تحميل شيء ما بالضبط. يمكنك عمل تخمين متعلم ، لكن هذا يتعلق به. لهذا السبب سيتم احتساب العديد من مؤشرات العد التنازلي على النحو التالي: 10 دقائق متبقية و 9 دقائق متبقية و 8 دقائق متبقية و 7 دقائق متبقية و 10 دقائق متبقية و 8 دقائق متبقية وما إلى ذلك. ستكمل التحميل وتصل إلى 0 في النهاية ، ولكن ليس قبل أن تأخذ المستخدم في رحلة.

كيفية تحقيق أقصى استفادة من تحميل الرسوم المتحركة

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

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

عندما تفعل تصميمًا دوارًا أو رسومًا متحركة أخرى للتحميل:

1. كن مبدعًا وممتعًا قدر الإمكان
2. اجعلها على العلامة التجارية
3. قدم تقديرًا دقيقًا قدر الإمكان
4. اشرح سبب انتظار المستخدم
   - يرجى الانتظار حتى نحسب نتائجك.
   - يرجى الانتظار بينما نقوم بإعداد الأشياء لك.
   - نحن نجمع بياناتك.
   - تم فحص 21 من أصل 30 ملفًا.
5. لا تستخدم الرسوم المتحركة إذا كان سيتم تحميل الصفحة في أقل من ثانية واحدة.

مثال على تحميل صور متحركة من Hacker Noon.

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

هذا ما تستخدمه الشاشات الهيكلية.

تحميل تدريجي مع شاشات هيكلية

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

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

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

عينة لشاشة Facebook الهيكلية من Facebook Engineering.

تستخدم الشاشات الهيكلية ، التي تستخدمها الشركات ذات الأسماء الكبيرة مثل LinkedIn و Instagram و Facebook و Google ، تجربة شاشة تحميل أفضل من خلال تحويل الانتظار السلبي إلى انتظار نشط.

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

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

التحميل التدريجي لـ Instagram قيد العمل.

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

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

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

يرى المستخدمون أن الشاشات ذات حركات التحميل من اليسار إلى اليمين وحركات التحميل البطيئة والثابتة تكون أسرع.

مخاوف بشأن شاشة الهيكل العظمي

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

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

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

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

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

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

اختبرها: تبدأ تجربة المستخدم الجيدة مع المستخدم

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

مرة أخرى في اليوم ، كان تقديم أفضل تصميم للغزل هو أفضل ما يمكنك القيام به.

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

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

حتى ذلك الحين ، إذا كنت ترغب في معرفة المزيد حول كيفية تحسين تجربة المستخدم الخاصة بك ، فتواصل معنا. نحن نحب الحديث عن الاستراتيجية.