Another too long; did not watch summary of the Build 2015 session I just watched: Design: UX Patterns and Responsive Techniques for Universal Windows Apps
The goal when controls for Windows 10 apps were designed – single API across all types of devices, screen sizes, input options. But each platform should also get tailored UI experience.
Example – specific Context Menu based on input method mouse vs touch:
Effective pixels – screen sizes are measured in effective pixels that are based on physical screen size, screen resolution and expected distance from the user, keeping the same visual size of elements on all platforms.
Breakpoints – when designing your app there are typically three breakpoints when app layout should change from one to another:
320 epx, the minimum default view -> 720 epx, first breakpoint-> 1024 epx, another breakpoint. This is only example, it’s up to you how you design your app.
Example: Mail app
Universal app patterns – each app screen usually consists of three parts: Content, Navigation buttons and Command buttons
Most common navigation patterns, how content/navigation/commands are placed on a screen, observed in real world apps, not just in Windows Store:
Pivot – typically Contacts app. Useful when navigation between set of pages is common task. Avoid controls with horizontal interaction – Map, ToggleButton. No more than 6 pivot items should be used. In Windows 10 it’s possible to layout all Pivot items next to each other, useful on large screens.
Tabs – typically Twitter app. Variant of pivots with fixed order tabs on top of the screen. Muscle memory for easy content switching. No more than 5 tabs should be used.
Hub – typically Xbox hub. useful for displaying complex pages, lot of content at the same time. Good for content consumption, not for creation. Works good with touch and gamepad.
Master-detail – typically contact detail. Clear hierarchy of list and master content
Hamburger – typically Office or Mail apps. used for infrequent navigated items, allows more content to be displayed. On large screen could be expanded by default. Hamburger symbol very common and well known among users. Works best when placed top left according to usability testing.
6 R’s of responsive content when switching between small and large screen sizes
Resize – when screen gets wider, the content is simply expanded, typically TextBlock
Reflow – similar to Resize, but more columns are added when the screen is wide enough. Easier for large text reading.
Reposition – when screen gets more wide than narrow, content shown previously under the main block is placed on the right of the main block. Great use case for the new RelativePanel control.
Reveal – when the screen is wide enough, additional content block is shown, that was previously hidden or available only on-demand.
Re-architect – similar to Reveal, but panel order is changed when screen is large enough.
Replace – more complex UI change, when the screen get wide enough some controls collapse and some new controls are shown that better suit the new window size.