Hacking αντίληψη χρηστών για να κάνουν τους ιστοτόπους και τις εφαρμογές σας να αισθάνονται πιο γρήγορα

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

ΣΗΜΕΙΩΣΗ: Αυτό το άρθρο ήταν εμπνευσμένο από μια συνομιλία που είχα με την Ada Rose Cannon, Developer Advocate για το Samsung Internet Browser στο Internet, για τη σειρά Developers Google Chrome της σειράς "Designer vs. Developer" του YouTube. Μπορείτε επίσης να ακούσετε μια μακρύτερη έκδοση της συνομιλίας κατεβάζοντας ή να εγγραφείτε στο podcast μας στο Spotify, το iTunes ή τη Μουσική Google Play.

Αναρωτηθήκατε ποτέ γιατί γιατί όταν καλέσετε μια εταιρεία κοινής ωφέλειας και είστε σε αναμονή, παίζουν μουσική; Σκεφτείτε πώς θα νιώθετε αν δεν υπήρχε μουσική, μόνο νεκρή σιωπή. Το CNN διενήργησε έρευνα που έδειξε ότι το 70% των καλούντων που βρίσκονται σε αναμονή σε σιωπή κλείνουν μέσα σε 60 δευτερόλεπτα. Επειδή η σιωπή θα σε έκανε να σκεφτείς ότι η γραμμή είχε ίσως αποσυνδεθεί και η αναμονή θα αισθανόταν πια μακρύτερη. Η ιδέα είναι να γεμίσετε το χώρο και να καταλάβετε το χρόνο σας.

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

Η αντίληψη του χρόνου

Οι άνθρωποι αντιλαμβάνονται τον χρόνο διαφορετικά ανάλογα με το πόσο ανήσυχοι αισθάνονται και αν βρίσκονται σε κίνηση ή στο σπίτι. Στην έρευνα που διεξήγαμε στο Google διαπιστώσαμε ότι το 75% των χρηστών αισθάνθηκε ότι ένας ιστότοπος ήταν γρήγορος όταν ήταν στο σπίτι, αλλά αυτό μειώθηκε στο 52% όταν ήταν έξω και περίπου. Οι χρήστες που είναι νεότεροι αισθάνονται ότι οι τοποθεσίες φορτώνουν πιο αργά από ό, τι οι ηλικιωμένες ομάδες. Συνολικά, αντιλαμβανόμαστε μια καθυστέρηση στη φόρτωση η οποία είναι 80 χιλιοστά του δευτερολέπτου περισσότερο από την πραγματικότητα. Έτσι, αν μένετε περιμένοντας, τα πράγματα θα αισθάνονται ακόμα περισσότερο.

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

Φόρτωση

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

Σε αυτό το παράδειγμα βλέπετε μια εφημερίδα που μου κοροϊδεύτηκε με την ονομασία Tailpiece. Ο χρόνος φόρτωσης αισθάνεται περισσότερο επειδή ο χρήστης μένει σε αναμονή για περιεχόμενο. Επίσης, δείχνει την εφαρμογή σε κατάσταση "σκέψης" αντί για "εργασία".

Συμπλήρωση της οθόνης

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

Τρίκλισμα

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

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

Υλικοτεχνικά παραδείγματα κλιμακωτών κινούμενων εικόνων

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

Χρησιμοποιήστε το κλιμακωτό για να προσθέσετε γυαλιστερό σε σημαντικές μεταβάσεις.

Πλοήγηση

Μελέτες από το Facebook, το RedBooth, το Spotify και το Google Plus δείχνουν ότι η απόκρυψη των στοιχείων του μενού σημαίνει ότι οι χρήστες δεν τους έβαλαν ούτε τους χτύπησαν. Το Facebook διαπίστωσε επίσης ότι η μετάβαση προς τα κάτω πλοήγηση έκανε την εφαρμογή αντίληψη της ταχύτητας φαίνεται πιο γρήγορα. Επειδή από την όραση είναι έξω από το μυαλό και βλέποντας ένα στοιχείο γρήγορα κάνει την εμπειρία αισθάνονται πιο γρήγορα. Κάνετε έτσι την ορατή κλήση της δράσης σας ορατή ανά πάσα στιγμή. Μπορείτε να δείτε από το παρακάτω παράδειγμα με την εφαρμογή μας υλικό, το Owl, κάνει σπουδαία δουλειά και από τις δύο με προσαρμοσμένο σχεδιασμό, αλλά διατηρώντας παράλληλα τη φιλοσοφία της διατήρησης των κύριων στοιχείων πλοήγησης πάντα ορατά και σταθερά. Η πλοήγηση στο κάτω μέρος είναι επίσης πιο εργονομική σε κινητές συσκευές, καθώς ο χρήστης μπορεί να φτάσει στα κουμπιά χρησιμοποιώντας το ένα χέρι, βοηθά και πάλι να διατηρήσει την εμπειρία γρήγορη και φυσική.

Ανατροφοδότηση και διαβεβαίωση

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

Χρησιμοποιώντας αρκετές από αυτές τις τεχνικές σχεδιασμού, μπορείτε να βοηθήσετε τον χρήστη των εφαρμογών σας καθοδηγώντας τους στο σημείο που θέλουν να είναι και να κάνουν τις εφαρμογές σας να αισθάνονται γρηγορότερα με τη μείωση του άγχους του χρήστη. Για να μάθετε περισσότερα σχετικά με την αντίληψη των χρηστών και τον τρόπο με τον οποίο μπορείτε να τα σχεδιάσετε, φροντίστε να ελέγξετε το Ebook μας, Need for speed, για περισσότερες πληροφορίες.

Μπορείτε να μάθετε περισσότερα για το σχεδιασμό UX στο Web Fundamentals.