تقدّم هذه الصفحة إرشادات تصميم حول كيفية توفير تجربة رائعة للمستخدمين على الشبكات البطيئة وبلا اتصال بالإنترنت.
يمكن أن تتأثر جودة الاتصال بالشبكة بعدة عوامل، مثل:
- تغطية ضعيفة لمزوّد الشبكة
- أحوال الطقس القاسية
- انقطاع التيار الكهربائي
- الدخول إلى "مناطق غير متاحة" بشكل دائم، مثل المباني التي تحتوي على جدران تحظر الاتصال بالشبكة
- الدخول إلى "مناطق غير متاحة" مؤقتة، مثل أثناء السفر بالقطار والمرور عبر نفق
- اتصالات الإنترنت ذات المدة المحددة، مثل تلك المتاحة في المطارات أو الفنادق
- الممارسات الثقافية التي تتطلّب إمكانية الوصول إلى الإنترنت بشكل محدود أو عدم الوصول إليه في وقت معيّن أو في أيام معيّنة
هدفك بصفتك مطوّرًا هو تقديم تجربة جيدة تقلّل من تأثير التغييرات في الاتصال بالإنترنت.
تحديد المحتوى الذي تريد عرضه للمستخدمين عندما يكون الاتصال بالشبكة ضعيفًا
السؤال الأول الذي يجب طرحه هو شكل نجاح عملية الربط بالشبكة وشكل تعذّرها في تطبيقك. ويشير نجاح عملية الربط إلى تجربة تطبيقك العادية على الإنترنت. ويشمل تعذُّر الاتصال كيفية تصرف تطبيقك بلا إنترنت وعلى الشبكات التي تواجه تأخُّرًا في الأداء.
لتحديد كيفية التعامل مع حالات تعذُّر الاتصال، اطرح على نفسك أسئلة تجربة المستخدم المهمة التالية:
- ما هي المدة التي تنتظرها لتحديد نجاح عملية الربط أو فشلها؟
- ما الذي يمكنك فعله أثناء تحديد ما إذا كان الإجراء ناجحًا أم لا؟
- ما الذي يجب فعله في حال تعذّر الاتصال؟
- كيف تُعلم المستخدم بما يحدث؟
إبلاغ المستخدمين بحالتهم الحالية وتغيير الحالة
أطلِع المستخدم على حالة التطبيق والإجراءات التي يمكنه اتّخاذها عند حدوث عطل في الشبكة. على سبيل المثال، قد يعرض الإشعار ما يلي:
يبدو أنّ اتصالك بالشبكة ضعيف. لا داعي للقلق! سيتم إرسال الرسائل عند إعادة ربط الشبكة.
إبلاغ المستخدمين عندما يتحسّن الاتصال بالشبكة أو تتم استعادته
تعتمد الطريقة التي تُعلم بها المستخدم بأنّ الاتصال بالشبكة قد تحسّن على تطبيقك. يجب أن يتم تحديث التطبيقات التي تعطي الأولوية للمعلومات الحالية تلقائيًا وإعلام المستخدم بها في أقرب وقت ممكن، مثل تطبيقات تتبُّع الطقس أو الأسهم.
ننصحك بإعلام المستخدم بأنّه تم تعديل تطبيق الويب "في الخلفية" باستخدام إشارة مرئية، مثل عنصر إشعارات Material Design. ويشمل ذلك رصد كلّ من توفّر عامل خدمة وتعديل على المحتوى الذي يديره. يمكنك الاطّلاع على مثال على رمز هذه الوظيفة هنا.
ومن الأمثلة على ذلك حالة نظام Chrome الأساسي، التي تنشر ملاحظة للمستخدم عند تحديث التطبيق.
يمكن لبعض التطبيقات عرض آخر مرة تم فيها تحديثها في أي وقت. على سبيل المثال، يكون ذلك مفيداً بشكل خاص لتطبيقات تحويل العملات.
يمكن أن تعرض تطبيقات الأخبار إشعارًا بسيطًا للنقرة من أجل التحديث يُعلم المستخدم بالمحتوى الجديد. سيؤدي تحديث المقالة تلقائيًا إلى فقدان المستخدمين لموضعهم.
تعديل واجهة المستخدم لتعكس الحالة السياقية الحالية
يمكن أن يكون لكل عنصر واجهة مستخدم سياق وسلوك خاص به يتغيران استنادًا إلى ما إذا كان يحتاج إلى اتصال ناجح. على سبيل المثال، موقع إلكتروني للتجارة الإلكترونية يمكن تصفّحه بلا إنترنت، ولكنّه يوقف عرض الأسعار وزر "شراء" إلى أن تتم إعادة ربطه بالشبكة.
يمكن أن تتضمّن الأشكال الأخرى للحالات السياقية البيانات. على سبيل المثال، يستخدم تطبيق Robinhood المتعلّق بالشؤون المالية الألوان والرسومات لإعلام المستخدم عندما يكون سوق الأسهم مفتوحًا. تتحول الواجهة بأكملها إلى اللون الأبيض ثم إلى اللون الرمادي عند إغلاق السوق. عندما تزيد قيمة أحد الأسهم أو تنخفض، يتحول لون كل تطبيقات قياس أداء الأسهم الفردية إلى الأخضر أو الأحمر حسب حالته.
إطلاع المستخدم على معلومات بشأن نموذج وضع عدم الاتّصال بالإنترنت
اعتاد معظم المستخدمين على الاتصال بالشبكة في كل الأوقات. عليك إعلامهم بالتغییرات التي تطرأ على تطبيقك عندما لا يكون لديهم اتصال بالإنترنت. أخبِرهم بمكان حفظ البيانات الكبيرة وقدِّم لهم الإعدادات لتغيير السلوك التلقائي. استخدِم عناصر متعددة لتصميم واجهة المستخدم (مثل اللغة الإرشادية والرموز والإشعارات والألوان والصور) معًا لتوصيل هذه الأفكار، بدلاً من الاعتماد على خيار تصميم واحد، مثل رمز بمفرده، لسرد القصص بالكامل.
توفير تجربة بلا إنترنت تلقائيًا
إذا كان تطبيقك لا يتطلّب الكثير من البيانات، يمكنك تخزين هذه البيانات مؤقتًا تلقائيًا. يمكن أن يشعر المستخدمون بالإحباط بشكل متزايد إذا لم يكن بإمكانهم الوصول إلى بياناتهم إلا عند اتصالهم بالشبكة.
حاوِل جعل التجربة ثابتة قدر الإمكان. يُظهر الاتصال غير المستقر أنّ تطبيقك ليس جديرًا بالثقة. إنّ التطبيق الذي يخفّف من تأثير تعطُّل الشبكة يسعد المستخدمين.
يمكن للمواقع الإخبارية الاستفادة من ميزة تنزيل آخر الأخبار وحفظها تلقائيًا، وربما حفظ البيانات من خلال تنزيل النص فقط، حتى يتمكّن المستخدم من قراءة أخبار اليوم بدون اتصال بالإنترنت. يمكنك تكييف هذا السلوك مع سلوك المستخدم من خلال منح الأولوية لتنزيل فئات الأخبار التي يطّلع عليها المستخدم كثيرًا.
إبلاغ المستخدم عندما يصبح التطبيق جاهزًا للاستخدام بلا اتصال بالإنترنت
عند تحميل تطبيق الويب لأول مرة، يجب أن يشير إلى المستخدم ما إذا كان جاهزًا للاستخدام بلا إنترنت. يمكنك إجراء ذلك من خلال تطبيق مصغّر يقدّم ملاحظات موجزة حول عملية معيّنة من خلال رسالة في أسفل الشاشة، مثل على سبيل المثال، عند مزامنة قسم أو تنزيل ملف.
تأكَّد من أنّ اللغة التي تستخدمها تناسب جمهورك، واستخدِم العبارة نفسها في جميع الحالات التي تنطبق فيها. غالبًا ما يخطئ الجمهور غير التقني في فهم كلمة "غير متصل بالإنترنت"، لذا استخدِم بدلاً من ذلك لغة مستندة إلى الإجراءات يمكن لجمهورك التعرّف عليها.
إبراز ميزة "الحفظ لمشاهدة المحتوى بلا إنترنت" في الواجهة
إذا كان أحد التطبيقات يستخدم الكثير من البيانات، تأكَّد من توفُّر مفتاح تبديل أو تثبيت لإضافة عنصر لاستخدامه بلا اتصال بالإنترنت. عدم تنزيل الملفات تلقائيًا إلا إذا طلب مستخدم هذا الإجراء تحديدًا من خلال قائمة الإعدادات تأكَّد من أنّ واجهة مستخدم تثبيت التطبيق أو تنزيله واضحة للمستخدم وأنّها ليست مخفية بواسطة عناصر واجهة مستخدم أخرى.
ومن الأمثلة على ذلك مشغل الموسيقى الذي يتطلب ملفات كبيرة. يعلم المستخدِم بتكلفة البيانات المرتبطة، ولكن قد يريد أيضًا استخدام المشغّل بلا إنترنت. يتطلّب تنزيل الموسيقى لاستخدامها لاحقًا من المستخدم التخطيط مسبقًا، لذا ننصحك بإعلام المستخدم بذلك أثناء عملية الإعداد.
توضيح المحتوى المتاح بلا إنترنت
يجب أن تكون واضحًا بشأن الخيارات التي تقدّمها. قد تحتاج إلى عرض علامة تبويب أو إعداد "لمكتبة بلا إنترنت" أو فهرس المحتوى حتى تتمكّن المستخدم من الاطّلاع على ما تم تخزينه على جهازه وما يجب حفظه. تأكَّد من أنّ الإعدادات موجزة، ووضِّح مكان تخزين البيانات والمستخدمين الذين يمكنهم الوصول إليها.
عرض التكلفة الفعلية لأحد الإجراءات
يربط العديد من المستخدمين إمكانية الاستخدام بلا إنترنت بميزة "التنزيل". غالبًا ما يشارك المستخدمون في البلدان التي تتعذّر فيها عمليات الاتصال بالشبكة أو لا تتوفّر فيها بانتظام المحتوى مع مستخدمين آخرين، أو يحفظون المحتوى لاستخدامه بلا إنترنت عندما تتوفّر لديهم إمكانية الاتصال.
يتجنّب المستخدمون الذين يستخدمون خطط البيانات أحيانًا تنزيل الملفات الكبيرة خوفًا من التكلفة، لذلك قد تحتاج أيضًا إلى عرض تكلفة مرتبطة حتى يتمكّن المستخدمون من إجراء مقارنة فعالة لملف أو مهمة معيّنة. على سبيل المثال، يمكن لتطبيق الموسيقى المذكور أعلاه رصد ما إذا كان المستخدم مشتركًا في خطة بيانات وعرض حجم الملف حتى تتمكّن المستخدم من معرفة تكلفة الملف.
المساعدة في منع حدوث تجارب تعرّض للاختراق
غالبًا ما يُحسِّن المستخدمون تجربة بدون أن يدركوا ذلك. على سبيل المثال، قبل ظهور تطبيقات الويب لمشاركة الملفات المستندة إلى السحابة الإلكترونية، كان من الشائع أن يحفظ المستخدمون الملفات الكبيرة ويرفِقونها بالرسائل الإلكترونية حتى يتمكّنوا من مواصلة تعديل تلك الملفات من جهاز مختلف. يحلّ واجهة المستخدم الجيدة المشكلة التي يحاول المستخدمون حلّها بدون جذبهم إلى تجربة الاختراق. على سبيل المثال، يمكنك توفير طريقة لمشاركة الملفات الكبيرة على جميع الأجهزة، بدلاً من تسهيل إرفاق الملفات الكبيرة بالرسائل الإلكترونية.
إتاحة نقل التجارب من جهاز إلى آخر
عند إنشاء تطبيقات للشبكات غير المستقرة، حاوِل المزامنة فور تحسين الاتصال كي تتمكّن من نقل التجربة. على سبيل المثال، تخيل أنّ تطبيق سفر فقد الاتصال بالشبكة في منتصف عملية حجز. عند إعادة تأسيس الاتصال، تتم مزامنة التطبيق مع حساب المستخدم، ما يتيح له مواصلة حجزه على جهاز الكمبيوتر المكتبي ويمنحه تجربة سلسة.
أخبِر المستخدم بالحالة التي تواجهها بياناته. على سبيل المثال، يمكنك عرض ما إذا كان التطبيق قد تمت مزامنته. عرِّفهم على الممارسات الصحيحة كلما أمكن، ولكن تجنَّب إرسال عددٍ كبير جدًا من الرسائل إليهم.
إنشاء تجارب تصميم شاملة
عند تصميم تجربة المستخدم، احرص على أن تكون شاملة من خلال توفير أدوات تصميم مفيدة ولغة بسيطة ورموز رسومية عادية وصور مفيدة تساعد المستخدم على إكمال الإجراء أو المهمة بدون إعاقة سيره.
استخدِم لغة بسيطة وواضحة.
لا يقتصر تصميم تجربة المستخدم الجيد على تصميم الواجهة فقط. ويشمل ذلك المسار الذي يسلكه المستخدِم في تطبيقك وكل ما يصادفه على طول الطريق، بما في ذلك اللغة التي يستخدمها التطبيق لوصف هذه الرحلة. تجنَّب المصطلحات التقنية عند شرح مكونات واجهة المستخدم أو حالة التطبيق. غالبًا ما تكون كلمة "غير متصل بالإنترنت" غير واضحة بما يكفي لإعلام المستخدم بما يفعله تطبيقك.
استخدام أدوات تصميم متعددة لإنشاء تجارب مستخدمين سهلة الاستخدام
استخدِم اللغة واللون والعناصر المرئية لعرض حالة أو تغيير في الحالة. قد يكون من الصعب على المستخدمين ملاحظة استخدام اللون فقط لعرض الحالة، وقد لا يتمكن المستخدمون الذين يعانون من عجز بصري من الوصول إلى هذه الميزة على الإطلاق. بالإضافة إلى ذلك، لأنّ تصاميم الويب يميلون إلى استخدام اللون الرمادي للعناصر غير المفعّلة، فإنّ استخدام واجهة مستخدم باللون الرمادي للإشارة إلى أنّ تطبيقك بلا اتصال بالإنترنت قد يتسبب في حدوث التباس بشأن الإجراءات التي يمكن لتطبيقك تنفيذها عندما يكون بلا اتصال بالإنترنت، خاصةً إذا كنت تستخدم اللون فقط لعرض الحالة.
لتجنُّب سوء الفهم، عبِّر عن حالات التطبيق للمستخدم بطرق متعدّدة، مثل استخدام الألوان والتصنيفات ومكوّنات واجهة المستخدم.
استخدام رموز تعبّر عن المعنى
احرص على استخدام تصنيفات نصية ذات مغزى إلى جانب الرموز. يمكن أن تكون الرموز وحدها مربكة، خاصةً لأنّ مفهوم "غير متصل بالإنترنت" على الويب هو مفهوم نسبيًا جديد. تشمل الحالات الأخرى التي تؤدي إلى حدوث التباس في استخدام الرموز استخدام قرص مرن لتمثيل "حفظ"، وهو ما قد لا يكون له معنى للمستخدمين الأصغر سنًا الذين لم يروا قرصًا مرنًا من قبل، بالإضافة إلى رمز قائمة "المربّع المزدوج".
عند تقديم رمز للاستخدام بلا إنترنت، يجب الالتزام بالمعايير المرئية المتّبعة في المجال عند توفّرها، وتوفير تصنيف نصي ووصف. على سبيل المثال، يمكنك استخدام رمز تنزيل للإشارة إلى الحفظ بلا إنترنت، ورمز مزامنة للإجراء الذي يتضمن المزامنة. يجب توخّي الحذر عند استخدام الرموز للإشارة إلى حالة قد يتم بدلاً من ذلك تفسيرها على أنّها إجراء حفظ أو تنزيل.
للحصول على مزيد من الإلهام، يمكنك الاطّلاع على مجموعة رموز التصميم المتعدد الأبعاد.
استخدام تصاميم الهيكل الأساسي وآليات الملاحظات الأخرى
أثناء تحميل تطبيقك للمحتوى، أطلِع المستخدم على أنّه يتم تحميل المحتوى كي لا يعتقد أنّه يتعذّر تحميله. وإحدى الطرق لإجراء ذلك هي استخدام مخطّط الهيكل، وهو نسخة من تطبيقك تعرض أثناء تحميل المحتوى. ننصحك أيضًا باستخدام واجهة مستخدم لتحميل المحتوى مسبقًا تتضمّن تصنيفًا نصيًا يُعلم المستخدم بأنّه يتم تحميل التطبيق، أو صورة متحركة نابضة بلطف للإطار المخطّط لإضفاء الحيوية على التحميل. ويطمئن ذلك المستخدم إلى أنّه يتم إجراء بعض الإجراءات، ويساعد في منع عمليات إعادة الإرسال أو إعادة التحميل غير الضرورية.
يمكنك عرض حالة إجراء معيّن من خلال تقديم ملاحظات. على سبيل المثال، إذا كان أحد المستخدمين يُعدِّل مستندًا بلا اتصال بالإنترنت، ننصحك بتغيير تصميم الملاحظات والآراء لكي يكون مختلفًا بشكل واضح عن التصميم المعروض عندما يكون المستخدم متصلاً بالإنترنت، ولكن يظل يُظهر أنّه تم "حفظ" الملف وأنّه سيتم مزامنته عند اتصاله بالشبكة. يوضّح ذلك للمستخدم كيفية عمل تطبيقك ويطمئنه إلى أنّه تم تخزين مهمته أو تفاعله، ما قد يزيد من ثقته في استخدام تطبيقك.
عدم حظر المحتوى
في بعض التطبيقات، قد ينفّذ المستخدم إجراءً، مثل إنشاء مستند جديد. تحاول بعض التطبيقات الاتصال بخادم لمزامنة المستند الجديد، ولتمكين المستخدمين من معرفة ذلك، تعرض مربّع حوار مشروط للتحميل يغطّي الشاشة بالكامل. قد ينجح ذلك إذا كان المستخدم متصلاً بالشبكة بشكلٍ ثابت، ولكن إذا كانت الشبكة غير مستقرة، لن يتمكّن من التراجع عن هذا الإجراء، لذلك يحظر واجهة المستخدم عليه تنفيذ أي إجراء آخر.
تجنَّب طلبات الشبكة التي تحظر المحتوى. اسمح للمستخدم بمواصلة تصفُّح تطبيقك وإضافة المهام إلى "قائمة الانتظار" التي سيتم تنفيذها ومزامنتها عند تحسين سرعة الاتصال.
التصميم للمليار مستخدم القادم
في العديد من المناطق، تنتشر الأجهزة المنخفضة التكلفة، ويكون الاتصال بالإنترنت غير موثوق به، وتكون البيانات باهظة التكلفة بالنسبة إلى العديد من المستخدمين. كسب ثقة المستخدمين من خلال التعامل معهم بشفافية واستخدام البيانات بحكمة فكِّر في طرق لمساعدة المستخدمين الذين لديهم اتصال internet ضعيف، وبسِّط الواجهة للمساعدة في تسريع المهام. حاوِل دائمًا أن تطلب من المستخدِمين الموافقة قبل تنزيل محتوى يستهلك مساحة كبيرة.
تقديم خيارات ذات معدل نقل بيانات منخفض للمستخدمين الذين يستخدمون اتصالات بطيئة قدِّم مواد عرض أصغر حجمًا عند الاتصال بشبكة بطيئة، أو قدِّم خيارًا لاختيار مواد عرض بجودة عالية أو منخفضة.
الخاتمة
يُعدّ التعليم مفتاحًا لتجربة المستخدم بلا إنترنت لأنّ المستخدمين ليسوا على دراية به. لمساعدتهم في التعلم، حاوِل ربط المفاهيم المألوفة بهم، مثل شرح أنّ التنزيل لاستخدامه لاحقًا هو نفسه وضع البيانات بلا إنترنت.
عند تصميم التطبيقات لتعمل على شبكات غير مستقرة، يُرجى مراعاة الإرشادات التالية:
- يجب تصميم التطبيق لحالات نجاح الاتصال بالشبكة أو تعذُّره أو عدم استقراره.
- يمكن أن تكون البيانات باهظة الثمن، لذا يجب مراعاة المستخدم.
- بالنسبة إلى معظم المستخدمين حول العالم، تكون البيئة التقنية متاحة على الأجهزة الجوّالة بشكل أساسي تقريبًا.
- إنّ الأجهزة المنخفضة التكلفة شائعة، وهي تتميز بمساحة تخزين وذاكرة وقدرة معالجة محدودة، وشاشات صغيرة، وجودة أقل للشاشة التي تعمل باللمس. احرص على أن يكون الأداء جزءًا من عملية التصميم.
- اسمح للمستخدمين بتصفُّح تطبيقك عندما يكونون بلا اتصال بالإنترنت.
- إبلاغ المستخدمين بحالتهم الحالية والتغييرات في الحالات
- حاوِل توفير وضع عدم الاتّصال بالإنترنت تلقائيًا إذا كان تطبيقك لا يتطلّب الكثير من البيانات.
- إذا كان التطبيق يستهلك الكثير من البيانات، عرِّف المستخدمين على كيفية تنزيل المحتوى للاستخدام بدون اتصال بالإنترنت.
- إتاحة نقل التجارب بين الأجهزة
- استخدِم اللغة والرموز والصور وأسلوب الطباعة والألوان معًا للتعبير عن الأفكار للمستخدم.
- يمكنك تقديم المساعدة والتطمينات للمستخدم.