Μικροσυνδέσεις: Σχεδιασμός με Λεπτομέρειες
"Τα καλύτερα προϊόντα κάνουν δύο πράγματα καλά: χαρακτηριστικά και λεπτομέρειες. Χαρακτηριστικά είναι αυτά που αντλούν τους ανθρώπους στο προϊόν σας. λεπτομέρειες είναι αυτά που τα κρατούν εκεί "λέει ο Dan Saffer. Η σημασία των λεπτομερειών δεν μπορεί να υπερκεραστεί. Οι λεπτομέρειες κάνουν τους χρήστες να αγαπούν ή να μισούν μια εφαρμογή ή έναν ιστότοπο. Οι μικροσυστοιχίες είναι αυτές οι λεπτομέρειες. Θα μπορούσαν εύκολα να παραβλεφθούν στο παγκόσμιο σχέδιο σχεδιασμού, αλλά στην πραγματικότητα κατέχουν όλη την εμπειρία μαζί.
Σε αυτό το άρθρο, θα σας εξηγήσω τι είναι μια μικροδιαίσθηση, γιατί είναι σημαντικές και παρέχουν κάποια σπουδαία παραδείγματα.
Τι είναι το Microinteraction
Οι μικροεπεξεργασίες είναι λεπτές στιγμές επικεντρωμένες γύρω από την ολοκλήρωση μιας μόνο εργασίας. Σχεδόν όλες οι εφαρμογές γύρω μας είναι γεμάτες με μικροσυστοιχίες.
Το πιο γνωστό παράδειγμα μικροσυστοιχίας υπήρξε πολύ πριν οι εφευρέτες είχαν επινοηθεί ποτέ. Ο διακόπτης ενεργοποίησης / απενεργοποίησης είναι συχνά ο πρώτος άνθρωπος που συναντά το μικροσυσχέτιση με ένα προϊόν.
Ορισμένα άλλα παραδείγματα ειδικών μικρο-παρεμβολών περιλαμβάνουν:
- Η ειδοποίηση κραδασμών μαζί με το εικονίδιο αθόρυβης λειτουργίας στην οθόνη όταν αλλάζετε ένα iPhone για σίγαση.
- Το μοτίβο UI pull-to-refresh. Συνδέοντας την επιθυμία του χρήστη να βρει περισσότερο περιεχόμενο με τη δράση της ανανέωσης, η εμπειρία γίνεται πιο απρόσκοπτη.
Image Credit: Ramotion
- Το κουμπί "όπως" στα κοινωνικά δίκτυα που επισημαίνει τις αλλαγές χρησιμοποιώντας διαδραστικές κινούμενες εικόνες. Η ανατροφοδότηση αυτή ενημερώνει τους χρήστες ότι βρίσκονται στη λίστα όσων τους άρεσαν.
Image Credit: Αποσπάστε
Γιατί λειτουργούν
Εν ολίγοις, οι μικροεπεξεργασίες βελτιώνουν το UX καθιστώντας τη διεπαφή χρήστη λιγότερο μηχανή και πιο ανθρώπινη. Πολλές φορές σκεφτόμαστε την εμφάνιση και την αίσθηση και πώς σχετίζεται με το σχεδιασμό. Όταν σκεφτόμαστε μικροσυστοιχίες, δημιουργούν σχεδόν ισορροπία στον τρόπο με τον οποίο οι χρήστες αισθάνονται το προϊόν, την υπηρεσία ή το εμπορικό σήμα. Οι μικροεπεξεργασίες βελτιώνουν τον ανθρώπινο σχεδιασμό με:
- Παροχή άμεσης ανατροφοδότησης - Η οπτική ανατροφοδότηση προσελκύει τη φυσική επιθυμία του χρήστη για αναγνώριση. Ο χρήστης γνωρίζει αμέσως ότι η δράση τους έγινε δεκτή και θέλουν να χαρούν με μια οπτική ανταμοιβή.
- Ενεργώντας ως διευκολυντές αλληλεπίδρασης - Οι μικροεπεξεργασίες έχουν τη δύναμη να ενθαρρύνουν τους χρήστες να αλληλεπιδρούν πραγματικά. Μπορούν να καθοδηγήσουν τους χρήστες στον τρόπο εργασίας με την εφαρμογή.
- Προσφέροντας απόλαυση - Οι μικροεπεξεργασίες είναι η ιδανική ευκαιρία για λίγη επιπλέον απόλαυση στο σχεδιασμό χωρίς να μειώνεται η κύρια εμπειρία.
Πρόσθετα οφέλη
Επειδή οι μικροσυστοιχίες είναι σύντομες, πρέπει να σχεδιάζονται για επαναλαμβανόμενη χρήση. Καλά σχεδιασμένες μικροδιαβρώσεις είναι σε θέση να δημιουργήσουν:
Συνήθης βρόχος
Οι μικροσυστοιχίες είναι τα βασικά συστατικά των βρόχων συνήθειας. Οι συνήθειες διαμορφώνονται όταν οι άνθρωποι εκτελούν τις ίδιες ενέργειες επανειλημμένα. Ο τυπικός βρόχος συνήθειας αποτελείται από τρία στοιχεία:
- Cue - Trigger που κινεί τη δράση
- Ρουτίνα - Απαντώντας στη συμβουλή, εκτελείτε μια ενέργεια
- Ανταμοιβή - Ένα όφελος από την ολοκλήρωση της ρουτίνας, λόγος για την ολοκλήρωση της ενέργειας
Όσο ισχυρότερη είναι η ανταμοιβή, τόσο πιο ισχυρή γίνεται η συνήθεια.
Η ειδοποίηση του Facebook σχετικά με το νέο αίτημα φίλων είναι καλό παράδειγμα βρόχου συνήθειας: το κόκκινο σήμα και το λευκασμένο εικονίδιο ( cue ) υποδεικνύουν ότι υπάρχει ένα νέο αίτημα, το οποίο κάνει το χρήστη να κάνει κλικ στο εικονίδιο ( ρουτίνα ) για να δει πληροφορίες σχετικά με το άτομο ( ανταμοιβή ). Μετά από λίγο, οι χρήστες κάνουν αυτόματα κλικ στο εικονίδιο όταν βλέπουν το κόκκινο σήμα.
Στιγμές υπογραφής
Αν γίνει καλά, οι μικροεπεξεργασίες μπορούν να είναι στιγμές υπογραφής που αυξάνουν την αφοσίωση των πελατών. Οι στιγμές υπογραφής είναι μικροσυστοιχίες που έχουν ανυψωθεί για να είναι μέρος της μάρκας. Σκεφτείτε το κουμπί Like του Facebook. Γίνεται φυσικό μέρος της διασύνδεσης Facebook. Εάν το Facebook αφαιρέσει ξαφνικά αυτό το χαρακτηριστικό, οι χρήστες θα το παρατηρήσουν και θα σκεφτούν ότι η εφαρμογή έχει σπάσει.
Εντοπισμός ευκαιριών
Μέρος της ομορφιάς των μικροεπεξεργασιών είναι ότι μπορούν να εισαχθούν σε ποικίλα μέρη, γύρω από οποιαδήποτε πιθανή δράση. Οι μικροεπεξεργασίες είναι καλές για:
Επεξήγηση αλλαγών
Οι μικροεπεξεργασίες μπορούν να κατευθύνουν την προσοχή του χρήστη . Σε πολλές περιπτώσεις χρησιμοποιούνται κινούμενα σχέδια για την προσέλκυση της προσοχής του χρήστη σε σημαντικές λεπτομέρειες (δηλ. Ειδοποιήσεις).
Πιστωτικές κάρτες: Αποσπάστε
Ελαχιστοποίηση της προσπάθειας του χρήστη
Η αυτόματη συμπλήρωση είναι ένα εξαιρετικό παράδειγμα μικροδιεγέρσεως. Η πληκτρολόγηση έχει υψηλό κόστος αλληλεπίδρασης. είναι επιρρεπής στο σφάλμα και χρονοβόρα, ακόμη και με ένα πλήρες πληκτρολόγιο (και ακόμη περισσότερο σε μια οθόνη αφής). Η αυτόματη συμπλήρωση βοηθά τον χρήστη να παράσχει τη σωστή απάντηση πιο γρήγορα και χωρίς τυπογραφικά σφάλματα. Καθώς πληκτρολογείτε κάθε επιστολή, το σύστημα θα κάνει τις καλύτερες εικασίες του σχετικά με τις λέξεις που προσπαθείτε να βρείτε.
Πιστωτικές κάρτες: fancy.surge.sh
Παροχή ανατροφοδότησης για να δείξει τι έχει επιτευχθεί
Οι μικροεπεξεργασίες μπορούν να ενισχύσουν τις ενέργειες που εκτελεί ένας χρήστης. Ακολουθώντας την αρχή " δείτε, μην πείτε" , μπορείτε να χρησιμοποιήσετε τα κινούμενα σχόλια για να δείξετε τι έχει επιτευχθεί. Σε Παράδειγμα του Stripe , όταν ο χρήστης κάνει κλικ στην επιλογή "Πληρωμή", εμφανίζεται μια περιστροφή πριν εμφανιστεί η κατάσταση επιτυχίας. Το animation Checkmark κάνει τον χρήστη να αισθάνεται σαν να έκανε την πληρωμή εύκολα και οι χρήστες εκτιμούν αυτές τις σημαντικές λεπτομέρειες.
Παρέχετε πληροφορίες κατάστασης
Η πρώτη αρχή ευρεσιτεχνίας ευχρηστίας του Jakob Nielsen δηλώνει: το σύστημα πρέπει πάντα να ενημερώνει τους χρήστες για το τι συμβαίνει. Δείκτης δακτυλογράφησης στη συζήτηση είναι ένα εξαιρετικό παράδειγμα μικροσυστοιχιών που παρέχει πληροφορίες κατάστασης. Εμφανίζεται στην οθόνη του φίλου σας ενώ συνθέτετε ένα μήνυμα στην συνομιλία.
Πιστωτικές κάρτες: Αποσπάστε
Επαλήθευση δεδομένων χρήστη
Ένα από τα πιο σημαντικά, και συχνά παραβλέπεται τμήματα πτυχή του σχεδιασμού μορφή είναι το χειρισμό σφαλμάτων . Είναι όμως η ανθρώπινη φύση να κάνει λάθη και η φόρμα σας πιθανώς δεν εξαιρείται από ανθρώπινο λάθος. Οι χρήστες αντιτίθενται όταν περνούν τη διαδικασία της συμπλήρωσης μιας φόρμας μόνο για να μάθουν κατά την υποβολή, ότι έχουν κάνει λάθος. Αυτό είναι όπου η μικροεπεξεργασία επικύρωσης παίζει ρόλο σε μια φιλική προς το χρήστη μορφή. Η επικύρωση σε πραγματικό χρόνο ενημερώνει αμέσως τους χρήστες σχετικά με την ορθότητα των παρεχόμενων δεδομένων. Αυτή η προσέγγιση επιτρέπει στους χρήστες να διορθώνουν τα σφάλματα που κάνουν πιο γρήγορα χωρίς να χρειάζεται να περιμένουν μέχρι να πατήσουν το κουμπί υποβολής για να δουν τα σφάλματα. Όταν γίνει σωστά, μπορεί να μετατρέψει μια διφορούμενη αλληλεπίδραση σε μια ξεκάθαρη.
συμπέρασμα
Σχεδιασμός είναι στις λεπτομέρειες. Ακόμη και μικρές λεπτομέρειες αξίζουν ιδιαίτερη προσοχή, επειδή όλες αυτές οι μικρές στιγμές συνθέτουν την αίσθηση, συναντώνται για να σχηματίσουν ένα όμορφο ολιστικό προϊόν.
"Η διαφορά ανάμεσα στα προϊόντα που αγαπάμε και σε αυτά που απλά ανεχόμαστε είναι συχνά οι μικροσυστοιχίες που έχουμε μαζί τους." - Dan Saffer
Εάν ενδιαφέρεστε για την εμπειρία των χρηστών, πρέπει να προσέξετε τις μικροσυστοιχίες. Επειδή το προϊόν σας είναι τόσο καλό όσο η ελάχιστη μικροδιαίσθηση που έχουν οι άνθρωποι μαζί του.