Last week I gave a presentation on Appcelerator Titanium to the Melbourne Cocoaheads group. These are serious iOS developers so I didn’t expect to make any converts.
After I presented, one developer came up and asked to see an app created in Titanium. I showed him the app I did for the ‘What Should I Wear’ website. After the app opened, I tapped on my second tab. The window associated with the tab had a gallery of 24 image views with ‘bigish’ images. After I tapped, it took about 2-3 seconds for the window to fully appear. It looked like nothing was happening in the app while the window was appearing.
“That’s not a great first impression” he said.
He was right. Building apps isn’t just about providing functionality – it is about providing a great user experience. In the iOS simulator you couldn’t tell there was a lag, but on the device you could really feel the delay.
I set out this week to figure out how to make the app more responsive when it is first opened. I tried four different things.
- Initially, I had the window in its own js file. I set the image property on all the image views in the base of the js file. When tapping on the tab, the window title appeared right away, but the area in the window was blank. Then all the images appeared all at once after a couple seconds. Not good.
- Using what I leaned in ‘forging titanum’, I refactored the app to a single context. I still set the image property when creating the window. When tapping the tab now, nothing happened for 2-3 seconds. Then the window appeared with all the images loaded. This was worse!
- I stayed with the single context, but moved setting the image properties to the ‘open’ event of the window. The window appeared quickly, then the images started appearing quickly. Not all at once, but down the page. This looked and felt good.
- This time, I set the image property on the ‘focus’ event of the window. This behaved almost the same as the previous example, but seemed a little quicker. It will also provide more options when I update the image properties in the background. This is what I will use in the next version of my app.
Note: This is only testing the first time the window was opened. In every example, the window and images instantaneously appeared subsequent times you tapped on the tab. Also, I am targeting iOS only so that is all I tested.
Here is a video of the four different methods on a 3GS from a sample app I created. I added a sound effect when the ‘tap’ occurs.
As a developer, there are always different ways of doing things. Only through testing (on the actually device) can you really polish an app to make if feel the best for the user.