Why go to the trouble?

Our interest in the Apple Maps iconography is rooted primarily in our fascination with large icon sets and the challenges involved in creating a cohesive collection. Apple’s icon set for Maps isn’t readily available and had to be tracked down individually, which only added to our interest. Finding new icons — literally spread all over the world — became a scavenger hunt of sorts. (Think of it as an advanced game of Pokemon Go.) As new icons were added and icons and colors changed, examining these revisions and additions further fueled our interest.

We’re also hyperaware of the fleeting nature of our work. Because of this, creating some sort of documentation/historical archive for this icon set interested us. One of the rewards of our field is that our work has the potential to reach a mass audience. The trade-off however is that the shelf life for our work is often exceedingly small.

On the print side, design work is quickly discarded, forgotten and lost to decay. Little of a designer’s work is sacred. Highlighting this fact, take something as culturally significant as the Olympic games. Ben Hulse and Greg Durrell of design firm Hulse & Durrell travelled the world researching Olympic branding for past games — pouring over old artifacts and when available, graphics standards manuals — in an attempt to create as historically accurate and authentic a representation as possible of past games for the Olympic Heritage Collection. In the process they painstakingly digitally recreated emblems, mascots, and pictograms for past games, many of which had previously been recreated inaccurately and were being used incorrectly.

You might think that in the digital world it would be easier to keep track of and archive past work. Unfortunately with digital work, archiving in a way that the work can be experienced as originally intended is often even more challenging. With print, there is a physical artifact at the end of the process that is given a fighting chance at survival. However, with digital work like websites — and especially software such as the mobile applications we develop at Mercury — once a software update is pushed live or hardware becomes obsolete, previous versions all but fade away. Apps that we created just a few short years ago have long since had their backend services disabled and no longer run on newer hardware. These applications live on now only through screenshots and the occasional video.

The ephemeral nature of software can be disheartening at times. It is not unusual to see designers repeating mistakes made in similar applications that are no longer around to actively reference. In this instance, since Apple hasn’t collected these icons and presented them in a way that they can be viewed and considered as a collection, we did.

History

Current infographic systems such as this can often be tracked back at least in some small part to the AIGA Symbol Signs that were originally designed for the U.S. Bicentennial celebrations. Apple’s POI icons are no exception. The AIGA Symbol Signs, a set of 34 symbols designed by Roger Cook and Don Shanosky and commissioned by the AIGA and the U.S. Department of Transportation, were originally released in 1974 (expanded to 50 icons in 1979 and 55 icons in 1985) and were produced because as AIGA states, “While effective individual symbols had been designed, there was no system of signs that communicated the required range of complex messages, addressed people of different ages and cultures and were clearly legible at a distance.”

Apple’s icon set references almost half of the AIGA Symbol Signs in the POI system. Most of the icons are almost one-to-one, with the most signifiant changes being a Ferry with more windows and less waves, the removal of the sash and passport perspective for Immigration, and a less crowded Elevator.

If you are interested in learning more about the history of the AIGA Symbol Signs, Atlas Obscura wrote about the symbols in detail in 2015, noting that the original nursery symbol (a baby bottle) drew complaints from nursing mothers, prompting a change to the “Helvetica Baby” symbol in 1979.

Additions

Since we first examined the POI icons with iOS 8, Apple has made several additions to the set in an attempt to improve Apple Maps usefulness and more accurately represent human interest. There was a fairly significant number of new icons added with iOS 9 (37) with fewer additions for iOS 10 (17) and iOS 11 (7). Primarily because of the newly added ability to zoom in to airport terminal interiors, iOS 12 saw an uptick with 27 new icons. Disclaimer: It’s possible that some of the icons we’re noting as new at particular system levels were available earlier, and we didn’t discover them until a later version of iOS.

---

---

---

Consolidations

With over 150 icons in a set that spans multiple OS updates and likely several team changes, it’s not surprising to see some category redundancy. Several of these redundancies have been eliminated over the years, but a few still remain.

To be clear, I’m not referring to localized icon changes like Banks, Hospitals, Military Facilities, Police Stations, Post Offices or Japan’s localized set that also includes special icons to represent Castles, Schools, and more. As noted in our previous post, there is even a special Zoo icon in China that uses a panda—considered internationally as the national symbol for the country—instead of an elephant. And in Brazil, the Bars and Lounges Martini icon is replaced with a Caipirinha, their national cocktail. The remaining duplicate icons are mundane color variations.

---

---

Many of the icons that were consolidated in iOS 9 were beta explorations of search category quick links that were eventually adjusted to use existing icons.

---

---

---

Subtractions

A handful of categories have been eliminated over the years as well. Some Japanese-specific identifiers for government locations have been removed, as well as mountains, heliports, toll gates, and more.

---

---

Revisions

The overall style for the POI icons has been generally consistent since iOS 9 when the set saw an extensive redraw. Since then, however, several icons have continued to see refinement. For instance, the Aquarium dolphin which was given a smile and fin shadow inset in iOS 9, was reverted back to the previous, more simplified icon by iOS 10. One of the icons to see the most revision is the lowly Bakery croissant that has seen four stages of simplification and refinement over the years.

---

---

Though we can critique the icons as designers and communicators, we are not iconographers ourselves. To get an expert’s take, we turned to Scott Dunlap to share his thoughts. In comparing the iOS 9 set to some of the revisions seen in iOS 10 and up Scott said:

“The old versions were fine, but many of the new icons reduce ambiguity or are stylistically stronger. For instance, at small sizes the Toll Gate icon could be mistaken for a gas pump. The Ski Resort icon’s meaning was slightly ambiguous. Did it signify skiing, or that a ski lift is present? And the Pet Store icon’s simplification fits better with the other icons in the set.

I’d say the set’s biggest shortcoming is the decreased legibility when used at small sizes. As they get smaller many of the icons don’t hold up as well as they could, and should have simplified, bolder versions. Apple does supply different size variations, but for the most part they are very similar to their larger counterparts with minimal changes.”

Scott’s Pixi icon set, a simplified set of almost 600 icons, is a good example of the level of simplification Apple should aspire to for smaller sizes.

Color updates and categorization

