Presentation is loading. Please wait.

Presentation is loading. Please wait.

UX/UI changes for Windows 10 apps

Similar presentations


Presentation on theme: "UX/UI changes for Windows 10 apps"— Presentation transcript:

1 UX/UI changes for Windows 10 apps

2 Tabs and Pivots In Windows 10 the pivot control has taken the step into desktop apps. i.e. no scrolling left to right to see more widgets. Although this layout will be supported, it is not recommended in Windows 10. The pivot control comes in Stationary and Carousel Mode.

3 Back Button A back button provides backward navigation in the form of a button. Example The back button appears in the upper-left corner of the screen: Recommendations Use the back button in apps that have a hierarchical navigation pattern.

4 Introducing Command bars ‘ … ‘
Command bars consist of two components: the action space, for placing commands or nav items that you want to remain visible, and the "More" area, which is represented on the command bar as an ellipsis [•••]. Example Infrequently used actions can remain in the overflow menu even when the app bar is expanded on larger screens. Recommendations The "More" affordance [•••] is the visible entry point for the menu, and sits on the far-right of the toolbar adjacent to primary actions.

5 Context menus Use context menus for Contextual actions on text selections, such as Copy, Cut, Paste, Check Spelling, and so on. It can also be used for Custom commands. Example A cascading context menu would be used for a more comprehensive collection of commands. It features one flyout level and can scroll. Use separators as needed to group similar commands. Recommendations Keep context menu commands short. Longer commands end up being truncated.

6 The nav pane button ‘’Hamburger’’
The nav pane button is visualized, by default, as three stacked horizontal lines and is commonly referred to as the "hamburger" button. The button allows the user to open and close the pane when needed and does not move with the pane. We recommend placing the button in the upper-left corner of your app. The button does not move with the pane.

7 Calendar view There are four date and time controls to choose from Calendar view Calendar date picker Date picker Time picker

8 No charms bar Windows 10 does not support charms bar, All the functions of the charms bar are now accessible through search or under settings x

9 Introducing Action Center
Instead of charms bar, a new action center has been introduced. This can be accessed from the bottom right menu. It has handy options like settings, flight mode, switching to and from Tablet Mode, changing account settings etc.

10 Getting rid of the App Bar
With Windows 10, and Microsoft’s renewed focus is on traditional desktop interactions. Applications like maps and Cortana are using hamburgers, commands up top, and contextual app bars at the bottom of the screen. If we look specifically at the new Windows 10 preview for phones, and to the universal photos app, the app bar is not utilised. Recommendations Don’t be afraid to embrace the hamburger menu, and to be rid of the app bar in your desktop/tablet apps.

11 Toast Notifications Toast Notifications are displayed on bottom right corner for Windows 10 Apps.

12 Dialog Box UI for the Dialog Box has changed on Windows 10.
Its smaller now, similar to a pop up

13 Adaptive View With the new simpler approach to creating Universal Apps, we have to face the challenge of creating UIs that work on all devices irrespective of the screen real estate

14 Vertical Scrolling Vertical scrolling instead of horizontal scrolling has been introduced. Examples: Windows store Weather App Maps

15 Settings UI has changed
Settings are accessed from the action bar now instead of the Charms Bar. App Settings will be different as compared to the device settings. New Themes have been introduced.

16 References and Guidelines
Guidelines App References Maps Weather Windows Store Mail Film & TV


Download ppt "UX/UI changes for Windows 10 apps"

Similar presentations


Ads by Google