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


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.

Starting 11 for iPhone in HD

It has yet to be listed in the App Store, but I'd like to introduce you to my latest effort. Starting 11 is an app developed for the ongoing FIFA World Cup.

You choose which team you want to manage and position the players on the pitch in the formation you prefer. You can then share the resulting lineup via e-mail or Facebook.

Starting 11 has been in review at Apple for a over a week already so it should hopefully go live shortly is now available on the App Store.



Retina Display ready

This is my first attempt at an app supporting the full resolution of the Retina Display of iPhone 4. The difference in detail level is simply astounding, as you can see for yourself below.

Click the image for full size comparison.

On the iPad App Store from day one

I have just learned that my first iPad app has been approved by Apple and will be available from the App Store on opening day.

A Memory Game gives you the opportunity to practice your memory by trying to find and match pairs of cards together. The first version features the two card decks Flags and Symbols.

Once the store is online you will be able to download A Memory Game for free [iTunes link].

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

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.

How Apple can improve iPhone scrolling

I want to mention a UI issue I have with the iPhone OS implementation of scroll indicators, the unobtrusive bars that appear on the right side of the screen when scrolling through a list.

My hand obscures the scroll indicator
Like most people, I tend to use my right hand to interact with the iPhone. This means that my hand obscures a large part of the extreme right of the display, making it hard to see how far down the list I have travelled.

Proposed UI enhancement
My proposal is to have the scroll indicators appear on both sides of the screen.

The effect is illustrated in the photoshopped screenshot below, based on the settings screen in my Hiragana application.

Note how the scroll indicator appears on both the left and right sides

Is this really a problem?
This issue tends to bother me the most while reading longer articles at RoughlyDrafted Magazine or Daring Fireball. I often want to quickly check how far I have to go, in order to decide if I have time to finish the article or if I should save it for later.

In these cases the scroll indicator tends to be pretty small and a fair distance down the screen, right where I am least likely to easily see it.

What about panning?
Mobile Safari, and other applications that allow you to pan around a larger view in two dimensions use a horizontal scroll indicator in the lower part of the screen. This can can also be partly obscured by your hand, and should thus be supplemented by a scroll indicator across the top of the screen.

Speculation on the scroll indicator's background
I suppose Apple's decision to limit the scroll indicators to the right and bottom of the screen is based on how scrolling works in the classic desktop applications where scroll bars remain on screen whether in use or not.

To minimize wasted screen real estate and avoid UI clutter, it makes sense in a desktop application to chose a single place to present the scroll bar. The standard seems to always have been to place it on the right, and along the bottom for horizontal scrolling.

However on the iPhone scrolling works differently. There is no screen real estate wasted by showing the indicators on both sides since they are only visible while you are scrolling.

The appeal
So Apple, please add support for dual scroll indicators. It just makes sense.

Hiragana, Katakana and the WWDC Wall of Apps

At WWDC there was a really cool wall of apps, which used 20 Apple Cinema Displays to show the icons of the 20,000 most popular iPhone apps, and illuminate them whenever they were downloaded from the App Store. Pretty neat!



Greg Pascale, a student at Brown University, made a Photosynth of the whole wall, allowing us to study it in detail. I took the opportunity to look for my applications, and found them at the far right of the wall.



I can hereby claim having had a presence at WWDC '09. Sweet!

10 000 App Store Downloads

As of the latest available weekly sales report on iTunes Connect, the number of downloads for my three iPhone applications have passed 10 000!
The apps are Hiragana Lite (free), Hiragana ($2.99) and Katakana ($2.99).

I am amazed at the success of these admittedly simple applications and would like to extend my sincerest thanks to my customers, especially those who have left feedback and pushed me to improve the apps.

The numbers

(click to view large version)

The vast majority of downloads have naturally been for the free version Hiragana Lite. However with just under 10% of the total downloads, the paid apps have together been able to edge over the 1 000 downloads line. This is way beyond my wildest hopes.


The explosion of Hiragana Lite downloads makes the sales lines for the paid applications look almost flat. But if we disregard the Hiragana Lite downloads and look closer at the sales of the paid apps, combining their numbers, we notice something interesting.

Don't let the changed scale on the y-axis in the following graph confuse you, it goes to 1000 instead of the 9000 shown in the graph above.


Before the release of the free version the sales trend had been declining after the first few weeks. It looks like it was about to go flat right around 500 sales. However since Hiragana Lite has been available sales have picked up and have held remarkably steady.

My conclusion to this is that it is a very good idea to make a free version of your app available, letting potential customers try before they buy.
A second conclusion is that I should probably set aside some time to develop a few more apps.
---
*Note that these numbers do not include updates, only new customer downloads are counted.