As you may know, I have a speed-dial app called Favorites for iPhone, and when the first version was released three years ago I wrote an article about how I designed its UI. I’ve recently been designing version 2 of the app, and I thought it might be interesting to show some of my UI designs for it, including a series of interim mockups showing the evolution of its appearance.
All of the screenshots embedded below can be viewed as a set on Flickr, but it’s more fun if you follow along here first (you can also click any one to see the full Retina Display-sized version). To better understand the changes in Favorites 2, I’ll be including some screenshots from version 1 for comparison.
Favorites 1 – First launch help
Easily one of the worst parts of Favorites 1, the first-launch help display. I cobbled this together at the last minute, and never got around to improving it. The always-available contextual help at the bottom of the screen somewhat removed the need for the additional blue call-out, but the screen looked very blank and intimidating without it. I wanted to address this in Favorites 2.
Favorites 2 – First launch help
The first-launch help in Favorites 2. Version 2 uses an on-demand help system in the form of sticky notes, with the single exception of the first launch: help is immediately displayed, and is not a modal display; it’s literally stuck to the background with tape.
The screenshot also demonstrates about half of the visual theme for the new version; a sort of ‘electric steel’ kind of colour scheme, with etching and understated textures. I found the previous versions of Favorites horribly dark to look at these days, and resolved to brighten it up considerably.
Note that in this screenshot, as with most in this set, the page-control (bottom middle) would of course not actually be visible until you had more than one screenful of favorites – it’s there simply because I had to work on its appearance alongside the rest of the interface.
Favorites 1 – Main screen
The main screen of Favorites 1. Favorites can be single-tapped to perform the “Default Action” (initially set to Call, but I’ve changed it to Text in this screenshot), or can be double-tapped to show the Overlay with further options. The ‘Edit’ button (top left) is analogous to tap-holding on an icon on the iPhone’s Home screen, allowing you to rearrange or delete favorites.
The ‘+’ button is disabled because version 1 deliberately imposed a maximum of 16 favorites, on a single screen. The cog button shows the app’s settings, and the info button shows the About screen with a link to the built-in tutorial.
Favorites 2 – Main screen
The main screen of Favorites 2, with two favorites shown. Favorites can be tapped to display the Actions Tray, with further options. The ‘?’ button shows some brief context-sensitive help in a modal sticky note. The cog button allows access to settings, the About screen and the built-in tutorial. The ‘+’ button adds a new favorite.
Favorites 2 – Help for main screen
An example of Favorites 2’s modal context-sensitive sticky-note help, which will arrive by falling directly onto the screen from (conceptually) in front of the phone. A moderate spotlight effect focuses the eye on the note. The handwritten font is genuine on-screen text, accessible to VoiceOver.
With a note visible, the question-mark button (which triggered the note) is disabled (not by the usual reduced-opacity “greying-out”, but by losing its blue visual energy). Tapping anywhere on screen removes the note.
Favorites 2 – rearrange/delete mode
The rearrange/delete mode, triggered (as on the Home screen) by tap-holding on any favorite. The position of the delete-button on each favorite differs from that on the Home screen, because their metrics are different – specifically, the frame of a favorite encompasses the entire icon + name area of a Home screen icon.
I’ve also (as in Favorites 1) omitted the “jitter” animation, because I strongly dislike it – I think it creates unhelpful emotional connotations, without conveying any useful information. The ‘Done’ button cancels this mode, as in Favorites 1 (since pressing the Home button would of course take the user to their own Home screen).
Favorites 1 – Overlay
The Overlay, from Favorites 1. This was modelled on the during-call display on the iPhone, and provides access to calling, texting or emailing the chosen default numbers/addresses for those functions selected for this favorite. The additional row of buttons below the primary actions allow picking a different number or email address for the respective actions.
If a FaceTime ID had been chosen for this favorite, a FaceTime icon would be visible beside their photo (top right), and tapping either would initiate FaceTime. The ‘Options’ button goes to the editing screen for this favorite, and the Cancel button dismisses the Overlay.
Favorites 2 – Actions Tray
The Actions Tray in Favorites 2, very clearly modelled on the folders UI from iOS 4+. I eschewed the awful “linen” background of actual folders, and opted instead (eventually) for some relatively quiet noise to give just a hint of texture. As with iOS folders, everything except the opened icon is defeated with a darkening layer and has its colour desaturated. I didn’t go so far as to apply a grain filter, as iOS does. I also keep the titlebar at normal appearance, to help the user understand that the help (‘?’) button is still available for use.
The labels of the action icons indicate which number or email address has been chosen for those actions, and the icons themselves are strongly modelled after iOS app icons and/or relevant branding, but with a distinct and unifying flavour which references the Favorites 1.x app icon. If additional numbers or email addresses are available for a given action (like the Mail action here), a popup arrow is shown to indicate that tap-holding anywhere on that icon or label will allow quickly picking a different number or address for the action.
I was very keen to capitalise on colour-recognition for the various functions, to ease target acquisition. There’s no particular colour for FaceTime except silvery grey, so I chose a strong purple colour which doesn’t overlap with any other actions. The identical green of the Call and Message buttons isn’t ideal, but is of course due to the similar situation with the Phone and Message apps.
As with folders, tapping the person’s photo once again will close the Tray. Tapping the Edit button will show the editing screen for this favorite. If no number or email address has been selected for a given action, and/or if the person’s contact-card in Contacts.app has no suitable field (e.g. for Twitter or Facebook), the corresponding action icon will not be present in the Tray.
The folders implementation would probably make a decent open source UI component to release independently.
Favorites 1 – Editing a favorite
The editing screen for a favorite, in Favorites 1. The topmost large button allows choosing a different contact to associate with this favorite, an ability I will remove in Favorites 2. It’s a somewhat bizarre option, and I think that most people would simply delete an unwanted favorite and create a new one instead.
It’s possible to choose to show labels/names for favorites (in the app’s settings), and you can choose which Label to use. A series of possible suggestions are automatically offered, including nicknames and assorted permutations of forenames, surnames and initials. You can also enter a custom label of your own.
The ‘badge’ is simply an optional small icon superimposed on a favorite: either Mobile, Home, or Work. It has no bearing on the numbers or email addresses used for calling etc, and is simply a visual cue.
The final four options allow choosing the default numbers or email addresses for calling, messaging, emailing and FaceTime. You can choose ‘None’ for any function to disable it.
Favorites 2 – Editing a favorite
The editing screen for a favorite, in Favorites 2. All of the “behind the scenes” UI in Favorites 2 (including this edit screen and all hierarchically-related screens, and the app’s About screen, Settings and Tutorial) use a similar visual cue to the Actions Tray – a recessed, gently textured dark background with interactive objects sitting on top, like an expensive set of tools in a padded case.
I removed the Favorites 1 ability to associate a different contact with a given favorite, and instead added the much-requested ability to customise a favourite’s photo independent of their contact photo in Contacts.app (which was always used in Favorites 1). The other options remain the same, with the addition of Twitter and Facebook options, if the appropriate fields have values in Contacts.app (Favorites 2 will be iOS 5+ only, and the iOS 5 Contacts application does indeed provide fields you can add for assorted social media services).
The screen can be scrolled upwards to reveal a single item below the fold: a red Delete button, allowing deletion of the favorite (with confirmation). Naturally, favorites can also be deleted from the main screen, when in rearrange/delete mode.
I wanted to have only the Delete button off-screen, and also to keep the contact photo relatively large without having a huge waste of space to its right, so I opted for a somewhat unconventional “contact card” arrangement for the photo, label and badge buttons/‘rows’. Tapping any of the controls will of course push you off to the right onto a new screen with appropriate options, as is the usual navigational mode on the iPhone. I think that, whilst unusual, the UI will be obvious enough to the majority of iOS users, and immediately/harmlessly discoverable to the rest.
I’ve also done away with the explicit Save button at the top-right, instead again offering contextual help if required. I see no need for explicit saving since the user is really just toggling easily-modifiable options, so every choice will simply be saved immediately.
Favorites 2 early mockups
For the sake of interest, I decided to include a series of early mockups for Favorites 2, exported from Photoshop at various points during the design process, to show the progression towards the final appearance. Many of them are some combination of embarrassing, illogical and bizarre – but those are the most fun to see.
Favorites 2 – Mockup 1
A very early mockup, showing a very conventional folder-like tray. Drop-shadows missing on the action icons! The grey of the Edit button was meant to correlate with the silver cogs of the Settings app, but just ended up looking disabled in this visual style.
Note also the ghostly “+” pseudo-favorite, which was to be the way to create a new favorite. This was a horrible idea, because it would always be moving ahead one slot whenever you did actually use it, and would be hanging around on screen like a bad smell, seeming to forever chastise you for not having made enough favorites already!
Favorites 2 – Mockup 2
Thankfully, the linen is gone – and momentarily replaced with rubber studs! There are also some truly horrible temporary etched buttons, and a new but not-long-for-this-world purple highlight colour scheme. A good general rule is: if you’re using an outer glow, you’re doing it wrong. At least we managed to finally get drop-shadows on the icons in the Actions Tray.
(Oh, and the Edit button has gained a healthy pencil-like yellow/orange colour, making it easy to find at a glance.)
Favorites 2 – Mockup 3
Thankfully both linen and rubber are now gone, and we have a pleasant soft gaussian noise (about 2%, monochrome) instead.
Favorites 2 – Mockup 4
Beginning to take shape now. A bigger, etched title in the top bar (it’s still too light, though), and something approximating the final colour-scheme. We also have tabs at the bottom, albeit with a fairly nasty regular contour that seems to sag out at the bottom. The tabs are also inset, though not for long.
Favorites 2 – Mockup 5
Etched title is now darker and much easier to read. The ‘Done’ button shows up for no logical reason other than to allow tweaking the colour scheme (it’s a bit too dark). We now have a better shape on the bottom tabs, but they’re lying flat against the background without any shadow, and their buttons look drab and a bit depressed (pun intended).
Favorites 2 – Mockup 6
Bottom tab buttons are closer to their final look, though everything needs brightened quite a bit. We’re also shamefully lacking white highlights on the bottom edges of all the etched elements, and the tabs are still sitting flat.
Favorites 2 – Mockup 7
Purple strikes again! It’s my favourite colour. Can’t blame me for trying.
Favorites 2 – Mockup 8
Back to blue-ish (teal, really). Finally, the bottom tabs have some shadow behind them, making a bit more visual sense. For some reason, the Favorites 1 app icon has temporarily appeared in the Actions Tray.
Favorites 2 – Mockup 9
The bottom tabs buttons have now brightened up to their final colour (still lacking edge-highlights, unfortunately). The two favorites now display both the appearance of badges (‘mobile’ in this case, on Lauren), and displayed labels/names (on Neil). Showing names is a global setting, of course, so you’d actually have them on either all favorites or none – but we’re just doing mockups, so it’s OK.
Favorites 2 – Mockup 10
A cleaned-up version of the prior Tray mockup, without superfluous icon or the Done button.
Favorites 2 – Mockup 11
A first pass, not meant entirely seriously, at the first-launch help redesign. The font was strictly temporary. I thought it was pretty adorable that the ‘+’ button would be sitting there, hoping desperately that someone would let it do its job. The thought-bubbles would have appeared from smallest to largest with an animation, of course.
Note that we’ve gained the ‘?’ icon for contextual help, but it’s at the top left instead of its final position at the top-right. I moved it later when I realised that having it at the top-left would preclude offering help in the hierarchy of favorite editing screens, since that position would be occupied by the usual iOS navigation controller ‘back’ button.
Favorites 2 – Mockup 12
Essentially the final version of the first-launch help, created not half an hour after the thought-bubbles concept.
Favorites 2 – Mockup 13
The contextual help for the main screen (when you do have some favorites). We still haven’t moved that help button.
Favorites 2 – Mockup 14
Beginning to create the favorite-editing screen, still using the strange old Favorites 1.x-era ability to pick a different contact to associate with the favorite. That huge, empty metal button is horrible. I also really hate the annoying shoulder-strap clip that’s sticking up from Neil’s right shoulder; it drove me crazy during this mockup.
Favorites 2 – Mockup 15
Playing with possible visual ways to indicate what’s a ‘label’ and what’s a ‘value’ for each setting. The inner shadow of the etching effect causes any bright solid colour to turn into dirty, fuzzy mush. The base colour of the “Label” and “Badge” labels is also pretty dark here.
Favorites 2 – Mockup 16
Hallelujah – we finally have light highlights on the etching! Clarity is improved by a huge amount. I also cloned-out that shoulder-strap clasp that was sticking up from Neil’s shoulder; totally unnecessary for the mockup, but it was irritating me too much.
I tried a neutral treatment for both labels and values, and it works visually – but doesn’t really convey all the info that I want to get across to the user.
Favorites 2 – Mockup 17
Neon disco! I refer you to my previous statement about outer glow meaning you’re doing it wrong.
Favorites 2 – Mockup 18
I was having trouble finding a suitable ‘value’ highlight colour, so it was time to go back to basics: try white, and try black. There’s an in-built prejudice towards thinking of lighter colours as better highlights (particularly on darker backgrounds), and it’s just not always true – as demonstrated dramatically here. Clearly, black (or thereabouts) is a far, far more readable ‘highlight’ for values.
Favorites 2 – Mockup 19
I tried toning down the black (or rather, toning it up into dark grey) to reduce the eye-slicing sharpness of the edges. It turns out that about 20% grey is ideal, as shown here – it’s still extremely contrasty, but is just a little kinder to the eyes.
Favorites 2 – Mockup 20
Lastly, I applied a very subdued (i.e. “shallow”) etch to the value-text, keeping their dark grey shade. This is the final appearance of labels and values in the editing interface.
Favorites 2 – Mockup 21
The almost-final editing screen. After this, I just reduced the sizes of some of the etched action icons for better visual balance.
Enough with the screenshots
And you’re done. I don’t have a release date for Favorites 2 yet, but I’ll keep you posted here on the blog. The original version is still available, and you can read more bite-sized chunks of software, UI and UX-related stuff by following me (@mattgemmell) on Twitter.