iPhone app settings
Wednesday, January 7th, 2009One of the ongoing debates among users of iPhone OS devices is whether an app’s settings belong in the app itself, or the Settings app.
I’m of the opinion that this wouldn’t even be a debate if it weren’t for Apple’s prescription in the iPhone HIG that every iPhone app’s settings should be in the Settings app. Mac apps don’t come with prefpanes for their preferences (with the exception of faceless background apps like Growl). Windows apps don’t, either, that I know of. GNOME and KDE apps don’t pollute Ubuntu’s Control Panel.
The iPhone is the only OS I know of whose developer recommends that app developers put their application settings in the system-wide Settings app.
As we’ve seen several times on every platform, it’s OK to break one of the local Human Interface Guidelines if and only if the violation makes the interface better.
I think this guideline is one that iPhone developers should violate flagrantly.
But there’s a problem. The iPhone doesn’t really have an icon for a Settings button. Most developers seem to use the icon that one of the frameworks apparently provides, but this isn’t the proper use of that icon. The
means info, not application settings.
Another choice is the gear icon for Action buttons:
But, again, we have a conflation of functions. The button in question is not an Action button; it is a Settings button. This icon is not a Settings icon. (I suspect that most people who use the Action icon use it because it doesn’t have any particular association with “action”, either, other than Apple’s endorsement of it for that.)
The Iconfactory, wisely, chose differently in Twitterrific. I suspect that this was largely coincidence, as the Mac version of Twitterrific came first and already had a Settings icon; for the iPhone version, the developers simply used the same icon. It works well enough:
But it’s not perfect. A wrench does not say “settings”. (I offer myself as evidence: When I first saw it in the Mac version, I didn’t know it was the Preferences button.) Generally, a wrench means “edit this”, as in the context of a game.
What we need is an icon that says “settings”. Ideally, this icon should either convey the notion of a changeable state value (as the previously-favored light switch [Mac OS X through Tiger] and slider [Mac OS] did), or build on an existing association with the concept of settings.
Let’s go with the latter. I nominate the Settings app’s icon:
Familiar enough, wouldn’t you say?
That’s Apple’s version. Here’s my button-icon (a.k.a. template) version, in the 16-px size:
I tried it out in the iPhone version of Twitterrific on my iPod touch. Before and a mock-up of after:
After I created this icon, I wondered what it would look like in the Mac version of Twitterrific.
Here’s the original:
… And right away we have a problem. These buttons are already framed; my white frame will glare here.
Fortunately, that’s easy to solve. With ten seconds of work, I created a frameless version. Here’s what that looks like:
I think we could all get used to this icon. This wouldn’t have worked at all before Apple changed the icon of System Preferences to match the iPhone Settings app, but now it can.
I don’t think it’s perfect. Perhaps a real icon designer (I’m just a programmer) can refine it. But I think it’s a good first draft. I’m curious to hear your opinions; please post constructive feedback in the comments.
If you want to use this icon, go ahead. Here’s the original Opacity document , from which you can build all the many variations of the icon. (Click on Inspector, then Factories, then find the version you want in the list and click its Build button.)