We would be remiss not to note the dramatic improvements Apple has made in color categorization as well. There were almost 50 unique category colors as of iOS 8. By the iOS 9 beta period, color categories had ballooned up to 70. But by the time iOS 9 launched, Apple refined and reduced the overall color set to just 22 categories. As of iOS 12, 24 colors are used for categorization. Though some minor consolidation could still take place, the current set is a huge step in the right direction.

---

New holding element shapes

One last change of note is the addition of holding element shape differentiators (which you likely already noticed above). As of iOS 12, Transportation icons — both vehicular and pedestrian — have been changed from the standard circle to a rounded rectangle to further help call out these important items on the map.

---

Acknowledgements

We would like to thank Scott Dunlap for sharing his insights. Check out his work if you aren’t already familiar.

Justin O’Beirne has written some incredibly in-depth articles examining other changes and refinements to Apple Maps and how it compares to Google Maps priorities and decision making.

And thanks to everyone who has reached out to share additional icons that we hadn’t discovered. Michael Giskin deserves special credit for the numerous icons he has made us aware of.

Interactive…screensavers?

You did not misread that. Our old desktop screensavers were interactive, which meant that when you moved the mouse, the screensaver didn’t automatically dismiss. Instead, the user could do things like advance images manually, click through on links that would launch a web browser, or in some instances even select items that would expand or open a new experience directly within the screensaver itself.

Interactivity isn’t the norm for screensavers, but this concept isn’t completely foreign to Apple. For years Apple has offered an iTunes Artwork screensaver for macOS that allows the user to rollover and select an album cover to play that album. Since moving the mouse doesn’t exit the screensaver, the user must either hit the Esc key on their keyboard or select the Exit button at the bottom right of the screen.

Apple TV screensaver concepts

Our concepts focus primarily on captivating imagery with subtle animations and transitions. Though the screensavers are actionable, interaction is kept to a minimum. Each concept needs to stand on its own and be able to hold the user’s attention through imagery or utilitarian communication even in a passive state.

Red Bull TV Daily Highlights

For example, in the Red Bull TV screensaver example, short videos promoting their best content of the day are presented highlighting the best in extreme sports, culture, and lifestyle. Users can select the title of a promoted clip at the bottom of the screen to launch Red Bull TV and watch the full show or video.

---

Apple Movies

In the Apple Movies screensaver, featured movies available for purchase or rental through their app are presented with parallax layering and motion. An ever present chevron at the bottom of the screen indicates to the user that they can swipe up on the Apple TV touch surface at any time to access more information about the movie along with actions to watch the trailer as well as purchase or rent the movie.

---

Apple Weather

Our Apple Weather example is the least interactive. Here the screensaver displays localized weather based on the users location or a zip code entered in settings. Presented information includes current conditions, an hourly breakdown, and multi-day forecast. The background effects respond to current conditions similar to behavior in the iOS Weather app. Alternately, the background could feature localized city imagery adjusted for weather conditions or time of day.

---

ESPN Stories and Scores

The ESPN Stories and Scores screensaver displays top stories of the day from ESPN and an up-to-date scores feed. The user can optionally choose favorite leagues or teams to highlight during setup and can select the ‘Full Story’ button to launch ESPN and watch video of the complete story.

---

ESPN My Team

To highlight that each app can have multiple screensavers just like an iOS or mac app can have multiple widgets, we also mocked up the ESPN My Team screensaver. This screensaver is slightly different in that it focuses less on the news aspect and hones in on highlighting the best photos and videos of the user’s favorite team. Users choose the team to display during setup. Meanwhile a live ESPN ticker at the bottom of the screen keeps users up-to-date with the latest scores and news in the world of sports.

---

CNN Featured Stories

Finally, the CNN Features Stories screensaver example presents news stories as a sequence of images and videos with contextual information. The most important and interesting sections of the story are displayed to provide a quick overview of the story. At the conclusion of each story, users can choose to launch CNN for the full story. If the user doesn’t respond, the next story is presented.

---

Note that although this new interactive functionality might take a bit of time to acclimate to on Apple TV, exiting is still as easy as a single click on the Apple TV remote’s Menu button unless the user makes a selection in the screensaver. The main adjustment users would need to make to allow for interaction is that clicking the Touch surface of the remote would no longer dismiss the screensaver.

Choosing and customizing third-party screensavers

Like third-party widgets on iOS and macOS, third-party screensavers would only be available for apps that the user has installed. Once an app is installed, the user can go to system settings to choose their screensaver source from Apple’s defaults or their installed apps and can then choose the type of screensaver if the selected app offers more than one. Once the user has chosen a source and screensaver type, they can adjust any associated settings.

We present a few screens below to demonstrate how system settings could be adjusted to make room for third-party screensavers.

Screen burn-in concerns

Our take on screen burn-in is that the days of burn-in being the primary or only purpose of a screensaver are a generally a thing of the past. We are no longer considering CRT screens, which had serious issues with burn-in and image retention. The technologies of today have varying degrees of burn-in risk, but all are lower.

The burn-in risk in the designs we proposed are no different than continuous viewing of any sports or cable news network with a persistent ticker.

Most Apple TVs are also setup to power off after a specified period of inactivity. This can be disabled or set as high as ten hours, but the norm is in the fifteen to thirty minute range. Based on sources we looked at, newer TVs would have to have an image locked to the screen for two or more hours in a single session before there is any real risk of burn-in. One OLED test noted over 2000 hours of continuous static content on screen at maximum brightness before permanent burn-in occurred.

Regardless, we have been excited to see the debate. The concepts we present here are a starting point and only scratch the surface of what could be possible. There is certainly flexibility for non-static solutions if that is a concern.

Wrapping up

We would love to see Apple TV or one of the other TV platforms support third-party screensavers in the future. Virtually every other digital product we use can be customized and personalized to some degree. And yet it’s surprising how staid connected TV (CTV) systems like Apple TV are, especially considering that millions of us use these platforms as our primary entertainment devices now.

If you have any Apple TV screensaver ideas you would like to share, we encourage you to comment below. If you want to learn more about Mercury Intermedia, visit us at mercury.io.

Bottom Navigation in action

