Open In External App icon for iPhone apps

Open in External App iPhone toolbar and tab bar icons

Whenever possible, I try to use existing icons for my apps. I do this for two reasons: firstly, designing a good icon is an art that takes a ridiculous amount of time and practice, and, secondly, using standard icons correctly in your applications makes your app consistent with other applications on the same platform and thus helps it meet user expectations.

When it comes to iPhone icons, Apple's Mobile HIG provides certain system icons with strictly defined semantics and use cases. Beyond those, there are several wonderful free and commercial icon sets available for app developers to use. These include Glyphish (120 free toolbar and tab bar icons released under a Creative Commons Attribution 3.0 US license by Joseph Wain) and PixelPress Icons (52 free toolbar icons released under a Creative Commons Attribution 2.5 Canada license by Gary Gehiere). The set I am using for my application is a commercial one, the excellent iPhone UI Icon Set of 160 icons by Eddie Wilson (check out his awesome photos from his Flickr stream, follow him on Twitter) of eddit. These are an absolute steal at $69 and worth every penny. Eddie has taken great pains to tweak the icons to look just right on toolbar and tab bar controls (going as far as to create two different versions of each icon). As he used a pleasing shade of gray for the icons, they can also be used in buttons.

Although the eddit icons cover 99% of what I need for my application, there's one very common action in iPhone applications that doesn't have a system icon and neither have I been able to find an icon anywhere else to express it: open in external application.

Although the iPhone doesn't support running multiple applications simultaneously, iPhone applications are meant to be easy to switch between, with each one doing one or two things right and maybe even communicating with other apps to carry out more complex tasks. So it's a pretty common feature for one app to launch another application and cede control to it. In Tweetie, for example, you have a simple web browser view for viewing web sites that people have linked to in their tweets. Cleverly, it doesn't attempt to replace Mobile Safari. Instead, if you need to do more than simply glancing through what someone has linked to, it gives you the option to launch the site you're viewing in Mobile Safari.

In Tweetie, this feature is in an action sheet and Tweetie uses the Action icon from the standard system buttons provided by the iPhone SDK to launch the action sheet.

Since Tweetie is a UX dream come true and should be emulated as much as possible, I was also using this icon initially but I was altering its meaning by having it directly launch the site in Mobile Safari (instead of bringing up an action sheet with options). The Action icon has a set meaning in the HIG, which states that it "opens an action sheet that allows users to take an application-specific action". Aesthetically, I feel that the icon is rather a poor choice for what it officially represents and a much better candidate for "open in external application" but that's beside the point. Apple has bestowed it with meaning in the HIG and, like it or not, I need to respect that.

The Open In External App icon

Not having found an existing alternative, I – begrudgingly, mind you – started down the path of creating my own icon. Some research revealed Prof. Ravi Poovaiah's work on the Design of Signage Systems, including his case study on signage for Mumbai Hospitals. Apart from being an interesting read on the various linguistic and cultural constraints imposed on the design of signage in India, I found it to be hugely relevant to our field what with the huge costs involved in internationalization and localization of apps.

More pertinently, perhaps, the Exit Icon that Prof. Poovaiah ended up designing stood out as semantically analogous to what I wanted for my icon. The key meaning that the icon must convey is that the the user's action will cause a radical change in context; in this case, a jump from one application to another (which, although the oAuth folks, in their quest to jam what is a perfect solution for the web down the throats of mobile and desktop developers seem to not want to see, is actually as jarring a change in context as you can expect and one that should be avoided whenever possible and at the very least clearly labelled, demarcated, and managed.)

So, taking Ravi's icon, I proceeded to create versions of it for the iPhone tab bar and toolbar controls and two more – in blue – for use in buttons. I used the general shape of the Mobile Me icon in Eddie's set as the base of the form so as to have the icon fit visually with the rest of the icon set (and, thus, also my app's look and feel).

I've created two versions of the icons, one with an inner object that represents the actual object that the user will be opening/viewing in the external app (i.e., "open this in an external app") and another other without the inner object that conveys a more generic "open (in) external app". Visually, I like the simplicity of the latter, but I haven't decided whether the semantic correctness of the former outweighs the aesthetic simplicity of the latter.

In any case, I'm releasing the icons, including the PSD and an Xcode project demonstrating their use, for free under a very liberal Creative Commons Attribution 2.0 UK: England & Wales license in hopes that it will be used in other applications also.

The one thing I ask (my mini-HIG, if you will) is that you only use the icon to mean "open in external app". It would be nice to have this to become a standard iPhone icon for that particular action.

If you do like the icon, please consider buying Eddie Wilson's iPhone UI Icon Set as it fits visually with the other icons there (hey, us independent creatives have to support one another!)

I'd love to hear from you if you do end up using the icon so please leave me a comment and a link to your app (if you're feeling overly generous, feel free to send me a copy to play with; I do loves me my iPhone apps, yessiree!)

Enjoy!

Comments