Step 2 - Something Closer to the Right Design

Yeah... I was right... The day after I drew out the wrong design I woke up and realized exactly how it was wrong :-(

Some of the problems obvious to me now are:

1. The design is not suited to a typical smartphone screen. The board takes up most of the real-estate and either the controls or comments will be below the fold.
2. Referencing the stones with numbers is not smart. The numbers should really only represent the number of the move. People have probably been documenting Go games in print for a hundred years or so. So why am I trying to re-invent that wheel?
3. What was I thinking when I put in a select menu to pick a game :-(  Earlier I mentioned the offline storage could take hundreds of games! A select menu is definitely the wrong design pattern to use... A better pattern would be something like the one Apple uses for selecting a photo or downloading a podcast.
4. The design would look odd on an iPad or other tablet... Also there's the portrait / landscape orientations to consider...

So here is take 2:

To address the first two problems, a redesign of the main screen:

The main features here are:

• Overlaying the comments on the Go board itself to save screen real-estate
• The only numbers displayed on the stones will be black and white's last plays
• If a stone needs to be referenced, but it doesn't have a number already, a triangle will be displayed
• Having a separate button to see a game variation instead of scrolling down to see it
• Changing the drop down to a set of selection screens instead

Speaking of the selections screens... here's what I was thinking of:

The selection screens would use a similar design pattern to Apple's iPod Touch / iPhone for gathering photos in separate folders/tabs:

And once the user clicks on a folder/tab they would see individual games to select:

As far as problem 4... that's a tough one... Something like this might be good:

In landscape mode, the board would be (nearly) as large as it possibly could be, and then in the free space to the right the controls, comments, and any variation would appear. If I moved the title and sub-title to the right, then that would maximize the board size to its limit.

I just started reading this really great book Head First Mobile Web and it's talking about Responsive Web Design. I think that will really help out with problem 4. So I guess for right now I'll just keep this idea in my head and I'll see how/if the responsive web design will help out later down the road...