Designing Across Platforms

Session 804 WWDC 2017

Learn techniques for determining which Apple platforms are right for your app and how to create a great user experience by designing for the unique capabilities and strengths of each platform.

Hello everybody.

My name is Cas Lemmens.

I'm a designer here at Apple, and I'm delighted to see that so many people have showed up to talk about designing across platforms.

It's a pretty amazing view from here.

I wish you could see it.

Alright. At Apple, we're really proud of the platforms that we create.

For every platform that we've created, and for every time we update a platform, we aim to improve your day-to-day life, and hopefully create a meaningful relationship between the platform and you.

And that relationship doesn't have to extend to just one platform.

The more Apple products you use, the more you rely on not just single platforms, but on the entire ecosystem.

You might start your day with a run on your Watch.

At work, you might be using a MacBook or an iMac.

When you head home, you might look up public transportation on your phone, or use CarPlay in the car.

When you're at home, you might unwind watching a TV show or a movie on the Apple TV, and at the end of the day, you might finish a book on your iPad.

Regardless of the device you're using, you can rely on Apple's ecosystem to recognize you, to understand you, and to help you.

Creating and contributing to this ecosystem requires a very deep understanding of every single platform.

As a designer at Apple, that's a very familiar challenge.

For every app that Apple creates, we carefully consider on which platforms it should live, and how it should scale between them.

If you look at the apps that Apple creates, you might notice that some of them live on all of our platforms, like Photos, or Music.

Others only exist on a few, like Notes, or Mail, or TV.

Some of our services work really well if you have more than one device, like ApplePay.

And, others work only if you have multiple devices available at the same time, like FaceTime.

Today we're going to talk about a process that we use at Apple that can help you design across platforms.

The goal is to efficiently, but purposefully, bring your apps to more platforms.

We're going to start with selecting.

We're going to look at the capabilities and the context of each platform, and make our decision based on that information.

Then, we going to adapt.

We're going to look at all the features and functionality we want to bring to our platforms and manage that.

Then, we conform.

We try to find a balance between our own brand and the platform guidelines, and to find our look and feel on them.

Then, we connect.

We see what happens when you go from one platform to another, and how it can make that experience seamless and effortless.

And, lastly, if possible, we try to extend.

We see what can happen when multiple platforms become available at the same time.

That's the entire process, and hopefully, at the end of this talk, you will have all the required information and knowledge that you need to make your apps work amazing in Apple's ecosystem.

So, let's dig right in.

Let's start with selecting.

When we talk about selecting, we really want to answer the question, "What platform do I go to?"

Maybe you haven't launched your app yet, and you're trying to decide what your first platform will be.

Or, maybe, you have launched your app on one or two platforms, and you're trying to decide where to go next.

Two words come to mind that are really important when we talk about selecting a platform.

Context and capabilities.

Context is the time, the place, and the environment in which your platform really comes alive.

And, capabilities are the unique functionality that makes the platform distinct from all the other ones.

It's really important to understand context, as when people switch context, they often switch platform.

I'll give you an example.

Let's say that you're working behind a desk at school or in the office.

That's a very focused and stationary context that you're in.

When you then leave that place, and let's say you go to a bus or a train to head home, that becomes a very dynamic and mobile platform.

And, mobile context, sorry.

That's a very big switch in context, from being very stationary and focused to being very mobile and public.

And, that also explains why people would switch device.

They go from a MacBook or an iMac, to maybe a phone or Watch.

And, that's because a phone and a Watch is better optimized for that context.

Understanding capabilities is equally important, as they really allow you to see what makes a platform unique, and how your app can benefit from that capability.

I'll give you a few examples to show you what I mean.

Let's start with the iPhone.

Maybe the most familiar platform amongst all of us here.

If you look at the context of the iPhone, it's always on, it's always with you, and therefore it's mobile.

It's a very personal and private device.

You wouldn't easily share it with other people, and it's all optimized for quite short engagements.

Often when you use the iPhone, you maybe use it for a couple of minutes, not more.

The capabilities support the context.

Because the phone is always on and always with you, it's very environment aware.

It has a gyroscope, an accelerometer, and all that information is accessible with background processes even when you're not using the iPhone.

Because your phone is personal and private, it's protected with Touch ID.

