The evolution of an iPhone app interface

I recently released Starting 11, an iPhone app in which you can pick your own football team line up and share it via e-mail and Facebook.

From idea to app store submission took about 10 evenings of work. The lions share of that time was spent perfecting the user interface. Below are the design iterations from idea to App Store release, click the images for full versions.

Since I had the idea for this app just before the FIFA World Cup started, I quickly decided to use the Xcode template "Navigation-based Application" to simplify development, hoping to get it published before the World Cup had finished. By focusing on polishing the pitch view, which would be the view where the user spends most of his time, I figured I would get the most bang for my efforts.

Initial idea sketch

Starting11_idea.png

Using the brilliant and free Adobe Ideas app on my iPad i quickly sketched the basic UI and zoomed the resulting image to match the size of my iPhone. This gave me a feel for the size of the UI components, allowing me to decide that it would be feasible to have a full football team on screen at once.

Grass and scoreboard

To generate the grass for the pitch I followed Andrew Houle's Photoshop tutorial, ending up with a huge image of grass texture. My brother graciously provided me with the chalk lines marking the pitch and with the scoreboard graphic which has a nice detailed mesh effect only visible with the extra resolution available on the iPhone 4.

Player kits

I had decided to represent the players on the pitch by having their jerseys show the number on the back, the name would appear beneath. My first effort used a combination of rectangular UIViews to create the illusion of the jersey. I was hoping this would allow me to save time, but it just didn't look good enough to match my vision for Starting 11.

I had to implement my own UIView subclass to handle drawing the player using vector graphics. This allowed me to create something that more closely resembled a jersey.

I also decided to add a dark background to the player names.

After using the app in this state for some time I decided that the shoulders needed to be more rounded, and that a black outline around the player added some needed contrast, especially important when using the application outdoors in the sun. For the same reason the color behind the player name was darkened.

I also added a small line to indicate the separation of the player's legs, without which it looked like the players were wearing skirts.

Finally the flags for all countries had some shine added to them, then the Share button was added and I decided that instead of having the team's name appear on screen twice the navigation bar should contain the application's title.

And there you have it, the UI of version 1.0 of Starting 11. What do you think? What would you change?

Looking forward

After the World Cup is done and we have a new world champion team, the next step will be to add the possibility for customers to add and modify teams. This will make the app useful for the club competitions that start up after summer.

Regarding the iPad I think Starting 11 would be a wonderful fit for the larger screen, so I plan to make it a universal app that supports both the iPhone and the iPad form-factors.

Until these steps are done the app will remain free. I will eventually start charging.

iPhone Video Output

There are a couple of options available when preparing to perform a demonstration of an iPhone app to a larger group of people. All these options have flaws, however. The "gather around" method, for example, doesn't work well for groups of more than a few people. Any more and you would ideally want to project the iPhone screen contents onto a big screen.


The "iPhone simulator method" is probably the most used method. It's simple to set up but limits your app navigation to the mouse, making multitouch gestures difficult to perform. Also, there is no way to show off accelerometer functionality like "shake to undo".
The "camcorder method" avoids the simulator's issues, but can be a hassle to set up. It also restricts your movement as you have to make sure to keep the device on screen and avoid reflections as best you can.

Doing it Steve's way
Why don't we take a page out of Steve Job's playbook and mirror the iPhone screen directly from the device onto the big screen?
Sadly this is not straight forward. So far only the iPod application supports video output via Apple's AV cable, at least that's what I thought until I stumbled upon Rob Terrell's iPhone App Video Mirroring blog post (go read it now, I'll wait).

Using the private MPTVOutWindow class in the MediaPlayer.framework API, Rob's code mirrors the iPhone screen onto the AV cable. For demonstration purposes this is a great solution, but being based on a private API it should not be left in the app when submitting it to the App Store.

Originally the code did not support on-the-fly orientation changes and touch indicators, both of which I needed. Thanks to Rob posting the source code I was able to implement these changes and have since submitted the updated code back to him, although I haven't heard back after doing so.

Get your hands on the code
In the spirit of sharing I have prepared a sample project, TvOutputSample, which shows you how to add video output to an Xcode project. This is the application shown in the video above, it should build and run out of the box, using iPhone SDK 3.0.

Download the code: TvOutSample.zip
[UPDATE: The project has moved to github]

I should mention that since the video mirroring is software based it affects application performance somewhat. On an original iPhone 10 fps works well, on an iPhone 3GS I have had no problems running at 20 fps. The fps setting is near the top of the UIApplication_TVOut.m file, do your own tests to see what works best for your app and hardware.

The current version (as of October 2009) of the code does not support OpenGL video output.

 

A few thoughts about the Cocoa Bootcamp

This fall I attended Aaron Hillegass' Cocoa Bootcamp at Big Nerd Ranch. I had planned to write up my thoughts about the experience earlier, but life (and work) interrupted.

After being confirmed for the class I made travel arrangements to arrive in Atlanta one day early to adjust to the time difference, and also to get a chance to see a little of Atlanta itself. I ended up having time to both visit the Apple Store at Lenox Square Mall and visiting the Georgia Dome for a taste of the NFL (the Broncos visiting the Falcons). I'm really happy I made the decision to fly in early, as I had a very good time in town.

 NFL action