Over the last month, we have seen Google introduce the Bottom Navigation pattern in the Google+ and Google Photos apps. In both places, Google is using the Bottom Navigation bar for three to four of the primary sections and a Navigation Drawer (a.k.a. hamburger menu) to catch everything else. While neither of these implementations follow the guidelines Google recently introduced to the letter, we imagine that they were testing receptiveness and analytics for this navigational approach before making it official.

It only makes sense that Google would want to create more alternatives to the Navigation Drawer. After all, there have been a number of tests showing that while navigational approaches like the drawer and Spinner Menus clean up the interface, tab-like navigation seems to result in far better user engagement:

• 2013: Facebook moved away from the left navigation drawer after testing a number of navigation variations on over 8 million users.
• 2014: Zeebox discovered that changing their navigation from Tabs to a Navigation Drawer on their Android application halved their engagement time.
• 2015: Polar replaced their Segmented Control/Tabs with a Toggle/Drop Down/Spinner menu on iOS, and saw daily engagement plummet.

The iOS way

On iOS, Android’s primary competing platform the Tab Bar has been one of Apple’s preferred navigation approaches since the platform first launched in 2007. Like Google’s new Bottom Navigation approach, Apple’s Tab Bar interface is located at the bottom of the screen and is recommended for apps with two to five sections. Apple recommends the Tab Bar over other navigation approaches for primary navigation because of its ergonomic location of primary controls and clear exposure to navigation choices.

Google’s Bottom Navigation is not, however, a direct copy of iOS’s Tab Bar. Google recommends a number of things that Apple does not:

• Hiding Bottom Navigation on scroll: Apple never hides a Tab Bar on scroll.
• Using App Bar Tabs OR Bottom Navigation, but not both: Apple allows the use of Segmented Controllers and the Tab Bar together.
• Enlargement of the selected tab: Apple’s Tab Bar is static other than colorization of the active tab.
• Icons without persistent labels: Google has a design that allows a label to only appear on the selected tab, whereas Apple always includes labels in its Tab Bar.

Android’s former stance

In the past, Android specifically advised against the use of bottom tab bars to further differentiate their UI from Apple’s. This screenshot was taken from Google’s Developer Design Guidelines in February 2016:

Early Android devices had Back, Home and Overview buttons as a part of their physical device. As the Android platform matured, the Android Navigation Bar was introduced at the bottom of the screen to replace these hardware buttons. This shift created a new concern that stacking primary navigation controls directly on top of these system controls would lead to errant taps that could cause the user to close an app or go back when they intended to switch sections. We accepted this as a solid reason to not use bottom tab bars on Android and proceeded to design and build Android apps using other navigational patterns.

To tab or not to tab?

Tabs that appear at the top of the screen, directly under the app bar, have been a navigation pattern on Android since 2010. Google’s guidelines for tabs allow for many different variations and make them a fairly robust navigation pattern:

• Recommended for two or more destinations
• Text-based, icon-based with labels and icon-based without labels
• Fixed or scrollable
• Can be pinned to the top of the screen
• Swipe-able (my favorite thing about them because it negates the fact that they aren’t in an ergonomic location)

Bottom Navigation has not replaced tabs—they can be very similar visually—but are very different in interaction and placement:

The navigation pattern we’ve always wanted, or just another complication?

Since Android’s beginning, we have seen much exploration and experimentation around navigation patterns on the platform. Now Google has presented us with Bottom Navigation. It could be the navigation pattern we’ve been hoping for; after all, it’s a great alternative to navigation patterns that hide navigational elements under a tap, lives in an ergonomic location, and looks visually different from iOS’s Tab Bar. It could also complicate a platform that already has a Navigation Bar at the bottom of every screen and has tabs as a more established navigation pattern. As something that we’ve long been told to avoid on Android, it would be nice to have a little more explanation from Google to help us understand this change of heart.

More complete

Along with an extensive collection of navigation bars, segmented controls, table views, keyboards, and other reusable system components to help you build iPhone app mockups more quickly and efficiently, this kit includes a near complete set of Apple’s system icons for navigation bars, toolbars, tab bars, activity sheets, quick actions, settings, and weather. These icons are a handy resource to reference to ensure that your icons fit alongside the iOS system icons and are harmonious from a size, weight, and style perspective.

Our kit also includes a collection of over 80 recreated full-screen Apple system app screens to review, study, and reference. This is by far the largest resource of system apps you can find. While our obsession with compiling these screens seems a bit archaeological, we pride ourselves on presenting both the most referenced apps on iOS as well as hidden and often overlooked system tools such as Mail’s Markup feature (used to sign and markup PDF email attachments). We include this particular selection of screens either for their broad utilitarian nature or because of their unique structure in contrast to more standard iOS system screens.

More up-to-date

This iOS UI kit is based on the upcoming iOS 9.3 release, and includes new additions like Night Shift as well as recent changes Apple has made to system apps like Music and News. You can rest assured that the screens you are referencing here are as up-to-date as any kit you are likely to find for iOS 9.

More accurate

Great effort was taken to ensure that each item, object, and icon was accurately recreated. This means that even though each item was redrawn to be fully vector and scalable, each object was meticulously compared to the source screens in Illustrator’s Pixel Preview mode to match the originals and should be virtually pixel-perfect at 2x resolution.

More thoughtful

We have been creating iOS UI kits since 2009. This year, instead of just pulling system UI components from Apple’s system apps as we and others have done in the past, we took a step back to consider how we could make the kit more useful and more efficient to use in your own projects. This is why you’ll now find a series of generic navigation bar, segmented control, toolbar, tab bar, and table cell templates to pull from.

If you need a five section tab bar, select the five icon tab bar template with recommended icon size and max icon size guides. These guides make it easier than ever to drop in and position your own icons. Once you have your icons aligned properly, just delete the reference guides, and you are ready to go. We use this same structure to make setting up navigation bars and toolbars or adding table cell groups just as easy.

Illustrator AND Sketch

This is the first time we have offered our UI kit for Sketch. Mercury’s team still prefers to design iOS and Android mockups in Illustrator. The tools for Illustrator are still more robust for a lot of our day-to-day tasks, and we find that we can build in Illustrator more quickly. This kit itself was initially built completely in Illustrator and then ported to Sketch.