And, to make those short engagements really easy and fun, you have a very detailed touch screen.

The Watch is quite similar.

It's also always on and with you.

It's also personal and private, but it's much more instant, and much more optimized for very short interactions.

A Watch face, for example, gives you the right information just by looking at your Watch.

And, notifications just show you more just by looking long enough.

The capabilities, again, support it, because the Watch is so personal it can track your movement, it can track your heart, even your location.

The haptics can tell you when you should look at your Watch, and the Watch faces allow you to customize the information you want to see at a glance.

Let's look at the iPad.

The iPad has a very mixed context.

You can use it both at home and on the go.

You can do very precise and focused work on it, or just use it as a lean back device, for watching movies, TV shows, or playing games.

And, all of those are longer engagements than the phone or the Watch.

The large screen really supports the context, because it allows you to do all that precise and focused work.

The ambient light sensor allows you to use the iPad both in the evening and during the day.

The high-fidelity speakers allow you to create a very immersive experience with games and movies, and you have that same touch screen as on the phone.

And, if you add a pencil to it, well then it becomes a very precise interaction.

Let's look at the MacBook.

The context of the MacBook is always in a very professional environment.

You can do very precise and complex work on a MacBook which is why it's the preferred platform to design apps or to develop them.

It can be used as a shared device, but it's always personal as everybody has their own account.

And, you use the MacBook or the iMac for very long engagements.

Most of us here would probably be using a MacBook or an iMac several hours a day.

Let's look at the capabilities.

To do all that professional work, it has a very high performance.

The keyboard and mouse allow you to do very precise and complex work.

Multitasking allows you to do exactly what you want to do, how you want to do it.

And, multi users allow you to make the MacBook or the iMac a shared device, but still very personal.

And lastly, let's look at the Apple TV.

The Apple TV is a shared device.

You use it together with your family or your friends.

It's stationary.

You lock it to your TV and it doesn't really move from that location.

And, it's completely optimized for a lean back experience.

You can Watch movies, TV shows, or play games.

And, again, all of those are longer engagements, often 30 minutes, to maybe a few hours.

It works really well with an HD display to make the content really come alive.

The remote control is light and easy, and you can just pass it around to your friends and family.

Because it's stationary it's very home aware, which is why it works so well with HomeKit, and it's completely optimized for a 10-foot distance, so you can really just sit back on the couch, relax, and enjoy the show.

So, you see that understanding the context and the capabilities of each platform is really important to help you choose what platform to go to.

The context is where it comes alive, and the capabilities is what makes it unique.

And, the same goes for your app, so you might want to ask yourself, in what context does my app really come alive?

And, what are the capabilities it requires to do so?

At Apple, we have a simple exercise we like to do a couple of times when we're trying to choose on which platforms an app should be available on.

And, I'll give you a few examples to show you what I mean.

Let's look at Activity.

If you think about the characteristics of Activity, well, it has to be mobile.

Activity tracks your data tracks your movement the whole day, so to give you accurate data, it has to be always on, always with you, and therefore, mobile.

It also has to be personal.

It should be able to track your data and only your data.

So, when you look at these two characteristics, what we do, is we map them out.

We try to put them on a scale.

For example, if we look at mobile, we can map that out on a scale from mobile to stationary.

If you look all of your platforms on this scale, they would lay out like this.

The Watch is the most mobile platform we have, the TV as we said before, is the most stationary.

If you look at the other characteristic, personal, we can map it out on a scale from personal to shared, and we get something like this.

The Watch is the most personal and mobile platform we have.

The TV is the most stationary and shared.

When we looked at Activity, we said, well it had to be personal, and it had to be mobile.

So on this chart, it's probably located somewhere here.

And, that explains why Activity is available on these platforms, and not on any other.

I'll show you another example, let's look at GarageBand.

The characteristics of GarageBand is that you have to be able to be really precise.

You want to be able to manipulate sound exactly where and when you want it.

And, secondly, it has to work with multitasking.

You need to be able to play multiple sounds at the same time and it needs to be able to handle all the hardware and instruments that you might attach to the platform.

So, again, we can map this out.

Let's look at precise.

We can map that out on a scale from loose interactions to precise interactions.

