Best Practices for Niagara PX Graphics Design

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)