#03 Design across platforms

Notes from WWDC 2017 talks

In this session, the speaker showed a clear pathway of how to better design across platforms and elaborated each step in detail.

I like this direct and hands-on approach. The designers, product managers and developers in different product teams can all borrow the knowledge of Apple’s team and then review and optimize their internal process.

New technology and hardware keep being introduced and users’ behavior is shaped. For the product team, how to strategically think of your product matrix and take advantage of new platforms to enable new possibilities and enhance the experience? For the designers and developers ourselves, how to cross the border and embrace new areas?

Few people have background experience and knowledge across all the platforms. For me, I started my career as a mobile app product designer. I have long experience with iOS and Android native app. Last year, I worked hard to catch up with responsive web design. After I got an Apple Watch, I am into wearable products. Now I am thinking designing for much bigger screens. The story will never end.

So, let’s start to check Apple’s suggested process for design across platforms.

1. Select- what platforms

Why so many platforms co-exist in people’s life? Because switching context leads to switching platforms. We use Mac in a stationary and focused state while the iPhone is for a mobile and public environment.

To select proper platforms for a particular product, we must fully understand the Context of users & the Capabilities of the platforms.

Here are the Context & Capabilities for each of Apple platform, from Watch, iPhone, iPad, Mac to TV.

The device goes from small to big in size, and from mobile to stationary and personal to shared in context, and loose interaction to precise interaction and multi-task to single-task in capability.

Mobile →Stationary; Personal →Shared
Loose interaction → Precise interaction; Multi-task → Single-task

2. Adapt-what features

Manage and prioritize interactions and functionality on different platforms. Remember to take advantage of each platform’s uniqueness.

Compare the features of Activity APP on iPhone and Apple Watch
Photoshop groups features into several mobile Apps.
Only news title on the watch, move to the iPhone to read more

3. Conform-how they look like

Consistency is a huge topic when designing for multi-platform product line.

Brand consistency ←Balance → Platform consistency

One thing for sure, consistency doesn’t mean exactly the same. For example, the physical size and the distance between users and devices naturally lead to different font size system on each platform.

The tricky part is how to balance between Brand consistency and Platform consistency. Brand consistency help build trust because people feel familiar when switching platforms. Platform consistency will ease people’s learning curve.

It is such an interesting topic to explore. I always ask myself how much the iOS and android App should look and act in a similar way. Now, the same question goes to how similar the watch app, iPad app or TV app look and act?

How the alerts on watch, iPhone and TV differ from each other
No back button is needed on TV, because people will use the hard key on the control

4. Connect

Recreate state:

Where you start using the app is the entry point and where you leave the app is the exit point.

Even within the same platform, it is important to smoothly connect the exit point of last time with the incoming entry point. Users would like to see where they left. The app should recreate the information and the state as it was.

Some examples:

  • The weather app will show you the same city you were looking at last time and of course, the weather information has already been updated.
  • The note app will show you the note you were working on last time and hopefully the tool you were using last time has been selected and active.
  • The video will resume from where you drop off

It is more important to recreate state across platforms. It will provide effortless and delightful experience for the users. It allows people to enjoy the app in whichever context they want. They know designers and developers will take care of optimizing that experience.

Continue-to-watch state is synchronized to all platforms

Set up to add a new platform:

People keep buying some stuffs and bring them to their day to day life. There will be additional steps to take to recognize who you are before the app can even recreate the state for you.

But to input email address and type in password is tedious and annoying experience. If you can’t remember the password, you may just end up with not using the new platform.

Apple Keychain is a good option to solve the problem.

Another good solution comes from Apple TV. You can simply move your iPhone or iPad close to the TV. The TV will recognize all the apps in the other devices and download those compatible on TV.

A seamless login experience is from Instagram. Tap the button “login with Facebook” and then your Instagram is ready to go.

5. Extend

Think what is possible when more than 2 platforms are available. What magic chemistry effects could happen?

Macbook is good at precise interaction but not good at knowing who we are. Again, we meet the login issue. It is so normal to try several times before you get it correctly. But your watch is always on and with you. It knows you. So what about making these two platforms talk to each other? My watch and I come close to the laptop, and it opens for me. I don’t need to do anything. It is effortless to me.

Adding a platform should never mean adding additional steps to people. Instead, think about keep reducing people’s efforts.

Auto login my mac when my watch is close.
iMac talks with your iPhone for Apple Pay information

Important rules in extending:

  • Make it effortless
  • Make clear control
  • Make it optional

The game interface shown above is a good example. It is easy to connect different devices. The control is very clear since there are only two buttons on the screens. And it is totally optional. You can use whatever devices you own as the controller.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.