عادةً ما يُظهر الزر الموجود في النموذج بالحجم الطبيعي حالة واحدة: الحالة الافتراضية. في المنتج الحقيقي، يتم تحريك الزر نفسه، والتركيز عليه باستخدام لوحة المفاتيح، والضغط عليه، وتعطيله عندما يكون النموذج غير مكتمل، ويتم تحميله أثناء إرسال الطلب. كل واحدة منها عبارة عن حالة واجهة مستخدم، وكل واحدة منها تحتاج إلى تصميم.
يساعد على الفصل بين مجموعتين. تأتي حالات التفاعل من المستخدم: التمرير والتركيز والضغط والتعطيل. تأتي حالات البيانات من النظام: التحميل، والبيانات الفارغة، والجزئية، والخطأ، والنجاح. على سبيل المثال، تحتاج شاشة القائمة إلى تصميم عند تحميلها، وعندما لا تحتوي على عناصر، وعندما تحتوي على عنصر واحد، وعندما تحتوي على مئات، وعندما يفشل الطلب.
تستحق حالات التركيز اهتمامًا خاصًا. يعتمد الأشخاص الذين يستخدمون لوحة المفاتيح أو جهاز التبديل على مؤشر التركيز المرئي لمعرفة مكانهم. تعد إزالة المخطط التفصيلي لتركيز المتصفح دون استبدال أحد أكثر حالات فشل إمكانية الوصول شيوعًا.
يعد التغيير بين الحالات جزءًا من التصميم أيضًا. يؤكد الانتقال القصير والواضح من الوضع الافتراضي إلى الضغط على النقر. حالة التحميل التي تتحول بسلاسة إلى نجاح تخبر الأشخاص بأن عملهم نجح. القفزات المفاجئة، أو الرسوم المتحركة البطيئة للغاية، تجعل الواجهة تبدو غير موثوقة.
إحدى الطرق العملية لتجنب الحالات المفقودة هي إدراجها لكل مكون قبل التصميم، أو نمذجة المكون كآلة حالة: مجموعة من الحالات والأحداث التي تتحرك بينها. ExodeUI، الذي نصنعه، يعمل بهذه الطريقة. يمكنك تصميم كل حالة والانتقالات بينها في ملف واحد، ويرسل الكود الخاص بك الأحداث التي تقوم بتبديل الحالات في التطبيق الحقيقي.