Style In The Round

March 13, 2013

As part of my job I get to talk with a lot of developers, designers and product managers. When the subject of User Experience comes up (and it always does), I always emphasize the importance of thinking “outside the box”.

Yes, I know. It is a horrible cliché, a vestigial remnant of bad management consulting that should have gone the way of sock puppets. But stick with me for a second, it isn’t what you assume it is.

When I say this, I tell them, I mean it literally. Think about your actual user’s actual experience, not some generalized design guidelines. If you wedge your user’s experience into a design that doesn’t fit, you are serving neither your customer nor the platform. Do something amazing that will wow your customer’s and make their experience something they’ll talk about. “Don’t feel constrained by rectangle tiles, make them round if you want” I tell them.

Honestly, it is a bit of a joke. Obviously making your Modern UI titles round isn’t going to “wow” anyone. That said, one of my favorite UX examples happens to be Nature Space which…wait for it…uses round titles.

Having made this pitch dozens of times someone finally called me on it recently. “Okay, how can I do that?” they asked. Uh… Truth be told, I hadn’t given it much thought. So I sat down this past weekend to give it a shot.

Today I give you <insert drum roll> ROUND TITLE STYLE <insert cheering crowd>.

In all seriousness, it was kind of fun to do. And it turned out to be a decent example of how to extend the default Windows Store App styles.

To accomplish the effect I took the default Item templates for GridVIew and ListView from Standard Titles and used ellipses to create the affect. It was actually quite simple. I also made some changes to the Grid View’s Item Container template so that interactivity (i.e. mouse over) respects the round format a bit better. Turning it on is a matter of adding the Resource Dictionary to the app.xaml file and apply the style to the control.

If you want to try it yourself, I’ve packaged up the Resource Dictionary with the styles. They will work out of the box with the standard XAML/C# Grid and Split templates. I’ve also packaged up a sample project that implements the styles.