Bundled in the Windows 8 Consumer Preview there are a number of new Metro apps being unveiled which gives us UI/UX designers an opportunity to see how Microsoft have tackled the challenge of building a Metro app that displays effectively in both snapped (to the side of the screen) and full screen modes. As we’ll see, it is (in my opinion) with mixed success. We’ll be looking in turn at the:
- Calendar
- People
First up, the Calendar app…
A couple of things to note before we start:
- The minimum, horizontal screen resolution for seeing Metro apps is 1024 pixels.
- The minimum, horizontal screen resolution that allows the snapping of a Metro app to the side of the screen is 1366 across which results in a snapped view that is 320px wide and the full screen app taking up 1024px with the remaining 22px begin used as the splitter between the 2 apps.
Of course the “full screen” view could be a lot larger than 1024px depending on the users screen resolution, but 1024px will always be the minimum width in that mode.
Calendar Full Screen Mode
Full screen Metro Calendar app
Despite the snapped People app, the Calendar app is being displayed in full screen mode at 1024px across. As the horizontal space increases (either by un-snapping the other app or by having a larger screen resolution) the view just happily expands to fill the available space both vertically and horizontally with proportional stretching of the days.
There is a month, week and day view available (via the application menu) although the day view seems to be the same as the week view except showing just 2 days. Also in the application menu is a button to return focus to today’s date.
This view is very easy on the eye and very nicely provides an overview of your calendar showing enough info in each item to let you know what it’s about. I’ve got items being displayed there from Exchange, Facebook and Windows Live all with different background colours (but unfortunately not the same colours that I’ve configured on my Windows Phone… potentially those settings should be shared across devices).
Using Touch
- Swiping horizontally between months is very intuitive, fluid and smooth.
- Tapping on a blank space opens the Calendar Item view with the date/time context.
- Tapping on a Calendar Item opens it as expected.
Possible improvements/things I expected it to do and didn’t:
- Semantic zoom on multi-touch pinch/unpinch between month/week/day view.
- No easy way to quickly jump to another point in time. Potentially tapping the month/year heading could open month/year spinner controls?
Using the mouse/keyboard
- When the mouse is moved, an arrow button appears in the top left and right to allow you to move to the previous and next month. Everywhere else in Metro apps and the start menu you see a scrollbar across the bottom to replicate the sideways touch swipe action so it is an interesting break with consistency here.
- Using the left/right cursor keys progresses you can move a month at a time back and forth which is far more convenient than using the mouse.
Possible improvements/things I expected it to do and didn’t:
- No keyboard navigation of Calendar Items themselves, you have to use the mouse.
- If you try and drag the view using the mouse it will open the Calendar Item view in add mode (often do this when switching between touch and mouse). Perhaps if a the mouse down and up are separated by a large enough move then don’t open the add Calendar Item would be eliminate these accidental actions.
- In week or day view I would expect the up/down cursor keys to scroll the view vertically. You currently need to use the mouse on the scrollbars to scroll despite being able to “scroll” horizontally using the left/right cursor keys.
- Probably a general Metro issue but not sure how to access the Application Menu using the keyboard. The Alt key was my first thought but no joy.
Calendar Snapped Mode
Snapped Metro Calendar app
Like the full screen view, this view is very nice to look at and makes good use of the space available. This snapped view only allows the full month view and will switch to that view if snapped when in the week or day view.
The selected day is highlighted and any Calendar Items for that day are listed below in a very clear way.
The days are still big enough to easily select using touch and swiping left and right still moves between months. Using the mouse is also similar to the full screen mode with arrows appearing above.
Possible improvements/things I expected it to do and didn’t:
- Unfortunately the ability to cycle through months using the left/right cursor keys seems to not work in this mode.
- A day view would work well in this snapped view and should be an option.
Calendar Item Full Screen Mode
Full screen mode Calendar Item
The Calendar Item view shows a vertical list of the majority of the properties down the left (which scrolls independently) with the title and notes section taking the prominent position filling the remainder of the screen.
The labels have become a lot more informal compared to Outlook with “What”, “Where”, “When” replacing Outlook’s “Subject”, “Location”, “Start Time”.
The cross in the top right closes the view and returns you to the Calendar and is not to be confused (as I was) with delete (which is a big cross in Outlook!) which is actually to be found in the Application Menu.
Using Touch
Metro Wrapping Combo
- All works well with touch and it is quick and easy to fill in the details.
- Combo/Select boxes all work very nicely with the items wrapping at their extremes (see image on right).
Using the mouse/keyboard
- On opening a new Calendar Item the cursor’s default focus is in the What/Subject area (heading in right-hand section).
- Tabbing then takes you through the save (which performs a save and close) and close buttons before progressing through the notes area to the main list of properties on the left.
- Alt+ cursor down opens the combo/select menus as you’d expect with cursor up/down navigating though the items.
Possible improvements/things I expected it to do and didn’t:
- Ctrl+S doesn’t save the item.
- I can’t find a way to close the Calendar Item view using the keyboard (without tabbing back up to the close button which could be a number of tabs away). I would have thought the Esc key would have done that forcing you to use the mouse to hit the close button (the one that looks a bit like the Outlook delete button).
Calendar Item Snapped Mode
Snapped Mode Calendar Item
The split screen view now disappears and what was the properties side panel now takes over pulling in the What/Subject field to it’s top and the notes field disappears down to the bottom of the list. Interesting that the field that had full reign over the remaining screen real estate in the full screen mode is now relegated down to the bottom of the pile.
The touch, keyboard and mouse usage of this view is the same as before and is in general pretty good. I just want to press Escape to close it (and get the save prompt) and I’d be happy.
Live Tile
The live tile for the Calendar cycles through the remaining appointments for the day giving the glanceable view as you’d expect.
On the Lock Screen you are shown just the next appointment for the day. Given the room available it would be nicer if this could show at least the next 2 appointments.
Summary
This is by far the best use of the different layout modes that I’ve seen as yet in a Windows 8 Metro application and definitely has some good patterns that we can use for inspiration.
Next up, the People app…
