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.
- Metro is a set of guidelines for the development of user-interfaces that are optimized for touch-based interfaces.
- Many user interface paradigms that worked well with desktop applications, don’t work so well for touch devices (e.g. tree navigation, breadcrumb controls).
- 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:
- Flat – e.g. just one view, maybe some tabs.
- 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:
- A tile (like an icon, but usually presented as a flat rectangle).
- Tile pane (a tile that contains a bit more content).
- Nav Bar – A menu usually at the top or bottom of the UI providing transient access to other areas of the app.
- 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.