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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

تثقيف المستخدم حتى يفهم ما يعنيه نموذج عدم الاتصال بالإنترنت

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

الخاتمة

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

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

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