The platforms lay out like this.

On a MacBook with a keyboard and a mouse, you can be really precise, but on a Watch, it's a very small screen and as everybody has fat fingers, you might not be able to be that precise.

If you look at the other scale of multitasking, we can map that out on the scale from multitasking to a single task.

On a MacBook, you can easily do multiple tasks at the same time.

On a Watch, you can only do one single task at a time.

If you look at GarageBand to be set, it had to support multitasking and it had to be very precise, so it's located somewhere here, and that explains why it's available on these three platforms, and not on any other.

This is just a very simple example, two simple examples actually of using these characteristics to choose your platform.

We do this exercise over and over again with tons of characteristics, and in the end, we hope that we can find a few platforms on which your app can really come alive.

And that's exactly what selecting is all about.

It is choosing a platform based on the context it supports, and the capabilities it provides, and it's validating where your app can benefit the most.

So, that was step one.

We looked at what platform we wanted to go to.

Now, we're going to go and look at adapting.

With adapting, we're going to look at all the interactions, all the features, all the functionality we want to bring to our app, and try to manage that across the platforms that we want to be available on.

I'll explain, again with an example.

Let's look at Activity on the iPhone.

Activity on the iPhone, you can do a whole range of features.

You can look at your progress of today, you can look at your achievements, your workouts, you can see how your friends are doing.

And, you can manage all that data.

You can add workouts, you can invite friends, you can share the achievements, you can share progress.

All of that is possible on the iPhone, and that works well if you think back about the context of the iPhone.

The iPhone was a very personal device, and all these interactions that you're doing is with personal information, and the iPhone was optimized for quite short engagements.

And, all of these interactions, they don't take very long.

You can do them relatively quickly.

But, if you look at how that scales to the Watch, we see that actually the feature set is greatly reduced.

And, again, this makes sense if you think back about the context of the Watch.

The Watch is still a very personal device, and all these interactions, all this information is still very personal, but as we said, the Watch is optimized for really short interactions, glances almost.

So, we made sure that you can look at your own progress at a glance, and you can see how your friends are doing at a glance.

So, one really big part about adapting is seeing how you manage your interactions, your functionality across all the platforms that you want to be available on.

Another part, is looking at what unique capabilities a platform can provide, and how your app can benefit from that.

When we looked at the Watch, we said, well, some of the unique capabilities of the Watch is that it can track your movement, it can track your heartbeat, your location, and all of that information is quite relevant for an app like Activity.

So, if you look at what additional features we brought to the Watch, well, you can add a workout, and you can set move goals.

And, again, this only makes sense if you look at the context and the capabilities of the Watch.

And that's exactly what adapting is about.

It is prioritizing your feature, your features based on the platform's context and capabilities, and it's considering new features that can benefit from the platform's unique capabilities.

A really good example of this, is Photoshop.

For those of you who've used Photoshop on a MacBook or an iMac, you know that it's a really enormous, big app.

There's tons of features in there.

You can do so many things.

But, Adobe did a really good job when they tried to bring all those features to the phone.

They actually broke down the feature set into 3 really distinct apps.

All of the interactions are optimized for quite short engagements, and they're embracing the unique capabilities of a phone by, for example, being able to take a picture right from within the app.

Another good example is the New York Times.

If you want to read an article in the New York Times, you can do that on the phone, on the iPad, or on their website.

But, if you look at what they've done on the Watch, you can only look through a series of the most recent headlines, and if you're interested in one of them, you can flick down and you can see a small summary of that article, but if you want to read the full article, well that's a longer engagement, so it's no longer optimized for the Watch.

And, therefore, they ask you to go to the iPhone, the iPad, or the website.

So, that was adapting.

In step one, we looked at what platforms you wanted to go to, and step two we looked at the features, and now we're going to look at the look and feel.

When people talk about look and feel, they often think about the word consistent, and that's definitely a very important word when we're talking about bringing your app to multiple platforms.

But, consistent doesn't mean identical.

At Apple, we don't just copy and paste all functionality and all the visual elements from one platform to another.

Being consistent is much more of a balancing act.

You have to balance between two types of consistency.

On one side, you have your brand consistency.

This means that when people open your app, they should recognize your brand, it should feel very familiar, and hopefully that will build trust between the person who's using your app, and your brand.

