Part Three: Interface Icons
The key to making your field guide app accessible and user-friendly for your audience lies in the design of the interface. In addition to this is the behaviour of the app. But for this blog post, we’re going to concentrate on the ‘look and feel’ and what you can do to make your app shiny and fresh on the inside.
In the previous post we scratched the surface of giving your app an identity by creating a splash screen and an icon. For this post, we’re going to look at some of the visual elements within the interface of the app.
The interface is comprised of the layout of the app, icons et al. And in the case of iOS, a lot of the hard work is done for us. With the Museum’s Field Guide, we based our layout for the iPad app on interface recommendations specified in the Apple Human Interface Guideline (HIG) documentation. There were a few reasons for this, which above all was that we wanted the interface to be familiar to iPhone/iPad users and new users alike as well as preventing the interface from getting in the way – letting the content be the feature. In addition we added specific icons and elements tailored to the Museum’s fauna content. For example, each animal species page has an image gallery, audio browser and ‘widgets’ that we created to display distribution information and the endangered status.
Let’s begin by taking a look through each of the visual elements that make up the Field Guide app. First and foremost is the main menu that contains access to the animals. This is the ‘Animals by Group’ home screen menu on the iPhone and iPod Touch or the menu on the left of the iPad app, which can be accessed by tapping ‘Animals’ when in portrait mode. Each top-level navigation item displays a silhouette icon of the animal group and once tapped displays a secondary navigation containing a square thumbnail photo of the specific animal. So let’s have a look at these closer and get a bit technical…
Animal Type Icons (top level navigation)
Each of these has a silhouette icon with two instances or ‘states’ – a default state in which a light grey icon is displayed and then a white icon in its active state (when the user taps on it). Of course you can make these any colour you like, however it’s best to always have the active state white, so that when tapped it ‘reverses’ out from the active blue highlight that surrounds each item in the list, matching the white text of the item.
Active state of an animal group, in this case, Butterflies.
Image: Simon O'Shea
It is also best to create your icons as a vector or line-based image rather than a pixel-based image. This means you can increase or decrease the dimensions of the image in future, without losing any quality of the original image. Vector images can be drawn with a software package such as Adobe Illustrator, Corel Draw or Inkscape.
Image: Simon O'Shea
Once you have the look of each icon, you need to determine the size and file type for export. It might be an idea to transfer your vector files to a pixel-based editor for the export process. An application like Adobe Photoshop, Fireworks, GIMP or Paint.net is best. You need to create two versions of each icon, one with default dimensions for iPad screens and iPhone and iPod Touch screens which are earlier than 4th generation. You also need to export versions of these for the Retina Display, which need to be double the dimensions. These versions should be exported as 72ppi 24-bit or 32-bit PNG files with transparency. In the Field Guide the icons need to fit within a width and height of approximately 60 pixels (120px for hi-res Retina). I’ve made our animal icons 56px × 43px each and 112px × 86px for the hi-res Retina Display. Therefore for each icon we need four files in total – one default state, one active state, one hi-res default state and one hi-res active state.