2008 / May 27^th/ Musings on iPhone design

I’ve been working on a bit of iPhone design as of late, and it’s started my brain working in overdrive again. iPhone design is whole a different breed of development. I don’t think you can accurately lump it in with mobile design, nor website design. The interaction is unique, the browser is unique, the screen is unique, and unique conditions require unique design considerations.

We do live in an EDGE world

One day in the distant future, we may indeed have iPhones that connect at broadband level speeds. Until then, we’re stuck with EDGE. And even worse: crappy edge. If you live in a big city like San Francisco or Sacramento, you can expect your EDGE speeds are actually pretty nice. But for the rest of America — we’re stuck on a couple of bars of reception in between us and the clogged tubes.

As a designer it’s your moral obligation to take this into account (lest you want your users throwing their precious iPhones out the window). For example, when I first saw the screenshot posted by Will Shipley of Delicious Library 2.0’s new iPhone interface I immediately thought: there’s a programmer design right there. Perhaps not one concepted by a programmer, but directed and molded by a programmer.

I did a little test, and loaded up Michael’s library over EDGE. It took over a minute to render anything on the screen, and a full 7 minutes and 50 seconds to finish loading the page.

Maybe he assumed you would be within wi-fi when accessing it, or maybe he assumed that most of the assets would be cached, or maybe he assumed people would have small libraries. Whatever the assumption was, it probably won’t pan out. Connection speed is of ultimate concern with iPhone development, and I would argue that it should be your top priority in design (yes, that is a design decision).

Good design doesn’t necessarily mean good usability

I think designers (myself included) often assume too much of how people will use their applications. We strive so hard to make extraordinary visual impact that we overlook why and how people are using them. This becomes overwhelmingly clear in iPhone applications since they’re usually a ’scaled back’ version containing only features we really want to use.

Twitter is a great example of this. Of the iPhone aficionados I know, Hahlo seems to be the overwhelming winner as far as ease of use and overall usefulness, with m.twitter following closely. Yet if you’d ask me I’d say that PocketTweets is the best designed of those three. But almost no one uses it.

Why? Because it’s a pain in the ass to interact with. There are the obvious, quantifiable things like the fact that the text is way too small, and the graphics take too long to load over EDGE — but there’s some other aspect of the interface that just isn’t a pleasure to use.

And yet Hahlo has this artifact in the opposite respect — I absolutely love using the interface. There’s the obvious things, like the hot new transparent black overlays, the clear readable text, the big click zones. But there’s something else that makes Hahlo fun to play with on the iPhone.

Less about designing, more about experimenting

The thing about the iPhone is how tactile the whole experience is. There’s no pointing and clicking; you’re physically holding the phone in your hand, swiping, tapping, rotating. There’s no mean distance between your eyes and the phone, it might be 12″ away, or it might be down at your waist. When we design for computer screens it’s pretty easy in a lot of ways — most people are sitting down staring straight on at their screen. That’s just not true for the iPhone.

I’ve found that sitting down at the computer and drawing up comps creates little fruition, because what’s represented on my computer screen isn’t a good representation of how I will be using the design. Instead, I find creating a rough sketch in Photoshop and then immediately jumping into a live HTML/CSS combo is best. This way you can make small changes to the interface and try them out on the iPhone in real time.

Also, don’t forget to get out and use your interface. Contrast concerns on the iPhone are less about eyesight and more about ambient light conditions. Does your interface hold up at night? Does it hold up at noon with the sun glaring down on the screen? That light gray might pan out to be nothing but white once you leave the comfort of your couch.

Turning the page phone

The fact that we can detect the rotation mechanisms on the iPhone is like a sign from above for iPhone design. Why so many applications neglect to take advantage of this in any way shape or form is beyond me.

Think about how you use your camera. Most people take landscape shots by nature. But if you have a tall object you’d like to photograph, chances are you’ll flip it and take a portrait instead. Why shouldn’t we design our iPhone applications similarly? Why should the data display be the same in portrait mode as it is in landscape mode?

This is a simple question with a million answers. My point is that you shouldn’t forget about the horizontal and vertical. Rotating the phone is an easy, accurate action — even more so than a lazy thumb clicking around.

Conclusion

All in all, building iPhone interfaces (yes, that’s plural) has been an awesome experience. It’s a great feeling to get out of your usual habit and try something new — not to mention the pure awesomeness of being able to rely on a smart browser.

I have a lot more thoughts about the specifics of development — things like finally being able to leverage :first-child pseudo selectors, direct-children selectors, and dealing with a a clean rendering engine. But I’m afraid those will have to wait for another day.

1. 

   John Arnor G. Lom

   May 27^th | #

   Great article; especially interesting in light of the new web-dev features that are coming as part of the iPhone 2.0 Safari – which undoubtedly will bring even more content to the platform. And as we know, with more possibilities the need for restraint increases… ^.^

2. 

   Hamish M

   May 27^th | #

   Great writeup.

   Another awesome iPhone-centric website is facebook’s. Feels almost like a native app.

3. 

   Kyle

   May 27^th | #

   Hammish: Yep, I really think Facebook’s app was a huge step in the right direction. It was the first really great looking app that didn’t copy the native UI or become a pain to use. My only problem with it is that I’ve found I just don’t use facebook enough to see it :)

Name

Email (will not be published)

Website (optional)