4 τεχνάσματα για να κάνετε τους χρόνους φόρτωσης να αισθάνονται πιο γρήγορα
Ανεξάρτητα από το πόσο καλά σχεδιασμένη είναι η διεπαφή χρήστη σας, σε κάποιο σημείο ή άλλο, οι χρήστες που θα την χρησιμοποιούν θα πρέπει να περιμένουν να φορτωθούν.
Ο χρόνος φόρτωσης μπορεί να βλάψει τη συνολική εμπειρία. Κάνοντας τους χρήστες να περιμένουν πολύ χρόνο για να φορτώσουν την εφαρμογή σας μπορεί να κάνει τους χρήστες ανυπόμονοι. Αν οι χρήστες έχουν αυτό το συναίσθημα, θα εγκαταλείψουν τον ιστότοπό σας και θα πάνε κάπου αλλού. Ευτυχώς, υπάρχουν μερικά πράγματα που μπορείτε να κάνετε για να επιταχύνετε την αίσθηση του χρόνου του χρήστη και να κάνετε τους να αισθάνονται ότι το περιεχόμενό σας φορτώνει γρηγορότερα από ό, τι κάνει.
1. Ποτέ μην κάνετε τους χρήστες να περιμένουν χωρίς να τους δώσουν ανατροφοδότηση
Εάν η σύνδεση του χρήστη είναι αργή, μπορεί να χρειαστεί λίγος χρόνος για έναν ιστότοπο για την εμφάνιση περιεχομένου στην οθόνη. Ο χρόνος αναμονής ενός χρήστη ξεκινά τη στιγμή που ξεκινούν μια ενέργεια και η χειρότερη περίπτωση είναι όταν δεν έχουν κανέναν δείκτη ότι ο ιστότοπος το έχει λάβει.
Όταν ο ιστότοπός σας δεν ενημερώνει τους χρήστες ότι χρειάζεται κάποιο χρόνο για να ολοκληρώσει μια ενέργεια, οι χρήστες συχνά πιστεύουν ότι δεν έλαβαν το αίτημα και προσπαθούν ξανά. Πολλές πρόσθετες βρύσες οφείλονται στην έλλειψη ανατροφοδότησης. Για να κάνουμε τους ανθρώπους ευτυχισμένους, πρέπει να δώσουμε μια ένδειξη ότι συμβαίνει κάτι , προσφέρουμε οπτική ανατροφοδότηση.
2. Αποφύγετε τους δείκτες στατικής εξέλιξης
Οι δείκτες στατικής εξέλιξης είναι αυτοί που έχουν μια εικόνα ή ένα κείμενο χωρίς κίνηση, όπως "Φόρτωση ..." ή "Περιμένετε ..." για να υποδείξει ότι έχει ληφθεί το αίτημα. Ενώ κάθε ανατροφοδότηση είναι καλύτερη από κανένα, οι στατικοί δείκτες είναι κακοί UX. Οι χρήστες δεν έχουν καμία ένδειξη ότι το περιεχόμενο είναι φορτωμένο, έτσι δεν είναι σίγουροι αν η διαδικασία είναι πραγματικά κολλημένη.
3. Χρησιμοποιήστε κινούμενους δείκτες φόρτωσης
Οι ψυχολογικές μελέτες του χρόνου αναμονής δείχνουν ότι η εστίαση του χρήστη αρχίζει να αλλάζει μετά από ένα δευτερόλεπτο της αναμονής χωρίς καμία ανάδραση. Για να μειώσετε την αβεβαιότητα ενός χρήστη, χρησιμοποιήστε έναν δείκτη προόδου για οποιαδήποτε ενέργεια που διαρκεί περισσότερο από αυτό. (Σημείωση: η χρήση κινούμενης εικόνας δεν συνιστάται για οτιδήποτε χρειάζεται λιγότερο από ένα δευτερόλεπτο για να φορτωθεί, επειδή οι χρήστες μπορεί να αισθάνονται άγχος για το τι έλαμπε απλά και απενεργοποιώντας την οθόνη).
Άνετοι κλώστες φόρτωσης για λογικά γρήγορες λειτουργίες
Η απλούστερη μορφή κινούμενων δεικτών είναι ένας περιστρεφόμενος φορτωτής. Αυτός ο τύπος οπτικής ανατροφοδότησης δηλώνει μόνο το γεγονός ότι ο χρήστης πρέπει να περιμένει, αλλά δεν λέει πόσο καιρό θα πρέπει να περιμένουν. Κατά γενικό κανόνα, θα πρέπει να χρησιμοποιείτε αυτόν τον τύπο δείκτη προόδου για γρήγορες ενέργειες (2-10 δευτερόλεπτα).
Ένας κλώστης γκρίζων γραμμών που ακτινοβολεί από ένα κεντρικό σημείο είναι μια τυπική προσέγγιση.
Οι περιστρεφόμενοι φορτωτές χρησιμοποιούνται συχνά μαζί με χειρονομίες έλξης-ανανέωσης. Λειτουργεί ως ενδιάμεσος μεταξύ δύο κρατών του UI και βοηθά τους χρήστες να καταλάβουν τι συμβαίνει όταν αλλάζει η οθόνη.
Εφαρμογή Apple Mail για iOS
Ποσοστό εκτέλεσης κινούμενων εικόνων για μακροχρόνιες λειτουργίες
Η φόρτωση των κλωστών δεν είναι ο σωστός τρόπος για να δείξετε τη μακροχρόνια φόρτωση. Είναι πολύ πιο ανεκτό να περιμένουμε κάτι αν γνωρίζουμε πότε θα συμβεί. Αυτός είναι ο λόγος για τις μακροχρόνιες λειτουργίες που θα πρέπει να δώσετε στους χρήστες σας μια σαφή ένδειξη του πόσο καιρό πρέπει να περιμένουν. Ως γενικός κανόνας, θα πρέπει να χρησιμοποιήσετε ένα κινούμενο ποσοστό επί το πλείστον για μεγαλύτερες διαδικασίες που διαρκούν 10 ή περισσότερα δευτερόλεπτα.
Image Credit: Behance
Εναλλακτικά, μπορείτε να δώσετε μια γενική εκτίμηση χρόνου για τη λειτουργία. Μην προσπαθήσετε να είστε ακριβείς, ένα απλό, "Αυτό μπορεί να διαρκέσει ένα λεπτό" μπορεί να είναι αρκετό για να ενημερώσει τον χρήστη και να τον ενθαρρύνει να το περιμένει.
Εγκατάσταση ενημέρωσης λογισμικού στο Mac OS X
4. Προσαρμογή της αντίληψης του χρήστη για το χρόνο
Πόσο γρήγορα το φορτίο του περιεχομένου σας είναι στο μυαλό του χρήστη. Όταν προσπαθείτε να δημιουργήσετε μια ταχύτερη εμπειρία χρήστη, μπορείτε να συντομεύσετε τον αντιληπτό χρόνο και όχι τον πραγματικό χρόνο. Για να γίνει αυτό, μπορείτε να συμπληρώσετε τους χρόνους αναμονής χρησιμοποιώντας περιεχόμενο, κινούμενα σχέδια ή ενέργειες που μπορεί να εκτελέσει ο χρήστης.
Γραμμές προόδου
Μια γραμμή προόδου κάνει τους χρήστες να αναπτύξουν μια προσδοκία για το πόσο γρήγορα γίνεται η επεξεργασία της ενέργειας. Ο τρόπος μετακίνησης της γραμμής προόδου επηρεάζει τον τρόπο με τον οποίο αντιλαμβάνονται τον χρόνο φόρτωσης. Για να κάνετε μια γραμμή προόδου να αισθάνεται ταχύτερη στους χρήστες μπορείτε να ακολουθήσετε απλές τεχνικές:
- Η γραμμή προόδου δεν πρέπει ποτέ να σταματήσει, διαφορετικά οι χρήστες θα σκέφτονται ότι ο ιστότοπος πάγωσε. Η χειρότερη δυνατή περίπτωση είναι όταν η γραμμή προόδου πλησιάσει το 99% και σταματά ξαφνικά. Οι περισσότεροι χρήστες θα απογοητευτούν από αυτή τη συμπεριφορά.
- Μπορείτε να συγκαλύψετε μικρές καθυστερήσεις στη γραμμή προόδου σας, μετακινώντας το στιγμιαία και σταθερά.
- Μετακινήστε τη γραμμή προόδου αργά στην αρχή και επιταχύνστε την προς το τέλος για να δώσετε στους χρήστες μια γρήγορη αίσθηση χρόνου ολοκλήρωσης.
Image Credit: Αποσπάστε
Οθόνες σκελετού
Ο χρόνος αναμονής είναι ο κατάλληλος χρόνος για οθόνες σκελετού (γνωστούς και ως προσωρινά δοχεία πληροφοριών). Μια οθόνη σκελετού είναι ουσιαστικά μια κενή έκδοση μιας σελίδας στην οποία φορτώνονται σταδιακά οι πληροφορίες. Παρέχει μια εναλλακτική λύση στους παραδοσιακούς κινούμενους δείκτες. Αντί να δείχνει ένα αφηρημένο widget, οι οθόνες σκελετού δημιουργούν την πρόβλεψη του τι πρόκειται να έρθει και κάνει τον χρήστη να επικεντρώνεται στην πρόοδο αντί να περιμένει φορές.
Οι εικόνες του σκελετού φορτώνονται γρήγορα, καθώς είναι μια μικρή εικόνα που αποτελείται συχνά από απλά σχήματα. Αυτές οι τεχνικές μπορούν να ληφθούν ακόμη περισσότερο στις εφαρμογές για κινητά επειδή το πρότυπο σκελετού μπορεί να αποθηκευτεί τοπικά μαζί με τα δεδομένα της εφαρμογής. Η εφαρμογή Facebook για iOS δείχνει στους χρήστες γκρι μπλοκ και γραμμές που αντιπροσωπεύουν εικόνες και κείμενο καθώς φορτώνεται η εφαρμογή. Μόλις τελειώσει η φόρτωση, οι εικόνες και το κείμενο εμφανίζονται στη θέση των προσωρινών δοχείων. Αυτό δεν είναι γρηγορότερο από το να έχετε μια οθόνη φόρτωσης με έναν κλώστη, αλλά στο μυαλό του χρήστη, αισθάνεται σαν να είναι.
Λειτουργίες φόντου
Ένα άλλο τέχνασμα ταχύτητας που μπορείτε να χρησιμοποιήσετε είναι οι λειτουργίες φόντου. Οι ενέργειες που είναι συσκευασμένες σε λειτουργίες υποβάθρου έχουν δύο οφέλη - είναι αόρατες για τον χρήστη και συμβαίνουν προτού το ζητήσει ο χρήστης. Δώστε στους χρήστες άλλα πράγματα που πρέπει να επικεντρωθούν σε μια διαδικασία που συμβαίνει στο παρασκήνιο. Ένα καλό παράδειγμα είναι η μεταφόρτωση εικόνων στο Instagram. Μόλις ο χρήστης επιλέξει μια φωτογραφία για κοινή χρήση, αρχίζει να ανεβάζει. Η εφαρμογή προσκαλεί τους χρήστες να προσθέσουν τίτλο και ετικέτες ενώ η εικόνα μεταφορτώνεται στο παρασκήνιο. Μέχρι τη στιγμή που οι χρήστες θα είναι έτοιμοι να πατήσουν ένα κουμπί "Κοινή χρήση", η μεταφόρτωση θα ολοκληρωθεί και θα είναι δυνατή η άμεση κοινή χρήση της εικόνας.
Προοδευτική φόρτωση εικόνας
Καθώς οι σύγχρονες εφαρμογές και ιστότοποι φορτώνουν όλο και περισσότερες εικόνες, είναι καλό να σκεφτόμαστε τη διαδικασία φόρτωσής τους, καθώς επηρεάζει την απόδοση και την εμπειρία των χρηστών. Χρησιμοποιώντας ένα αποτέλεσμα θολώματος, μπορείτε να δημιουργήσετε ένα προοδευτικό εφέ φόρτωσης εικόνας.
Ένα καλό παράδειγμα είναι το Medium (Μεσαίο), το οποίο σκιάζει το κάλυμμα μετά την εικόνα καθώς και τις εικόνες μέσα στο μήνυμα μετά την πλήρη φόρτωση της εικόνας. Καταρχήν, φορτώνει μια μικρή θολή εικόνα (μικρογραφία) και στη συνέχεια κάνει μια μετάβαση στη μεγάλη εικόνα. Οι μικρογραφίες είναι πολύ μικρές (λίγα kilobytes), που σε συνδυασμό με το θολωτό αποτέλεσμα επιτρέπουν την καλύτερη εμφάνιση αντικειμένων από ένα συμπαγές χρώμα χωρίς να θυσιάζεται το ωφέλιμο φορτίο.
Το Μεσαίο χρησιμοποιεί θόλωση για να δημιουργήσει ένα προοδευτικό αποτέλεσμα φόρτωσης εικόνας
Οπτική αποστροφή
Θα πρέπει πάντα να προσπαθείτε να κάνετε την αναμονή πιο ευχάριστη αν δεν μπορείτε να συντομεύσετε τη γραμμή. Για να εξασφαλίσετε ότι οι άνθρωποι δεν βαρεθούν ενώ περιμένουν κάτι να συμβεί, δώστε τους κάποια περισπασμό. Τα ωραία κινούμενα σχέδια μπορούν να αποσπούν την προσοχή των επισκεπτών σας και να τους αγνοούν τους μεγάλους χρόνους φόρτωσης.
Κινούμενη οθόνη εκκίνησης. Image Credit: Ramotion (Dribbble)
Image Credit: Vimeo