With such a small amount of screen real estate on the Apple Watch, the challenge was really re-designing the call to action sequence. You can’t just have your user click on a link and read a page, there’s just not enough space to read much. So I came up with an approach that says a lot about me using icons, and encourages the user save the full page’s content for later, as seen on the work screen. I don’t expect my viewer to experience the whole site from their watch, and I decided I want them to return once they are at a larger screen. So the question then became, how can I use the Apple Watch as a sort of catalyst for my full site?
It’s a very minimized version of my full homepage. Using the wifi icon as a familiar symbol and a hint of gold, the user can either tap it or scroll down to the next section.
I made a rule early on when starting these mocks that no button would be less than a third the size of the screen height.
Tapping the link icon copies the link to your clipboard and allows you to bring it into another app on the watch. Tweet it, email it, etc, you’re saving it for later. Swiping left and right navigates through the different items.
Since I wasn’t going to have the user read my blog posts on the Apple Watch, I chose to give them the opportunity to subscribe instead. Tap the “add email” button and subscribe.
Tweets seemed like a good way to let my viewers know I’m active (as if this mock didn’t do that already). Twitter is also another one of those familiar apps I think we will see utilized on the Apple Watch.
This was important to include because it really gives a quick glimpse into who I am. Again, Icons can say a lot, you just have to choose the right combination. Using abbreviations like the Gmail one at the bottom seemed like a medium between being too ambiguous and having a long word like an email address displayed on the screen.
As always, I’m open to comments. If anyone else has mocked or coded their site to fit on the Apple Watch I would love to see it.