microsoft / microsoft-ui-xaml

Windows UI Library: the latest Windows 10 native controls and Fluent styles for your applications
MIT License
6.34k stars 677 forks source link

Proposal: Improve UX of menus opened with mouse #508

Open YuliKl opened 5 years ago

YuliKl commented 5 years ago

Proposal: Improve user experience around focus and keyboard interactions within menus opened with mouse

Summary

When a user opens a Xaml context menu by right-clicking with mouse, no focus rect is visible. When the user hits the down arrow key inside the open menu, a focus rect gets drawn around the second item in the menu. This behavior doesn't meet user expectations, especially for users most familiar with Win32 (e.g. File Explorer). We should consider improving the consistency of focus within menus across all of Windows.

Rationale

There are several principles that complicate this problem.

  1. We generally try not to show keyboard focus visibly to users unless they are using the keyboard to navigate.
  2. Xaml UI elements have focus, whether or not the visual focus rect is drawn on screen.
  3. We want to improve user efficiency by eliminating unnecessary key strokes when performing a task.
  4. Xaml should strive to replicate the Win32 experience unless there's a clear reason not to do so.

If these principles are followed, the ideal usability of context menus would be different depending on the input method (mouse or keyboard) used to open them.

We should determine whether this differentiated behavior can be added to MenuFlyout and CommandBarFlyout controls.

Functional Requirements

Important Notes

Open Questions

mikedn commented 5 years ago

Pressing down inside a menu opened with mouse should draw a focus rect around the first item in the menu.

That's basically what the Win32 menus do, with one exception. In Win32 menus do not actually show a focus rect (thin dotted line), the menu item is simply show as selected no matter if keyboard or mouse navigation is used.

Opening a menu with keyboard should show the focus rect around the first item, and pressing down should move the focus rect to the second item.

IMO that's a bad alternative. Not only that it behaves differently from Win32 but the XAML focus rect is pretty ugly/intrusive/distracting compared to the Win32 one.