كيف لا المسمار UX في تطبيق صفحة واحدة

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

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

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

ملاحظة: تم نشر هذه المقالة في الأصل هنا على مدونة مطوري Vue.js في 2017/12/18

بنية التطبيق أحادية الصفحة

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

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

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

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

الموجهات

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

تتضمن أجهزة التوجيه عادةً وظائف من أجل:

  • التعامل مع إجراءات التنقل من داخل الصفحة
  • تطابق أجزاء التطبيق بعناوين URL
  • إدارة شريط العنوان
  • إدارة سجل المتصفح
  • إدارة سلوك شريط التمرير

تحسين UX

تهدف بنية التطبيق أحادي الصفحة إلى تحسين UX ، وهي تفعل ذلك بالطرق التالية:

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

المزالق

ومن المفارقات أن التطبيقات ذات الصفحة الواحدة يمكن أن تضر UX إذا لم يتم تجنب بعض المآزق:

  1. SPAs كسر وظيفة الملاحة الأصلية. مثلا موضع التمرير والسجل والزر الخلفي وما إلى ذلك. بمجرد قيام جهاز التوجيه باختراق التنقل في الصفحة ، قد لا تعمل هذه الميزات كما هو متوقع. يجب على SPA استعادة الوظيفة باستخدام JavaScript وواجهات برمجة تطبيقات الويب مثل history.pushState. ستساعدك معظم مكتبات الموجهات الجيدة على القيام بذلك ، ولكن سيظل هناك بعض التنفيذ اليدوي المطلوب.
  2. تمتلك SPAs حجم تنزيل أولي كبير. نظرًا لأنه يجب تنزيل جهاز التوجيه وعناصر الصفحة متعددة الأغراض أولاً حتى يعمل التطبيق ، تتطلب SPAs تنزيلًا مُسبقًا قبل تشغيلها. يمكن أن تساعد أدوات البناء مثل Webpack عن طريق تحميل أي كود غير ضروري قبل التجسيد الأول.
  3. ستحتاج SPAs حالات تحميل مخصصة ورسائل الأخطاء. تعطي المتصفحات إشارات مرئية بأن الصفحة يتم تحميلها ، ويمكن لخادم الويب عرض صفحة 404. من ناحية أخرى ، تكون نتيجة طلب AJAX مخفية عن المستخدم حسب التصميم. يجب أن تجد SPAs طريقة لإعلام المستخدمين بما إذا كان التطبيق قد استجاب بنجاح لإجراءاتهم أم لا.
  4. مع تطبيق ساذج لهيكل SPA ، قد لا يتم تضمين محتوى الصفحة في تنزيل الصفحة الأولية ، مما يعني أنه قد يتعين على المستخدم انتظار تشغيل JavaScript وإكمال مكالمات AJAX. التقديم أو العرض المسبق من جانب الخادم هو حل لهذا ولكن غالبًا ما يتطلب إعدادًا معقدًا.

خاتمة

الغرض من بنية SPA هو توفير تجربة مستخدم فائقة ، ولكن ما لم يتم الاهتمام المناسب ، فقد يكون لها تأثير معاكس!

فيما يلي الأشياء الأساسية التي يجب وضعها في الاعتبار إذا اخترت صورة AR SPA:

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

قبل كل شيء ، تأكد من تخصيص ميزانية للعمل الإضافي اللازم لإنشاء واختبار وصيانة منتجع صحي.

خذ دورة مقدمة في Vue.js مجانًا! تعرّف على Vue ، ونوع التطبيقات التي يمكنك إنشاؤها باستخدامها ، وكيفية مقارنتها بـ React & Angular ، والمزيد في مقدمة الفيديو التي تستغرق 30 دقيقة. تسجيل مجانا!