We continue however to flirt with Sketch and are closer than ever to moving to Sketch for screen layout. We continue to be blown away by Sketch’s plugin community. With Sketch’s growing maturity and new tools like Zeplin and InVision’s Craft being released for Sketch on a seemingly daily basis, it is becoming harder and harder to ignore Sketch as a powerful, affordable alternative to the Adobe juggernaut for web and app layout.

For those of you who use Sketch, we would especially love your feedback on the kit. Even though we aren’t daily Sketch users, this isn’t simply a lazy SVG port to Sketch. The Sketch document has been specially structured to take advantage of Sketch’s infinite canvas size and unlimited Artboards. Knowing that Sketch users tend to structure and organize their documents more like Photoshop’s layers environment, we have also taken extra effort to name, organize, and sort all layers and objects in the kit. (This effort applies to the Illustrator document as well.)

All gradients and font sizes that didn’t transfer over to Sketch properly were reworked. Drop shadows in Illustrator that were imported as bitmap graphics were replaced with native Sketch drop shadow object effects. As an added bonus, we made extra efforts to fully leverage Sketch’s Background Blur effect. This is something that simply can’t be replicated in Illustrator in a graceful, non-destructive way.

We pulled in a few additional bitmap images to the app screens section to help highlight the blur effect. But rest assured, even though it isn’t always obvious, virtually everywhere that Apple’s blur effect would be used, including the bar templates and keyboards in the UI elements section, we have structured these object groups to automatically trigger the Background Blur effect with the proper blur, color, and transparency settings. If you decide you don’t want the blur effect for your app, simply look for the background layer or a special layer with “blur” somewhere in the name and turn off the Background Blur effect in the Inspector panel.

If there is something unique to Sketch that you think we should be taking advantage of to make your workflow better, shoot us a message on Twitter @mercury or email us at hello@mercury.io. Improving the document for you will likely help improve our own workflow, so we would love to hear from you.

What we learned

We always try to take a moment to evaluate what we have learned by taking a close, extended look at iOS. It’s still a young operating system, but it has grown exponentially larger and more complex since the first version was introduced nine years ago. A few things stood out with this year’s conversion.

First, the ever growing set of system apps and features along with an expanding set of device sizes and resolutions has led to either a de-prioritization of pixel perfect detail on Apple’s part or simply many more overlooked and unrefined details. It was not uncommon to see sub-pixel blurring on icons, odd spacing of objects and icons, or in extreme cases, fully broken presentation on items such as popovers. There are even some older pre-San Francisco system fonts still floating around, such as DIN Alternate Bold in the video recording counter in Messages. Although we cleaned up some of these issues in the kit, many of them were left uncorrected.

Second, whereas in the past, Apple’s system apps have typically been a great resource to examine how iOS apps can be built with stock components, more and more of Apple’s own apps are branching out to include custom layouts, components, transitions, and animations. This isn’t necessarily a bad thing. It is simply a sign of a maturing OS.

However, if you are a designer new to iOS, you should be extra diligent to educate yourself on what can be leveraged easily from system components and what will need to be custom built. If you are unsure, it’s always a good rule to talk to an experienced iOS developer to get a clearer understanding of how a particular feature or transition will need to be built before spending extra time refining it or selling it to your client or project leads.

Finally, you may notice that some text in the Activity and Watch app screens has been converted to outlines. This is because Apple uses a rounded version of San Francisco in these apps that they haven’t made available to developers and designers. To match these screens more closely to the actual apps, we converted the text to outlines and manually rounded the letterforms. If Apple chooses to share the rounded versions of San Francisco with the community in the future, we will update our files.

Before you download…

The screens and objects within this kit were created at 2x resolution for iPhone 6 devices (750×1334) referencing original 2x iPhone 6 screenshots. We took this approach to achieve the highest level of detail on the most widely used iPhone screen size.

The original plan for this kit was to recreate everything at 2x and scale down to 1x for release. However, we soon realized that lines, objects, and icons in Apple’s 2x screens are not always aligned to even positions so they can be easily scaled down to 1x.

We have as many debates internally as occur within the design community at large about the merits of designing at 1x versus 2x resolution. If you feel strongly about 1x as the best approach, scale down by 50% and you’ll be most of the way there. Just know that scaling to 50% will cause sub-pixel (blurred) rendering of some lines and objects.

To fully take advantage of this UI kit, you will need Apple’s new system font, San Francisco, available for download on Apple’s developer site. You will need a developer account to download these font files.

Please note, Mercury doesn’t own any of the designs shared in these documents. You should ask permission from the proper rights holder and/or adhere to their rules and guidelines before downloading or using these files.

If you download these files, we ask that you not repackage them as your own to give away or sell. Otherwise, we place no restrictions on their use beyond the restrictions of their proper rights holder.

When you use these files to create great things, we would love to see them. Feel free to email or share with us on Twitter, so we can appreciate your hard work.

Files are compatible with Adobe Illustrator CC or newer and Sketch 3.6 or newer.

Last updated March 15, 2016

Need help with an iOS or Android project?

Mercury has been focused on creating great iOS and Android apps since 2008, and we are always looking for new clients to help build great app experiences. If you are looking to design and develop a new application or need a partner to help update an existing app, we are a full-service 36 member team that can help plan, design, develop, test, deploy, and maintain your application.

If we take this much care to create a tool to give away for free to our competitors, think of how much care we will take in creating the best app experience for your business. Send us a message, and we would be happy to set up a time to discuss your project in more detail.

Want to work at Mercury?

We are always looking for motivated, experienced developers and designers to add to our team. Send your resume along with a cover letter to jobs@mercury.io.

Nobody rides for free

One of the primary reasons to obsess over performance in your Apple Watch app is this: if you think people have a short attention span using their iPhone, wait until you see how little time they’ll spend looking at their new Apple Watch. This is partly by Apple’s own design, as the watch goes to sleep within about 15 seconds without any interactions.

Many of the early Apple Watch reviews (The Verge, Reuters, CNET, Daring Fireball) state how most third-party apps feel slow, which did not surprise us at all, as we’d absolutely gone down the wrong path several times and ended up with poor performance on our early versions. However, after each iteration, we would try again with a different approach until we finally produced a version of the app that felt good to use. After all of that effort, we can confidently say it’s possible to achieve reasonable performance from a third-party app, but here is the key: you must be willing to take a different approach than you would in an iOS app.

