Windows Phone Hub Control

In this article i will write about our experience with the Xing App main menu development.

What do we talk about?
When you think about a Windows Phone, the first association that comes up is this metro style and the live tiles.
The big new thing with the WP7 is this HUB control. It is the central place on the WP7.
Some apps make use to have such a HUB in the app. But be careful! We had some problems in the submission with it. Microsoft is not so happy about it when your menu is too similar to the WP7 hub. Microsoft will not confuse the user to much.

The idea was to include all nessesary informations in the menu in the familiar WP7 Metro style.
It shows your xing network activities in one screen.
In the beginning of 2011 we had care about our main menu and our concept.
During the development of the Xing app. We talked often about what we do if we have new functionality. Do we increase the tiles of our menu. Or what should we do?

Increase the tiles change the design.but each user has his workflow with the app. A change to the app will cause a rethink of the workflow. The user still knows where he can find the functionality.We decide to do not more then six tiles in the main menu.
But in v1.3 comes the 7th tile and they did not matched in the current concept at all.

WP7 Xing Hub Control in v1

And then came Mango
In the early summer time with the first announcement of "Mango" - the codename of Windows Phone 7.5 - we had the idea to use also the backside of each tile.

We had a critical point of view of it. First, the new tiles turn automatically around. You have no option to do it by yourself. Second, you got no information about the tile from the other side. 
We struggled around with these problems. We had a lot of concepts but also a lot of respect to submit these changes. We did not know if the users will like these changes and is it usable?
Also we had still some open questions:  How to turn a tile?

• only turn one tile
• turn all tiles
• only turn tiles wich offer this functionality

The decision after our intern tests was to ends in turn all tiles. In this way there is always the same behavior behind this functionality. 
Another problem was the usability for this functionality.
We made first tests with a custom slider/button with arrows to turn the tiles. But this did not feel right. Furthermore - how shall the tiles be animated?

First draft how to turn a tile

 We tried some solutions and we are really happy about this vertically flickr gesture to turn around our tiles. You are also able to shake your handy to do this.
The animation is similar to dominos and will in a round robin style physical correct animated.

When you navigate to the main page the tiles will shake a little bit to give a hint they are turnable. But what is with the information from the backside e.g. contact count, message count...
After a lot of brainstorming we came to a really cool idea. How to show information from the backside? How about to show a folder edge from the backside?
We called the feature "dog-ear" since it reminds the folded edge in a book. The user sees that there is something behind (same color like the reverse). On this edge the information from the backside tile is also visible.
This feature also increased the users advertent and many users touched on it.
So it is also possible to trigger the tiles turn around with it. 

Xing app Hub Control in v2

It was our intention every user will see this feature by playing around with the app by own.
It is very interesting for us how is your experience with it?
Do you just understand how to use it?

We are really happy about all your feedback!