NFL action

On Sunday I ventured back to the airport via the subway to be picked up by the Big Nerd Ranch shuttle. While waiting at the baggage claim area I met a few other attendees and then the shuttle came by to pick us all up for transport to The Historic Banning Mills, where dinner was waiting for us. We were provided with a nice room each, overlooking a beautiful valley.

 The Historic Banning Mills

The Historic Banning Mills

 Spectacular views all around

Spectacular views all around

The next morning the Bootcamp got going, and within minutes Aaron had us coding our first app. The class followed Aaron's book Cocoa Programming for Mac OS X, with Aaron explaining some concept from each chapter and then having us using the learned concepts in code. There were also a couple of things covered which aren't in the book, for example an iPhone project. The frequent coding assignments and the opportunity to raise any questions with Aaron or any of the other students was a very efficient way of learning.

The pace in the classroom was intense, but every afternoon also provided the chance for a brief walk around the beautiful scenery, with Aaron himself as guide. This was a good opportunity to catch your breath, think about what you had just learned in a broader perspective, and to take a few photos.

 Aaron goes for a walk

Aaron goes for a walk

Every day we were provided with no less than three huge and delicious meals, I think I ate more good food during the Cocoa Bootcamp than I will during Christmas, which says a lot. There were also snacks and soft drinks provided in the classroom, so no risk of going without energy. A good thing, since it did take quite a bit of energy keeping up with the learning tempo.

I think it would probably have been possible to learn pretty much what the class teaches by yourself by spending a couple of weeks or months with the book. I tried to go down that route this summer, but kept getting side tracked. Nevertheless I must reiterate - the book is a must buy for any newcomer to the platform. 

I'm really glad I took the class since it propelled me right past the first plateau in the learning curve and I now feel comfortable using Xcode and the Interface Builder. The opportunity to ask questions and have Aaron and others help debugging problems encountered during the assignments totally eliminated the frustrations encountered when trying to learn from reading a book on your own. The distraction free surroundings also helped me focus my mind on the task at hand.

I would say the Cocoa Bootcamp is probably the perfect way to get started with Cocoa development for the Mac. I'm happy, though, that I asked my employer to cover the costs when negotiating my contract for employment, as it is not exactly cheap. Nevertheless, if you can afford it I think that the Cocoa Bootcamp provides good value for the money spent.

A further advantage was that I got to meet a great, and diverse, group of people dedicated to software development and the Mac platform. The attendants were from all over the US, even some local to the area, as well as a couple of us Europeans.

If you attend the Cocoa Bootcamp, you'll leave having the confidence and understanding necessary to take on true Cocoa development projects. Let's hope something like that comes my way eventually, even though my day job is currently strictly .NET.

I'll make good use of my newfound knowledge in my spare time either way. Stay tuned...

En route to Atlanta for the Cocoa Bootcamp

I'm just now at the airport, waiting to board the plane which will take me to Atlanta and the Cocoa Bootcamp. This is a trip I've been looking forward to for over a year.

I have prepared for the course by reading most of Aaron Hilegass' book Cocoa Programming for Mac OS X, and of course by meddling with iPhone development. But I have always found it easier to learn by interacting with knowledgeable people, so this will be my big chance to really get to grips with the parts of the Cocoa framework which I haven't been able to grasp. 

The Interface Builder has been my biggest stumbling block so far, leading to me writing all interfaces in my iPhone applications in code. So I hope to come away from this week with new insights into how it's supposed to be used. Interface Builder is a very different beast compared to the .NET Visual Studio experience I'm used to. However, I fully expect it to be superior once I can wrap my mind around it. It is an Apple product after all.

Judging by his book, Aaron has a knack for systematically introducing progressively more complex concepts in a very clear and easy to follow manner. I thoroughly recommend his book to anyone new to Objective-C and Cocoa. I think I may be able to finish it during the flight.

I'll summarize my experience at the Big Nerd Ranch in an upcoming post.

iPhone Developer Program == profit?

So I decided to apply for the iPhone Developer Program to add some preassure for quickly learning Cocoa. It took maybe three days from sending in the application until I received the activation code from Apple. All in all a very smooth procdure.
Now I have to start drafting up a few iPhone applications to launch this fall on the AppStore. I'm quite excited about the possibilities, maybe I can even earn some money?

And off we go!

So Amazon shipped Aaron Hillegass's book across the Atlantic in record time and I'm already one chapter in. I took some time yesterday to watch the CocoaHeads Best of Both Worlds video before diving in.

What I take away from the video presentation is to always respect the user's space, to keep it simple and to put an extraordinary amount of thought into getting the GUI just right.

The book (Cocoa Programming for Mac OS X) so far seems to be just what the doctor ordered, but I'll withhold my recommendation until I'm at least half way in.

Summer reading

Scott Stevenson points out that the third edition of Aaron Hillegass' book Cocoa Programming for Mac OS X has been released. Since it appears to be a sort of Cocoa newbie bible I went ahead and ordered it immediately. The affordable price also helps of course.

Let's call this my first major step towards becoming proficient in Cocoa. Now I know what to do with my summer vacation after the Euro 2008 finals have played out.