iPhone app settings

2009-01-07 04:12:21 UTC

One 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 Info icon that one of the frameworks apparently provides, but this isn’t the proper use of that icon. The Info icon means info, not application settings.

Another choice is the gear icon for Action buttons:

NSActionTemplate.

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:

as seen in this screenshot of Twitterrific.

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:

iPhone Settings 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:

Settings button icon 16-px version.

I tried it out in the iPhone version of Twitterrific on my iPod touch. Before and a mock-up of after:

Before.
After.

After I created this icon, I wondered what it would look like in the Mac version of Twitterrific.

Here’s the original:

…with the wrench icon.

… 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:

Twitterrific-Mac-newSettingsIcon.png

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.)

13 Responses to “iPhone app settings”

  1. August Trometer Says:

    Thanks for this, I like it a lot. I’m sure it will end up in the next rev of my apps.

  2. Eric Richie Says:

    Hmm, I like it in the iPhone version of Twitterific but I’m not sold on it for the desktop version. It feels a little too “rising sun”-ish and I’m not sure how easy it would be to figure out. The wrench just feels a little more intuitive to me. You need a tool to change the nuts and bolts so I think it follows through to click on the ‘tool’ icon to adjust the settings of something (in essence a program’s “nuts and bolts”). Then there’s always the idea of “tinkering”, however I think the gear would suit that idea just as well. ;)

    I might also point out, to play a bit of Devil’s Advocate, that the info button is what is used to change the settings of a widget on the dashboard. Aside from initially finding the button on some widgets, I don’t think there has been much of a usiblity outcry against its use there. Therefore it could be argued that the developers using it are simply following Apple’s own usage.

  3. Jason Terhorst Says:

    @Eric:

    Saying that you’re “simply following Apple’s own usage” isn’t always wise in design. Remember brushed metal? Apple was entirely inconsistent with their own HIG, but it became a matter of them using it when their own designers or Steve Jobs subjectively felt that it was right to use.

    However, there were other developers who were trying to use brushed metal, but didn’t realize it didn’t fit their app’s design. They can be forgiven, as they weren’t designers (though even some designers fell prey).

    Sure, if Apple is consistent, then it’s fine. But if they’re playing Calvin-ball with the design choices, then we as a dev community should talk it out and come up with a logical, consistent UI standard that we can all agree on and use.

  4. Peter Hosey Says:

    Eric: Yeah, that “rising sun” aspect is definitely a problem. I couldn’t think of a way around it.

    As for Dashboard, I don’t use it. That’s probably why I have a problem with using the button for settings—I’m not used to it like a Dashboard user would be. That raises the question of whether an inexpert user would be a Dashboard user. Considering it’s behind a hotkey, I doubt it.

  5. Ahruman Says:

    Dashboard is in the dock by default.

  6. Anne K. Halsall Says:

    Remember Control Panels? Remember how the icons had a little slider symbol attached to them? Maybe we can bring that back.

    I would like to move away from wrenches and gears entirely, although common usage is definitely pushing us in that direction. But implying what kind of interface you can expect to see behind an icon is a good way to make its meaning clear – think of it as a window to the next screen.

    Maybe something like http://ahalsall.googlepages.com/sliders.png?

  7. Eric Richie Says:

    Anne: I could dig the sliders, very “retro”.

    Or even with the gear theme, maybe stagger them a bit similar to: http://www.iworkfortheinternet.com/pictures/settings.png
    (pretend those are monochrome with no gradient… [I threw it together quickly!])

    ***Disclaimer: IANAGD (I am not a graphic designer!)***

  8. Peter Hosey Says:

    Anne K. Halsall:

    Remember Control Panels? Remember how the icons had a little slider symbol attached to them? Maybe we can bring that back.

    For those who don’t remember, here’s what those looked like. That’s from System 7.

    (I didn’t want to deep-link from the post itself.)

  9. Tom Harrington Says:

    Maybe it’s just me, but what the mini-settings icon says to me is “1996 called and they want their Netscape logo back”.

  10. Peter Hosey Says:

    Tom Harrington: Hah! Good memory.

  11. Erik Says:

    The documentation doesn’t say settings HAS to be in the settings app, and Apple doesn’t always put the settings there either.

    I think settings that change very seldom (like the account setup for an app that talks to a web service) can start in the app, then if they need to be changed, the user can do it in the settings app. This is the thinking behind settings app vs in-app settings in the documentation too.

    I also think the “i” button is a good choice for in-app-settings. Not only does dashboard use it (and dashboard starts out in your dock as a default app), but the default apps on the iPhone that has in-app settings use it (Weather, Stock).

    The gear is a bit ambiguous since many Mac apps use it as an action, iTunes uses it for smart playlists and finder for searches, but I do think the biggest problem is if there are ambiguities between icons in the app itself (gear, “i” and wrench all used at the same time for example). Adding a label to the icon would solve that though.

    Try doing a google image search for “preferences” or “settings” and you’ll notice that the hammer and wrench icon(called customize in most mac app toolbars) keeps popping up. I think that might the best choice of all.

  12. Doug Says:

    @Peter

    “Eric: Yeah, that “rising sun” aspect is definitely a problem. I couldn’t think of a way around it.”

    There’s a much better gear icon in the last two screen shots. Why wouldn’t you just use that one? The icon you made says “ms paint”, not “settings”.

  13. Peter Hosey Says:

    Doug: Read what I said about action buttons.

Leave a Reply

Do not delete the second sentence.