Een knop in een mockup toont meestal één status: de standaard. In het echte product wordt dezelfde knop ingedrukt, gefocust met een toetsenbord, ingedrukt, uitgeschakeld terwijl een formulier onvolledig is, en geladen terwijl een verzoek wordt verzonden. Elk daarvan is een UI-status en elk daarvan heeft een ontwerp nodig.
Het helpt om twee groepen te scheiden. Interactiestatussen komen van de gebruiker: zweven, focus, ingedrukt en uitgeschakeld. Gegevensstatussen komen uit het systeem: laden, leeg, gedeeltelijke gegevens, fout en succes. Een lijstscherm heeft bijvoorbeeld een ontwerp nodig voor wanneer het wordt geladen, wanneer het geen items bevat, wanneer het één item heeft, wanneer het er honderden heeft en wanneer het verzoek mislukt.
Focustoestanden verdienen speciale aandacht. Mensen die een toetsenbord of schakelapparaat gebruiken, zijn afhankelijk van een zichtbare focusindicator om te weten waar ze zich bevinden. Het verwijderen van de browserfocusoverzicht zonder vervanging is een van de meest voorkomende toegankelijkheidsfouten.
De verandering tussen staten maakt ook deel uit van het ontwerp. Een korte, duidelijke overgang van standaard naar ingedrukt bevestigt de tik. Een laadstatus die soepel in succes verandert, vertelt mensen dat hun actie heeft gewerkt. Abrupte sprongen of te trage animaties zorgen ervoor dat de interface onbetrouwbaar aanvoelt.
Een praktische manier om te voorkomen dat er toestanden ontbreken, is door ze voor elk onderdeel op te sommen voordat je gaat ontwerpen, of door het onderdeel te modelleren als een toestandsmachine: een reeks toestanden en de gebeurtenissen die daartussen bewegen. ExodeUI, die wij maken, werkt op deze manier. Je ontwerpt elke status en de overgangen ertussen in één bestand, en je code verzendt de gebeurtenissen die van status veranderen in de echte app.