Struggles with the Panorama Control

At the start of the project, I read through the UI design guide for the windows phone. It is a really important first step towards understanding the design intentions of the people who were closest to making the phone.

One thing captured my eye – the idea that we didn’t have to be constrained by the bounds of the phone – by using the Panorama my application could be a long stretched out ribbon. I was giddy with excitement over all the screen real estate!

My next step was to grab my trusty notebook and sketch out all the screens I would have. Obviously there would be the scramble board, a list of words, a statistics screen, and a games screen to save/load.

Once I had figured out the general shape of my application I started building it – creating a separate user control for each page. Things were going well until I ran into a series of problems with the panorama control…

Problem 1: Using interactive controls on a panorama

My first challenge came quickly. Much like the problem described in this article with a map control, the game board screen allows you to drag and drop pieces to the bottom drop area. I could pick up a tile (no problem), but the moment I started moving it, the Panorama overrode my drag handling and started animating to the next page.

I had a massive conflict in gestures that I needed to solve. It took me several days to work out, but I realized that essentially the solution was – while a piece is in motion during a drag, that activity trumps any other gesture you might be doing to the phone. Using the ManipulationStarted event on a child of the Panorama, I would call e.Complete() while the drag was in progress. Once the drop was completed, I unsubscribed from the ManipulationStarted event. This allowed my drag to trump the flick of the panorama.

Problem 2: Where do the buttons go?

I struggled for a while with where to put a “new game” button. I experimented with the application bar so that I could have icons… but an applications bar and a panorama just don’t go well together. Between the panorama and the applications bar, I nearly ran out of all usable space to make the rest of the app.

Frustrated, I left it for a while as a series of buttons (which looked terrible) on the games page. At the end of the day I came up with a compromise – I liked the look of the application bar icons, which were handily available on the hard disk at “C:\Program Files (x86)\Microsoft SDKs\Windows Phone\v7.0\Icons”.

With this small fragment of XAML I had the look I wanted:

<Border MouseLeftButtonDown="CreateNew_Click" Width="60" Background="Transparent" Margin="0,20,20,0">

<Grid>

<Grid.RowDefinitions>

<RowDefinition Height="48"/>

<RowDefinition Height="auto"/>

</Grid.RowDefinitions>

<Image Width="48"

Source="/MyAppName;component/Images/appbar.basecircle.rest.png"/>

<Image Width="48"

Source="/MyAppName;component/Images/appbar.new.rest.png"/>

<TextBlock Text="new game" TextAlignment="Center"

TextWrapping="Wrap" Grid.Row="1"/>

</Grid>

</Border>

Problem 3: Setting the current page

Getting the “new game” button to elegantly show the scramble screen.

My new games button was on the last “Games” page and I wanted to have immediate feedback that it actually created a new game board. The best way I thought to do that was to navigate back to the “Scramble” page after the new game button had done its magic. I was totally confused because there was a SelectedItem property on the PanoramaControl, but it was read-only – I couldn’t change it. After digging around, I finally found the “DefaultItem” property, which successfully changed the current page.

I was disappointed to learn that if you want to skip pages in a panorama programmatically, there is no API that will allow you to animate to that page. In my case, the “games” page was adjacent to the “scramble” page – so while it does jump directly, at least it’s not disorienting.

Problem 4: Orientation within the application

In this instance I am not talking about holding the phone vertically versus horizontally – I’m talking about giving the user an idea where they are inside your application. You want to avoid questions like

“How do I get back to … I was just…?”

I handed an early prototype of the game to a friend, got the game started and stood back and watched, not saying anything unless she was really stuck. I just had a stock black background behind at the time. She accidentally flicked to another page “losing” the scramble screen and she let out a little scream - OMG what did I do? For a usability test - I had a clear sign I really needed to fix this.

When you look at the panorama control – only a little bit of the next page is visible (just a few characters from the next screen). For most casual observers, these few pixels of the next screen are not enough to tell you what’s coming next.

Also they have no idea that the world isn’t flat – e.g. if you keep flicking you’ll get back to page 1. So you have to adjust for the idea that people will circularly flick through the panorama – they won’t naturally.

Solution: Use a background

With a stock background matching the theme – my test users were too scared to explore – they don’t know if they have accidentally quit the application or not. From this I realized I needed a background that would indicate that the app continued off the edge of the screen. I needed to break with the metro theme (a little) so they most decisively knew they were still in my app.

It’s a bit of a long story, but at the same time I decided to pick a lettuce theme for the app. So I went down to the local supermarket, picked out several heads of butter lettuce and iceberg, grabbed my camera and had a photo shoot in the back yard.

