💡 Why do we need guidelines?
- 🧭 Easier Navigation – Users can quickly find what they need without confusion.
- 👀 Instant Recognition – A consistent design helps users immediately recognize they are on an AET platform.
- ⚡️ Improved Efficiency – Familiar layouts and interactions reduce cognitive load, making tasks faster and more intuitive.
- 🆗 Professional & Trustworthy – A polished, cohesive UI reinforces credibility and trust in our applications.
- 📱 Seamless Multi-App Experience – Users moving between AET apps experience a unified interface, reducing friction.
By following these guidelines, we create a seamless and enjoyable experience for all users. 🚀
⚠️
These guidelines introduce the core principles of good user interface (UI) and user experience (UX) design for web applications. They are meant as mandatory reading for all project members designing or implementing user-facing features.
🎯 Core Principles
1. Simplicity
- Focus on clarity and purpose — every element must justify its existence.
- Avoid clutter, technical jargon, and redundant actions.
📖 References:
2. Consistency
- Use uniform colors, spacing, icons, and component behavior.
- See the spacing guidelines
- See the color guidelines
- Follow a design system (Material, Bootstrap, or your own).
📖 References:
3. Feedback
- Every user action should produce visible system feedback (loading, confirmation, error).
- Use progress indicators and clear status messages.
4. Accessibility
- Ensure usability for people with disabilities (contrast, keyboard navigation, ARIA labels).
- For more details refer to the accessibility guidelines.
5. Learnability & Affordance
- Users should immediately understand how to use an interface.
- Make clickable elements look clickable.
📐 Layout & Interaction Basics
| Aspect | Good Practice | Example |
|---|---|---|
| Navigation | Keep menus short and visible; highlight current location | |
| Forms | Group related inputs, show inline validation, avoid long forms | Baymard Institute: Form Design Best Practices |
| Buttons | Use consistent styles for primary/secondary actions | Button guidelines |
| Error Handling | Explain what went wrong and how to fix it | UX Design.cc: Error Message Design |
| Responsive Design | Test across devices and screen sizes | Google: Responsive Design Basics |