كيفية قيادة UX مع AJAX
مع تجاوز استخدام الإنترنت للهاتف المحمول لتصفح الإنترنت المستند إلى سطح المكتب ، فمن الأهمية بمكان أكثر من أي وقت مضى أن يتم بناء مواقع ويب مع التركيز على التحميل السريع للصفحات وردود الفعل السائلة لإدخال المستخدم.
إحدى التقنيات الهامة التي نستخدمها لتحقيق ذلك هي AJAX ، وهي اختصار لـ "جافا سكريبت غير متزامن و XML." AJAX تسمح لك بتحديث أجزاء من صفحة ويب واحدة دون الحاجة إلى التخلص المستمر من DOM (بنية HTML للصفحة) - القضاء على الحاجة إلى كامل تحميل الصفحة وإنشاء استجابة أسرع لإدخال المستخدم. بناء مواقع على إطار AJAX 100 ٪ هي تقنية تكشف عن إمكانات جديدة لما يمكن تحقيقه في تطوير الويب.
لقد بدأنا في بناء المواقع بنسبة 100٪ AJAX منذ ما يقرب من عشر سنوات ، ومنذ ذلك الحين ، تعلمنا الكثير عن كيفية توظيفها بشكل فعال حتى يحسن تجربة المستخدم. سنستكشف في هذه المقالة عددًا من المزايا المحددة ، وبعض القيود ، لهذه التقنية.
استجابة سريعة للمستخدم
إن أحد العناصر الأساسية في تجربة المستخدم الفعالة هو الاستجابة السريعة لإدخال المستخدم ، ولكن مع موقع ويب قياسي ، يتم ترك المستخدمين في انتظار حدوث التفاعلات حيث يتم وضع الطلبات عبر HTTP (أو HTTPS) إلى الخادم ، مما يؤدي إلى تحميل صفحة كاملة لكل تغيير. تحدث هذه العملية مع كل نقرة ماوس لطلب صفحة جديدة أو صورة أكبر أو مزيد من المعلومات ؛ يتم طرح DOM بالكامل وإعادة تحميله في المستعرض الخاص بك - غالباً ما تكون عملية مهدرة عند تحميل الصفحات على نفس الموقع ، حيث أنها تحتوي على محتوى مشابه.
يتم تشغيل بحث كاياك بواسطة AJAX ، ويقدم اقتراحات بمجرد بدء الكتابة.
تتمثل إحدى الميزات الرئيسية لـ AJAX في التدفق المستمر للمعلومات ، دون عائق من خلال تحميل وتفريغ DOM ، مما يؤدي إلى تحسين التحكم في التجربة واهتمام الزائر. باستخدام AJAX ، يمكن لتطبيقات الويب إرسال البيانات من وإلى الخادم بشكل غير متزامن دون التداخل مع عرض الصفحة الحالية.
يتمثل الاختلاف الرئيسي بين تنفيذ AJAX القياسي وموقع AJAX المدمج بنسبة 100٪ في أنه يتم تحميل DOM في الزيارة الثانية للموقع ، عادة في الصفحة الرئيسية ؛ كل شيء آخر يحدث هو مجرد التلاعب في هذا الحمل الأساسي.
أحد الأمثلة البارزة على الانسيابية التي توفرها AJAX هي خرائط Google. أثناء قيامك بالتكبير والتصغير والتنقل عبر مدينة في طائر أو منظر الشارع ، يتم تسليم المعلومات بسلاسة وبشكل مستمر للاستخدام الفوري. عند الانتقال بين الصفحات أو تحديث المحتوى في تطبيق ويب ، تسمح AJAX باستجابة مدخلات المستخدم بطريقة ملائمة للسياق ، مثل إخراج النموذج الذي تم تحديثه في الوقت الفعلي دون إعادة تحميل الصفحة أو نقل الرسوم المتحركة السياقية بين الصفحات أو عند تحميل التفاصيل رأي.
عند تصميم الصفحات التي تحتوي على كمية كبيرة من المحتوى ، نستخدم نمط التمرير اللامحدود الخاص بـ AJAX ، والذي لا يحفظ عرض النطاق الترددي للمتصفح فقط عن طريق عرض المعلومات ذات الصلة على الفور بـ UX ، ولكنه يقلل أيضًا من احتكاك المستخدم. على شركتنا الخاصة صفحة الأخبار على سبيل المثال ، يتم تحميل المزيد من المقالات أثناء التمرير لأسفل ، والقضاء على استخدام الصفحات وبدلاً من ذلك تحميل المزيد من المعلومات على الشاشة كما يتطلبها القارئ. تسمح هذه العملية الخالية من الاحتكاك في تحميل وتفريغ المزيد من المحتوى حسب الطلب لزوارنا بالحصول على الأخبار التي يريدونها دون عرض حواجز على نواياهم.
UX السلس
يؤدي الحصول على التحكم في كيفية تحميل موقع ويب المحتوى إلى إنشاء فرصة فريدة لتصميم انتقالات الصفحة وتحميل صور متحركة وإشارات مرئية تساعد المستخدم على فهم التسلسل الهرمي للموقع. هذا هو أيضا فرصة للإبداع مع العلامة التجارية للشركة.
لا يوفر موقع ويب بإطار AJAX بنسبة 100٪ (نظرًا لعدم وجود تحميل كامل للصفحة) تعليقات حول عملية تحميل التقدم في نافذة المتصفح ، مما يؤدي إلى ارتباك محتمل في حالة ترك زائر في انتظار فترة ممتدة من الوقت دون استجابة. هذا هو المكان الذي تظهر فيه مؤشرات حالة التحميل المخصصة ، مما يوفر بعض المؤشرات على أن التقدم يتم إحرازه أثناء وقت الانتظار.
مركز إستس بارك الطبي في ولاية كولورادو يستخدم محمل AJAX الشخصي للحفاظ على التلوين والعلامة التجارية لمنظمتهم وكذلك نقل وظيفة رمز التحميل.
على ال شركة Zillow يتم تحديث موقع الويب ، وتفاصيل القوائم باستمرار دون استخدام زر تحديث المستعرض ، وإعطاء المستأجرين المنزل الوصول إلى أحدث المعلومات في جميع الأوقات.
الإضافات الصغيرة مثل هذه هي مؤثرة في خلق تجربة لا تنسى لزوارك وجعلت ممكنة من خلال استخدام أجاكس.
التحكم في مسار عنوان URL باستخدام سجل HTML5
بدون أحمال فردية للصفحات ، يتم تعريف الموقع من خلال وجود عنوان URL واحد ، مما يتسبب في حدوث مشكلات في مواقع AJAX ضعيفة الإنشاء حيث يحاول المستخدمون وضع إشارة مرجعية أو التنقل باستخدام الأزرار الأمامية والخلفية للمستعرض. بالإضافة إلى ذلك ، نظرًا لأن زاحف محرك بحث Google لم يقرأ من قبل لغة جافا سكريبت ، كانت هناك مخاوف بشأن مدى إمكانية استرداد مواقع الويب التي تعمل بنظام AJAX في نتائج البحث المجانية من Google.
يتم حل كل من هذه الشروط عن طريق السيطرة على مسار URL باستخدام HTML5 history API .
تعتبر كل صفحة من صفحات موقع AJAX 100٪ وطرق عرضها البديلة هي طلباتهم الخاصة ؛ أثناء التنقل عبر موقع AJAX - على الرغم من أنه تحميل صفحة واحدة تقنيًا - فإن عنوان URL في تحديثات المتصفح يوفر عنوانًا فريدًا يمثل حالة العرض الحالية. بالإضافة إلى ذلك ، يمكننا الاستماع إلى أحداث تغيير التاريخ من أجل دعم زر الرجوع بالمتصفح وإرجاع حالة العرض السابقة. تتم فهرسة كل من عناوين URL الفريدة هذه تمامًا بواسطة Google ، مما يعني أن هذا الأسلوب متوافق تمامًا ومفيدًا لكبار المسئولين الاقتصاديين.
الأمازون A9 تعتمد خدمة البحث على AJAX لاسترداد كميات كبيرة من البيانات دون فقدان سجل بحث المستخدم.
فى الختام
كما ترى ، تعتبر AJAX جزءًا لا يتجزأ من تطوير تطوير الويب الحديث وتحل محل عددًا من التقنيات الأدنى التي توفر تجربة مستخدم سيئة. بدون AJAX ، يجب إعادة تحميل كل محتوى الصفحة بالكامل تقريبًا لكل تفاعل مستخدم واحد ، حتى لو لم تتغير بعض المعلومات فقط. هذه السرعة المعطلة ، وضعت حمولة إضافية على الخادم واستخدامها عرض النطاق الترددي المفرط.
من خلال البناء على إطار AJAX بنسبة 100٪ ، نحن قادرون على إنشاء مواقع مخصصة لاحتياجات العملاء ، وتوفير التنقلات التي يمكن الوصول إليها والتي يمكن وضع إشارة مرجعية لها من قبل زوار الموقع ، والتي تعمل على مستوى أعلى من ذلك بكثير.