Watch Face Design Guidelines
Last December ustwo released the very first batch of Android Wear watch faces, marking the New York studio’s first foray into designing for wearable technology. Following the release of the Clockwise framework, we are happy to share the guidelines we used to allow us to design successful Android wear watch faces, all the way from concepting to deployment. ustwo’s Product Designer Shaun Tollerton gives us a quick peek into the design guidelines.
Why did you put together these guidelines?
We’ve been working on watch faces for Android Wear since early 2014 and we’ve learnt a lot along the way. The guidelines are our way of gathering and sharing what we’ve learnt and giving back to the community with the hope of elevating the level of watch face design for Android Wear.
Tell us a bit about your process and involvement designing watch faces for Android Wear.
I’ve been a big fan of watches for many years now and now it’s super exciting to have the opportunity of designing watch faces for Android Wear. Integrating data into a watch face is a really exciting challenge, but there’s a lot to consider when doing so. We feel like we’ve come up with some pretty fresh ways to do so. Take Albumen for example. It takes 12 hours of your calendar activity and displays it on a traditional analogue watch face. That’s a potentially huge amount of data to display if you consider event titles, descriptions, who’s attending, locations etc. We decided to abstract the information into blobs that are simply formed by the duration of your meetings. This means that at a single glance a wearer can determine how busy they are for the next 12 hours. Another essential consideration for watch face design is their aesthetic. These aren’t smart phone apps that close and hide in your pocket, they are an expression of the wearer. They are worn. These are just some of the points that are covered in the design guidelines.
What are some of the biggest learnings captured within the design guidelines?
The guidelines are organized in 5 chapters, ranging from design principles to deployment. Within the Principles chapter, one of the biggest learnings is Glanceability. A common mistake is trying to fit a ton of information all at once. Wearers simply don’t have the time to take it all in when glancing at their watch, especially within such a relatively small screen. The scale of UI elements is easy to overlook too. You can be adding details to your design whilst zoomed in on a 27” retina display and then be disappointed when you see your design on a tiny 1.56” screen. A rule of thumb is to keep things extremely clear and bold.
On that note, what were the biggest mistakes the team made and how do the design guidelines cover them?
We had a lot of fun attempting to come up with innovative ways to display the time. Some of our designs would go too far in the abstract direction though and would fail the simple question of “What is the time?”. To reduce the chance of this happening again we decided to spend time sketching and reviewing concepts as a team. This allowed us to see what designs had potential and what were clearly not going to work. To help others with this we’ve provided a sketch worksheet that designers can sketch on (in both square and round sizes) and at roughly the correct scale too.
One of the chapters introduces the concept of “stress test.” What is this and why is it important for watch face design?
There are lots of scenarios that your design needs to be ready for. For instance, some scenarios that are quite often overlooked are empty sets when no data is available, nonstandard timezones’ and overlapping events. Stress testing is a way to to bullet-proof and validate your designs before going live and to avoid negative reviews.
The guidelines also talk about constraints to consider when designing watch faces. What was one of the biggest constraints you had to deal with and what did you do to overcome it?
Peek cards are an essential part of Android Wear. They appear over the watch face which can be an issue if a wearer just wants to check the time. A watch face designer can accommodate peek cards though by ensuring essential information is positioned around the top of the display. Designers can also determine if a peek card will be displayed small, large and the level of transparency. Some of our faces, like Next, actually reposition themselves too.
There are also hardware constrains to consider too. The Moto360 has a 30px black lip at the bottom of the screen. We didn’t necessarily want to move design elements around to accommodate for this, especially as the LG G Watch R doesn’t have this, but it was something to be mindful of. For instance, Air has 30px padding to avoid being cut because of this. Something else to consider on the Moto360 is it’s chamferred glass display. We avoided placing design elements stray too close to the edge of the screen to avoid them being distorted and cut off.
It’s been 3 months since ustwo released the first batch of watch faces. How has the feedback been so far?
We've had over 50,000 installs of our watch faces and we've received some great feedback. The clear theme is customization. Our wearers love it. They want more of it. Everything from colors, timezones, dates, battery status and control of how peek cards are displayed. We're taking all of this into consideration as we update our collections.
Will ustwo release updated versions of the design guidelines?
For sure. We love to give back to the community and we’ll continue to share any new learnings as well as incorporating any feedback from the community.