Reactive Web Design: Το μυστικό για την οικοδόμηση εφαρμογών ιστού που αισθάνονται καταπληκτικά

Τον τελευταίο χρόνο έχω παρατηρήσει δύο λεπτές τεχνικές που χρησιμοποιούνται από μερικούς προγραμματιστές που παίρνουν ένα web app από την αίσθηση αργή και janky σε εξαιρετικά αντιδραστικό και γυαλισμένο.

Πιστεύω ότι αυτές οι τεχνικές είναι αρκετά σημαντικές που χρειάζονται ένα όνομα: Reactive Web Design.

Συνοπτικά, ο αντιδραστικός σχεδιασμός ιστοσελίδων είναι ένα σύνολο τεχνικών που μπορούν να χρησιμοποιηθούν για την κατασκευή ιστότοπων που πάντα αισθάνονται γρήγορα και ανταποκρίνονται στην είσοδο του χρήστη ανεξάρτητα από την ταχύτητα ή την καθυστέρηση του δικτύου.

Ως προγραμματιστές ιστού και συγγραφείς πλαισίων, πιστεύω ότι βρίσκοντας τρόπους για να καταστήσουμε αυτά τα πρότυπα προεπιλεγμένα σε ό, τι χτίζουμε είναι κορυφαία προτεραιότητα για τη βελτίωση της UX και των αντιληπτών επιδόσεων στο διαδίκτυο.

Τεχνική 1: Στιγμιαία φορτία με οθόνες σκελετού

Όταν χρησιμοποιείται καλά, αυτή η τεχνική δεν παρατηρείται σχεδόν ποτέ, αλλά έχει τεράστιο αντίκτυπο στην αντιληπτή απόδοση μιας τοποθεσίας.

Είναι ενδιαφέρον ότι η τεχνική χρησιμοποιείται από σχεδόν όλες τις μητρικές εφαρμογές και τις κάνει να αισθάνονται πολύ αντιδραστικές ακόμη και σε τρομερά δίκτυα, αλλά σχεδόν ποτέ δεν χρησιμοποιούνται στο διαδίκτυο!

Ευκαιρία με αυτόν τον τρόπο βρίσκεται!

Με λίγα λόγια, οι οθόνες σκελετού εξασφαλίζουν ότι κάθε φορά που ο χρήστης πατάει οποιοδήποτε κουμπί ή σύνδεσμο, η σελίδα αντιδρά άμεσα μεταβαίνοντας το χρήστη σε αυτή τη νέα σελίδα και στη συνέχεια φορτώνοντας το περιεχόμενο σε αυτή τη σελίδα καθώς το περιεχόμενο είναι διαθέσιμο.

Το Facebook χρησιμοποιώντας μια οθόνη σκελετού για να βελτιώσει την αντιληπτή απόδοση όταν το ανοίξετε για πρώτη φορά

Οι οθόνες σκελετού αποτελούν βασική τεχνική επιδόσεων, καθώς κάνουν τις εφαρμογές να αισθάνονται πολύ πιο γρήγορα, μειώνοντας δραματικά τον αριθμό των στιγμών όπου ο χρήστης αφέθηκε να αναρωτιέται:

Τι συμβαίνει? Είναι ακόμα φόρτωση; Μήπως το χτύπησα σωστά;

Το Flipkart.com είναι ένα σπάνιο παράδειγμα μιας ιστοσελίδας που κάνει χρήση αυτής της προσέγγισης. Επομένως, η περιήγηση σε κατηγορίες ή η αγγίξη σε προϊόντα αισθάνεται αστραπιαία, ακόμη και όταν τα πραγματικά αποτελέσματα χρειάζονται λίγα δευτερόλεπτα για να φορτωθούν:

Ένα screencapture του flipkart.com ξεκίνησε από την αρχική οθόνη σε αυτόνομη λειτουργία στο Android

Όταν η τεχνική αυτή χρησιμοποιείται καλύτερα, το περιεχόμενο που είναι ήδη διαθέσιμο, όπως οι μικρογραφίες ή οι τίτλοι αντικειμένων, μπορεί να επαναχρησιμοποιηθεί για να βελτιώσει ακόμη περισσότερο την αντιληπτή απόδοση, καθιστώντας τα φορτία πραγματικά αληθινά.

Το app.jalantikus.com χρησιμοποιεί το μοτίβο Οθόνες σκελετού και επαναχρησιμοποιεί τους τίτλους και τις μικρογραφίες στις μεταβάσεις

Έλεγχος ιστότοπων με οθόνες σκελετού

Δοκιμάζοντας πόσο καλά οι ιστότοποι χρησιμοποιούν αυτή την τεχνική είναι εύκολο: Απλά χρησιμοποιήστε την εξομοίωση δικτύου Chrome για να κάνετε το δίκτυο όσο πιο αργό γίνεται και στη συνέχεια κάντε κλικ σε έναν ιστότοπο. Εάν το κάνει αυτό καλά, ο ιστότοπος θα εξακολουθεί να αισθάνεται ευχάριστος και ευαίσθητος στην εισήγησή σας.

Η πιο αργή ταχύτητα που υποστηρίζεται από την εξομοίωση δικτύου του Chrome

Τεχνική 2: "Σταθερά φορτία" μέσω προκαθορισμένων μεγεθών σε στοιχεία