The lettuce in this picture was subsequently eaten for lunch.

I added words to the background to not only give the idea that the application continued on in the left and right directions – but to give folks a bit of a hint to get started thinking of words. These words were the words that were in 30 or more puzzles.

After settling on the background – I needed to fix up my application so that the text would all be the correct color. In order to do this, rather than setting the foreground brushes on everything, I overrode the system styles in my app.xaml file. This meant I could configure everything in one spot. I was very pleased how well this worked!

<Application.Resources>

<SolidColorBrush x:Key="PhoneForegroundBrush" Color="White"/>

<SolidColorBrush x:Key="PhoneTextBoxReadOnlyBrush" Color="#7E7D7D"/>

<SolidColorBrush x:Key="PhoneTextBoxForegroundBrush" Color="#7E7D7D"/>

<SolidColorBrush x:Key="PhoneTextBoxEditBackgroundBrush" Color="#FFC4C3C3"/>

<SolidColorBrush x:Key="PhoneTextBoxBrush" Color="#FFC4C3C3"/>

<SolidColorBrush x:Key="PhoneBackgroundBrush" Color="Black"/>

</Application.Resources>

In order to test this, I left the phone simulator in the light theme (go into settings to change this), because black text would be the most obvious bug against this color background.

Conclusions
Panorama is a great control for applications where people want to explore – e.g. facebook / social media applications. It is not as good for applications where you want to have a a lot of interactivity.

If you have one page that is more interesting than the others, the others will tend to get neglected by the users.

If you use a panorama, backgrounds really do help solve a lot of the confusion – though it is best to go with simple backgrounds to not distract from the rest of the UI.

If you want to see it in action, the trial of nine lettuce is free!

Experiments in Game Making

I am not the most avid game player in the world. I often think fondly back to when games were simpler – the Commodore 128 and Vic 20 games – where you had 1 little guy in a fixed world which wrapped around the edges of the computer screen.

I missed the whole Nintendo thing (my parents steadfastly refused to have one in the house) – and by the time I got out and could purchase one of my own, the world had moved to 3D gaming – which had the side effect of making me ill just from watching it.

It occurred to me that a lot of video games are quite stressful to play. People are constantly jamming down on the controllers to make someone’s arms and legs flail in the right direction at the right time. There’s a sense of right and wrong - a sense of “failing” if you didn’t master a skill. Nothing demonstrates this better than through the humor of “The Guild”.

My most fond memory of playing the Wii was was just paddling around the lake in a canoe looking for rubber ducks in Wii Sports Resort.

When I went to build my first game – I wanted to make it for myself. What would I like to play? In the past 20 years, there have only been a small number of games that have “hooked” me – despite the fact that in real life – I actually enjoy playing games. I see the cell phone gaming platform as an opportunity to reach people like me.

Idea #1 – Rather than focusing on time, let the player lose all sense of time.

I wanted to think about the people who had a terrible day at work - people who are still waiting for the bus to come – someone waiting for news at the doctor’s office. How could I write a game that takes their mind away from the world for a few moments, but lets them get back to it quickly?

Idea #2 - Make a game that has only achievements, no winning or losing.

When someone has had a bad day at work they don’t want to be a “loser” on their phone too. Games can be a way of giving someone that sense of achievement back in their day. “I got to level 3!”

It is tricky to get games played “against” the computer right. I played one game of air hockey where the ipod gloated when it beat me. That quickly turned me off playing a second time. It’s like playing Jeopardy against Watson – the game is rigged in its favor!

Idea #3 – Make people human again… by actually talking to one another and being… human.

In the smartphone age, everyone has got their head buried in some screen or another. Everyone has individualized entertainment. Even if you and your friends are all looking at Facebook – you’re all reading different news feeds. I constantly read status updates from friends saying they’re at such in such restaurant with their wife. I often wonder what she’s thinking while they’re posting that… I wanted to have a game where, people still actually talk to one another despite the use of technology.

Idea #4 – Make it satisfying.

If the success of Angry Birds teaches us anything it is that the sounds are what makes the game. To make my game satisfying I wanted to find sounds that would make you feel as if you were interacting with real objects. …to essentially transport you to another world where it’s just you and the game.

It also turns out that flinging birds is quite a fun gesture, and I wanted to find gestures that used the capabilities of the phone - but were fun, not frustrating. How frustrating is it to keep your phone level to delicately balance a marble? Just because the phone can tell which direction you’re holding it in doesn’t mean that it’s fun to do.

And so it began…

With these four ideas in mind, I chose something simple to get started with - a word game. A lot of folks like word games because they feel it spinning on their brain matter. There is a sense of accomplishment when the puzzle is solved. As I am not very good at spotting words in a jumble, I felt I could improve on the paper version by making letter tiles satisfying to rearrange.

