Design for the Apple Watch — The Sequel

My last article on designing for the Apple Watch got an amazing amount of attention and I realise it’s because there just isn’t enough guidance out there for us designers looking to get something awesome on the watch. Since my last article I’ve had a lot of great questions and been working on a few great projects for the Apple Watch so want to share the knowledge and hopefully give you some inspiration on what you can do.

I’ve got a great iPhone app, but which bit goes on the Apple Watch?

This is a massive challenge for everyone I’ve spoken to. What we should really be asking ourselves it what is the most useful and most used part of the app. Once we understand what our users value most about our app, we can think about how we can give them exactly what they need but at the time they need it the most. Remember when it comes to the Apple Watch, users will generally be on the move, no time to stop and stare. We’ve got to serve them the most delicious piece of information they’ve ever had, something that tastes much better than what they get on the iPhone, after all they’re expecting a lot more from this shiny new gadget.

Like I’ve said before, we can use the core functionality of our app and provide only what the user really wants, but what about if we gave the user a new way of looking at the data? Can we mix a piece of data that we’re getting from the watch, and mix it with their favourite data from the app to give them something special? Possibly for the future of the Watch, but imagine you we’re listening to Spotify and you become stressed. Spotify reads that your heart-rate is elevated and gives you a slower tempo song so help calm you down. It’s the equivalent of a big cuddly bear giving you a hug right when you need it the most.

Don’t just think about re-using something from the phone and putting it straight on the Apple Watch, think about how the Apple Watch can make the entire experience that much more special. How can the Watch connect with your user on a more intimate level?

These apps are all a bit dark…

No Apple aren’t trying to make us design all apps to look exactly the same. Firstly giving content such a contrast from the background enables the readability to be at it’s best. Secondly it’s actually quite clever, with the Apple Watch having a black face, it creates a natural margin for the screen itself, giving us more room to play with for the content. We can design everything flush to the edges to ensure that our content is as clear as possible. Lastly we have to think about the battery life. The more colours, images etc we use on screen, the more battery hungry our app will be. If our users are only going to be using the Apple Watch app for around 5 seconds at a time, we don’t want them screaming at the Apple Watch after an hour because our app killed it.

Where’s my branding? I want a splash screen!

Firstly to the splash screen, no, just no. Splash screens are only just about acceptable on phones and tablets, but the Apple Watch is used in a very different way. The way we look at usage between the Apple Watch and phones and tablets, is that a user will be using the watch for a brief moment, 5–10 seconds and they are out of there! If we put a splash screen on the Apple Watch, users will become frustrated that they have to wait 2 seconds, just to see some quick information. On other devices it’s not so bad as the user’s behaviour is more likely to be relaxed and willing to give a little more time to viewing the app.

When it comes to branding on the Apple Watch let’s think about how we should use colour in general first. One way would be to use the main colour of your brand and use it to highlight key pieces of information. I tend to call this signposting, showing the user where they should be looking, helping to guide them to where they need to be. In my opinion this is how I like to treat branding within mobile applications, keeping a clean and simple UI which contrasts with the main colour, enabling it to stand out and guide the user seamlessly. One screen what benefits from this method perfectly is the Glance screen. Each app has one Glance screen which is accessed from the main Watch face screen, this means we have to make the content count. The glance is where we will check for the most important piece of information to us, and we will look “at a glance”… I thank you. So to ensure it takes no time at all to find what we want we can use the brand colour (as long as it stands out well from black), to highlight to most important information.

Lastly in regard to showing the brand logo, do not fear for it’s still within the experience. A user will typically start out on the iPhone, branding is in view and soon they would be directed to try using the Apple Watch. An icon for the app will be present on the home screen of the Apple Watch so the user will recognise it from previous use on the iPhone. Branding colours then take the reins to brand the Apple Watch experience itself.

I love the Tinder style navigation, can we?

Simple answer is no. Animation is quite sparse on the Apple Watch due to limitations, but that’s for a very good reason. Time is of the essence again, when using the watch we’re not going to really care about things flying all over the place, we just want to see the information that’s perfect for us right now, animation would just get in the way. If we use animation it has to really mean something to the user. Use animation to reinforce to meaning of a value, is the value a percentage perhaps, can we animate a radial bar to fill up to the value shown? This is something we can do simply by giving the developers a PNG sequence, which they can use to animate though to get the desired result.

What icon sizes do I need to create?

Well, this is nice and simple. Start with the usual 1024px icon size, ensuring it fits nicely when cropped to a circle, using the Watch icon grid to ensure proper margin around the inner icon. Then for exporting I’ve found the following nifty little Mac app which exports to an asset catalogue which a developer can just put straight into their Xcode project. Asset Catalogue Creator.

I get why there are limitations, but I really want to do something amazing.

You don’t need animations and incredible UI to create something amazing. With the Apple Watch we can enhance our current iPhone experience, making it even more special by delivering even smarter information to a user. How ever remember this is just the start, I’ll leave you with a simple quote;

Some people will buy the Apple Watch because it’s the next big thing on the market, but most will buy it because of what we create for it. There may be limitations at the moment, but if we give good cause for further developments on the Watch to enable us to create even more enriched experiences then it’s up to us to help Apple to push the boundaries with the Apple Watch.

For more inspiration on designing for the Apple Watch, here’s a great site with what others are doing for the Watch already. Watch Aware.

I’m currently working on some incredibly exciting Apple Watch projects with the very talented developer Dan Tavares, part of the indie team Cheeky Devils. Feel free to follow us on the following Twitter accounts and of course ask any questions you have!

Ben Jones

Dan Tavares

Cheeky Devils

Lastly I’d be very grateful if you could recommend this article by pressing recommend button below. Thanks for reading and by all means fire any questions my way!

Originally published at www.benjonesdesign.com on April 12, 2015.

--

--

Ben Jones

Product Design Leader | Mentor and coach | 🎗️ Advocate for mental health