Ανάδραση UX σε κενές καταστάσεις

1) Τι είναι τα κενά κράτη και γιατί τα χρειάζονται

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

• εξηγεί «γιατί είναι άδειο εδώ»·
• αναγράφεται η τιμή του τμήματος·
• Προτείνεται ένα σαφές επόμενο βήμα (ή περισσότερα για επιλογή)
• μείωση του άγχους και πρόληψη της περιποίησης.

Καλή κενή κατάσταση = πλαίσιο + όφελος + δράση.

2) Τυπολογία κενής κατάστασης

1. Για πρώτη φορά κενό-Ο χρήστης δεν έχει δημιουργήσει/ρυθμίσει τίποτα ακόμα.
2. Μηδέν Αναζήτηση/Φίλτρο: Η ερώτηση δεν επέστρεψε αποτελέσματα.
3. Προσωρινό κενό: Φορτώνονται δεδομένα ή εκτελείται σειρά αναμονής.
4. Περιορισμός/δικαίωμα: απουσία πρόσβασης, ανεπαρκές επίπεδο επαλήθευσης.
5. Εκκαθάριση χρήστη: Εκκαθάριση κάδου ανακύκλωσης/ιστορίας.
6. Τεχνικό πρόβλημα: αστοχία δικτύου/υπηρεσίας, επανασυσκευασία.

3) Αρχές σχεδιασμού

Πλαίσιο: μιλάμε για έναν συγκεκριμένο λόγο κενού.
Αξία → δράσης: πρώτα γιατί αυτό το τμήμα, και μετά τι να κάνουμε.
Μία κύρια CTA: εάν είναι απαραίτητο - δευτεροβάθμια (μάθετε περισσότερα/συχνές ερωτήσεις).
Συντομία και εξειδίκευση: 1-2 προτάσεις + διαυγές κουμπί.
Οπτική υποστήριξη: το εικονίδιο/εικόνα υποστηρίζει νόημα, δεν αποσπά την προσοχή.
Αποφεύγοντας αδιέξοδο: Υπάρχει πάντα ένας δρόμος προς τα εμπρός.
Συνέπεια του τόνου: φιλική και ήρεμη. κανένα αστείο σε κρίσιμα βήματα (πληρωμές, ασφάλεια).
και εντοπισμός: αναγνώσιμο από τον αναγνώστη οθόνης, σωστά κλίση, λαμβάνει υπόψη το μήκος των γραμμών.

4) Κενό πλαίσιο κατάστασης (υπόδειγμα)

Τίτλος (προαιρετικό, 1 γραμμή) - Αξίωση ή λόγος.
Κείμενο (1-2 προτάσεις) - «γιατί είναι άδειο» + «τι ακολουθεί».
Η πρωτογενής CTA είναι η κύρια δράση-στόχος.
Δευτερεύον ACS/σύνδεσμος - βοήθεια/κανόνες/τεκμηρίωση.
Οπτική (προαιρετική) - εύκολη απεικόνιση 24-96 px, μην υπερφορτώνετε.

5) Σενάριο μοτίβα

5. 1 Επιβίβαση/πρώτο μηδέν

Στόχος: να οδηγήσει στην πρώτη επιτυχή δράση.
Κείμενο: «Για να δείτε εξατομικευμένες συστάσεις, συμπληρώστε ένα προφίλ και επιλέξτε στοιχεία».
CTA: Populate Profile/Select Leads.
Συμβουλή: Προσθέστε ένα μικροδύναμο/δείκτη χρόνου: «Θα πάρει ~ 1 λεπτό».

5. 2 Αναζήτηση/φίλτρα = μηδενικό αποτέλεσμα

Σκοπός: Βοήθεια για την προσαρμογή της αίτησης.

Κείμενο: «Τίποτα δεν βρέθηκε στο «live blackjack. "Δοκιμάστε" blackjack "ή αφαιρέστε το φίλτρο" Πάροχος: X "

CTA: Δευτερεύοντα «Φίλτρα Επαναφοράς»: «Ανοικτός κατάλογος».

5. 3 Πληρωμές/κενό πορτοφόλι

Στόχος: τόνωση της προσθήκης/πρώτης αναπλήρωσης της μεθόδου.
Κείμενο: «Αποθήκευση της μεθόδου πληρωμής σας - επαναπληρώσεις και αναλήψεις θα γίνουν γρηγορότερα».
CTA: «Προσθήκη μεθόδου πληρωμής» δευτερεύουσα: «Κανόνες και τέλη».

5. 4 Επαλήθευση/πρόσβαση

Σκοπός: να εξηγηθεί με διαφάνεια ο περιορισμός και η οδός απόσυρσης.

Κείμενο: "Το παρόν τμήμα διατίθεται μετά την επιβεβαίωση ταυτότητας. Συνήθως διαρκεί έως και 2 λεπτά"

