Modeldeki bir düğme genellikle tek bir durumu gösterir: varsayılan. Gerçek üründe aynı düğme üzerinde gezdirilir, klavyeyle odaklanır, basılır, form eksikken devre dışı bırakılır ve istek gönderilirken yüklenir. Bunların her biri bir kullanıcı arayüzü durumudur ve her birinin bir tasarıma ihtiyacı vardır.
İki grubu ayırmaya yardımcı olur. Etkileşim durumları kullanıcıdan gelir: fareyle üzerine gelme, odaklanma, basılı ve devre dışı. Veri durumları sistemden gelir: yükleme, boş, kısmi veri, hata ve başarı. Örneğin bir liste ekranı, yüklenirken, hiç öğe yokken, bir öğe varsa, yüzlerce öğe varsa ve istek başarısız olduğunda bir tasarıma ihtiyaç duyar.
Odak durumları özel ilgiyi hak ediyor. Klavye kullanan veya cihazı değiştiren kişiler, nerede olduklarını bilmek için görünür bir odak göstergesine güvenirler. Tarayıcı odak taslağını değiştirmeden kaldırmak, en yaygın erişilebilirlik hatalarından biridir.
Durumlar arasındaki değişim de tasarımın bir parçasıdır. Varsayılandan basılana kısa ve net bir geçiş, dokunmayı onaylar. Sorunsuz bir şekilde başarıya dönüşen bir yükleme durumu, insanlara eylemlerinin işe yaradığını gösterir. Ani atlamalar veya çok yavaş animasyonlar arayüzün güvenilmez olmasına neden olur.
Eksik durumları önlemenin pratik bir yolu, tasarlamadan önce her bileşen için bunları listelemek veya bileşeni bir durum makinesi olarak modellemektir: bir dizi durum ve bunlar arasında hareket eden olaylar. Bizim yaptığımız ExodeUI bu şekilde çalışıyor. Her bir durumu ve bunlar arasındaki geçişleri tek bir dosyada tasarlarsınız ve kodunuz, gerçek uygulamada durumları değiştiren olayları gönderir.