Are there any recommendations for the layout of Metro forms UI with hierarchical data on a website?

Question

Most of the guidelines I find regarding Metro design deal with read-only or media content with few text input controls. Are there any design guidelines/examples/screenshots showing good layout of input forms with hierarchical data (i.e. nested Group boxes/sections) and a potentially large number of various types of inputs controls.

I should also mention that this will be a web site so interaction will be primarily by mouse, not touch; but I want the metro look since it will also be used in tablets. The information needs to be in one vertically scrollable page (i.e. this is not a wizard).

An example of the type of data:

• General Information
  • First Name
  • Last Name
  • Age
• Contact Information
  • Phone numbers (add/edit/remove different types)
    • Home
    • Work
    • Cell
  • Addresses (add/edit/remove different types)
    • Home
      • Street1
      • Street2
      • City
      • State (drop-down list)
      • Postal Code
    • Work
    • School
• Group A
  • More fields

I currently favor labels above textboxes and help hints on the right of the control. I am just not sure how to best group the data visually (headings, outlines, fills, margins).

Answer 1

There really isn't one great end-all-be-all answer for form layout, even in the context of the Metro. Metro is just another Design Language meaning that things are supposed to be styled similar but may not necessarily need to be laid out similarly.

As well it should definitely be noted there are no guidelines for Metro styled websites.

As for your thought on labels above textboxes, while not explicitly stated (that I could find) it is the way they've been leaning for a while and most all of the guidelines screenshots will have fields formatted as such. Consider the Windows 8 guidelines on text input as an example. I've seen this mainly in mobile applications and haven't seen it much on any of Microsoft's newly redesigned and metro-ized websites as they don't have too many lengthy forms. They have instead been leaning towards right aligned labels for short forms. I can see if you have a larger form how the top placement might be considered better.

You'll need to consider the same form guidelines you would generally use elsewhere in a web application. The concepts that apply to both, also apply to Metro stylized websites. What you will definitely want to consider though is the Windows 8 Silhouette and it's grid system which defines specific margins for their desktop apps overall and for some content areas. Reading up on that and other guidelines included on that site should help you significantly with your layouts in the context of Metro.

An example of applying these conepts to your layout would be how you handle breaking up all the input fields you have. In general when you have a lot of fields you break them into sections, and some sections end up on another page sometimes. In the context of Metro and your example you'd want to probably break it into sections/pages (which map to the bigger categories of your form) so the user doesn't have to scroll through screens and screens worth of data. The sections could expand or collapse.

The main thing to note here is that there really are note any explicit guidelines for Metro-ized websites at the moment. You can read up on the Metro guidelines for Windows 8 and Windows Phone and then try to port their concepts and generalizations over to the web accordingly.

Answer 2

The best example I have is the Windows 8 Control Panel:

Image taken from Windows for Devices

The basic idea is that your top-level navigation is a scrollable list; you can select one and then any further hierarchy is achieved typographically (e.g. "Privacy > App History > Number of apps in my history").

Depending on the length of the form, even this might be overkill. What you're describing is simple visual hierarchy, something Metro pretty much defines using typography (case, font-size, leading and whitespace).

Answer 3

There are actually many examples within the Metro Design Style Guide that you can apply (which is also part of the problem). Some of the examples from the top of my head include:

• Office 2013 File Tab that uses a vertical menu on the left and the content pane on the right that exposes a left to right and top to bottom hierarchy
• The Microsoft Outlook or Outlook.com (i.e. Hotmail) interface that also uses as similar hierarchy but with more levels of hierarchy
• The Metro UI Listview design style, but you'll have to work out how to apply additional levels of hierarchy because it is only designed for the Apps with should not use very deep levels of content nesting

I don't know if there really is a very consistent application of the design style, but that is the nature of the Metro design language, which relies more on user interaction and strong IA and simplification of design elements to achieve the intended look & feel.