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

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

1. لا تجعل المستخدمين ينتظرون دون تقديم تعليقاتهم

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

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

2. تجنب مؤشرات التقدم ثابتة

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

3. استخدم مؤشرات التحميل المتحركة

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

لانهائي تحميل المغازل للعمليات بسرعة معقولة

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

1

إن الدوار من الخطوط الرمادية التي تشع من نقطة مركزية هو أسلوب قياسي.

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

2

تطبيق Apple Mail لنظام iOS

النسبة المئوية للرسوم المتحركة للعمليات طويلة الأمد

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

3

رصيد الصورة: Behance

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

4

تثبيت تحديث البرنامج في نظام التشغيل Mac OS X

4. التغيير والتبديل في تصور المستخدم للوقت

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

أشرطة التقدم

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

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

رصيد الصورة: Dribbble

شاشات الهيكل العظمي

وقت الانتظار هو الوقت المناسب لشاشات الهيكل العظمي (ويعرف أيضا باسم حاويات المعلومات المؤقتة). إن شاشة الهيكل العظمي هي في الأساس نسخة فارغة من صفحة يتم تحميل المعلومات فيها تدريجياً. يوفر بديلاً للمؤشرات المتحركة التقليدية. فبدلاً من إظهار أداة مجردة ، تخلق شاشات الهيكل العظمي توقّعات لما هو آتٍ ، وتجعل تركيز المستخدم على التقدم بدلاً من أوقات الانتظار.

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

6

عمليات الخلفية

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

تحميل الصور التقدمية

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

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

8

يستخدم الوسط blur لإنشاء تأثير تحميل الصور بشكل تدريجي

الهاء البصري

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

9

شاشة البداية المتحركة. رصيد الصورة: راموتيون (دريببل)

10

رصيد الصورة: فيميو