On the other side, you have the platform guidelines.

This means you'd be using platform-provided standards, so your app feels native.

Since these standards reoccur on all the apps on that platform, they will feel very recognizable.

That lowers the cognitive load, and that eases the learning curve.

So, finding the balance between these two types of consistencies is really important, and maybe the most difficult exercise in this whole process.

The human interface guidelines can be a really good help here.

They can help you understand all the platform-provided standards and guidelines, but it can also help you understand where your brand can really come alive within these guidelines.

One example is the typefaces we have.

You see that for each platform we have a nice set of typefaces that you can use, and they're all optimized for the platform they're on.

This doesn't mean that you have to use San Francisco, or you have to use this specific typeface or style, but it gives you a really good idea on what sizes work well for each platform.

If you take a look at the body style for example, on these three platforms, you'll see that they nicely scale up, and that has to do with the viewing distance.

On a Watch, you look at a Watch from quite close, maybe a foot away, so it's quite small.

A phone is a little bit further maybe one and a half foot, so it's a tiny bit bigger.

But on a TV as we said before, it was optimized for a 10-foot distance, so we made it really big so you can read it from that distance quite comfortably.

Apart from the stylistic features, the human interface guidelines can also help you with platform-provided standards and functionality.

For example, alerts.

Alerts come on every single platform that we have.

And, they have some common elements.

They have a description, they have one or two actions, they obscure the content behind them.

But, if you look at the length of the description, the styling of the buttons, the tap targets, they're all optimized for each platform.

So, using an alert like this will make the will be very familiar to the user, recognizable, and therefore easy to use.

The same goes for navigation.

If I want to navigate to the previous screen on my Watch, I can just tap the top left corner.

The same happens on the iPhone.

But, if you look at a TV, well there is no back button on the screen.

And, that's because the back button is actually located on your remote.

So, there's no need to add an extra button on the screen to navigate to, and to click.

So, that's exactly what conforming is about.

It's finding the balance between your brand and the platform guidelines.

It's aligning with your brand, so your brand feels recognizable, familiar, and can create trust.

And, it's aligning with the platform guidelines and functionality to lower the cognitive load and to ease the learning curve.

A really good example is Ulysses, and I really hope I'm pronouncing that right.

If not, I'm sorry.

If you use this app on the iPad, the iPhone, or the Mac, you'll notice a whole bunch of platform-provided standards.

They're using navigation bars, toolbars, search fields, and split views.

And, where their brand is really represented is in the writing experience.

By allowing dedicated focus, and quick formatting with markdown, writing becomes an amazing experience in this app.

I use this app very frequently in my process, and in fact, this presentation started in this app.

Another good example is Streaks.

With Streaks, you immediately recognize the brand through the color, the typography, the iconography, even the interaction of long-holding to complete a task.

But, they really embraced the platform guidelines with, for example, doing very smart notifications, scaling the typography, and adapting to new languages.

And a last good example, is Tinder.

Again, you would recognize the iconography, you recognize the colors, the interaction of swiping left and right.

But, again, they really aligned with the platform guidelines.

The UI scales up very nicely to the different platforms, and their unique interaction of swiping left and right never interferes with platform functionality.

OK, that was step three.

So, if this is the first time you're going to launch your app on your first platform, you're pretty much done.

You selected your platform, you've defined your features, you've defined your look and feel.

Now, you can start building it and hopefully launch it on the App Store.

But, if this is an app that you want to launch on your second, third, or next platform, connecting becomes a really important step.

When we talk about connecting, two points in your experience are really important.

You have the entry point and the exit point.

The entry point is when you open the app, and you start using it.

The exit point is, hopefully after a while, when you've done some work in the app, you close it and you go do something else.

These two points are really important, even when you're just using one platform.

Every time you open the app again, you hope it doesn't just give you that same opening screen.

But, that it actually helps you create the same environment you were in the last time you had the app open.

That is what we call recreating state.

And, by state, we mean the content and the information, and the settings that you were using the last time you had the app open.

The state can take any shape or form depending on what your app does.

For a simple app like Weather, for example, it should at least open up on the same location or city that you were looking at the last time you had the app open.

