ما الذي يجعل تطبيق ويب تقدّميًا جيدًا؟

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

السبب

إنّ السرعة عامل مهم لحثّ المستخدمين على استخدام تطبيقك. في الواقع، مع زيادة أوقات تحميل الصفحة من ثانية واحدة إلى عشر ثوانٍ، تزداد احتمالية ارتداد المستخدم بنسبة ‎123%. ولا يتوقف الأداء عند حدث load أيضًا. يجب ألا يتساءل المستخدمون أبدًا ما إذا تم تسجيل تفاعلهم، على سبيل المثال، عند النقر على زر ما. يجب أن يكون التمرير والصور المتحركة سلسَين. يؤثر الأداء في تجربتك بالكامل، سواء من حيث سلوك تطبيقك أو انطباع المستخدمين عنه.

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

الطريقة

اتّبِع الدليل الخاص بأوقات التحميل السريعة لمحاولة معرفة كيفية بدء تطبيقك المتوافق مع الأجهزة الجوّالة بسرعة والحفاظ على هذه السرعة.

يمكن للمستخدمين استخدام أي متصفّح يختارونه للوصول إلى تطبيق الويب قبل تثبيته.

السبب

تطبيقات الويب التقدّمية هي تطبيقات ويب في المقام الأول، ما يعني أنّها يجب أن تعمل على جميع المتصفحات.

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

على سبيل المثال، إرسال النماذج. إنّ أبسط طريقة لتنفيذ ذلك هي استخدام نموذج HTML يُرسل طلب POST. بعد إنشاء ذلك، يمكنك تحسين التجربة باستخدام JavaScript لإجراء عملية التحقّق من النموذج وإرساله من خلال AJAX، ما يؤدي إلى تحسين تجربته للمستخدمين الذين يمكنهم استخدام هذه الميزة.

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

الطريقة

يُعدّ كتاب تصميم الويب المرن الذي كتبه جيريمي كيث مصدرًا ممتازًا يصف كيفية التفكير في تصميم الويب باستخدام هذه المنهجية التدريجية المتوافقة مع جميع المتصفّحات.

موادّ إضافية للقراءة

• تُعدّ مقالة Understanding Progressive Enhancement في A List Apart مقدّمة جيدة للموضوع.
• مقالة "مجلة Smashing" بعنوان تحسين الأداء التدريجي: ما هو؟ وكيف يمكن استخدامه؟ تقدّم مقدمة عملية وروابط إلى مواضيع أكثر تقدمًا.
• تتناول مقالة تنفيذ ميزة رصد العناصر في MDN كيفية رصد عنصر من خلال إجراء طلب بحث عنه مباشرةً.

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

السبب

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

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

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

الطريقة

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

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

السبب

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

الطريقة

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

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

السبب

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

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

الطريقة

اتّبِع دليل التثبيت للتعرّف على كيفية جعل تطبيق الويب التقدّمي قابلاً للتثبيت.

في الحالات التي لا يكون فيها الاتصال بالإنترنت مطلوبًا بشكل صارم، يعمل تطبيقك بالطريقة نفسها بلا إنترنت كما يعمل بالإنترنت.

السبب

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

الطريقة

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

تستوفي جميع تفاعلات المستخدم متطلبات WCAG 2.0 لإتاحة الاستخدام.

السبب

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

الطريقة

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

يمكن اكتشاف تطبيقك المتوافق مع الأجهزة الجوّالة فقط من خلال البحث.

السبب

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

الطريقة

ابدأ بالتأكّد من أنّ كل عنوان URL يتضمّن عنوانًا وصفيًا فريدًا و وصفًا تعريفيًا. بعد ذلك، يمكنك استخدام Google Search Console وعمليات تدقيق تحسين محركات البحث في Lighthouse لتصحيح الأخطاء وحلّ مشاكل إمكانية العثور على تطبيقك المتوافق مع الأجهزة الجوّالة. يمكنك أيضًا استخدام أدوات مالكي المواقع الإلكترونية على Bing أو Yandex، والتفكير في تضمين البيانات المنظَّمة باستخدام مخطّطات من Schema.org في تطبيقك المتوافق مع الأجهزة الجوّالة.

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

السبب

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

الطريقة

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

عند طلب الإذن لاستخدام واجهات برمجة تطبيقات فعّالة، قدِّم سياقًا واسْأل فقط عند الحاجة إلى واجهة برمجة التطبيقات.

السبب

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

الطريقة

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

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

السبب

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

الطريقة

هناك عدد من عمليات التحقّق ذات الأولوية العالية لضمان سلامة codebase:

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