Κενές καταστάσεις και υποδείξεις UX

1) Γιατί χρειάζονται κενές καταστάσεις

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

2) Τυπολογία κενών κρατών

1. Πρώτη φορά - ο χρήστης δεν έχει κάνει τίποτα ακόμα.
2. Μηδενικά δεδομένα - Οι οντότητες δεν δημιουργούνται ή ο κατάλογος είναι κενός.
3. Φίλτρα/αναζήτηση (χωρίς αποτελέσματα) - εξαιρούνται όλοι οι όροι.
4. Σφάλμα/προσωρινή μη διαθεσιμότητα - δίκτυο/εξυπηρετητής, αλλά τα δεδομένα είναι καταρχήν.
5. Δεν απαιτούνται δικαιώματα/περιορισμοί - άρνηση πρόσβασης, QAS/ρόλος/όριο.
6. Συντήρηση - προγραμματισμένη εργασία, αναμονή.

3) Δομή κενού φύλλου

Εικονίδιο/εικόνα (μην υπερφορτώνετε. αντίθεση ≥ ΑΑ).
Ένας τίτλος: «Εδώ είναι ακόμα άδειο».

Λόγος/πλαίσιο: "Δεν έχετε προσθέσει ακόμα... "/" Το φίλτρο δεν βρήκε σπίρτα "

1-2 δράσεις (CTA): πρωτογενής (κύριο σενάριο), δευτερεύουσα (εναλλακτική).
Σύνδεση με τη διάσωση (προαιρετικό).
Επίπεδο σελίδας: διατήρηση της συνήθους πλοήγησης και των φίλτρων - μη μετατρέπετε την οθόνη σε αδιέξοδο.

html
<section class="empty" role="region" aria-labelledby="empty-title">
<svg aria-hidden="true" class="empty__icon"><!-- … --></svg>
<h2 id = "empty-title "> It's empty for now </h2>
<p> Create the first campaign or change the filters. </p>
<div class="actions">
<button class =" btn btn--primary "> Create campaign </button>
<button class =" btn btn--ghost "> Reset Filters </button>
</div>
<a class =" help" href = "/help/campaigns "> How it works </a>
</section>

4) Τόνος και κείμενο (UX copywriting)

Σαφώς και ευγενικά. Αποφυγή «σφάλματος 0x»...

Λόγος → δράση. "Το φίλτρο VIP απέκλεισε όλες τις καταχωρίσεις. Επιθυμείτε την επαναφορά του φίλτρου

Καμία ενοχή. Μην κατηγορείς τον χρήστη για κενό.
Μια σκέψη, μία πρόταση.
Τοπικοποίηση: Αποφυγή πολιτιστικών μεταφορών. σελιδοδείκτης + 20-30% του μήκους κειμένου.

5) Εικονογραφήσεις και οπτικές

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

6) CTA και εναλλακτικές λύσεις

Το κύριο CTA είναι το κύριο επόμενο βήμα (δημιουργία/κατάθεση/εγγραφή).
Δευτεροβάθμια - «βλέπε demo», «εισαγωγή», «φίλτρα επαναφοράς».
Όριο επιλογής: έως 2 CTA. τα υπόλοιπα είναι στο «Περισσότερα».
Με κινδύνους/πληρωμές - διαφανές κείμενο σχετικά με τις συνέπειες και την ακύρωση.

7) Κενά κράτη ανά σενάριο

7. 1 Πρώτη εκτέλεση

Hyde checklist of 3-5 states: «Προσθέστε μια μέθοδο πληρωμής», «Επιλέξτε έναν πάροχο».
Παραλείψτε το κουμπί + σύνδεσμο οδηγού.

7. 2 Δεν υπάρχουν δεδομένα

Μια σύντομη εξήγηση του γιατί είναι άδειο + CTA Δημιουργία/Εισαγωγή.
Υπόδειξη: «Μπορείτε να φορτώσετε CSV» (σύνδεση με το πρότυπο).

7. 3 Φίλτρα/αναζήτηση

Εμφάνιση των φίλτρων που είναι ενεργά και του κουμπιού «Επαναφορά».
Προτείνετε στενούς αγώνες ή εναλλακτικές ερωτήσεις.

7. 4 Σφάλμα/μη διαθεσιμότητα

"Αντιμετωπίσαμε πρόβλημα. Δοκιμάστε ξανά αργότερα το" + "Retry "/" System Status "