First, it is important to highlight one of the key constructs of third-party Apple Watch apps: they do not run natively on the watch, but rather run on the phone and send the data and screens to the watch via standard bluetooth. Apple provides several tools to help mitigate this, including both image caching and local storyboards on the watch itself, but even with those tools, third party apps start behind the 8 ball on performance before you even start doing any real work.

Even the simplest of screens with a few labels and a few buttons will take half a second or more to initially send to the Watch. Add in lists of things, such as a simple 10 to 15 row table, and it gets even slower, perhaps a second or more. If it happens to be a paged app that has 3 to 5 controllers, it’ll slow down even further. And if you attempt to have more complex layouts due to design requirements? You get the idea…before you know it, what seems like a simple app with a handful of screens can be littered with little second-or-more delays as each screen is sent to the watch the first time.  Apple provides plenty of valuable tips at developer.apple.com/watchkit/tips/, and we highly recommend reading and understanding them thoroughly. If you follow these tips, you will still have some small delays rendering screens, but it will become much more tolerable.

The next and more complicated issue was adding dynamic data and images. Apple recommends that WatchKit extensions offload the bulk of the work (like networking operations) to your iPhone app, and they provide a nice api for doing so openParentApplication:reply:. So our initial workflow was as simple as this: user launches our watch app, which talks via bluetooth to our WatchKit extension, which then asks for data from our iPhone app, which wasn’t running yet in the background on the phone; openParentApplication:reply: is called, which launches the app, which then takes the watch’s request and calls an API on our server, which processes the request and hands a response back to the app, which processes the response and hands the data to the extension, which then renders the table cells and sends them back to the watch! OK, perhaps that wasn’t simple, but it worked…but how did it perform?

Mad world

Apple was kind enough to set up labs so that registered developers could test their apps on a real Apple Watch, and we scheduled a visit immediately. Our excitement was quickly tempered as we found ourselves staring at the watch waaaaaaay too long before seeing pixels. As our Design Director, Rusty Mitchell, noted in a previous post on the psychology of waiting, even short wait times can have a significant impact in the number of users willing to stick with your app or service.

We quickly learned that even delays that feel tolerable on the iPhone feel painfully slow on the Apple Watch. The above approach just wasn’t gonna work for our app. It’s easy to point the finger at Apple and blame WatchKit for being slow, but at the end of the day, users simply aren’t going to use apps that are slow, regardless of who is to blame. Disappointed, we returned home determined to do better, both on UI and performance.

After scratching our heads a bit, we had a minor epiphany: we had to stop viewing the watch app as a smaller version of our iPhone app, and instead simply consider it as another view of the iPhone app’s data. Taking the same traditional iPhone app approach of requesting data as the user interacts with the app just simply wasn’t going to work. We had to move to a model where our iPhone app would write out watch data and images proactively (both during usage and with background tasks) so that when the user opens the app on their watch, the watch app simply has to render data it has already received, with no server round trips required. For many apps, this approach likely will take lots effort to do properly, and likely will require a rethinking of what data is retrieved and when, but it had a dramatic impact on the usability of our app.

So how did we do it? Our app’s data layer is fairly large, and to bring it over to our WatchKit extension would make it tough to keep our WatchKit code clean and lightweight. Plus, our watch app only shows a very small subset of our data, both in quantity of data items and in the amount of info about each item. WatchKit provides several options for sharing data between your iOS app and your WatchKit extension. Due to the amount of data and images, we chose to use “shared containers,” which is essentially a directory that both your processes can write to and read from.

Free yourself

Following the KISS principle, we decided to simply use basic lightweight JSON files for data and jpg encoded NSData files for images and save them both to the shared container. Then in the WatchKit Extension, we have a very simple model class that consumes the JSON and binds it to our watch screens. The crucial part of the model class is that it contains only about 10-15% of the fields that might be on the full blown persistence models on the app side. Each model in the app that wants to exist on the watch implements a conversion method that will create the thin JSON version of itself for the watch.

We then added triggers in our iOS app that populate watch data anytime it’s needed, be it new data from server, updates from user, etc. Any event or action that affects what might be displayed on the watch triggers the new objects and images to be written to the shared container.  We also implemented background tasks that do the same thing so that the data stays as fresh as possible, even if the user isn’t regularly running the app. Because the lightweight data and images are already saved to the shared container, the WatchKit extension simply has to render the screens when the user launches the app, without the need for any additional server trips or image downloading.

She’s like the wind

Once we implemented the above approach, our app instantly became fun to use and no longer felt dramatically slower than the built in apps on the Watch. With  a few more trips to the Apple labs, we confirmed that our new approach works well, and we are very confident in our first app release.

While this exact implementation might not work (or be relevant) to your app, I suspect with enough effort and crafty thinking you can figure out ways to at least work towards this approach. The key is to explore creative ways to have your watch app and iPhone app work together rather than viewing the Watch app as a miniature version of your iPhone app.

---

1 This project was built by a very effective combined team consisting of both Mercs as well as senior devs from our client, including José Ibañez and Brad Spenla.

About Apple’s location icons

In iOS 6, Apple moved away from Google as their map data provider and started using small versions of the current location icons in the updated Maps app. These icons are presented on the map to callout various types of landmarks and businesses. Prior to iOS 6, many of these same locations were identified in Maps, but the icons used were smaller, and you couldn’t tap the icons to get more information about the location. Though the presentation of the icons changed slightly with iOS 7, the purpose and functionality of these icons has remained the same since iOS 6.

iOS 8 Spotlight enhancements

In iOS 8 Apple introduced an overhaul of Spotlight, the system-wide search functionality that is accessible by swiping down from the Springboard. iOS 8 expanded the functionality of Spotlight beyond content on your device to include several new external sources, which you can read more about on Apple’s What’s New in Spotlight page. (These same features are available in OS X as of Yosemite as well.)

One of the new Spotlight search features is the ability to locate nearby places. These location results use a larger version of the location icons used in Maps to identify these places.

