At WWDC this June, Apple announced the new Messages Framework that allows developers to build a new type of iOS app experience.
Instead of running as a stand-alone app, this framework allows us to build apps like a nested babushka doll: They’re discovered, launched, and interacted with entirely within Apple’s Messages app.
We’re always eager to get hands-on experience with new platforms and technologies, not only because it helps prepare us for future projects, but also because it’s a lot of fun. So here at the New York studio, two designers spent a week getting familiar with this new framework.
The mental model of an app has long been the idea of whatever functionality lies behind the app icon. Along with SiriKit, watch apps, and other extensions, the Messages framework is an exciting trend moving away from these self-contained experiences, moving instead towards a world where apps provide features and services when contextually relevant.
We believe in learning-through-building, which means this wasn’t a hypothetical exercise, but a practical experiment based around creating an actual application. Because of our studio’s interest in the future of TV, we decided to build an iMessage app around the idea of giving friends recommendations for shows and movies they should watch.
Below you’ll learn about our initial impressions from building our latest creation, but first, here’s a quick summary of what we discovered about this new platform along the way.
IMESSAGE APPS ARE NEW WAYS TO CREATE CONTENT
These new apps allow us to design alternative ways for users to create or find content sent using the Messages app, directly within the Messages app.
The content these apps create could just be simple text (for example, an iMessage app that allows users to quickly enter and send daily horoscopes without leaving the Messages app), or they could be media attachments, but Apple has also provided two new types of content to send through the Messages app: Stickers and interactive messages.
Stickers
Stickers are either static or animated images that can be inserted into a message thread, or placed on top of an existing message.
When sending a sticker to someone who doesn’t have iOS 10, they will simply receive the image as an attachment in their message thread.
INTERACTIVE MESSAGES
Visually, interactive messages are built using a fairly flexible template-based approach that allows you to present either an image, video, or audio clip with a variety of text captions. They also allow you to optionally encode additional data through a URL.
When sending an interactive message to someone who doesn’t have iOS 10, they will receive the media attachment and if it exists, the URL for further information.
For users with iOS 10, they’ll see the content of the interactive message displayed through the standard template. Tapping on the message launches the iMessage app if it’s installed, or displays an option to install the iMessage app if it’s not.
Unlike other types of content sent through the Messages app, interactive messages can be not only selected, but if the app allows it, they can be modified by any recipient allowing the potential for dynamic or collaborative experiences through the Messages app.
A SELF-ENCLOSED PLATFORM
Unlike app extensions such as custom keyboards or widgets, iMessage apps aren’t required to have a companion iOS app. Because of this, iMessage apps have their own stand-alone App Store, which also is embedded directly within Apple’s Messages app.
Stickers and interactive messages sent to people using iOS 10 display the app that created it, in addition to a shortcut to install that app. This allows for potential viral discovery of these new apps, creating unique and interesting opportunities for app designers.
iMessage apps are entering us into a new, more intimate era of mobile user experience, and with this in mind, ustwo New York dove head-first into designing and developing our first, completely stand-alone iMessage app.
OUR INSPIRATION: THE FUTURE OF TV
As part of our work from earlier in the year look at The Future of TV, we carried out extensive research into how people share content recommendations with their friends, including how they themselves like to be recommended content under different contexts.
In our research, we found that although people see value in content recommendations directly from services such as Netflix, Hulu and Amazon, they more so valued recommendations from peer groups. In addition to this, whilst they saw social networks such as Facebook and Twitter as a key source, the most influential and relevant recommendations came from closed social groups, with those conversations likely to happen via one-to-one or group conversations in messaging apps.
As our friends and family are strong influencers in that shows we watch, we decided to explore how an iMessage app can support this experience.
INTRODUCING WATCH THIS FOR IMESSAGE
Watch This allows people to easily share media-rich TV and movie recommendations without leaving their conversations.
A media-rich experience, users start by opening the Watch This app from inside their iMessage app store. From there, they can either choose their recommendation from a default “most popular” list, or search through a database of over 370,000 shows and movies available to watch across dozens of content providers. Add an optional, customizable message, and send away.
On the other end, friends and family receive your recommendation, complete with the beautiful cover art associated with the show. Tapping on the message, they are either prompted to install the iMessage app, or if the iMessage app is already installed, they are shown extra information about the show including options to launch relevant content apps, allowing them to start watching immediately.
THE DESIGN PERSPECTIVE: BEST PRACTICES
When it comes to designing for this new platform, it’s worth it to note that iMessages apps switch between two presentation styles: Compact and expanded.
The compact view is the default mode when users launch the messages app, and it’s good to think of it as a sort of keyboard. In iOS 10, the height is fixed to the same height as the default keyboard, and horizontal scrolling is not an option because this gesture is utilized to quickly switch between recent Sticker and iMessage apps that have been used.
The expanded view is the default mode when a user initiates the app by tapping on an interactive message. One almost gets a full screen viewport in the expanded view, except header and footer chrome persist from the messages app.
If the app has a companion iOS app, a button is shown in the top left cover giving the user the option to launch that full-scale companion app.
Recommendation: Provide options for task completion from the compact mode.
Design the default compact view so that users have options to choose content from here without switching into the expanded view.
For us, this meant including some default shows. Even if most interactions with the app include triggering a search through the expanded mode, these options help provide a visual clue to the purpose of the app.
Recommendation: Avoid triggering keyboard from the compact view.
iMessage apps are presented as a supplemental view to creating a message, and the text field where users compose text remains visible in both the compact and expanded views. Displaying additional text input in the iMessage app is possible, but can be visually confusing. Avoid this unless text-based search is essential.
Recommendation: Focus on the purpose of the app.
Don’t attempt to create an app that allows users to create stickers and interactive messages. Do one or the other (or create a separate app for each).
Don’t attempt to create an app that is optimized for both collaborative experiences (where at least one recipient also has the app installed) and content creation experiences (where only the sender has the app installed). Trying to do both creates too many variations that will complicate the experience. Do one or the other.
Recommendation: Be creative with the message template constraints.
There are a fixed number of layouts that you can create with the interactive message template, and space limitations with the text captions.
The image caption doesn’t do any contract checking, and will always be shown as a light text. Therefore, if you’re using content that might include a light background, it makes sense to process the image to darken the background behind the caption to make sure it’s always legible.
A good example of possible creativity is Yelp’s iMessage app: Instead of using text captions for the image, Yelp dynamically incorporates the property name and star rating directly into the image, which also provides utility for users receiving the message who don’t have iOS 10.
THE DEVELOPMENT PERSPECTIVE: TIPS & ADVICE
When users launch a message app, the mental model is similar to switching into the emoji keyboard. The launch time should be as quick as possible. Avoid a default screen that produces any latency. If you need to load content from a remote source, show cached content first.
Recommendation: Encode interactive message content in the URL.
Users don’t need internet connectivity to use the Messages app, so as much as possible, interactive messages should also work without internet connectivity.
If you have an interactive message that displays additional information when users tap on it to trigger the iMessage app expanded view, consider encoding as much information as possible within the associated URL so that this feature is still usable when an internet connection is not available.
var components = URLComponents()components.scheme = "https"components.host = "fallback.messageapp.com"let idItem = URLQueryItem(name: "id", value: "63247")let titleItem = URLQueryItem(name: "title", value: "Westworld")let overviewItem = URLQueryItem(name: "overview", value: "A dark odyssey about the dawn of artificial consciousness and the future of sin.")components.queryItems = \[idItem, titleItem, overviewItem\]components.url// -> [https://fallback.messageapp.com?id=63247&title=Westworld&overview=A%20dark%20odyssey%20about%20the%20dawn%20of%20artificial%20consciousness%20and%20the%20future%20of%20sin.](https://fallback.messageapp.com?id=63247&title=Westworld&overview=A%20dark%20odyssey%20about%20the%20dawn%20of%20artificial%20consciousness%20and%20the%20future%20of%20sin.)The downside to consider with this approach is that users who don’t have iOS 10 (and are therefore sent the fallback message) are going to see a messy long URL.
Recommendation: Use a placeholder image while waiting for remote images.
If you’re inserting an interactive message into the conversation programmatically, any existing message will be overwritten. This is actually very convenient because if your interactive message has a resource (image, video, or audio) that you need to load from a remote resource, you can insert a message with placeholder content, and then replace it immediately with the remote resource as it becomes available.
//private func createMessage(with content: MessageContent, andImage image: UIImage) -\> MSMessage// helper method that returns a message}let placeholderBackground = UIImage(named: "placeholderBackground")// Insert message with placeholder imageself.activeConversation?.insert(createMessage(with: messageContent, andImage: placeholderBackground))// Grab the remote resource asynchronously and update message with returned imageImageManager.shared.getBackgroundImage(from: remoteImageUrl, completed: { image inif let image = image {self.activeConversation?.insert(self.createMessage(with: messageContent, andImage: image)) }})
Tip: Triggering keyboard input from compact view.
If you attempt to have an element become the first responder while in the compact view iOS will throw an exception.
If you show an element that can trigger the keyboard in the compact view (for example a search bar) then you’ll need to do a two-step process in showing the keyboard: first prevent the element from becoming first responder, then transition to the expanded view, and finally request the search bar to be first responder.
// UISearchBarDelegatefunc searchBarShouldBeginEditing(_ searchBar: UISearchBar) -\> Bool {switch presentationStyle {case .compact: requestPresentationStyle(.expanded)return falsecase .expanded:return true }}// MSMessagesAppViewControlleroverride func didTransition(to presentationStyle: MSMessagesAppPresentationStyle) {if case .expanded = presentationStyle { searchBar.becomeFirstResponder() } }Conversely, when transitioning from expanded to compact view, you need to have the search bar resign being the first responder before being back to compact mode.
// MSMessagesAppViewControlleroverride func willTransition(to presentationStyle: MSMessagesAppPresentationStyle) {if case .compact = presentationStyle { searchBar.resignFirstResponder() }}Tip: Launching other apps.
Normally when you want to open another app all you need to know is it’s url scheme. For example if I want to launch the hulu app and start watching the episode with the id 286745 the following code would work on an iOS app.
// check to make sure url is validif let url = URL(string: "hulu://w/286745"){// check to see if url can be opened on appif UIApplication.shared.canOpenURL(url) {// open the url!UIApplication.shared.open(url, options: \[:\], completionHandler: nil) } else {// probably want to launch iTunes store to install Hulu app }} In the iMessage extension Xcode will prevent this from building with a compiler error.
Apple documentation says that extensions can instead use their extension context to open a url, but this only works in the Today extension:
if let url = URL(string: "hulu://w/286745"){// only works in \`Today\` extensions self.extensionContext?.open(url, completionHandler: nil)}Alternatively...
// helper function that crawls up the chain of responders until// one can perform the openURL messagefunc openUrl(url: URL) {var responder: UIResponder? = selfwhile let r = responder {if r.responds(to: "openURL:") { r.perform("openURL:", with: url)break } responder = r.next }}Finally, here are some additional resources from our team:
- Behind The Scenes: ustwo's Sketch file for Watch This
- Apple Human Interface Guidelines for Messages app
- Apple Messages API Developer reference
- https://developer.apple.com/reference/messages/msmessagetemplatelayout
WATCH THIS IS AVAILABLE NOW
Download Watch This on the App Store, start sending media-rich TV and movie recommendations to your friends and family today, and be sure to send us your thoughts and feedback on social media.
Watch This is now available worldwide! Here's what else new:
- We've added a settings screen so you can customize recommended playback sources.
- Support for iPad.
- Bug fixes.
ustwo TV is a team of designers, developers, and strategists dedicated to exploring innovative products and experiences focussed on the future of TV and entertainment — we work closely our partners to understand and solve complex challenges at the apex of business, content and digital product.