Ξέρετε ότι το συναίσθημα όπου ένας δικτυακός τόπος είναι άλμα γύρω σας, ενώ προσπαθείτε να το χρησιμοποιήσετε; Απλώς προσπαθείτε να διαβάσετε ένα άρθρο και το κείμενο συνεχίζει να κινείται; Αυτό λέμε "ασταθές φορτίο" και πρέπει να το καίνουμε με φωτιά.

Το περιεχόμενο slate.com μεταβαίνει πολύ επιθετικά καθώς φορτώνεται η σελίδα. Όσο πιο αργό είναι το δίκτυο στο οποίο βρίσκεστε, τόσο περισσότερο μαζεύει.

Τα ασταθή φορτία καθιστούν τους ιστοτόπους δύσκολο να αλληλεπιδρούν και τους κάνει να αισθάνονται ... καλά ... Ασταθής!

Η περιήγηση σε έναν ασταθή ιστότοπο μου θυμίζει πάντα πως φαντάζομαι ότι θα αισθανόταν να περπατάει γύρω του κατά τη διάρκεια σεισμού

Τα ασταθή φορτία προκαλούνται από εικόνες και διαφημίσεις που είναι ενσωματωμένες σε μια σελίδα αλλά δεν περιλαμβάνουν πληροφορίες μεγέθους. Από προεπιλογή, το πρόγραμμα περιήγησης γνωρίζει μόνο το μέγεθος αυτών μόλις φορτωθεί, οπότε μόλις φορτωθεί η εικόνα, THUNK !, ολόκληρη η σελίδα σύρεται προς τα κάτω .

Για να αποφευχθεί αυτό, όλες οι ετικέτες σε μια σελίδα πρέπει να περιλαμβάνουν προληπτικά τις διαστάσεις της εικόνας που θα περιέχουν.

Σε πολλές περιπτώσεις οι εικόνες που χρησιμοποιούνται σε ορισμένες σελίδες έχουν πάντα το ίδιο μέγεθος και έτσι το μέγεθός τους μπορεί απλά να συμπεριληφθεί στο πρότυπο HTML, αλλά σε ορισμένες περιπτώσεις το μέγεθος των εικόνων είναι δυναμικό και συνεπώς το μέγεθός τους θα πρέπει να υπολογιστεί όταν η εικόνα μεταφορτωθεί στην HTML όταν δημιουργείται.


Το ίδιο ισχύει και για τις διαφημίσεις, συχνά ένοχοι όταν πρόκειται για ασταθή φορτία. Όπου είναι δυνατόν, δημιουργήστε ένα διαζύγιο που θα περιέχει μια διαφήμιση και στο templating set σας θα έχει μέγεθος με την καλύτερη εικασία σας για το πόσο μεγάλη θα είναι αυτή η διαφήμιση.

Σημειώστε ότι τα ασταθή φορτία είναι στα χειρότερα τους σε αργά δίκτυα καθώς μόλις εγκαταστάσατε την ανάγνωση του περιεχομένου όταν ξαφνικά πηδάει και ποτέ δεν μπορείτε να είστε σίγουροι ότι είστε ασφαλείς.

Βάζοντας όλα μαζί

Δημιούργησα μια μικρή επίδειξη στο reactive.surge.sh για να καταδείξω τη διαφορά μεταξύ συμβατικού και αντιδραστικού σχεδιασμού ιστού.

Συμβατική φόρτωση αντικειμένων

Σημειώστε πόσο αισθητή αισθάνεται και πόσο απογοητευτικό άλμα είναι το περιεχόμενο. Είναι ενδιαφέρον ότι βρίσκω αυτές τις τάξεις μεγέθους πιο ενοχλητικές σε κινητές συσκευές όταν αγγίζω την οθόνη και δεν βλέπω να αντιδρά.

Φόρτωση αντικειμένου με αντιδραστικό σχεδιασμό ιστού

Με ενεργό σχεδιασμό, το φορτίο αισθάνεται στιγμιαία και ο ιστότοπος παραμένει αντιδραστικός όταν αγγίξετε πολλές φορές το εικονίδιο της πλάτης και τον τίτλο του άρθρου

Τυλίγοντας

Όσο πιο αργή είναι το δίκτυο, τόσο χειρότερη είναι η εμπειρία του χρήστη όταν μεταβιβάζονται σελίδες στο δίκτυο και οι σελίδες μετακινούνται για παρατεταμένες περιόδους.

Με το Reactive Web Design μπορούμε να κάνουμε την εμπειρία μας να αισθάνεται ευχάριστη και ευαίσθητη ("Responsive Design" ως όνομα που έχει ήδη ληφθεί, d'oh!) Ακόμα και σε αργά και οδυνηρά δίκτυα.

Θα ήθελα πολύ να μάθω για τα δεδομένα από την κοινότητα σχετικά με την επίδραση των αντιληπτών επιδόσεων σε KPIs όπως η αφοσίωση και τα έσοδα!

Επιπλέον, θα ήθελα να ενθαρρύνω τους συγγραφείς πλαισίων και βιβλιοθηκών να εξετάσουν πώς να κατασκευάσουν οθόνες σκελετών και σταθερά φορτία την προεπιλογή, γνωστή και ως πηγή επιτυχίας.

Αν έχετε σκέψεις σχετικά με αυτό, παρακαλώ με τιτίβισμα @ toowencm, και αν σας άρεσε αυτό παρακαλώ δώστε το ♥!

P.S. να είστε βέβαιος να ελέγξετε έξω το demo site reactive.surge.sh σε μια κινητή συσκευή για την πλήρη δόξα του!