Preferably with the weather information updated.

For a more complex app like Notes, it would open the same note you were working in last time, if possible, with the same tools selected.

And, for apps that revolve around media for example, like games, movies, or TV shows, you would hope it would resume where you last left off.

So, for example, in the game you wouldn't have to play that game all over again just to get to that same point.

Remembering state becomes even more important when you're switching between platforms.

Being able to remember and recreate the last used state on any platform creates a very effortless and delightful experience.

It allows people to enjoy your app in whichever context they like, because you as an app developer and designer, you will take care of optimizing that experience for the platform.

At Apple, we really try to embrace connecting platforms.

For example, in TV, the state the TV app remembers is where you last stopped watching.

The TV show you were watching and the time you paused is synced across all the devices, so you can resume on any platform of your choosing.

Another good example is Maps.

This morning I looked up on my MacBook how to get to this convention center.

Because I did that, that search went into my recent searches.

And, recent searches is a state that's being recreated on all platforms.

So when I step into my car, that recent search popped up in the list, I can just tap it and get going.

This all works really well if you have your apps set up on all your platforms, and you're good to go.

But what happens when a new platform comes in?

Let's say that you're using a MacBook and a phone, and suddenly you buy an iPad, and it becomes a part of your day-to-day life.

Well, you install the app on the iPad, and most of the time before the app can actually recreate the state you were in, it needs a bit more information.

There's an additional step that's required, which is a set-up step.

The app needs to know who you are, so it can recreate the state you were in, the last time you had the app open on another platform.

And, often, such a set-up step looks something like this.

And, this can be quite off-putting.

You have to remember your email address, your user name, your password, you have to type it in, you might type it in wrong.

In the end, it might be so off-putting that you actually skip this and you don't want to use this app on your new platform.

But, luckily with features like iCloud Keychain, you can just make this step really effortless and easy.

With the tap of a button, iCloud Keychain can fill in your user name, your email, and your password, and you're just good to go.

At Apple, we really embrace this part as well, this set-up step, especially with new platforms.

If you buy an Apple TV, you don't have to set it up manually, you can just hold your iPhone or your iPad close to the Apple TV, and it will move over all the apps that are compatible with Apple TV as well as your iTunes store credentials.

So when the Apple TV has done setting up, you will recognize all the apps that are on there, because you also have them on your phone, and you can immediately start buying TV shows, movies, or games, because the iTunes store credentials are there as well.

So, those are really good examples of connecting.

Connecting is creating a continuous experience between platforms, by remembering the state, and optimizing for the entry and exit point.

And, it's allowing for a quick and easy way to use this new platform.

A really good example is Things.

The state that they're recreating is your to-do list.

On any platform that you access Things on, you can add a to-do item, you can mark one as done, you can add a due date or organize it, and it will just sync that information across all your devices simultaneously.

Deliveries does a very similar thing.

It remembers a list of tracking numbers that you've saved in iCloud, and it will update the information from the delivery service for each single item.

And, that information is accessible on any platform you open it up on.

And, a really good example of a seamless login experience is Instagram.

If you install Instagram, and you have Facebook installed, it will just use those credentials to get you logged in to Instagram.

So, with a simple tap of a button, Instagram is opened up for you, and you're good to go.

So, that was connecting.

We looked at what happens when you go from one platform to another.

In step five, we actually look at what happens when two platforms are available at the same time.

And, to do that, I'm going to go back to what we talked about in step one, in selecting, to the context and the capabilities of the platforms.

Let's look at the MacBook again.

We said, well, it had a very high performance, you could do really precise work with the keyboard and mouse, it could do multitasking, but maybe what it's not really good at, is exactly knowing who you are.

In fact, when I open up my MacBook from sleep or I start it up from when it's off, I get something like this.

I have to type in my password or I have to give my Touch ID to login.

And, again, just like the login experience before, if I need to type in my password, that could be quite off-putting.

I have to remember it, I might type it wrong, it could take a couple of times.

But, this is the only way for the MacBook to know who I am.

There's really no other way for it to verify my identity.

But, if you bring in a Watch, well, a Watch is always on and always with you, and it actually knows who you are.

So, when these two start talking to each other, really magical things can happen.