CTA: «Get Verified» secondary: «Γιατί είναι απαραίτητο»

5. 5 Δεδομένα υπό διαμετακόμιση/προσωρινό κενό

Στόχος: μείωση της αναμονής για άγχος.

Κείμενο: "Συλλογή των δεδομένων σας. Αυτό συνήθως διαρκεί έως και 30 δευτερόλεπτα. Μπορείτε να αφήσετε μια σελίδα - θα σας ειδοποιήσουμε όταν όλα είναι έτοιμα"

CTA: «Κατανοητό» δευτερεύον: «Τι θα συμβεί μετά»

5. 6 Μετά τον καθαρισμό/αφαίρεση

Στόχος είναι να επιβεβαιωθεί η δράση και να προταθεί το επόμενο βήμα.

Κείμενο: "Η ιστορία ξεκαθαρίστηκε. Νέες συναλλαγές θα εμφανιστούν μετά την επόμενη επαναπλήρωση"

CTA: «Top Up».

5. Σφάλμα/Retray

Ο στόχος: μια σαφής πορεία ανάκαμψης.

Κείμενο: "Αποτυχία φόρτωσης δεδομένων. Ελέγξτε το δίκτυό σας ή δοκιμάστε ξανά"

CTA: «Επαναλάβετε» δευτερεύουσα: «Κατάσταση συστήματος».

6) Μικροτεχνήματα: έτοιμα υποδείγματα

• "Επιλεγμένα παιχνίδια θα εμφανιστούν εδώ όταν προσθέσετε το πρώτο. [Προσθήκη στα Αγαπημένα]"

• "Τίποτα δεν βρέθηκε για το "{query}" Καθαρισμός του αιτήματος ή επαναφορά των φίλτρων. [Επαναφορά φίλτρων]"

• "Δεν έχετε ακόμα αποθηκευμένες μεθόδους. Προσθήκη κάρτας ή πορτοφολιού για την επιτάχυνση των πληρωμών σας. [Προσθήκη μεθόδου]"

• "Το χαρακτηριστικό δεν είναι διαθέσιμο χωρίς επιβεβαίωση ηλικίας. Θα πάρει ~ 2 λεπτά. [Επιβεβαιώστε την ηλικία] [Γιατί;]"

• "Μετράμε τα στατιστικά στοιχεία τις τελευταίες 24 ώρες... Αυτό είναι συνήθως μέχρι 30 δευτερόλεπτα. Θα σας δείξουμε μια ειδοποίηση όταν τελειώσετε"

• "Η υπηρεσία δεν είναι διαθέσιμη. Ήδη επισκευάζουμε. Παρακαλώ δοκιμάστε αργότερα ή ελέγξτε την κατάσταση. [Επανάληψη] [Κατάσταση συστήματος]"

7) Οπτική γλώσσα και εικονογραφήσεις

Χρησιμοποιήστε φωτεινές μονόχρωμες εικόνες/δύο τόνων για να αποφύγετε διαφωνίες με το CTA.
Διαστάσεις και περιπτώσεις - όπως κάρτα περιεχομένου (οπτική συνέπεια).
Μην απεικονίζετε χιουμοριστικές σκηνές σε αγχωτικά σενάρια (πληρωμή/ασφάλεια).

8) Εντοπισμός και διαθεσιμότητα

Τοποθετήστε το απόθεμα για το μήκος των γραμμών (DE/TR μεγαλύτερο).
Μεταφράστε αριθμητικές μορφές, νόμισμα, ημερομηνίες τοπικά.
Για τους αναγνώστες οθόνης: ρόλος = «status», aria-live = «ευγενική/δυναμική» για τη δυναμική.
Μη τοποθετείτε νόημα μόνο στην εικόνα: αντίγραφο με κείμενο.
Ελέγξτε για αναγνωσιμότητα 320 px και αντίθεση WCAG.

9) Μετρήσεις και πειράματα

• CTR στο κύριο κενό CTA·
• μετατροπή σε «πρώτη επιτυχία» (εκδήλωση ενεργοποίησης)·
• Χρόνος για την πρώτη δράση
• συχνότητα επιστροφής στην οθόνη χωρίς πρόοδο·
• Ποσοστό αποτελεσμάτων μηδενικής αναζήτησης
• ζητά την υποστήριξη σεναρίων.

• ειδική έναντι κοινής κεφαλίδας·
• ρήμα δράσης CTA έναντι ουδέτερου·
• Προσθήκη χρονικής εκτίμησης
• την παρουσία δευτερεύοντος CTA (συχνές ερωτήσεις) και τη σειρά των κουμπιών·
• εικόνα έναντι εικονιδίου έναντι οπτικού.

10) Αντι-μοτίβα

