Step 1 - Creating the 'Wrong Design' for an HTML5 App

I'm impressed how well JavaScript supports Object Oriented Programming! I'm really starting to understand how HTML5 and JavaScript have the potential to make an awesome generation of mobile apps!

As long as I'm taking the time to learn how to create HTML5 apps, I was thinking I should aim at creating one I could put on my iPod Touch or Color Nook to review Go games.

For me, the easiest way to start a UI design is to throw away my first idea. No matter what I'm initially thinking of, it's wrong in any of a number of ways. I find drawing it out and throwing it away as quickly as possible helps me come up with a better design, faster.

So here goes:

Requirements:

• HTML5 App that works on different platforms
• Will play back stored Go game files
• Uses local storage -- so will work offline
• Supports the SGF Go game format
• Supports UTF-8 characters

Because it's one of the few situations where I'm one of the target users, defining my audience and user stories should be pretty easy. ( As I talk to users, I can expand and improve this... )

Users:

• Beginning Go players who want to view commented Go games 

User stories:

• As a <beginning Go player> I want to <select a commented Go game to view> so I can <view it on my mobile device>.
• As a <beginning Go player> I want to <view a commented Go game > so I can <read the expert comments and eventually win more games>.

The wrong design:

What I'm visualizing ( which I'm sure will be completely wrong ) looks something like this:

BTW - I drew this wireframe using the website hotgloo.com . It was really awesome! I'd never tried it before, but it was pretty close to walk-up-and-use usability for their site!