This new Spotlight functionality can be really handy. For example, if you have an emergency and need to find the closest hospital, activating Spotlight search and typing in “hospital” will present the closest medical center with its name, address, and phone number. Tapping this item in Spotlight will pull up the Maps detail modal for that location so you can quickly call or get directions. And it can be just as handy to find the closest pizza joint or to search for nearby locations by name.

Finding nearby Spotlight location icons

If you live in or near a large city, you shouldn’t have much trouble finding the majority of the icons in the set by searching for local businesses or using the category names listed in our UI kit.

A few icons such as Banks & Credit Unions, Fire Departments, Military Bases, Police Departments, and Post Offices are different based on familiar iconography for a particular country.

Post offices in Australia and Germany, for example, are indicated by a post horn instead of the envelope that those of us in the United States are more familiar with. The post horn was once used to signal the arrival or departure of a postal rider or mail coach in European countries, and it holds enough significance to also be denoted in Unicode as U+1F4EF as well as have two Emoji associated with it (the horn itself as well as a Post Office building).

The Hospitals icon sometimes changes based on dominant religious affiliations in the region. Middle Eastern countries with strong Muslim ties use a crescent moon instead of the cross to call out medical facilities while Israel uses the star of David because of its important symbolic meaning to the Jewish community. By the way, although I have seen the crescent moon and star of David icons used in Maps for Hospitals, I haven’t been able to trigger them using Spotlight.

Some location categories are tied to their environment. For example, since Nashville, Tennessee is landlocked, devoid of mountains, and lacks an aquarium, there are no results when searching for sailing, mountains, or aquariums.

Then there is Japan

There were many icons that I was only able to find in Japan. For those of you familiar with how much more detail typically appears on Japanese maps, this is pretty unsurprising. Unlike maps in the rest of the world, Japan’s maps call out every traffic light and have special branded icons for some businesses such as 7-Eleven, Lawson, FamilyMart, Starbucks, and several others. Honestly, I don’t know why Japan’s maps are more detailed, though I assume it likely is simply a result of better data coming from Japan’s map data provider.

As for Apple’s location icons, I was only able to locate Castles, City Halls, Convenience Stores, Day Spas & Hot Springs, Heliports, Landmarks & Historical Buildings, Lighthouses (only seen in Maps), Planetariums, Prefectural Offices, Shrines, Temples, Tours, and Ward Offices in Japan. Several of these icons (Castles, City Halls, Day Spas & Hot Springs, Landmarks & Historical Buildings, Prefectural Offices, Shrines, Temples, and Ward Offices along with Japan’s Fire Department and Hospitals) are based on the official mapping symbols of the Geospatial Information Authority of Japan (GSI), the national institution responsible for surveying and mapping Japan.

One last thing while we are discussing Japan. The swastika — or manji as it is known in Japan — is used to represent Buddhist Temples. The manji is an important religious and cultural symbol with strong ties to Hinduism and Buddhism. It doesn’t hold the same Nazi-affiliated stigma as it does in Western culture.

Inconsistencies

There are some icons with duplicates that aren’t really explainable and a few inconsistencies. The second Beaches icon is much more rare for example, but I really can’t decipher why two are necessary. Campgrounds has two icons, though I’ve only seen the second one in remote areas of Japan and the icons are pretty much interchangeable. (Both Campgrounds icons are used in Japan, by the way.)

The castle-like third Public Services & Government icon is used for some castles in Europe but represents prisons in the United States. Multiple icons are used to represent Stadiums & Arenas as well. The first Stadiums & Arenas icon is the most common, with the second being used for some — but not all — raceways, and the third used to represent what I assume are public fitness arenas in Japan. Train Stations are represented by four icons. The first two are used throughout the United States to distinguish between trains and light rails, but the third which appears to best represent a subway system is only used for the London Underground, and the fourth only to denote Japan’s high-speed Shinkansen railway.

Finally, because the panda is native to south central China and is viewed internationally as a Chinese national emblem, the Beijing Zoo icon is noted by a panda instead of the elephant used for other zoos around the world.

Simulating other locations with Xcode

I initially discovered that there were more icons other than the ones I could find in the Nashville area simply by moving around large cities like New York and San Francisco in the Maps app. But even after finding new location categories, because Apple limits Spotlight location results to places that are nearby, searching for these places in Spotlight produced no results. After a bit of digging I stumbled across Nick Arnott’s post Using Xcode to Test Location Services, and realized I could take this approach to trick my iOS device into thinking that I was traveling the world from the cozy comfort of my desk.

If you are an iOS developer and have Xcode installed, all you need to do is create a new iOS Application Project (I created a Single View Application named Locations), set your application’s Location to your connected iOS device, and build and run your new app on your device. Once the application is built and running on your iPhone or iPad, go to the Debug menu in Xcode on your computer and select the Simulate Location option. Within Simulate Location, you will find a set of twelve default locations provided by Apple to choose from.

Once you select one of these locations, open the Maps app on your iOS device and tap the Current Location icon in the bottom left hand corner to confirm that your device has properly applied your simulated location. If everything checks out correctly in Maps, you can go back to the Springboard and start searching within Spotlight now for locations near your simulated city.

You can add additional locations in Xcode as well. If you want to add your own locations, you’ll need to create a GPX (GPS Exchange Format) file for each new location and associate these files with your Project. You can do this by creating a GPX file in your text editor of choice, naming it with the .gpx file extension, and then adding it via the “Add GPX File to Project…” option under Debug>Simulate Location in Xcode or be creating a new Empty File in your project in Xcode and naming the file with the .gpx extension and adding the GPX file info.

The GPX file itself is pretty straight forward and looks like this:

<gpx>
    <wpt lat="33.3250" lon="44.4220"></wpt>
</gpx>

The unique info you’ll need for each location is its latitude and longitude, and you’ll need to adjust the lat and lon numbers listed above for each new GPX location file you create. I used a now defunct site to find the coordinates I needed, but there are several ways to look up a locations latitude and longitude.

Wrapping up

With a few exceptions, Apple’s location icons work fairly well as a unified set. Some icons such as Bakeries, Convenience Stores, and the primary Stadiums icon are a bit too complex when compared to the overall set, and the transparency used in the secondary Military shield icon feels out of place.

