Πώς να Drive UX με AJAX
Με τη χρήση του κινητού διαδικτύου να αποκρύπτεται η περιήγηση στο διαδίκτυο βασισμένη σε επιτραπέζιους υπολογιστές, είναι σημαντικότερο από ποτέ να κατασκευαστούν ιστοσελίδες με έμφαση στα γρήγορα φορτία σελίδας και τις αντιδράσεις ρευστού στις εισόδους των χρηστών.
Μια σημαντική τεχνολογία που χρησιμοποιούμε για να επιτευχθεί αυτό είναι η AJAX, σύντομη για το "Asynchronous JavaScript & XML". Το AJAX σας επιτρέπει να ενημερώσετε τμήματα μιας μόνο ιστοσελίδας χωρίς να ρίχνετε συνεχώς το DOM (αρχιτεκτονική HTML της σελίδας) φορτώνει τη σελίδα και δημιουργεί ταχύτερη απόκριση στην είσοδο του χρήστη. Η δημιουργία ιστοσελίδων σε ένα πλαίσιο AJAX 100% είναι μια τεχνική που αποκαλύπτει νέες δυνατότητες ως προς το τι είναι εφικτό στην ανάπτυξη ιστού.
Ξεκινήσαμε να κατασκευάζουμε ιστότοπους ως 100% AJAX πριν από περίπου δέκα χρόνια και από τότε μάθαμε πολλά για το πώς να το χρησιμοποιήσουμε αποτελεσματικά, ώστε να βελτιωθεί η εμπειρία των χρηστών. Σε αυτό το άρθρο θα διερευνήσουμε ορισμένα από τα συγκεκριμένα πλεονεκτήματα και ορισμένους περιορισμούς αυτής της τεχνικής.
Γρήγορη απόκριση χρήστη
Ένα βασικό στοιχείο ενός αποτελεσματικού UX είναι η ταχεία απόκριση στην είσοδο του χρήστη, αλλά με έναν πρότυπο δικτυακό τόπο, οι χρήστες αφήνονται να περιμένουν να πραγματοποιηθούν αλληλεπιδράσεις καθώς οι αιτήσεις τοποθετούνται μέσω HTTP (ή HTTPS) στο διακομιστή, για κάθε αλλαγή. Αυτή η διαδικασία γίνεται με κάθε κλικ του ποντικιού για να ζητήσετε μια νέα σελίδα, μια μεγαλύτερη εικόνα ή περισσότερες πληροφορίες. το DOM εξαντλείται πλήρως και φορτώνεται ξανά στον περιηγητή σας - αυτή είναι συχνά μια σπάταλη διαδικασία κατά τη φόρτωση σελίδων στον ίδιο ιστότοπο, καθώς συνήθως έχουν παρόμοιο περιεχόμενο.
Η αναζήτηση του Kayak τροφοδοτείται από την AJAX, παρέχοντας προτάσεις μόλις αρχίσετε να πληκτρολογείτε.
Ένα σημαντικό πλεονέκτημα του AJAX είναι η σταθερή ροή πληροφοριών του, ανεμπόδιστη από τη φόρτωση και εκφόρτωση του DOM, με αποτέλεσμα τον καλύτερο έλεγχο της εμπειρίας και της προσοχής του επισκέπτη. Με το AJAX, οι εφαρμογές ιστού μπορούν να στέλνουν δεδομένα προς και από τον διακομιστή ασύγχρονα χωρίς να παρεμβαίνουν στην εμφάνιση της υπάρχουσας σελίδας.
Η βασική διαφορά μεταξύ μιας τυπικής εφαρμογής AJAX και μιας ιστοσελίδας AJAX 100% είναι ότι στο τελευταίο το αρχικό DOM φορτώνεται στην αρχική επίσκεψη στο site, συνήθως στην αρχική σελίδα. όλα όσα συμβαίνουν είναι απλά ένας χειρισμός αυτού του πρωτεύοντος φορτίου.
Ένα σημαντικό παράδειγμα της ρευστότητας που προσφέρει το AJAX είναι οι Χάρτες Google. Καθώς κάνετε μεγέθυνση, έξοδο, περιηγηθείτε σε μια πόλη που βλέπετε στο ποντίκι ή στην οδό, οι πληροφορίες παρέχονται απρόσκοπτα και συνεχώς για άμεση χρήση. Κατά τη μετάβαση μεταξύ σελίδων ή την ενημέρωση του περιεχομένου σε μια εφαρμογή ιστού, το AJAX επιτρέπει την απόκριση των εισερχόμενων χρηστών με ένα συμφραζόμενα κατάλληλο τρόπο, όπως η ενημέρωση της φόρμας σε πραγματικό χρόνο χωρίς επαναφόρτωση της σελίδας, οι μεταφράσεις με βάση τα συμφραζόμενα μεταξύ σελίδων ή κατά τη φόρτωση μιας λεπτομέρειας θέα.
Όταν σχεδιάζουμε σελίδες με μεγάλο περιεχόμενο, χρησιμοποιούμε το απεριόριστο μοτίβο κύλισης του AJAX, το οποίο όχι μόνο εξοικονομεί το εύρος ζώνης του προγράμματος περιήγησης προβάλλοντας μόνο τις πληροφορίες που σχετίζονται άμεσα με το UX, αλλά και μειώνει τις τριβές των χρηστών. Στη δική μας εταιρεία σελίδα ειδήσεων για παράδειγμα, φορτώνετε περισσότερα αντικείμενα κατά την κύλιση προς τα κάτω, εξαλείφοντας τη χρήση σελίδων και φορτώντας περισσότερες πληροφορίες στην οθόνη όπως το απαιτεί ο αναγνώστης. Αυτή η διαδικασία φόρτωσης και εκφόρτωσης περισσότερου περιεχομένου κατά παραγγελία επιτρέπει στους επισκέπτες μας να λαμβάνουν ακριβώς όσα νέα θέλουν χωρίς να παρουσιάζουν εμπόδια στην πρόθεσή τους.
Ομοιογενής UX
Το να αποκτάτε τον έλεγχο του τρόπου με τον οποίο ένας ιστότοπος φορτώνει περιεχόμενο δημιουργεί μια μοναδική ευκαιρία για να σχεδιάσετε μεταβάσεις σελίδων, φορτώνοντας κινούμενα σχέδια και οπτικές ενδείξεις που βοηθούν τον χρήστη να καταλάβει την ιεραρχία του ιστότοπου. Αυτή είναι επίσης μια ευκαιρία για δημιουργικότητα με την επωνυμία της εταιρείας.
Ένας ιστότοπος με πλαίσιο AJAX 100% (επειδή δεν υπάρχει φορτίο πλήρους σελίδας) δεν παρέχει ανατροφοδότηση σχετικά με τη φόρτωσή του στο παράθυρο του προγράμματος περιήγησης, οδηγώντας σε πιθανή σύγχυση εάν ο επισκέπτης αναμείνει για μεγάλο χρονικό διάστημα χωρίς απάντηση. Αυτά είναι τα σημεία όπου εμφανίζονται οι προσαρμοσμένοι δείκτες κατάστασης φόρτωσης, παρέχοντας κάποιες ενδείξεις ότι πραγματοποιείται πρόοδος κατά τη διάρκεια του χρόνου αναμονής.
Estes Park Medical Center στο Κολοράντο χρησιμοποιεί ένα εξατομικευμένο φορτωτή AJAX για να διατηρεί το χρωματισμό και το εμπορικό σήμα της οργάνωσής τους καθώς και να παρέχει τη λειτουργικότητα ενός συμβόλου φόρτωσης.
Στο Zillow ιστοσελίδα, οι λεπτομέρειες των λιστών ενημερώνονται συνεχώς χωρίς τη χρήση του κουμπιού ανανέωσης του προγράμματος περιήγησης, δίνοντας στους ενοίκους του σπιτιού πρόσβαση σε ενημερωμένες πληροφορίες ανά πάσα στιγμή.
Μικρές προσθήκες όπως αυτές είναι εύπορες για τη δημιουργία μιας αξέχαστης εμπειρίας για τους επισκέπτες σας και καθίστανται δυνατές με τη χρήση του AJAX.
Έλεγχος της διαδρομής URL χρησιμοποιώντας το ιστορικό HTML5
Χωρίς τη φόρτωση μεμονωμένων σελίδων, ένας ιστότοπος ορίζεται με μια ενιαία διεύθυνση URL, προκαλώντας προβλήματα σε ανεπαρκώς κατασκευασμένους ιστότοπους AJAX καθώς οι χρήστες προσπαθούν να κάνουν σελιδοδείκτη ή περιηγηθούν χρησιμοποιώντας τα κουμπιά προώθησης και οπισθοδρομίας του προγράμματος περιήγησης. Επιπλέον, επειδή ο ανιχνευτής μηχανών αναζήτησης της Google ιστορικά δεν αναγνώριζε το JavaScript, υπήρξαν ανησυχίες σχετικά με το πόσο καλά θα μπορούσαν να ανακτηθούν οι ιστότοποι με λειτουργία AJAX στα οργανικά αποτελέσματα αναζήτησης της Google.
Και οι δύο αυτές συνθήκες επιλύονται αποκτώντας τον έλεγχο της διαδρομής URL χρησιμοποιώντας το API ιστορικού HTML5 .
Κάθε σελίδα ενός ιστότοπου AJAX 100% και οι εναλλακτικές απόψεις του θεωρούνται δική τους αίτηση. καθώς περιηγείστε σε έναν ιστότοπο AJAX - παρόλο που είναι τεχνικά ένα φορτίο μιας σελίδας - η διεύθυνση URL στο πρόγραμμα περιήγησης ενημερώνεται για να παρέχει μια μοναδική διεύθυνση που αντιπροσωπεύει την τρέχουσα κατάσταση προβολής. Επιπλέον, μπορούμε να ακούσουμε γεγονότα αλλαγής ιστορίας για να υποστηρίξουμε το κουμπί επιστροφής του προγράμματος περιήγησης και να επιστρέψουμε την προηγούμενη κατάσταση προβολής. Κάθε μία από αυτές τις μοναδικές διευθύνσεις URL είναι πλήρως ευρετηριασμένη από την Google, πράγμα που σημαίνει ότι αυτή η προσέγγιση είναι πλήρως συμβατή και χρήσιμη για SEO.
Αμαζονίου Α9 η υπηρεσία αναζήτησης εξαρτάται από το AJAX για την ανάκτηση σημαντικών όγκων δεδομένων χωρίς να χάσει το ιστορικό αναζήτησης του χρήστη.
Συμπερασματικά
Όπως μπορείτε να δείτε, το AJAX αποτελεί αναπόσπαστο μέρος της εξέλιξης της σύγχρονης ανάπτυξης ιστοσελίδων και αντικαθιστά μια σειρά κατώτερων τεχνολογιών που παρέχουν μια κακή εμπειρία χρήστη. Χωρίς το AJAX, όλο το περιεχόμενο της σελίδας έπρεπε να επαναφορτωθεί πλήρως για σχεδόν κάθε αλληλεπίδραση του χρήστη, ακόμα και αν άλλαξαν κάποιες από τις πληροφορίες. Αυτό εμπόδισε την ταχύτητα, έβαλε πρόσθετο φορτίο στο διακομιστή και χρησιμοποίησε υπερβολικό εύρος ζώνης.
Βασιζόμενοι σε ένα πλαίσιο AJAX 100%, μπορούμε να δημιουργήσουμε ιστότοπους προσαρμοσμένους στις ανάγκες των πελατών, να παρέχουμε προσβάσιμη πλοήγηση που μπορεί να επισημανθεί από επισκέπτες του ιστότοπου και να λειτουργεί σε πολύ υψηλότερο επίπεδο.
Προτεινόμενη εικόνα, εικόνα ροής δεδομένων μέσω Shutterstock.