The Watch can tell you can tell the MacBook, that this is actually you, and login for you, and before you know it, your MacBook just opens up for you.

What's really important to note here, is how effortless this experience is.

I don't have to tell my MacBook to listen to my Watch.

I don't have to tell the Watch to give information to the MacBook.

It just happens because they're close.

In fact, I don't have to do anything.

So, making an experience effortless when you have multiple platforms available, is really important.

Adding a platform should not result in adding additional steps.

Let's look at another platform, let's look at the iMac.

As we said before, iMac, high performance, big display, really good for, for example, browsing the internet, and maybe even shopping.

What the iMac cannot do, unfortunately, is store your ApplePay card securely.

Which is why you can't do that on an iMac at the moment.

But an iPhone can.

So when these two start talking to each other, suddenly payments are possible.

When you want to buy something on the iMac, it will tell you to go to your phone, your phone will use your securely stored ApplePay cards, with authentication with Touch ID, you confirm the payment, and you're good to go, the payment is complete, and you can keep shopping.

And, this doesn't have to be on an iPhone, this works on an iPad, or on a Watch.

What's really important here to note, is how clear the control is.

The iMac is clearly telling me to go to my phone.

On my phone, I get a nice summary of what I'm going to purchase.

With Touch ID, I confirm.

The same happens on the Watch with double click to confirm, and before I know it, my purchase is complete, and I can continue my experience.

So, giving really clear control is incredibly important when multiple platforms become available.

Otherwise, your experience might become very complicated and difficult.

And, lastly, let's look at Keynote.

Keynote is a fantastic app to make presentations, and also to give them.

But, one of the downsides of giving a presentation is that often, your MacBook is connected to a display or a projector.

And, so if you want to move between the slides, you have to stay behind your MacBook because the keyboard is the only way to move between slides.

But when you bring in a phone, well then, the phone can take control of what slide is being shown, and you can freely move around, because the phone is light, and easy to carry.

What's important to note about this experience, is that it's all optional.

If my phone runs out of battery, or I forget it, I can still go back to my MacBook, and use the keyboard to move between the slides.

So, making it optional is really important for multiple devices in one experience.

So, that's what extending is about.

We complement different platforms by combining their capabilities.

We make clear how to control the different devices, and we work toward an optional and effortless experience.

A really good example is Timber Tennis.

Games have always really well understood how multiple platforms can really create a magical experience.

This is a great example.

You can play a multiplayer game with multiple devices if you have them.

It's completely effortless.

With a simple tap of a button, you can start a multiplayer game.

There's very clear control, because there's only two buttons on the screen, and it's completely optional.

You can play with a TV, an iPhone, or an iPad, or any combination of that.

And another good example is Zova.

Zova works really well even if you only have one device.

If you have an iPad, or an iPhone, or an Apple TV, you can start training with Zova, but the app will always look if there are more platforms available in its surroundings.

For example, if you have a Watch, it will measure your heartbeat, and that information is shared amongst all the devices that you are using.

So, for example, that would reappear on your TV.

It's a great example of how effortless this is.

Again, you don't have to do anything to make this information being shared across the devices.

I don't have to tell my Watch to show my heartbeat on the TV.

And, it's completely optional.

Zova works just as well with one platform as it does with multiple platforms.

So, that's the entire process.

We started with selecting our platform based on the context and the capabilities of each platform.

We looked at prioritizing new and existing features, and taking advantage of unique capabilities with adapting.

With conform, we tried to find a balance between our brand and the platform guidelines.

In connecting, we looked at what happens when you go from one platform to another, and make that really seamless and effortless.

And, lastly, we looked at what magical things can happen when multiple devices are available at the same time.

I said in the beginning, we design our platforms and our apps to benefit your day-to-day life, and create a meaningful relationship.

In the end, we hope that all of our apps and platforms create a holistic experience that is greater than its parts.

With this process we talked about today, we hope you have all the tools you need to join us in that endeavor.

This talk is always available with this link, and make sure to check out these sessions too.

There are some really good ones tomorrow on design as well.

We wish you the best of luck in bringing your apps to Apple's ecosystem.

Enjoy the rest of WWDC, and thank you very much.

Apple, Inc. AAPL
1 Infinite Loop Cupertino CA 95014 US