Imagining IconKit
Innovation often arrives in constricted spaces; limits inspire those confined by them to make the most of what they have access to. When you control a platform, there are things that you can do that third-parties aren’t able to. In iOS, one such thing that Apple are able to do is use their home screen icons dynamically. The date in the Calendar icon will reflect the date, and the hands of the Clock icon revolve to show the current time.
Third-party app developers, making the most of what they have access to, often use notification badges as a way to bring information to the home screen, as shown in the example below.
The introduction of Force Touch has really had me thinking recently. Now that it has been brought to market in both the Apple Watch and MacBook, I’ve been pondering how it could be used in Apple’s biggest platform: iOS. That train of thought led me to…
“What if you could use Force Touch to trigger actions from icons?”
Which in turn took me to…
“What if the whole icon experience could be made more useful?”
Coming up with ways that Apple could change iOS is all-too-easy. Coming up with ways Apple could change iOS in the practical, controlled and simple way that they would actually consider implementing, is another thing entirely.
At this point, iOS is a mature product. Adding features for power users is becoming increasingly common, but those features are kept in places only power users would look, such as five options deep in the Settings app.(Here’s looking at you, third-party keyboards.)
The golden rule, then?
If you’re going to add sophistication to a simple system, don’t let it make things harder for the average user.
With all of the above considered, here is my proposition for IconKit. Below are five dynamic icon types that would be available for developers to use within the IconKit framework.
Two things to consider:
- The dynamic icons described below could be enabled or disabled on a per-app basis within the Settings app.
- Icons can be set to become dynamic only when an app is in use, for example, when a maps app is being used for navigation.
Type 1 — A/B State
An A/B state icon would work like an On/Off switch. The A & B states would be triggered by using a Force Touch on the icon itself. For example, here’s a reimagined Remote app icon with an A/B state built in.
Whenever an iTunes Library or Apple TV were in range and playing something, a Force Press of the icon would pause the content on release, and switch the icon from it’s A State to its B State. It would click back underneath your fingertips, just like a physical remote control.
If you had the inclination, this one could be taken further; Once Force Touch had been engaged and had sent a haptic tap back to the user, instead of releasing your finger, you could drag your finger right of the icon to fast-forward or left to rewind. Or, you could continue holding down until a second piece of haptic feedback was received to go back, in much the same way as pressing the menu button currently works.
A/B State buttons are a look forward to a world where HomeKit is ubiquitous. They could turn your lights on and off, lock or unlock your door, or even start your car.
Type 2 — Live Text
Live Text allows an icon to display text-based information from an application without having to open the app itself.
The restrictions on Live Text are as follows:
- The font used has to be San Francisco.
- You can use Live Text a maximum of twice per icon.
- Any uses of Live Text have to be centrally aligned within the icon.
- There are three choices of text size. Each choice has a maximum character count: ‘Small’ is San Francisco Display can use the Regular or Medium weight at 40px, and can use up to six characters. Medium can use the Light, Medium or Bold weights at 70px and can use up to four characters. Large uses San Francisco Display Ultralight or Light at 160px and can use up to two characters. (This is based on an icon size of 180px x 180px).
- Developers can use any colours they like for their typefaces.
More examples of use cases for this kind of icon type:
- Dark Sky could let you know what time rain is next expected in your area.
- Lumy, an app which tracks the best time for photographers to shoot outdoors could display the starting time of the next ‘Magic Hour’.
- Timer+ could show a live countdown on the app icon. How long until the pizza has to come out of the oven?
Type 3 — Paned
The third dynamic icon type, Paned, allows an app to contain multiple PNG images to switch between throughout the course of a day, dependent on the state of something occurring within the app.
The changes could be automatically applied to events that are fixed in time every day, or they could respond to activity happening in the background.
Paned icons are ideal for apps that only have a limited amount of conditions to represent.
For example, weather:
Type 4 — Background Trigger
A background trigger is built around Force Touch. In this instance, a Force Touch on an icon tells the app to do something in the background, but without actually showing the app to the user.
For example, a force press of the Clips icon could push the contents of your iOS clipboard to OS X. A force press of the Get To Car icon could drop a pin in your current location to help you find where you parked later on in the day. Harvest could start a new timer. Voice Memos could start a new audio note in the background.
Type 5 — Action Shortcut
An action shortcut opens an app ready to capture, rather than opening the app where you left it. For example, where a normal tap on the Twitter icon opens the app in your most recent position on the timeline, a Force Touch of the app icon opens the app in the compose screen, ready to type.
This kind of interaction would be great for those moments that are easy to miss. How about if a Force Touch of the camera icon launched the app in video mode and already recording?
Want help with the next iteration of your product or app? I can help you take a look at things from a fresh perspective. You can reach me on email at hello@mattsayward.com, or find me on Twitter at @mattsayward.
