I’m pleased to announce that my first iPhone app, Favorites, is now available on the App Store. This blog post talks about my motivation for creating the app and some of my design decisions. You can also visit the Favorites product page at Instinctive Code (my business site), or go straight to Favorites in the App Store (iTunes link).
Favorites costs just $2, or the equivalent in your country’s iTunes store (Apple decides what that equivalent is, I hasten to add).
The concept for Favorites was “visual speed-dial for calls, SMS and email that’s right at home on your iPhone”. It looks like this:
The default behaviour is actually to show labels below each favorite’s photo, like this:
I like having photos assigned to my contacts (I love that they show up in Mail on my Mac when I’m reading a message), and I wanted a speed-dial app on the iPhone which lets me see those photos. There are several such apps on the App Store already, but none were quite what I was after. I decided that my ideal speed-dial app would:
- Let me call, text or email each favorite - not just call them. The iPhone is much more than a phone, after all.
- Be immediately familiar and easy to use for everyone with an iPhone.
- Look and feel like it came pre-installed.
I use my phone more for SMS than for calling (not an uncommon situation in the UK), so a priority was to allow choosing what the “default action” was when tapping a favorite (initially set to call, of course) - but to also allow the user to trigger any of the three primary actions at any time without having to create three different favorites. I decided to approach this by making use of an overlay, which I based on the call overlay you see when you’re making a call. The overlay in Favorites looks like this:
The overlay is triggered when you double-tap a favorite (though you can change this, and make single-tap show the overlay and double-tap perform your chosen default action: call, text or email). The overlay appears and disappears making full use of Core Animation: the semi-transparent black background fades in, the top and bottom sections slide in from above/below, and the action-buttons slide in from the side.
The three primary action-buttons in the middle each light in a different colour, and show the associated number or email address (and its label) above. Favorites queries that information on an as-needed basis from your Contacts, so it’ll always be up to date.
The way the user manages their favorites was critical to me; it had to be straightforward and intuitive. The one thing we’re all used to interacting with on the iPhone is of course the Home screen, so I decided that Favorites would essentially be a speed-dial Home screen for your favorite contacts. You can see the similarity in the previously-shown screenshot of my favorites with labels displayed; the metrics mimic apps on the Home screen pretty accurately. But the similarities don’t end there:
This is a good way to manage a grid-like selection of objects whilst remaining immediately familiar to the user; just drag a favorite around, and the others move out of the way to make room as you drag. There are a couple of differences from the actual Home screen, though:
- You enter and exit Edit Mode using the Edit/Done button at the top-left. I wanted this to be more explicit than the "tap-hold to toggle edit mode" behaviour of the Home screen, and not be triggered accidentally if the user held their finger in place for a few moments after a tap.
- The favorites don't jitter in edit mode. I'm not personally very fond of that behaviour (I think that some users may find it alarming and confusing), and it's also actually patented by Apple.
Deleting favorites also works as you’d expect, with a tap on the X button resulting in an alert asking you if you’re sure. Your favorites reflow live as you add and delete them, and also resize to better fill the available space (they’ll display as a 2x2, 3x3 or 4x4 grid depending on how many you have, with 16 being the current maximum as of 1.0).
So, that’s moving and deleting, but what about adding and editing? Obviously you add a favorite using the + button at the top-right, and you edit an existing one using the Options button seen in the overlay above. When you tap either of those, you’ll see the options screen.
The top button lets you choose a contact from your contacts list, and you can change the contact associated with a favorite at any time. The next sections let you choose a label (display-name) for your favorite, an optional badge-icon (Home, Work, Mobile) to superimpose on the favorite (like the Mobile badge on Tedster and the Home badge on my mum in previous screenshots), and the final three sections let you choose what numbers and email address to use for calling, texting and emailing.
Regarding the label option, Favorites will suggest several possible labels based on various permutations of the contact’s first name, last name, nickname, initials and so forth. You can also enter your own custom label.
I’ll be posting a follow-up article on many of my UI design decisions for Favorites, including talking about where I created custom versions of standard controls (like the grouped table appearance seen above). Look out for that sometime next week; I have plenty to talk about that isn’t immediately obvious from these screenshots.
Of course, good usability isn’t something you can entirely guarantee - no matter how much thought and design you put into something. Everyone is different, and it’s likely that the designer/engineer has a different concept of what’s intuitive or obvious than some of the software’s users. So, it’s wise to take two additional steps to offset the unknown factor of how others will perceive your product.
- Let them configure how it looks and behaves - but just a little bit.
- Give them help where they need it: built into the app itself.
Favorites lets you choose some settings, to let you make it work a bit more like you want it to. The most obvious one is what the default action is when you tap a favorite, but you can also choose whether the default action is triggered by tap or double-tap, where badge-icons are shown, and some other options too. These reside in the Settings application, since they’re a compact set of options which I believe you’ll probably tweak once and then rarely revisit.
You can also find a full tutorial and user guide built into the app itself - no network connection required. It’ll give you a gentle walkthrough of how to use Favorites, and includes illustrative screenshots, tips, and links to online support.
You’ll also notice from previous screenshots that there’s some concise dynamic help available at the bottom of the main screen; it serves as a quick reminder of how to interact with your favorites, and of your settings for the default action and how it’s triggered. It will change to give appropriate assistance when you’re in Edit Mode too.
I think that just about covers it for now. If Favorites seems like something you’d like to use, do feel free to buy a copy in the App Store (comes with free warm fuzzy feeling!), and/or if you’re interested to read more about the UI design and development process for Favorites and iPhone applications in general, check back here in a few days to read my follow-up article.
One final note: if you have feature ideas, bug reports or support requests for Favorites, please use the Favorites support site at GetSatisfaction - I look forward to hearing from you. Thanks for reading.