«Εδώ είναι άδειο» χωρίς εξήγηση ή βήμα.
Αστεία σε κρίσιμα βήματα (πληρωμή, ασφάλεια).
Μάθετε περισσότερα CTA χωρίς πλαίσιο.
Παθητική δέσμευση: "πρέπει να προστεθεί. "Γράψτε ενεργά: "Προσθέστε"..
Μεγάλες παράγραφοι: 1-2 προτάσεις κατ "ανώτατο όριο.
Ο κάτοχος της θέσης αντί της ετικέτας σε μορφές - επιδεινώνει την A11y και την κατανόηση.
Κρυφοί περιορισμοί («στιγμιαίοι», αν και η καθυστέρηση είναι δυνατή).

11) Κατάλογος ελέγχου πριν από την αποδέσμευση

• Είναι σαφές γιατί είναι άδειο
• Υπάρχει αξία στο τμήμα σε μία πρόταση
• Υπάρχει ένα κύριο CTA και, εάν είναι απαραίτητο, ένα δευτερεύον
• Είναι το κείμενο σύντομο (≤ 140 χαρακτήρες) και συγκεκριμένο
• Πρόσθετη εκτίμηση χρόνου/αλιευτικής προσπάθειας, εάν ενδείκνυται
• Ο τόνος ταιριάζει με το σενάριο (ηρεμία/υποστήριξη)
• Έλεγχος τοπικοποίησης και A11y (χαρακτηριστικά της άριας, αντίθεση)
• Η εικόνα δεν κυριαρχεί στο CTA

12) Πριν/μετά τα παραδείγματα

Κατάλογος παιχνιδιών (Πρώτο μηδέν)

Πριν: «Δεν υπάρχει τίποτα εδώ ακόμα»

Μετά: "Συλλέξτε την ταινία σας. Επιλέξτε 3 αγαπημένα είδη - ας αρχίσουμε να προτείνουμε. [Επιλέξτε είδη]"

Μηδενική αναζήτηση

Πριν: «Τίποτα δεν βρέθηκε»

Μετά: "Με "ρουλέτα υψηλού ορίου" δεν υπάρχουν αποτελέσματα. Αφαιρέστε το φίλτρο "υψηλού ορίου" ή δοκιμάστε "ρουλέτα. «[Επαναφορά φίλτρων]»

Πληρωμές

Πριν: «Καμία μέθοδος πληρωμής»

Μετά: "Αποθηκεύστε την κάρτα ή το πορτοφόλι σας - η αναπλήρωση και η απόσυρση θα γίνουν γρηγορότερα. [Προσθήκη μεθόδου] [Τέλη και όροι]"

Επαλήθευση

Πριν: «Δεν υπάρχει πρόσβαση»

Μετά: "Το τμήμα διατίθεται μετά την επιβεβαίωση της ταυτότητας. Χρειάζονται ~ 2 λεπτά. [Επαληθεύστε] [Γιατί έχει σημασία]"

13) Ενσωμάτωση σε σύστημα σχεδιασμού

• «τίτλος» (συμβολοσειρά, προαιρετικό)
• «σώμα» (σύντομο κείμενο 1-2 προτάσεις)
• 'primaryAction {label, onClick}'
• 'secondaryAction {label, href/onclick}'
• «εικονίδιο/εικόνα» (προαιρετικό)

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

14) Ταχυπαρασκευαστής (αντιγραφή και χρήση)

• Τίτλος: «Ξεκινήστε με το πρώτο βήμα»
• Κείμενο: «Θα υπάρξουν συστάσεις εδώ μόλις επιλέξετε τα συμφέροντα».
• CTA: «Επιλογή μολύβδου»
• Δευτεροβάθμια: «Πώς λειτουργεί»

• Κείμενο: "Τίποτα δεν βρέθηκε από το "{query}" Επαναφορά των φίλτρων ή τελειοποίηση της ερώτησης"
• CTA: «Φίλτρα επαναφοράς»
• Δευτερεύουσα: «Κατάλογος»

• Κείμενο: "Διαθέσιμο χαρακτηριστικό μετά την επιβεβαίωση ηλικίας. Είναι συνήθως μέχρι 2 λεπτά"
• CTA: «Επιβεβαίωση ηλικίας»
• Δευτεροβάθμια: «Γιατί είναι απαραίτητο»

• Κείμενο: "Συλλέγουμε δεδομένα για την ημέρα. Αυτό είναι συνήθως μέχρι 30 δευτερόλεπτα. Θα σας ενημερώσουμε όταν γίνει"
• CTA: «Καλό»

Τελικό φύλλο εξαπάτησης

Πλαίσιο + τιμή + δράση - σε μία «στοίβα».
Ένα κύριο CTA χωρίς ανταγωνισμό στο οπτικό βάρος.
Σύντομες και ειδικές: 1-2 προτάσεις.
Πάντα η διέξοδος από το αδιέξοδο: δεν υπάρχουν αδιέξοδες οθόνες.
Η τοπικοποίηση και η A11y βρίσκονται στο επίπεδο των συστατικών.