Ένα κουμπί σε μια μακέτα δείχνει συνήθως μια κατάσταση: την προεπιλογή. Στο πραγματικό προϊόν τοποθετείται το ίδιο κουμπί, εστιάζει με ένα πληκτρολόγιο, πατιέται, απενεργοποιείται όταν μια φόρμα είναι ελλιπής και φορτώνεται ενώ αποστέλλεται ένα αίτημα. Κάθε ένα από αυτά είναι μια κατάσταση διεπαφής χρήστη και το καθένα χρειάζεται ένα σχέδιο.
Βοηθά στον διαχωρισμό δύο ομάδων. Οι καταστάσεις αλληλεπίδρασης προέρχονται από τον χρήστη: τοποθετήστε το δείκτη του ποντικιού, εστίαση, πατημένο και απενεργοποιημένο. Οι καταστάσεις δεδομένων προέρχονται από το σύστημα: φόρτωση, άδεια, μερικά δεδομένα, σφάλμα και επιτυχία. Μια οθόνη λίστας, για παράδειγμα, χρειάζεται ένα σχέδιο για το πότε φορτώνεται, όταν δεν έχει στοιχεία, πότε έχει ένα στοιχείο, πότε έχει εκατοντάδες και όταν το αίτημα αποτυγχάνει.
Οι καταστάσεις εστίασης αξίζουν ιδιαίτερης προσοχής. Τα άτομα που χρησιμοποιούν πληκτρολόγιο ή διακόπτη συσκευής εξαρτώνται από μια ορατή ένδειξη εστίασης για να γνωρίζουν πού βρίσκονται. Η κατάργηση του περιγράμματος εστίασης του προγράμματος περιήγησης χωρίς αντικατάσταση είναι μια από τις πιο συνηθισμένες αποτυχίες προσβασιμότητας.
Η αλλαγή μεταξύ των καταστάσεων είναι επίσης μέρος του σχεδιασμού. Μια σύντομη, καθαρή μετάβαση από την προεπιλογή στο πάτημα επιβεβαιώνει το πάτημα. Μια κατάσταση φόρτωσης που μετατρέπεται ομαλά σε επιτυχία λέει στους ανθρώπους ότι η δράση τους λειτούργησε. Τα απότομα άλματα ή τα κινούμενα σχέδια που είναι πολύ αργά, κάνουν τη διεπαφή να φαίνεται αναξιόπιστη.
Ένας πρακτικός τρόπος για να αποφύγετε τις καταστάσεις που λείπουν είναι να τις απαριθμήσετε για κάθε στοιχείο πριν από το σχεδιασμό ή να μοντελοποιήσετε το στοιχείο ως μηχανή καταστάσεων: ένα σύνολο καταστάσεων και τα συμβάντα που κινούνται μεταξύ τους. Το ExodeUI, το οποίο φτιάχνουμε, λειτουργεί με αυτόν τον τρόπο. Σχεδιάζετε κάθε κατάσταση και τις μεταβάσεις μεταξύ τους σε ένα αρχείο και ο κώδικάς σας στέλνει τα συμβάντα που αλλάζουν καταστάσεις στην πραγματική εφαρμογή.