Un buton dintr-o machetă arată de obicei o stare: implicit. În produsul real, același buton este plasat, focalizat cu o tastatură, apăsat, dezactivat în timp ce un formular este incomplet și se încarcă în timp ce o solicitare este trimisă. Fiecare dintre acestea este o stare UI și fiecare are nevoie de un design.
Ajută la separarea a două grupuri. Stările de interacțiune vin de la utilizator: hover, focus, apăsat și dezactivat. Stările datelor provin din sistem: încărcare, date goale, date parțiale, eroare și succes. Un ecran de listă, de exemplu, are nevoie de un design pentru când se încarcă, când nu are articole, când are un articol, când are sute și când cererea eșuează.
Stările de focalizare merită o atenție specială. Persoanele care folosesc o tastatură sau un dispozitiv comutator depind de un indicator de focalizare vizibil pentru a ști unde se află. Eliminarea conturului de focalizare al browserului fără o înlocuire este una dintre cele mai frecvente erori de accesibilitate.
Schimbarea între state face parte și din proiect. O tranziție scurtă și clară de la implicit la apăsat confirmă atingerea. O stare de încărcare care se transformă fără probleme în succes le spune oamenilor că acțiunea lor a funcționat. Salturile bruște sau animația prea lentă fac ca interfața să pară nesigură.
O modalitate practică de a evita stările lipsă este de a le lista pentru fiecare componentă înainte de proiectare sau de a modela componenta ca o mașină de stări: un set de stări și evenimentele care se mișcă între ele. ExodeUI, pe care îl facem, funcționează astfel. Proiectați fiecare stare și tranzițiile dintre ele într-un singur fișier, iar codul dvs. trimite evenimentele care schimbă stările în aplicația reală.