Το σχέδιο δεν είναι μόνο pixel και μοτίβα. Είναι επίσης ρυθμός και συναισθήματα. Ορισμένα προϊόντα αισθάνονται κινηματογραφικά καθώς μας καθοδηγούν στην αβεβαιότητα, την ανακούφιση, την αυτοπεποίθηση και την ηρεμία χωρίς να μας παρασύρουν. Αυτό είναι το Emotion in Flow. Άλλοι υποσκάπτουν τις δικές τους στιγμές με ένα αστείο στο λάθος μέρος, ένα αναδυόμενο παράθυρο έκπληξη ή μια ταραχώδη μετάβαση. Αυτό είναι Συναίσθημα σε Σύγκρουση. Αυτές δεν είναι ιδέες μόνο για UX. Μπορείτε να τα δείτε παντού στη διασκέδαση. Και ο πιο ξεκάθαρος τρόπος για να νιώσετε τη διαφορά είναι να συγκρίνετε τον τρόπο με τον οποίο τα anime χειρίζονται τις συναισθηματικές αλλαγές με το πώς σκοντάφτουν οι ταινίες της Marvel και της DC. Θα χρησιμοποιήσουμε δύο συγκεκριμένα παραδείγματα, ένα από το Dan da Dan (σειρά anime στο Netflix) και ένα από την ταινία Superman του James Gunn, για να ορίσουμε τις δύο έννοιες και στη συνέχεια να τις μεταφράσουμε σε πρακτικά μοτίβα σχεδιασμού προϊόντων που μπορείτε να εφαρμόσετε αμέσως. Σημείωση: Θα επικεντρωθούμε σε ψηφιακά προϊόντα, συμπεριλαμβανομένων των εφαρμογών, του SaaS και του ιστού. Emotion In Flow (Anime: Dan da Dan) Στο Dan da Dan, το τονικό εύρος είναι άγριο, τρόμου, κωμωδία, τρυφερότητα, αλλά ρέει. Παράδειγμα: Σε ένα τόξο, οι πρωταγωνιστές βρίσκονται σε μια παράξενη, κωμική αναζήτηση που περιλαμβάνει τα «χρυσά γεννητικά όργανα» ενός από τους κύριους χαρακτήρες (ναι, πραγματικά), και σε ένα άλλο, έχουμε παρασυρθεί σε μια σπαρακτική ιστορία μιας μητέρας της οποίας το παιδί απήχθη. Στα χαρτιά, αυτή η αλλαγή θα έπρεπε να είναι τροχαίο. Στην οθόνη, είναι συνεκτικό και συναισθηματικά ευανάγνωστο. Γιατί αυτό λειτουργεί στην οθόνη;
Συνέχεια των στοιχημάτων. Ακόμη και όταν προσγειώνεται μια φίμωση, οι στόχοι και ο κίνδυνος των χαρακτήρων παραμένουν άθικτοι. Το χιούμορ απελευθερώνει την ένταση μετά από μια μίνι ανάλυση. δεν αρνείται την απειλή. Ξεκάθαρα σημάδια διάθεσης. Η μουσική, το καδράρισμα, ο ρυθμός και οι αντιδράσεις των χαρακτήρων τηλεγραφούν το επόμενο συναίσθημα. Είστε προετοιμασμένοι για τη βάρδια, επομένως την οδηγείτε αντί να σας πιέζουν. Μια συναισθηματική άγκυρα. Οι σχέσεις παραμένουν ο Βόρειος Αστέρας, έτσι ώστε η καρδιά της σκηνής να μην χάνεται όταν αλλάζει ο τόνος.
Πώς μεταφράζεται αυτό σε UX; Τα καλά προϊόντα κάνουν το ίδιο: προετοιμασία, μετάβαση, επίλυση, ώστε οι χρήστες να παραμένουν βυθισμένοι καθώς αλλάζει ο συναισθηματικός τόνος.
Emotion In Conflict (Marvel/DC: James Gunn's Superman) Η Λόις και ο Κλαρκ έχουν μια εγκάρδια, οικεία συνομιλία, μια αργή, ανθρώπινη στιγμή, ενώ στο παρασκήνιο παίζει ένα τρεχούμενο φίμωτρο (ένα τέρας τσακώνεται με ένα γιγάντιο ρόπαλο του μπέιζμπολ). Η φίμωση κλέβει την εστίαση ακριβώς όταν η σκηνή σας ζητά να νιώσετε κάτι αληθινό. Το αποτέλεσμα είναι μια τονική σύγκρουση που τρυπάει το συναίσθημα αντί να το απελευθερώνει. Γιατί αυτό αποτυγχάνει στην οθόνη;
Αυξημένο γνωστικό φορτίο. Αυτό που συμβαίνει εδώ αντιστοιχεί απευθείας στη θεωρία του γνωστικού φορτίου. Όταν μια σκηνή (ή διεπαφή) ζητά από τους χρήστες να επεξεργαστούν δύο ανταγωνιστικά συναισθηματικά σήματα ταυτόχρονα, εισάγει εξωτερικό γνωστικό φορτίο, νοητική προσπάθεια που δεν έχει καμία σχέση με την ίδια την εργασία ή τη στιγμή. Αντί να εστιάσετε στον συναισθηματικό ρυθμό, η προσοχή μοιράζεται μεταξύ σημάτων που δεν επιλύουν το ένα το άλλο. Στα προϊόντα, αυτό συμβαίνει όταν το χιούμορ, οι προωθήσεις ή οι απροσδόκητες αλλαγές διεπαφής διεισδύουν σε στιγμές υψηλού πονταρίσματος: οι χρήστες αναγκάζονται να ερμηνεύουν τον τόνο και την πρόθεση την ίδια στιγμή που προσπαθούν να ενεργήσουν, γεγονός που επιβραδύνει την κατανόηση και αυξάνει το άγχος. Το αστείο επικαλύπτει την κορύφωση ενός σοβαρού ρυθμού. το κοινό δίνει προσοχή στο διακόπτη παρά στο συναίσθημα. Καμία τονική μεταβίβαση. Δεν υπάρχει καμία μετάβαση που να προσελκύει την οικειότητα πριν φτάσει το χιούμορ, επομένως η στιγμή φαίνεται να είναι υπονομευμένη παρά να επιλύεται.
Πώς μεταφράζεται αυτό σε UX; Στα προϊόντα, αυτό είναι το πρόβλημα του κομφετί πριν από την επιβεβαίωση, το αναιδές σφάλμα σε μια ροή χρημάτων ή ο τρόπος προώθησης που εμφανίζεται ακριβώς στη μέση μιας κρίσιμης εργασίας. Αυτό αυξάνει επίσης το γνωστικό φορτίο: οι χρήστες πρέπει να επεξεργάζονται το χιούμορ ενώ προσπαθούν να διορθώσουν ένα πρόβλημα, το οποίο τους επιβραδύνει και αυξάνει το άγχος.
Γρήγοροι ορισμοί Emotion in Flow Οι συναισθηματικές αλλαγές αισθάνονται κερδισμένες, τηλεγραφημένες και χρονομετρημένες, ώστε να επιλύουν τα προηγούμενα beats. Το Immersion κρατά. Συναίσθημα σε ConflictΈνας διακόπτης ταλαιπωρίας (ή σκληρή κοπή) που τρυπάει ένα ζωντανό συναισθηματικό ρυθμό. Η βύθιση σπάει.
Τώρα που το ονομάσαμε: πώς συνδέεται αυτό με το UX; Πώς τα συναισθήματα διαμορφώνουν την απομνημόνευση προϊόντος Οι άνθρωποι δεν θυμούνται τον μέσο όρο μιας εμπειρίας. θυμούνται κορυφές και το τέλος. Εάν η κορύφωση της ροής σας είναι η απογοήτευση ή το τέλος σας είναι ακατάστατο, αυτό είναι που μένει. Σχεδιάστε λοιπόν επίτηδες τη συναισθηματική καμπύλη. Τα συναισθήματα ζουν σε τρία επίπεδα (από το Emotional Design του Don Norman) και το προϊόν σας πρέπει να τα ευθυγραμμίσει:
Σπλαχνικό (έντερο): Σήματα πρώτης εντύπωσης: οπτικές εικόνες, κίνηση, απτικά, ήχος. Παραδείγματα: Ένας σταθερός φορτωτής σκελετού ηρεμεί περισσότερο από ένα νευρικόκλώστης; Ένα απαλό κουδούνισμα επιτυχίας/απτικό χτύπημα αφήνει τη νίκη να προσγειωθεί χωρίς να φωνάζει. η συνεπής χαλάρωση/κατεύθυνση λέει στο μάτι τι άλλαξε. Συμπεριφορική (να κάνει): Μπορώ να ολοκληρώσω την εργασία μου ομαλά; Τριβή εδώ σημαίνει άγχος. Παραδείγματα: Τρία ξεκάθαρα βήματα πληρωμής με προβλέψιμη πρόοδο. καταστάσεις σφάλματος που εξηγούν τι συνέβη και πώς να ανακτήσετε. ενσωματωμένη επικύρωση αντί για εκρήξεις τέλους μορφής. Αναστοχαστικό (σημαίνει): Η ιστορία που λέω στον εαυτό μου μετά, "Άξιζε τον κόπο; Το εμπιστεύομαι αυτό;" Παραδείγματα: Μια τακτοποιημένη αναδιπλούμενη οθόνη ("Τέλος. Θα λάβετε το X μέχρι την Παρασκευή.") κλείνει. μια μικρή ανακεφαλαίωση («Εξοικονομήσατε 18 € φέτος») δημιουργεί υπερηφάνεια χωρίς πυροτεχνήματα.
Οι μικροαλληλεπιδράσεις είναι η συναισθηματική κόλλα. Κάθε ένα έχει ένα έναυσμα (πατώντας Pay), κανόνες (τι κάνει το σύστημα), σχόλια (πρόοδος και σαφές αποτέλεσμα) και βρόχους ή λειτουργίες (τι θα συμβεί αν ο χρήστης προσπαθήσει ξανά). Κάντε τα σωστά και οι μεταβάσεις σας γεφυρώνουν τα συναισθήματα. Πάρτε τους λάθος, και σπάζουν τη ροή.
Το συναισθηματικό φύλλο παλμών χαρτογραφείται καθαρά στα επίπεδα εμπειρίας του Norman:
Η αβεβαιότητα ζει στα σπλαχνικά και πρώιμα στρώματα συμπεριφοράς, όπου οι χρήστες βασίζονται σε αισθητηριακές ενδείξεις (κίνηση, σαφήνεια, ανατροφοδότηση) για να καταλάβουν τι συμβαίνει. Η σαφήνεια βρίσκεται σταθερά στο επίπεδο συμπεριφοράς, τη στιγμή που η πρόθεση του συστήματος και η επόμενη ενέργεια του χρήστη κλειδώνουν στη θέση τους. Η πρόβλεψη είναι ένας συνδυασμός συμπεριφορικών (ο χρήστης κάνει κάτι με σκοπό) και αναστοχαστικής (ο χρήστης ήδη προβλέπει το αποτέλεσμα και φαντάζεται τι θα ακολουθήσει). Το επίτευγμα είναι μια αντανακλαστική κορυφή, όπου ο χρήστης αξιολογεί την επιτυχία, την εμπιστοσύνη και αν η εμπειρία «αισθάνθηκε σωστή». Το Calm/Closure είναι κυρίως αντανακλαστικό, βοηθώντας τους χρήστες να ολοκληρώσουν το νόημα της αλληλεπίδρασης και να αποφασίσουν εάν το προϊόν είναι αξιόπιστο και αξίζει να το επιστρέψουν.
Στα πραγματικά προϊόντα, αυτή η ακολουθία δεν εξαφανίζεται όταν τα πράγματα πάνε στραβά. Τα λάθη, η καθυστέρηση και οι υποβαθμισμένες καταστάσεις δεν αποτελούν εξαιρέσεις στο συναισθηματικό τόξο - αποτελούν μέρος του. Βλέποντας μέσα από τον αφηγηματικό φακό, αυτές οι στιγμές είναι τα εμπόδια στο ταξίδι του ήρωα. Μια καλά σχεδιασμένη κατάσταση ανάκαμψης αναγνωρίζει την οπισθοδρόμηση, διευκρινίζει τι συνέβη και καθοδηγεί το επόμενο βήμα χωρίς να εισάγει νέο συναισθηματικό θόρυβο. Όταν η αποτυχία αντιμετωπίζεται ως χτύπημα αντί για ρήξη, η συναισθηματική ροή μπορεί να διατηρηθεί ακόμη και υπό πίεση. Παραδείγματα UX: Emotion In Flow vs Emotion In Conflict Συναίσθημα σε ροή Το ταμείο ολοκληρώθηκε σωστά (στυλ Stripe/Apple Pay): σύντομα βήματα, σαφής πρόοδος και καθαρή κατάσταση επιτυχίας (ένα σημάδι επιλογής με προαιρετικό απαλό απτικό). Η κορυφή (επιτυχία) προσγειώνεται και το τέλος δίνει το κλείσιμο (απόδειξη ή επόμενο βήμα).
Κατάσταση παραλαβής (εφαρμογές οδήγησης, π.χ. Uber, Δωρεάν τώρα ή Bolt): οι προοδευτικές ενημερώσεις διατηρούν τον προσανατολισμό και μειώνουν το άγχος ("Φτάνει ο οδηγός", "2 λεπτά μακριά", "Έφτασε"). Η αβεβαιότητα μετατρέπεται σε διαύγεια, με απαλή κίνηση να προετοιμάζει κάθε μετάβαση.
Συναίσθημα σε σύγκρουση Σημείωση: Δεν ονομάζουμε συγκεκριμένα προϊόντα εδώ — σεβόμαστε τη δουλειά πίσω από αυτά. Αντίθετα, δείχνουμε τα μοτίβα που προκαλούν συναισθηματική σύγκρουση και πώς ακριβώς να τα διορθώσουμε.
Ανέκδοτα σε σοβαρές στιγμές. Αναιδείς καταστάσεις αντιγραφής σε λάθος για χρήματα/υγεία/ασφάλεια. Οι χρήστες αγχώνονται. Το χιούμορ ενισχύει τον ερεθισμό. Γιορτή πριν την ανάλυση. Κομφετί, πυροτεχνήματα ή δυνατοί ήχοι πριν από την επιβεβαίωση. Το πάρτι διακόπτει την κορύφωση. Άλματα σκληρής κατάστασης. Μοντάλ/προσφορές έκπληξη στη μέση εργασία, εξαγορές σε πλήρη οθόνη χωρίς προετοιμασία. Αισθάνεται σαν απότομο κόψιμο κατά τη διάρκεια ενός συναισθηματικού παλμού.
Τι μπορείτε να κάνετε για να εξασφαλίσετε τη ροή των συναισθημάτων Ακολουθεί μια σελίδα Έννοιας με το πλήρες πρότυπο που μπορείτε να αντιγράψετε:
Πρότυπο φύλλου συναισθηματικών beat.
1. Γράψτε πρώτα το φύλλο συναισθημάτων Για κάθε βασική ροή (ενσωμάτωση, πληρωμή, ανάκτηση), χαρτογραφήστε τα συναισθήματα ανά βήμα: αβεβαιότητα → σαφήνεια → προσμονή → επίτευγμα → ηρεμία. Επισυνάψτε αντίγραφο, κίνηση και μικροαλληλεπιδράσεις σε κάθε ρυθμό. (Ποιος που μεταφέρει το συναίσθημα;) 2. Ευθυγραμμίστε τον τόνο με τον κίνδυνο εργασίας Δημιουργήστε μια μήτρα τόνου (επίπεδο κινδύνου × κατάσταση). Σε σφάλματα υψηλού κινδύνου, να είστε ήρεμοι, απλοί και προσανατολισμένοι στη λύση. Εξοικονομήστε το παιχνίδι για περιβάλλοντα χαμηλού κινδύνου. Αποσπάσματα προτύπου:
Σφάλμα υψηλού κινδύνου: "Δεν ήταν δυνατή η επαλήθευση της ταυτότητάς σας. Δοκιμάστε ξανά ή επικοινωνήστε με την υποστήριξη." Κενή κατάσταση χαμηλού κινδύνου: "Δεν υπάρχει τίποτα ακόμα. Θέλετε να ξεκινήσετε με ένα δείγμα;"
Αυτό είναι όπου πολλά ώριμα προϊόντα παρασύρονται αθόρυβα σε συναισθηματική σύγκρουση. Με την πάροδο του χρόνου, οι ομάδες προσθέτουν ευχαρίστηση με συνήθεια και όχι με πρόθεση. Ένας χρήσιμος αυτοέλεγχος είναι να ρωτήσετε: Εάν αφαιρούσαμε κάθε παιχνιδιάρικο ή εορταστικό στοιχείο από αυτό το βήμα, η ροή θα εξακολουθούσε να αισθάνεται ανθρώπινη - ήαυτά τα στοιχεία που καλύπτουν την τριβή; Ο καλός συναισθηματικός σχεδιασμός αποσαφηνίζει την εμπειρία. Το υπέροχο συναισθηματικό σχέδιο δεν χρειάζεται διακόσμηση για να αντισταθμίσει τη σύγχυση. 3. Σχεδιάστε Peak And End On Purpose Μηχανικός μια καθαρή κορυφή (η στιγμή της επιτυχίας) και ένα καθαρό τέλος (επιβεβαίωση και τι θα γίνει μετά). Μετρήστε την ανάκληση και την ικανοποίηση και στα δύο σημεία. 4. Χρησιμοποιήστε τις μικροαλληλεπιδράσεις ως γέφυρες, όχι ως προβολείς
Προετοιμασία: Μικρές, συνεπείς υποδείξεις κίνησης πριν από μια μεγάλη αλλαγή κατάστασης. Επιβεβαίωση: Η επιτυχία έχει μια λεπτή διευθέτηση, με ελαφρώς πιο αργή διευκόλυνση και προαιρετικό ελαφρύ απτικό. Ανάκτηση: Η επαναλαμβανόμενη αποτυχία αλλάζει με χάρη τον τόνο από αισιόδοξος σε υποστηρικτικός και καθοδηγεί το επόμενο βήμα.
5. Τεστ για συναισθηματική συνέχεια Στις συνεδρίες χρηστικότητας, μην ρωτάτε απλώς "Ήταν τόσο εύκολο;" Αντίθετα, μπορείτε να ρωτήσετε "Τι συναίσθημα άλλαξε εδώ;" Αν ακούσετε "σύγχυση → διασκεδάζοντας → μπερδεμένο", έχετε σύγκρουση, όχι ροή. Επαναλάβετε τις μεταβάσεις, όχι μόνο τις οθόνες. Πώς να αποφύγετε τα συναισθήματα σε σύγκρουση: Γρήγορη λίστα ελέγχου Κόκκινες σημαίες → διορθώσεις:
Ανέκδοτα σε σοβαρές στιγμές → ανταλλάξτε με ήρεμη, άμεση γλώσσα και σαφή πορεία ανάκαμψης. Εορτασμός πριν από την επίλυση → μετακίνηση της γιορτής στη μετά την επιβεβαίωση. μειώστε τον τόνο για εργασίες υψηλού κινδύνου. Άλματα σκληρής κατάστασης → προαναγγελία μεταβάσεων. Διατηρήστε το καδράρισμα συνεπές. χρησιμοποιήστε ουσιαστική κίνηση για να διατηρήσετε τη συνέχεια. Μετατόπιση τόνου μεταξύ ομάδων → συγκεντρώστε τις οδηγίες φωνής και τόνου με παραδείγματα ανά επίπεδο κινδύνου και κατάσταση.
Υπάρχουν στιγμές που η διακοπή της συναισθηματικής ροής είναι σκόπιμη και απαραίτητη. Οι προειδοποιήσεις ασφαλείας, οι νομικές επιβεβαιώσεις και οι κρίσιμες για την ασφάλεια ειδοποιήσεις συχνά επωφελούνται από απότομες μετατοπίσεις τόνου. Σε αυτές τις περιπτώσεις, η διαταραχή σηματοδοτεί τη σημασία και απαιτεί προσοχή. Το πρόβλημα δεν είναι η ίδια η συναισθηματική σύγκρουση. είναι τυχαία σύγκρουση. Όταν οι σχεδιαστές επιλέγουν σκόπιμα τη διακοπή, οι χρήστες κατανοούν τα διακυβεύματα αντί να αισθάνονται χτυπήματα. Συμπέρασμα Οι μεγάλες εμπειρίες είναι κατευθυνόμενες εμπειρίες. Ο Dan da Dan δείχνει πώς να κινούμαστε μέσα από τα συναισθήματα χωρίς να μας χάνουμε: προετοιμάζεται, μεταβαίνει και επιλύει. Η σκηνή του Σούπερμαν δείχνει το αντίθετο: μια φίμωση που συγκρούεται με έναν καρδιακό παλμό. Κάντε το πρώτο. Χαρτογραφήστε τους συναισθηματικούς σας ρυθμούς, ευθυγραμμίστε τον τόνο με τον κίνδυνο εργασίας και αφήστε τις μικροαλληλεπιδράσεις να γεφυρώσουν τα συναισθήματα, ώστε οι χρήστες να θυμούνται τη σωστή κορυφή και το σωστό άκρο, όχι το χτύπημα στη μέση.
