Novel UI motion and interaction opportunities

[SOjaHPE]

The HPE Design System has been proactive with supporting enhancements to our UI framework components which make our products more approachable. These novel 'microinteractions' provide polish, elegance, professionalism. Makes GLCP and HPE services feel real world and not artificial and flat. The benefits of this is progressive disclosure/transitions as pages load, provides a focal point where the user's attention should be placed. Makes our products more inviting and predictable and align with branding.

Current components supporting this initiative

• Button
  • Button hover
  • Button - busy state
• Skeleton
  • Scroll effect
  • Scroll content
• Spinner
• Box

Supporting resources / articles

• NNg - The Role of Animation and Motion in UX
• NNg - Microinteractions in User Experience
• Medium - Creating Usability with Motion: The UX in Motion Manifesto

Related backlog ticket: 2915

Completed branding and components that support interaction and motion:

Distinctive-brand-assets

• Color and texture styles
• Typography styles

Additional opportunities to explore

• Global header
• Pageheader
• Layer / modal e.g. rendering / reveal and dismissal
  • contextual help
• Responsive breakpoints
  • transitions between adaptive layouts / css grid
• Interstitial pages e.g. moving from one portal to another
• Tab transitions
• Notification badge
• Data collection rendering
  • empty states / day zero
  • card views
  • list views
  • maps
    • rendering markers and cluster nodes, drop on the map
    • as the user zooms, clusters transition as they break apart to smaller clusters / individual marker nodes
• Add / remove item
• Apply filter to data collection
• Search icon button to render the keyword input
  • Reveal / dismissal of the search field
• Tags
  • add / remove to tag, how the set reflows when wrapping
• Metric rendering
• Chart rendering
• Theme mode switching
• Notifications e.g. rendering / reveal and dismissal
  • Inline
  • Toast
  • Global
• Form field validation messages e.g. rendering / reveal and dismissal
• Wizard steps
• Content replacement e.g. feedback submission
• Progressive disclosure content (content rendering)

Need follow-on tickets for next steps

[Aleeesa85]

If/when this is closed, would be great to get a link to demo the components. :-)