The new preview for Azure was announced back in April at Build but I’ve only just seen it. This is there third attempt at the UI after the initial Silverlight then HTML designs.
Demo: https://www.youtube.com/watch?v=xol4nQU3N_c
Steve Sanderson taking you through how Microsoft built the portal: https://vimeo.com/97519516
It’s starts with a Win8 style home page with customisable live tiles that Microsoft are calling the Start board.
You then select from the main menu on the left hand side which opens a drop down which a multitude of options.
Once a feature has been select a vertical pane or window appears, which Microsoft are calling blades. Once you select an item from that blade a new pane opens the right giving you more information about your selected item. This process continues horizontally, as you drill down into your hierarchy of data.
Each blade has a maximise button that full screens the blade you are working on and close button to return to the previous view. Using these techniques Microsoft has given us a wide surface area of horizontal (more blades) and vertical (tall off screen blades) working area.
You can also pin a blade to the home page from a right click context menu, giving you an easy shortcut for future use.
They’ve also used the top of each blade to give an area to action buttons (see the dark area at the top).
The blades have discoverable scrollbars so its not until your mouse is over the blade that you see a vertical scrollbar for more content. Not sure if that is effective for touch… The site generally definitely has touch in mind with big buttons, icons and menu options.
Apparently each blade runs in isolation using iFrames and talks to the host (startboard shell) via apis.
Oh and it has a splash screen on start up:
Here is a few quick screenshots from the old HTML version:
Borderless tabs are used for navigation:
Wizard accordion for multi step.
