Designing for the Apple Watch: focus on the core of your app & design quick interactions

At the Design First: Apple Watch meetup in May 2015 at WeWork Charging Bull NYC, 4 designers shared their knowledge about User Experience, User Interface design and the difficulties they encountered while designing their first app for the Apple Watch. I am sharing here my notes from the talk:

Eamonn Bourke, Associate Creative Director, USA Today

Saga Lundqvist, Product designer, Squarespace

Mark Baxter, Head of Product, Rosetta Stone Fit Brains

Richard Boenigk, Interaction designer, Meetup

Eamonn Bourke (@USATODAY) on how they designed one of the first apps for AppleWatch
  • Check the designs when it’s on a 38mm or on the 42mm Apple Watch — looks very different. Same for the fonts. Might want to use smaller fonts.
  • Apple wants the Apple Watch copies to be left aligned.

• Design for quick interactions. Users will use the Apple Watch app for just a few seconds.

  • Lots of rules and constraints. Risk to not test.
  • Learn your devs language: “Oh pixels, no points”.

• Prototype as soon as possible.

  • Use a mirorring app (even to show on an iPhone if you don’t have an #AppleWatch yet).

• Don’t add extra padding as the #AppleWatch adds a bit with the bezel already.

  • Apple recommends to use their own fonts even though you can use custom fonts.

• The force touch seems to be used for a menu as a trend on the actual apps for the Apple Watch.

  • Interface Guidelines: Interaction model. Gestures and UX patterns. Some visual design elements.
  • San Francisco is the font by default for #AppleWatch It can be only used with Apple Products (license).
Eamonn-Bourke “Keep it simple. 10 seconds interaction.”

• Keep it simple. 10 seconds interaction. @USATODAY focused on their Top 5 stories (swipe left/right).

  • Name of app is also required on the notifications top right corner, even if logo already displayed.

• While using Apple Watch you can quick open the same app on iPhone from lockscreen. No need for an open app on phone button (feature is called “Hands off”).

  • Tweaked a few things and then got rejected from app store because they included an illustration of the Apple Watch (!!!).
  • On the USA today app, the crop of pictures for Apple Watch is dealt on the back-end and can be adjusted on the back end to make sure looks good.
Mark Baxter (@fitbrains) designed 20–30 sec brain games (Speed, Memory & Focus) for AppleWatch
Wireframe + Flowchart of @fitbrains for Apple Watch
  • You can’t overlap multiple layers of animations at the same time. First animation has to be over first.

• Mark Baxter from Fitbrains had to deal with the precision & natural delay as Apple Watch gets info from iPhone via Bluetooth.

  • @fitbrains Had to deal w/ precision & natural delay as Apple Watch gets info from iPhone via Bluetooth
  • Harder to design more challenging interactions on Apple Watch than simple data (time, weather..) but worth hacking

• Crucial to read guidelines for Apple Watch as some things will make your app rejected.

  • Hack like making one long screen instead of 2 screens to make the “back” work on more complex flows.

• Developers might say some interactions or animations are not possible — sit with them and hack it with them!

High tech AppleWatch prototype (printed paper) from Richard Boenigk @Meetup
Embrace the darkness — dark background is perfect as you gain 3 more pixels with the bezel

• Embrace the darkness — dark background is perfect as you gain 3 more pixels with the bezel.

  • Get flat — Meetup assumed that taping will be easier than scrolling. Built flow with lots of screen = was wrong.

• The least amount of interaction = the best for the Apple Watch = one long screen that you scroll (fast scroll with crown)

• Shirk responsibility — Apple Watch is not supposed to do everything. Focus on the core essence of interaction of your app.

Explain the hands off to your users on the onboarding
  • Explain the hands off feature to your users on the onboarding.
  • Animations on Apple Watch are just sequences of .pngs exported on a folder shown one after another one.
  • Images can’t be overlapped so the trick is to generate a new bitmap with multiple pics on phone and send it to the Apple Watch.
Apple Watch animation based out of .pngs sequences

Listening to those handful of designers who already designed for Apple Watch made me think of astronauts who went to moon and explain to us. Weird & cool :) I am currently working on my own Apple Watch app, so I will share more about this regularly here. So, stay tuned!

This article was included on the issue #8 of my curated publication “Design for startups: “Tips and tricks about designing for the Apple Watch”“.

Don’t forget to sign up for it to receive new tips and tricks on your inbox.

Design for startups” is my curated publication that helps you design when you are not a designer. Tips, tools and interesting articles for startups.

Originally published at www.sophiemasure.com.

One clap, two clap, three clap, forty?

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