Apple also attempts but struggles to categorize types of locations by the color of the background used with each icon. The color set is fairly robust with at least 46 shades and there are clear inconsistencies in the way these colors are sometimes used. For example, the golden yellow icon background is used for shopping as well as recreational and sports-related locations.

However, I want to avoid being overly critical of the set. Taking on an icon set of this complexity, especially one that needs to be understood around the world and also has to read at the minuscule size required in the Maps app is a huge undertaking that Apple should be commended for.

If you happen to find any of Apple’s location icons in Spotlight that I haven’t included in our iOS 8 UI kit, shoot us a message @mercury on Twitter or send us an email at hello@mercury.io.

Requirements and limitations

Requirements

• A device running iOS 8 or OS X Yosemite. (Older OSs can share location and have access to the shared calendar, reminders, and photo streams. They can also take advantage of Ask to Buy.)
• An Apple ID signed in to iTunes and iCloud.
• All family members must live in the same country.
• A credit card is required for the organizer’s payment method if participating in Ask to Buy (debit cards are not allowed).

Limitations

• Family Sharing groups are limited to six members.
• Music, movies, TV shows, and books can be downloaded on up to 10 devices per Apple ID, five of which can be computers.
• Not all apps are eligible for Family Sharing (more details below).
• Content downloaded or acquired via redemption codes is not subject to Ask to Buy.
• Accounts are limited to one Family Sharing group at a time.
• Users may only change the Apple ID they are using to share with their family once every 90 days.
• Users may only switch family groups once per year.

Activating Family Sharing

Family Sharing can be activated in Settings on iOS or OS X Yosemite (coming soon) by selecting iCloud and choosing “Set Up Family Sharing…”

Note: Setting up a new Family Sharing group must be initiated by the organizer who then invites family members to join.

Billing and charges

Who is charged for purchases made in a Family Sharing group?

All charges are applied to the Family Sharing organizer’s associated credit card account unless the purchasing family member has store credit.

How are iTunes/App Store gift cards and store credit handled?

Each family member can redeem gift cards or add store credit to their own account. A family member’s store credit is always applied before the organizer’s credit card is charged.

If the Family Sharing organizer has store credit and another member makes a purchase and does not have store credit, is the other member’s purchase deducted from the organizer’s store credit or charged to the organizer’s credit card?

The purchase is charged to the organizer’s credit card. No one in the group will ever have their purchase deducted from another group member’s gift card/store credit.

Can I setup iTunes Allowance for members of my Family Sharing group?

Yes, iTunes Allowance must be setup and managed from iTunes on your Mac or PC. For more information see Set up and manage iTunes Allowance. iTunes Allowance is a monthly recurring amount deposited in an iTunes account that is billed to the person who sets up the allowance. Amounts may range from $10 to $50 in ten dollar increments. Allowances can be adjusted, suspended or cancelled at any time.

Can I tell if a Family Sharing member has used their allowance for the month or automatically deny paid purchases once their allowance is used for the month?

No. There is currently no way to tell what a family member’s store balance is without having access to login to their account or asking them. There is also no way to automatically deny paid purchases once a family member uses their allowance or hits a certain limit.

Sharing store purchases

Where do I view and download my family’s purchased content?

Any family member may view purchased content from all other family member’s who choose to share their content in the Purchased area of the related store. Once in the Purchased section, tap a family member’s name to view and download their content. For more information see Sharing purchased content with Family Sharing.

How do I hide purchases made with my account?

Any family member may hide purchased apps in the Purchased area by selecting My Purchases and then swiping left on an item in the list and selecting the Hide button. The iOS iTunes app does not allow swipe to hide in the Purchased area. To hide music, movies, and TV shows purchased in iTunes, access Purchased from your account in the PC or Mac iTunes app and click the x that appears in the top left of a purchased item when rolled over and confirm that you would like to hide the item. In the Mac App Store Purchases area, Control-clicking on an app reveals a Hide Purchase… option. Purchases that are hidden will not appear in your shared items for other family members.

Are purchases made before Family Sharing was setup shareable?

Yes. Any movie, TV show, song, or book can be shared regardless of when the purchase was made. This also applies to any app with an App Store page indicating “Family Sharing: Yes.”

Why do some apps not support Family Sharing?

Moving forward, Apple is requiring all new and updated apps to support Family Sharing. Developers must agree to Family Sharing support as part of an updated iOS and Mac Paid Agreement in iTunes Connect. Apps that have not been updated since the new agreement went into effect will not have Family Sharing support. Developers also have the option to opt-out of Family Sharing for previously released apps that are not updated.

How can I check to see if an app supports Family Sharing?

To check to see if an app supports Family Sharing, go to the app’s page in the App Store and scroll to the Information section under the Details tab and look for “Family Sharing: Yes” or “Family Sharing: Not Available.”

Does Family Sharing apply to in-app purchases?

No. In-app purchases are not supported by Family Sharing. For more information see Make in-app purchases.

Personally, I can understand Family Sharing being disabled for consumable in-app purchases such as Peeks in Mercury’s competitive crossword game Crossly, but I hope Apple considers allowing developers to flag certain types of in-app purchases such as premium mode upgrades and ad free modes as optionally shareable.

Are there any other items that do not support Family Sharing?

• Songs added to iTunes Match from outside of the iTunes Store and items that are no longer available on the iTunes Store are not shareable.
• On an Apple TV, shared music is not accessible.
• Content received through Apple ID for students will not appear in shared purchases.

Does the Mac App Store support Family Sharing?

Yes. The Mac App Store on OS X Yosemite supports Family Sharing.

I received a Redownload Unavailable with This Apple ID error when attempting to download a previously installed application. How do I resolve this issue?

To resolve this issue, log out and back in to your account. The full error for this alert reads, “Redownload Unavailable with This Apple ID This redownload is not available for this Apple ID either because it was bought by a different user or the item was refunded or cancelled.”

Current speculation among app developers is that this error only occurs for applications that have not approved Apple’s amendment to the Paid Applications agreement. Although we have not been able to verify this, we can confirm that our free apps appeared in the App Store as “Family Sharing: Not Available” until we agreed to the Paid Applications agreement.

Setting up child accounts

