En knap i en mockup viser normalt én tilstand: standard. I det rigtige produkt holdes den samme knap, fokuseret med et tastatur, trykket ned, deaktiveret, mens en formular er ufuldstændig, og indlæses, mens en anmodning sendes. Hver af dem er en UI-tilstand, og hver enkelt har brug for et design.
Det hjælper at adskille to grupper. Interaktionstilstande kommer fra brugeren: hover, fokus, trykket og deaktiveret. Datatilstande kommer fra systemet: indlæsning, tom, delvise data, fejl og succes. En listeskærm skal for eksempel have et design til, hvornår den indlæses, når den ikke har nogen elementer, når den har én vare, når den har hundredvis, og når anmodningen mislykkes.
Fokustilstande fortjener særlig opmærksomhed. Folk, der bruger et tastatur eller skifter enhed, er afhængige af en synlig fokusindikator for at vide, hvor de er. At fjerne browserens fokusomrids uden en erstatning er en af de mest almindelige tilgængelighedsfejl.
Skiftet mellem stater er også en del af designet. En kort, tydelig overgang fra standard til trykket bekræfter tryk. En indlæsningstilstand, der uden problemer bliver til succes, fortæller folk, at deres handling virkede. Pludselige hop eller animationer, der er for langsom, får brugerfladen til at føles upålidelig.
En praktisk måde at undgå manglende tilstande på er at liste dem for hver komponent før design, eller at modellere komponenten som en tilstandsmaskine: et sæt tilstande og de begivenheder, der bevæger sig mellem dem. ExodeUI, som vi laver, fungerer på denne måde. Du designer hver tilstand og overgangene mellem dem i én fil, og din kode sender de hændelser, der skifter tilstand i den rigtige app.