Problem

New PX graphics often feel cluttered, confusing, or slow. Users report navigating is difficult and important information gets buried.

Best Practice Guidelines

1. Display Only Critical Data

• Show setpoints and feedback needed for diagnosis and control only
• Example: AHU graphic should display supply air temp, flow, and damper position—not every sensor or diagnostic point
• Hide redundant data behind collapsible sections or detail views

2. Follow Control Logic Flow

• Graphics should reflect the actual control sequence logic
• Show cause-and-effect relationships (e.g., if OAT rises, damping position increases)
• Use animation only on feedback, never on command state (this is misleading)

3. Use Schematic, Not Decorative Layouts

• Draw piping/airflow paths accurately (not to scale but directionally correct)
• Use industry-standard symbols for components (valves, dampers, fans, etc.)
• Avoid photorealistic images—they add clutter without clarity

4. Consistent Labeling and Fonts

• Use clear, readable font (minimum 12pt for tablets, 14pt for phones)
• Label all inputs and outputs consistently across similar graphics
• Use abbreviations sparingly (define them on the page or in a legend)

5. Color Standards

• Red = Active/High/Alert
• Blue = Standby/Cool/Informational
• Green = Normal/OK
• Gray = Disabled/Unavailable
• Avoid pure red/green combinations (colorblind-unfriendly)

6. Test Navigation

• Ensure all major actions require 3 clicks or fewer from the landing page
• Provide "Home" and "Back" buttons on every graphic page
• Test on actual tablets (not just desktop)