I attended a talk yesterday on “Java FX meets Metro” by David Qiao. Going in, I was hoping for some information about deploying JavaFX on Windows 8 in some format that is acceptable by the new windows 8 app store. In fact, this talk was not about that at all. Rather, it discussed strategies for creating a Metro-esque user interface using Java FX and didn’t talk about deployment at all. Even so, I got quite a bit useful information from the talk.

Some highlights:

1. Metro is a set of guidelines for the development of user-interfaces that are optimized for touch-based interfaces.
2. Many user interface paradigms that worked well with desktop applications, don’t work so well for touch devices (e.g. tree navigation, breadcrumb controls).
3. Java FX makes it relatively simple to design a Metro-esque UI with its animation and CSS support.

There are basically two kinds of metro-style apps:

1. Flat – e.g. just one view, maybe some tabs.
2. Hierarchical – Multiple levels.

Hierarchical apps should contain only 3 levels:
1. The hub page. Like the homepage with a view of all of the content – or at least a good summary.
2. A Section page. This would be a list of individual items for the user to select.
3. A Detail page. This shows a single item of the application.

Metro also introduces the notion of a semantic zoom to be able to move to a more or less detailed view of the information. E.g. in a section page you can “zoom” in on an item to show its sub-items. Similarly you can zoom out of the sub-items to see a more succinct view of the items.

Just as desktop applications of some common components (e.g. menu bars, windows, etc..), Metro apps have their own common components. These include:

1. A tile (like an icon, but usually presented as a flat rectangle).
2. Tile pane (a tile that contains a bit more content).
3. Nav Bar – A menu usually at the top or bottom of the UI providing transient access to other areas of the app.
4. App Bar – A more contextual menu providing actions that the user can perform in the current context.

One key design principle that is a departure from traditional UIs is that you almost never see vertical scrolling. Scrolling is almost always horizontal. This, intuitively seems more natural to the user (like turning the page of a book) when on a touch interface like an iPad.

I’m keen to try to adopt some of these principles to my own apps. Especially html5 apps. It should be relatively easy to build a metro-esque application using HTML and CSS. The rewards could be great to the user as it really seems like Microsoft has gotten a lot right with these principles.

Now to see what I can find in the way of existing Metro HTML5 stylesheets and Javascript/jQuery libraries.