Heads-up display Preview
The heads-up display, or HUD, is a progress indicator that appears on a backplate and can give additional text information about the background task that’s occurring.
HUDs have more visual weight than other Fluent iOS progress indicators and are good for communicating quick, user-initiated processes that don’t change the user flow, like saving or downloading. If you need to communicate that new content is loading, try an activity indicator, a progress bar, or a shimmer.
Resources
Behavior
Modality
HUDs are modal by default and will appear centered on-screen to block interaction with the interface behind them. Since they are an interruption that will pause someone’s flow, use them for quick tasks. If a task takes longer, consider using a non-blocking HUD to allow continued interaction.
Canceling a process
In cases where you want to allow someone to stop the background process, use the Tap gesture callback variant. This will prompt a message to confirm the cancellation.
Labeling completion states
HUDs don’t have a built-in completion state, but you can update the HUD label to give people an idea of what’s going on in the background and when it’s done.
Content
Use verbs that communicate what’s happening. It helps if the verbs reflect the action someone just took, i.e. a “Copying” HUD after selecting a “Copy” action. Avoid generic terms like “Loading” or “Working on it” if it’s possible to be more explicit.
HUDs have a max width of 192 pixels. Keep labels brief to avoid awkward line wrapping.
Reflect the action word that triggered the HUD whenever possible