A closer look at the iOS7 App Switcher

Jan 10, 2014


Updates:

  • If you want to play around, I’ve posted some code on Github.
  • Adam Bell has some awesome details on how to add animations and keep cards up to date. Check out his blog post for more details.

How do you know of incoming messages when you don’t have the Mail app open? You either receive a push notification, or see a red badge with a number on the app icon.

Apps bring information forward to its users, even when they are inactive. In-built apps from Apple go so far as to pull out and place the most relevant and current information right onto the app icon. You may have already noticed that the Clock app icon is not static but shows the current time and the Calendar app icon displays today’s date.

Clock and Calendar app show the relevant info right within the icon.

Apple has revamped the app switcher in iOS7 and now present screenshots alongside with the app icon. Supplementing the notifications system, the app switcher gives running apps one extra channel to communicate their current state. In terms of real estate, the card associated with each running app is the largest visual representation outside of the app itself.

Unfortunately, Apple hasn’t provided any public API to set or alter the card’s content dynamically. Instead, the app’s fullscreen view is by default squashed down to the card’s size. This causes the switcher interface to feel cramped and text to be generally too small to read comfortably.

Default app switcher view shows cards as scaled down app interfaces.

Instead of letting the system create and present a scaled down interface, what if apps would take matters into their own hands and provide the system with a curated card view?

Designing your card view

On iPad and iPad minis, the size of the card view is exactly 50% of the screen size, on iPhone and iPods, the width is shrunk down to 47.5%. For 4” iOS devices (iPhone 5, iPhone 5s, iPod Gen 5) the resized height is rounded up from 539.6px to 540px.

Device         |  Card size   |  Device screen size
---------------|------------------------------------
3.5" iPhone(r) |  304 x 456   |      640 x 960
4.0" iPhone(r) |  304 x 540   |      640 x 1136
iPad           |  384 x 512   |     1024 x 768
iPad (retina)  |  768 x 1024  |     2048 x 1536

To generate the cards, the system takes screenshots of apps when they enter the background. The screenshot is then scaled down to produce the final card view. The resizing creates undesirable aliasing effects as shown below.

Preventing aliasing is straight forward: First, we design the card in its native resolution, i.e. the resolution in which it will be shown in the app switcher. For an iPad retina, the card view size would be 768x1024px (refer to table above). When the app enters the background and the system is about to capture the app’s interface, we trick the system by presenting an enlarged version of the custom card view, instead of the actual user interface. The system will happily snapshot the supersized view and shrink the image back to the card size in order to display it in the app switcher. The illustration below shows the result (click on the links in the caption to see the original, enlarged screenshots).

Left: Screenfeeder’s default card view (Original). Right: Text recreated in card’s resolution, then enlarged to full screen (Original)

On 4 inch devices (iPhone 5/s and new gen iPods) the numbers don’t work out as nicely because the scaled down screen height doesn’t end at a pixel border and therefore needs to be rounded up. Still this technique generally yields a better result with less aliasing effects compared to the iOS default as seen below (you might need to view the original on a retina device to see the difference).

Left: ClockShots time tracking screen resized down by system. Right: App screen designed in card resolution and scaled up using nearest-neighbor (Original).

Interactivity

As of now, with the exception of the status bar, card views are produced by flattening down the entire app screen. Once idle in the background, the card view is no longer updated. This can cause problems if your card’s content needs to be updated regularly while your app is running in the background (e.g. a time tracking app that wants to show the currently clocked in time).

Apps that need to update their cards can register to be notified for “background work”, which has the side effect of also retriggering the snapshotting process. However, there seems to be no way to define how often the callback should happen. The callback frequency is entirely controlled by the system and depends on multiple parameters, such as app usage. In my tests, times between regular callbacks can range up to 15 minutes. Independent to regular callbacks, additional callbacks are also triggered when the screen is turned on again after an idle period.

If your app supports both portrait and landscape mode, be aware that screenshot images used for card views are kept separated for each device orientation. When an app enters the background while in portrait mode, its landscape screenshot image will not be updated.[3]


“Widgets are typically examples of transient and auxiliary applications that don’t monopolize the user’s attention.” - Wikipedia


So far, very few apps have customized their card content and those that do only hide away sensitive information. Other than that, I haven’t seen any apps utilizing this new real estate to deliberately present a curated, minified version of the app interface.[1]

Some apps with curated card views: The camera app blurs the last pointed at scene and 1Password hides sensitive information behind a lock visual (Original).

Minified user interface such as widgets, status bar applications or mini views of larger apps have existed on the desktop for a long time. They allow users to efficiently glance through information and offer the most relevant and important actions for the current context.

iTunes restricts its mini view to show only the cover, song title and a few basic navigation controls.

Instead of tiny analog clocks, a responsive Clock App could for instance present world clocks as digital clocks when it is presented in the app switcher.

Responsive adaption of user interface to different screen sizes.

The app switcher cards on iOS can offer the same benefits as mini interfaces on desktops and allow users to peek into apps, without launching them in full screen. App cards strike a good balance between the “app becomes the device” mantra and the visual clutter other mobile widget systems produce. Integrated into the app switcher, cards allow the system to provide widgets, without the need to add them as a separate item to the OS.

Conclusion

The iOS7 app switcher provide apps with one additional layer to communicate their states. Aliasing issues can be mostly overcome by carefully designing card views in their native resolution. The lack of interactivity and the irregular update intervals make cards in their current form mostly useful for static content. Hopefully those issues will be addressed in the future with a dedicated App Switcher API.

How would you design your app to look like, if you only had the size of a card? How would your app interface respond to a scale down to half of its size? Design your card view to look that way.

Thank you for reading. I’d love to hear your thoughts.

@vpdn


[1] If you do, please let me know so I can link to your app.

[2] We could even argue that the full screen mode of apps is now the default for desktop apps and by this definition, all apps that are not presented in full screen are minified versions of the fullscreen representation.

[3] One work around might be for the app to create the screenshots manually (to be tested). Once flattened, screenshots are stored under “~/Library/Caches/Snapshots//Main/” inside the app’s folder. The filenames reflect the respective orientation and are named as follows:

UIApplicationAutomaticSnapshotDefault-LandscapeLeft@2x.png
UIApplicationAutomaticSnapshotDefault-LandscapeRight@2x.png
UIApplicationAutomaticSnapshotDefault-Portrait@2x.png

It might be possibleto override those images with your own images. However I haven’t seen the file names and location mentioned in the documentation, so this ifno could also change any time.


Launching soon: A Simple Time Tracking App

If you’re a freelancer and looking for a simple time tracking solution, I would love to hear your feedback on ClockShots. I’ve been using it myself for about a year and am now polishing it up for a release. If you’re interested, ping me up and I’ll add you to the beta tester list.