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.

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

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.

Phil Schiller and the case with the missing menu bar [Updated]

I just watched the video stream of Phil Schiller giving the Macworld keynote presentation.  I am as usual hugely impressed with the software Apple churns out, this time the addition of face detection and recognition to iPhoto was my personal favorite new feature. Look out Phil, $79 is coming your way.

The one thing, though, that stuck in my mind more than anything about the presentation was the mysteriously missing Mac menu bar in the demo of the new iWork.com service.

First Phil prepared a document for sharing using Pages on his computer.

Phil with the menu bar

Phil with the menu bar

He then switched to the fictional user Tia's computer to show us what she would experience on the receiving end. Tia's computer however didn't have the Mac menu bar at the top of the screen.

Look, no menu bar

Look, no menu bar

I have had a slight look around to figure out how to hide the menu bar in Leopard, but to no avail. This begs the question, can it be done or was Phil not using Leopard in the demo?

By the way, good news about all iTunes songs being DRM free! Finally I can commence my long planned iTunes shopping spree.

UPDATE: The iWork.com demo starts at 1.01.20 into the video stream.

Published on the App Store: Hiragana

My first iPhone/iPod Touch application, Hiragana, has been published on the App Store. Apple's review of it took less than a week from submission to publication which did catch me off guard, as I was hoping to have more time to prepare a webpage for its launch.

HiraganaPrimaryScreenshot.png

Hiragana is a flash card application which helps me, and hopefully others as well, take advantage of occasional down time during the day to study the Japanese hiragana characters. 

You can slide the cards left/right to flip through them. There are 104 character cards in all, plus one information card which functions as the application manual.

Sliding the card upwards reveals the pronunciation of the character.

A double tap zooms the card out to fit the whole card on screen, and presents a card removal button similar to the ones in Mobile Safari's tab view.

The cards can either be studied in order or in randomized order. This is toggled by tapping the crossed arrows in the lower left corner.

The i-button in the lower right flips the view around and allows the customer full control over which characters to include in the card set. 

The application makes use of Core Animation to provide a very smooth and pleasant user experience.

Hiragana is available now for $3.99, all feedback is appreciated.

A version of the application focusing on the Katakana characters has also been submitted, but it is still in review.

Lack of memory card slot is my favorite iPhone feature

In my view the lack of a memory card slot on the iPhone is actually a great feature.

Case in point: Here's what happened when Google's Andy Rubin was demonstrating an Android prototype phone to Wired reporter Daniel Roth.
Let's see, let's go to a music player. I can go to Artist here and get my list of — oops, it says the SD card is missing. He squints into the tiny card slot. "Hmm, it's there. Looks like I have a little bit of a bug." He shrugs, taps on an icon to go to the browser, and checks out CNN.com.

Quoted from Google's Open Source Android OS Will Free the Wireless Web

I can't even begin to recount the numerous occasions this very same thing happened on my previous Linux based Motorola smartphone. And it's not just that the memory wasn't available for reading. The applications that were set up to store data (photos, notes, audio recordings) on it would all default back to storing on the miniscule internal memory, which meant I had to spend a couple of minutes reconfiguring these applications after power cycling the phone to get the memory card back. That makes for a truly sucky user experience.

This is not to say that Andriod will suck. Quite the contrary, I have huge hopes and expectations of Google succeeding. Android seems like the one potential competitor to the iPhone platform, and I definitely look forward to trying it out. The point I'm trying to make is strictly hardware related. A memory card slot is never going to be as reliable as a soldered on internal memory.

Eliminating failure points is, in my humble opinion, the most effective way of reducing bugs and problems. The more bullet point features are included in the product specs, the worse the user experience of said product.

A sufficiently large internal memory beats a memory card slot any day of the week. It's just way more convenient for both developers and customers.