I've been really curious about the Apple Watch - with such a small screen, how does that constrain and change the interaction design?
We're a few months away from seeing it in action - Apple's not yet announced the screen dimensions, nor have they released screenshots at a native resolution. But! If you go to apple.com/watch, you can snag some screenshots - and in one case (Photos), you can see the full screen lit up, showing a 5:4 ratio. That led me to this article, which guesses that the screen will be 320x400 pixels, at 332dpi (for the 42mm) and 385 dpi (for the 38mm).
With that assumption, I snagged a dozen images from Apple's site, and set out to mock them up in Sketch. (Yes, we don't yet have the typeface, so I've substituted Helvetica.)
So: download it, and give it a spin with Sketch Mirror - 332dpi is pretty close to an iPhone 4/5/6's Retina display, so you can get a feel for the size of it by previewing the artboards on your phone.
Here are some interesting bits:
- Nearly everything uses a black background - probably to save battery, and to make the screen appear larger by blending into the black bezel.
- The time is (almost) always displayed in the top-right corner of the screen.
- The status bar combines both status and navigation to save space - so it contains the back button, screen title, and the time.
- Tap targets are 44px tall on most buttons - same as iOS.
- Many apps (Settings, Mail, Passbook, Fitness) inset their content from the left and right edges of the screen by 2 pixels on each side. (I'm a bit doubtful of this, because it doesn't make sense. It seems like a waste of space - I can't imagine wasting 4 pixels on a 320-pixel-wide display. Perhaps that space is needed for different animations - or, it could just be the result of using screen grabs from the web!)
- On iOS, a grouped tableview's cells aren't separated - they're butted right up against each other. In the Apple Watch, table cells have a 10px gap between them, and each is its own rounded rectangle. Perhaps this is to afford touching, perhaps it's necessary to have a larger touch target, or perhaps it affords some clever animations or gestures as a result.
You can see in the Apple Watch video an interaction design pattern: the thing that you tap follows you to the next screen. This was our guiding interaction with Blixt: it helps with wayfinding, to explain where you came from, and where you're going. It reduces the need for nav bars, and the animations encourage the use of gestures instead of buttons for navigation.
Here are some examples of these things-follow-you transitions:
I am so excited to see this watch in action. There's lots to pick apart here!