WatchKit UI: A Clever Passcode Screen

Since WatchKit does not have a built-in authentication mechanism yet, many apps that will need more secure authentication will have to default to using a Passcode. In fact, Apple uses their own Passcode screen for unlocking the Watch – you can set it up in Passcode settings in the Apple Watch app on your iPhone:

Apple Watch Passcode

Here is what Apple’s passcode screen looks like on the Apple Watch:

Apple Watch Passcode on Watch

Apple’s Passcode screen is nice, of course, but @robswish pointed out the 1Password Watch App‘s passcode screen, and I was immediately impressed:

1Password Passcode Screen

Notice the bottom part of the Passcode screen. Instead of taking up a ton of the precious screen real-estate to show the passcode dots like Apple’s passcode screen, the 1Password team uses thin rectangles that change colorĀ as the user enters the passcode. I think that’s a really clever way to maximize space while still giving the user comfort thatĀ their tap worked.

Of course, Apple’s passcode screen has the advantage of confirming the number pressed, but if your user has more than one attempt to get the passcode right, the extra space for the number buttons seems like a great compromise. This type of subtle interface is definitely something to keep in mind as we get used to designing for such as small screen in general.

Enjoy the article? Join over 20,000+ Swift developers and enthusiasts who get my weekly updates.