I will keep posting about insights I had while making "Nine Lettuce". In the meantime if you have a WP7 phone the first game in the trial is free!

“Oh, the places you’ll go! There is fun to be done!” – Dr. Seuss

Doing something a bit different this year...

I thought I'd take some time this year to see what all the rage is with all these smartphones.

Having never made a game before, I thought I'd give it a try. It took me several months to decide what and how to make it - but I had an absolute blast making my own sound effects and writing code I wouldn't normally get to write.


Over the next couple weeks I'll post a few more articles about some of the things I thought about while making the game.

In the meantime, if you've got Windows Phone 7 the trial of nine lettuce is both fun and free!





* The lettuce pictured in the background was subsequently eaten for lunch.

Back from the beyond...

I've been on a bit of a break from blogging, if you hadn't noticed. Quite randomly I went to Raymond's blog, and noticed the mention about timers and dispose. Yes the finalizer does attempt to clean up timers, but it can be a source of bugs and instability if there was a problem cleaning it up. It is far trickier to unhook a wndproc from a finalizer than Dispose()!

I had been meaning to blow the fuzz off the old blog, and I've got some new articles back up here, if you're interested.

Mythbusting

There seems to be a prevailing myth that if you live in Australia, you can code at the beach. Obviously those who believe this haven't considered the practicalities of the situation.

1. It's hard to read a laptop in the sun.
2. While you can rinse sand off your feet on the way out, it's harder to do the same thing to your laptop.
3. Most software geeks I know would instantly turn from pale-minty-green to fuchsia the moment they place a toe in the sand.
4. You would get a very scornful look from the Aussies on the beach.

While I'm talking about myths, there was a very interesting thing on "The Science Show" last weekend. It was all about the TV show Mythbusters and how it's actually Australian. (Who woulda known?)

Despite all this myth busting activity, two myths lie at the very heart of the show. The first is simple to bust; Mythbusters is not an American television show. For all its massive international popularity, its devoted audience of many millions across all continents, its American hosts, locations, themes, its spin-off books, DVDs and t-shirts, Mythbusters is in fact an Australian television show made by Australians, largely in Australia.

Except for the trans-Atlantic adornments that have made it an international success, Mythbusters is all-Oz. If you listen closely when they do a particularly camera-shaking explosion, you might just hear one of the crew say, 'Jesus! That was close!' Oh yes! It came as a surprise to me too when I started work on the show. I thought I might be off to San Francisco. Instead I was asked to drive to Artarmon in Sydney.

Australians make the most successful science series on the largest cable channel on the planet, screened to legions of fans around the world with an influence on other television programs that you can truly and reasonably describe as awesome. In terms of audience, influence, interest and explosions, Mythbusters is simply the most successful factual program ever made.

(Nicholas Searle, The Science Show)

After listening, I can't help but be grumpy at Adam Spencer. Nicholas Searle discusses how he attempted to promote his new show (Sleek Geeks) by slamming the scientific-ness of Mythbusters.

Will Mythbusters save the human civilisation from extinction? It's too early to say. Is Mythbusters an entertaining science television show that fulfils a host of valuable purposes? Who could sensibly argue otherwise? Well, Australia's smartest breakfast radio host did. Late last year, Adam Spencer told The Sydney Morning Herald; 'Mythbusters just depresses me, especially when it has phrases in its ads like, 'Beware, science happening!' There's no science happening in Mythbusters. I would say it's constructively anti-scientific.'

(Nicholas Searle, The Science Show)

I recognize that Dr. Karl is a national icon, so I painfully watched several episodes of Sleek Geeks. It's like going back to a restaurant you went to on the first night - you know the service might get better. But, all considered, I think I've just lost all my good will towards the show.

I love Mythbusters too much.

The Story of the Ribbon

I highly enjoyed this presentation from Jensen Harris on how the Office team created the Ribbon.

Quickly finding the content property

It's one thing to type in <Paragraph>some text</Paragraph>, but how do you know which property to set if you're writing it in code?

The "Content" of a XAML tag is specified by the ContentPropertyAttribute.  You can easily check the attributes on a type by using "Go To Definition" in Visual Studio.

Note you have to expand the [...] in front of the class definition to see the attributes.  In the case of Paragraph, we see that the "Inlines" property is set - the equivalent code would be:

Paragraph p = new Paragraph();
p.Inlines.Add("some text");

If at first you don't succeed, then try, try again.  In the example of Button, the "Content" property comes all the way down in ContentControl.  Keep using Go To Definition and expanding the attributes until you find what you're looking for.