إرشادات تصميم تجربة المستخدم في وضع عدم الاتصال

دليل لتصميم تجارب الويب للشبكات البطيئة وبلا إنترنت

تقدم هذه المقالة إرشادات تصميم حول كيفية إنشاء تجربة رائعة على كلٍ من الشبكات البطيئة وخارجها.

يمكن أن تتأثر جودة الاتصال بالشبكة بعدد من العوامل مثل:

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

يتلخص هدفك في تقديم تجربة جيدة تقلل من تأثير التغييرات في الاتصال.

تحديد ما يظهر للمستخدمين عند سوء اتصال الشبكة

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

عند التفكير في نجاح أو فشل اتصال الشبكة، تحتاج إلى أن تسأل نفسك هذه الأسئلة المهمة لتجربة المستخدم:

  • ما هي المدة التي تنتظرها لتحديد نجاح أو إخفاق الاتصال؟
  • ماذا يمكنك أن تفعل أثناء تحديد النجاح أو الفشل؟
  • ما الذي يجب عليك فعله في حال تعذُّر إتمام العملية؟
  • كيف تُعلم المستخدم بما سبق؟

إبلاغ المستخدمين بحالتهم الحالية وتغيير الحالة

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

يبدو أن اتصال الشبكة لديك سيئ. لا داعي للقلق! سيتم إرسال الرسائل عند استعادة الشبكة.

هو تطبيق مراسلة الرموز التعبيرية Emojoy الذي يُعلِم المستخدم عند حدوث تغيير في الحالة.
إبلاغ المستخدم بوضوح عند حدوث تغيير في الحالة في أقرب وقت ممكن.
تطبيق I/O 2016 الذي يُعلِم المستخدم عند حدوث تغيير في الحالة
استخدم تطبيق Google I/O "إشعارات" لإعلام المستخدمين عندما يكونون غير متصلين بالإنترنت.

إبلاغ المستخدمين عند تحسين الاتصال بالشبكة أو استعادته

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

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

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

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

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

تطبيق Material Money قديم.
معدّلات التخزين المؤقت في Material Money...
تم تعديل أموال Material.
...وتُعلِم المستخدم عند تحديث التطبيق.

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

مثال على تطبيق إخباري، Tailcase في حالته الطبيعية
مثال على تطبيق الأخبار، Tailsheet عندما يكون جاهزًا للتحديث

تعديل واجهة المستخدم لتعكس الحالة السياقية الحالية

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

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

إطلاع المستخدم على ما هو المقصود بالنموذج بلا اتصال بالإنترنت

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

توفير تجربة بلا إنترنت تلقائيًا

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

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

يخبر Tailsheet المستخدم بأنه غير متصل بالإنترنت من خلال العديد من أدوات التصميم المصغّرة.
يتضمن Tailsheet مؤشرًا مرئيًا يوضح الأقسام الجاهزة للاستخدام بلا اتصال بالإنترنت.

إبلاغ المستخدم عندما يكون التطبيق جاهزًا للاستهلاك بلا إنترنت

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

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

تطبيق وحدات الإدخال والإخراج غير متصل بالإنترنت.
أرسل تطبيق Google I/O لعام 2016 إشعارًا إلى المستخدم عندما يصبح التطبيق جاهزًا للاستخدام بلا اتصال بالإنترنت...
موقع حالة Chrome الإلكتروني غير متصل بالإنترنت.
...وكذلك موقع "حالة النظام الأساسي Chrome" الذي يتضمن معلومات حول مساحة التخزين المشغولة.

جعل "الحفظ بلا اتصال بالإنترنت" جزءًا واضحًا من واجهة التطبيقات التي تستهلك قدرًا كبيرًا من البيانات

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

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

توضيح ما هو متاح بلا اتصال بالإنترنت

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

عرض التكلفة الفعلية لأحد الإجراءات

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

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

المساعدة في منع تجارب الاختراق

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

إتاحة نقل التجارب من جهاز إلى آخر

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

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

إنشاء تجارب تصميم شاملة

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

استخدام لغة بسيطة وموجزة

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

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

استخدام أجهزة تصميم متعددة لإنشاء تجارب مستخدم يسهل الوصول إليها

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

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

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

استخدام الرموز التي تنقل المعنى

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

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

أمثلة مختلفة على الرموز التي يتم نقلها خارج الإنترنت

يمكن أن يعني وضع عدم الاتصال بالإنترنت عددًا من الأمور حسب السياق، مثل التنزيل والتصدير والتثبيت وما إلى ذلك. لمزيد من الأفكار، يمكنك الاطّلاع على مجموعة رموز Material Design.

استخدام تخطيطات الهيكل العظمي مع آليات الملاحظات الأخرى

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

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

عدم حظر المحتوى

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

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

التصميم للمليار القادم

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

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

الخلاصة

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

عند التصميم لاتصالات شبكة غير مستقرة، تذكر هذه الإرشادات:

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