Engineering ReferenceEngineering Reference

UX / UI Design

On this page

UX design shapes how a product feels to use; UI design shapes how it looks. The two are inseparable in practice — and in industrial software (HMIs, MES, SCADA dashboards) they directly affect operator effectiveness and safety.

Overview

Good UX/UI reduces task time, reduces errors, and reduces training. Bad UX shows up in tickets, mis-clicks, and incidents.

Process

  1. Discovery & user research.
  2. Personas & journey maps.
  3. Information architecture & flows.
  4. Wireframes & low-fi prototypes.
  5. Visual design + design system.
  6. High-fi prototypes; usability testing.
  7. Hand-off + design QA.
  8. Measure & iterate (analytics, feedback).

Research

  • Interviews, contextual inquiry, diary studies.
  • Usability tests — moderated & unmoderated (Maze, UserTesting).
  • Surveys, NPS, CSAT, SUS (System Usability Scale).
  • Analytics & heatmaps (PostHog, Mixpanel, Hotjar, FullStory).
  • 5 users find ~85% of usability issues (Nielsen).

Information Architecture & Interaction

  • Card sorting & tree testing for navigation.
  • Affordances, signifiers, feedback (Norman).
  • Fitts’s Law — target distance & size affect speed.
  • Hick’s Law — choice count slows decision.
  • Minimize cognitive load; recognize over recall.

Visual & Systems

  • Design tokens for color, type, spacing, radius, shadow.
  • Component libraries (Figma + code library in sync).
  • Type scale (e.g. 12/14/16/20/24/32 px) and 4- or 8-px spacing grid.
  • Mature systems: Material 3, Apple HIG, Polaris, Carbon, Atlassian.

Accessibility

  • WCAG 2.2 A / AA / AAA conformance levels.
  • Color contrast 4.5:1 (body) / 3:1 (large text).
  • Keyboard-navigable; visible focus states.
  • Semantic HTML; ARIA only when needed.
  • Screen-reader testing (NVDA, JAWS, VoiceOver).
  • EN 301 549 and US Section 508 in procurement.
reference page