Why would I want to setup a Family Sharing child account?

A child account is required to participate in Ask to Buy. Ask to Buy requires children to get approval from the Family Sharing organizer or another designated adult when downloading iTunes and App Store content. Child accounts also do not require address and payment information since they are tied to the Family Sharing organizer’s account.

How do I convert a previously created Apple ID to a child account?

Some users bought .mac family bundles back before birthdates were required. Others entered inaccurate birthdates when creating accounts for kids in order to secure .me accounts for them or to allow them to have separate Apple IDs before they were of the proper age. Changing these types of accounts is one of the most common frustrations when setting up Family Sharing. Apple does not make this process straightforward or easy.

If you want to keep an existing Apple ID and change it to a child account, the best way to do this is to change the birthdate to a date that places your child’s age in the 13 to 18 years of age range (many have suggested 01/01/2001 as an easy date to remember). This approach allows your child to keep their existing account and any GameCenter stats or purchases tied to it. Setting your child’s age in the 13 to 18 years of age range allows you to enable Ask to Buy as well, though it will not be active by default.

If your child is under the age of 13, and you insist on their Apple ID reflecting their age accurately, your best bet is to create a new account for your child and start fresh. Some people have reported calling AppleCare and jumping through hoops to change the account over the phone, but the results appear to be hit or miss.

What is the difference between child accounts for children under the age of 13 and those 13 to 18 years of age?

The main differences are that children under 13 years of age can not leave the Family Sharing group, and they have Ask to Buy turned on by default on their accounts. Note that even though Ask to Buy is turned on by default, it can be disabled for children under the age of 13 by the organizer. Even though Ask to Buy is not on by default for children 13 to 18 years of age, it can be turned on for these accounts as well.

One other difference is that family members over the age of 13 can remove themselves from a family group at anytime.

I received a Can’t Create Apple ID address error when setting up my child’s account. What does this mean?

The Family Sharing organizer’s account may somehow have been setup without an associated address. The organizer must have a mailing address associated with their account before a Child Account can be created. The full error for this alert reads, “Can’t Create Apple ID Address line 1, postal code, country code or Address line 1, city name, State Province, country code are required.” Unfortunately, it isn’t the most user friendly or clearest alert message. I went through the child account setup and encountered this alert twice before it occurred to me to check the organizer’s account info.

Ask to buy

I received a Cannot Enable Ask to Buy error that states, “[FAMILY MEMBER NAME] is sharing purchases from an account also used by another family member. Ask to Buy can be enabled only on accounts that are not shared.” How do I resolve this issue?

You must be logged out of any previous shared iTunes accounts in the App Store, iTunes, or iBooks on the offending device and logged in with a child’s account before initiating Ask to Buy.

Can more than one person in the Family Sharing group approve purchases?

No, only one adult family member at a time can approve purchases. However, this does not have to be the family organizer. The organizer can transfer this ability to another adult family member and can reclaim this privilege at any time.

Who does Ask to Buy apply to?

Ask to Buy is on by default for all children under 13 years of age but can be turned off by the Family Sharing organizer. Ask to Buy can also optionally be activated by the organizer for anyone in the family group between the ages of 13 and 18.

What happens to Ask to Buy once my child turns 18?

Once Ask to Buy is activated for a family member, it stays on even after they turn 18, until it is manually turned off. Once Ask to Buy is turned off for a member over the age of 18, it cannot be turned back on.

Does Ask to Buy still require my child to enter their Apple ID and password?

Unfortunately, yes. Although Touch ID can be leveraged on supported devices, non-Touch ID devices must enter an account and password.

I’m concerned that younger children may have difficulty remembering and protecting lengthy and potentially confusing passwords when requesting to make a purchase. Passwords still have to be eight characters or longer and include at least one capital letter and one number.

Does Ask to Buy apply just to paid content?

No. Free apps and other content have to be approved as well. If your child has any previously installed apps from a pre-Family Sharing shared iTunes account that are updated, each of those updates also need to be approved the first time they are updated and will then be associated with the child’s account. Ask to Buy applies regardless of payment method as well. Even if an Ask to Buy family member has store credit, their purchases must still be approved first.

Since Family Sharing purchases are all tied to the organizer’s credit card, can the organizer view all member purchases from their iTunes account?

No. Each family member’s billing is only viewable from their own individual accounts.

Can I tell at the time of purchase whether an Ask to Buy purchase will be charged to my credit card or my child’s store credit?

No. There is no indication given at this time to tell whether an Ask to Buy purchase will be billed to your credit card or to your child’s store balance. You will need to know in advance that your child has store credit or check your child’s purchase history after the purchase to verify how the purchase was billed.

Enabling restrictions

Can I restrict certain types of content through Family Sharing?

Restricted content in iOS and OS X are handled outside of Family Sharing. But combining Restrictions with Family Sharing is a logical and natural request for many of us. On iOS, go to Settings>General>Restrictions to restrict access to certain applications and actions such as in-app purchases or installing and deleting apps. Access to content based on ratings restrictions may also be set for music, movies, TV shows, books, apps, Siri, and websites. On OS X, these same restrictions are split between Settings>Parental Controls and iTunes>Preferences>Parental Controls. Once Parental Controls are set, they can be locked and are then only accessible with a PIN number or password. For more see iOS: Understanding Restrictions (parental controls) and Use Parental Controls in iTunes to set content restrictions.

If an unrestricted family member downloads content that is restricted by another family member, can the restricted member still see that item in the unrestricted member’s purchases list?

Yes, but they cannot download the item. In the same way that all users can see explicit music or other restricted content in the iTunes Store but can’t download it, restricted family members can see restricted content in an unrestricted member’s purchase history. This can be especially problematic if you purchased something like the explicit version of Cee Lo Green’s hit song F**k You, which surprisingly appears in the iTunes Store purchase history list without obfuscated characters for the album name. If the unrestricted family member would rather the restricted family member not see their purchases, they can turn off Share My Purchases completely in Settings under iCloud>Family or they can hide individual items as noted above under “How do I hide purchases made with my account?”

Leaving a Family Sharing group

Apple has an excellent guide answering questions on leaving and transferring a Family Sharing group. For more see Leave Family Sharing.