There are only a certain number of devices that can be held or worn at any one time by our hands. The space in our hands has almost always been filled up with our smartphones… that is, until the arrival of the smartwatch, which seeks to start a proverbial “turf war” with the main goal of completely eliminating redundancy between itself and the smartphone.
On the other hand, many individuals have gone on record of stating that in the near future, they expect both smartphones and smartwatches to equally keep our attention rather than eating away at it.
Smartphones and smartwatches are designed to obtain specific reactions from their users, though they both possess the same types of features in terms of messaging, and notifications. In terms of smartphones, they are designed more for making individuals notice them, while smartwatches are designed to essentially blend in to the background.
If you are one of the many individuals who believe that the Apple Watch was designed with the sole intent of making all other Apple products obsolete in nature, you may want to think again. The intent of the Apple Watch is to simply provide an alternative device in terms of weight and accessibility. This specific watch will definitely allow you to make the most of your time, especially with the state-of-the-art smart screen.
The screen of the Apple Watch is available in two different sizes: 38 millimeters and 42 millimeters. As expected, the screen is touch-sensitive, though actual gestures are not supported; however, the Apple Watch screen is able to differentiate between taps and holds thanks to the pressure-sensitive setting that the screen contains.
A digital crown on the watch’s side acts as a form of scrolling up and/or down in order to allow the user to not have to continuously touch the screen. The crown can also work for pressing buttons and zooming in and out of the screen.
Getting started with designing for Apple Watch: What you need to know
The Apple Watch, obviously, allows for the installation of different applications; however, Apple Watch applications are designed much differently than applications that are compatible with a device such as the Apple iPhone. For instance, if you receive notifications on your Apple Watch, the screen will not allow much text to fit onto it. A great example of this is the fact that three to four characters for a screen tile will fit on the watch’s face itself, but only if the screen is smaller in size.
Furthermore, applications contained on the Apple Watch do not use UIKit; rather, they use a separate UI. Unlike the Apple iPhone, application logic is not executed on the Apple Watch. This is done in order to conserve battery life. This means that you will need to make yourself familiar with the layout engine that is used to construct Apple Watch applications.
This new layout engine is considered by many individuals to be great to work with despite the learning curve that is involved with it. There are also a lot of people who feel that Apple should have implemented something like this sooner rather than later, as well as hoping that Apple adopts this kind of an option for future products that they create.
First things first: Learn the guidelines
Apple Watch’s HIG, or Human Interface Guidelines, are said to be rather strict in nature. The same kind of thing could also technically be said for the guidelines established by the iOS operating system; however, multiple developers have pushed those very guidelines for the past number of years in order to create more unique experiences with the applications that they create.
If you are a developer looking to create applications that are compatible with the Apple Watch, your best bet will be to take the time to get acquainted with the Apple Watch design guidelines that have been set forth for that particular device in order to prevent running into any major issues down the road.
In order to aid application developers in the design process, Apple has released a set of PSDs that can be accessed via their developer resources. These give greatly detailed information regarding font sizes, hierarchy, and tables. It is recommended by Apple that developers study these PSDs as closely as possible.
Don’t forget about the screen size you are designing for
The PSDs that Apple has released also enables application developers to obtain an excellent starting point in terms of arranging and conceptualizing various UI elements by prototyping different user interfaces. In order to have full access to this resource, a developer will first need to register for an Apple Developer account.
The first – and most important – thing to remember when it comes to designing an application for the Apple Watch is that you will not have the luxury of using a bigger screen such as would be the case with the Apple iPhone.
This means that you will need to constantly keep the smaller Apple Watch screen size in mind when developing an application for the device and show more emphasis on core functionality, as well as what message you are looking to deliver with your application. It’s also worth noting that you will be able to utilize the entire screen without having to worry about setting up any margins that would otherwise limit overall screen space.
Navigation
As opposed to other various Apple-branded devices the navigation system for the Apple Watch is much different in the company’s WatchKit. Essentially, there are two different navigation types that are available to application developers:
- Swiping the screen to reach the next page
- Tapping the screen to reach the next page
Normally, iOS would allow a device’s user to effectively “mix and match” between the two options; however, in terms of the Apple Watch, the WatchKit navigation system only allows for one of these options to be used at a time. This essentially forces application developers to create a much more functional navigation system for their applications and to also be much more purposeful in their overall design.
One of the most interesting ways to address the previously mentioned limitations is through Apple’s Siri software, which will soon be available for developers to utilize for their applications thanks to the WatchKit SDK. This will allow applications on the Apple Watch to utilize Siri in terms of using verbal commands to add various items to a specific list in the application.
Hierarchical navigation
The term “hierarchical” is generally defined as a pattern of navigation that enables a device’s user to make selections via a scrolling list by tapping the device’s screen until they reach the page that they are looking for.
Page-based navigation
“Page-based” is another type of navigation style that involves a series of dots on the bottom of a device’s screen indicating which specific page that a device’s user is currently on.
It is virtually impossible to combine both hierarchical navigation and page-based navigation into the same application on a device; however, a developer can employ the services of modal sheets regardless of what specific navigation type they prefer to use for their applications.
Modal sheets
A modal sheet is often described as a proverbial “card” that details specifically how someone can complete a certain task. These sheets often contain either single screens or multiple screens in a single page-based layout, with the only major difference being dots at the bottom of the screen, very similar to what is seen in traditional page-based navigation.
When designing a modal sheet, it’s important that you not add a “Close” button onto it, as the Apple Watch already employs one by default at the top left corner of the screen; however, you will be able to change the actual text of the “Close” button if you prefer to do so (i.e. “Exit,” “End,” etc.). Device users will also be able to close a screen by swiping their finger from the left of the screen.
When adding new buttons to a modal sheet, it’s absolutely essential that you ensure that they perform the tasks that they are intended to perform and close the sheet. This will prevent the device’s user from having to take the extra time to do so.
Apple also highly recommends that in order to avoid potential rejection of an application upon submission, application developers should not add a second modal interface from the initial one that already exists. Since the warning is coming from Apple themselves, it’s best to take heed of it unless you can prove that there is a legitimate enough reason not to.
Force touch menu
A device’s force touch menu traditionally displays the optional context menu of the current screen that contains up to four actions. This is only the case if an optional context menu has actually been set up on the device itself. Depending on the order in which they have been added to the menu, the force touch menu will display items in one of two ways:
- Left to right
- Top to bottom
It’s also important to note that a user cannot actually scroll through the force touch menu.
When designing this type of menu, it is important for developers to keep in mind that all actions on the screen require both a label and an image that contains both line art and a single color with a background that is transparent. Keep the device’s size in mind and use a line weight that is the most suitable for it as well as the complexity of the icon itself. Apple recommends that the line weight be between 4px and 9px.
A force touch menu is the newest and most exciting way to personally interact with a device and is much easier to construct than simply adding extra buttons to a traditional menu screen.
Extensions
Apple has made it known that nothing at all actually runs locally on the Apple Watch, and this is something extremely important for application developers to always keep in mind. This is where extensions come into play. These are typically defined as small applications that add a certain degree of functionality to one of two things:
- The operating system itself
- Other various applications
If you are new to working with extensions, it’s important that you keep in mind that these work much differently than a traditional iOS application. The Apple Watch extension is not an application itself; rather, it runs completely on its own. This can make for sharing data between the Apple iPhone and Apple Watch rather tricky.
It will likely take some time to figure out how to utilize sharing between the two devices, but there are different libraries that exist which can help aid you in this specific task.
It’s also important to keep in mind that the Apple Watch is, in essence, a projection screen that shows only what it is told to show, as well as sending a certain amount of feedback to the Apple iPhone.
Application developers will not only have to address these communication issues, but they will also have to address not being able to create applications with beautiful imagery and animations that have come to be customary with other devices such as the Apple iPhone and Apple iPad.
The smaller screen of the Apple Watch will be a true test for developers in terms of using size limitations to create and deploy animations.
User interface
Application developers will need to limit the overall number of horizontally-stacked elements to three in terms of using buttons or switches. This is to ensure that the target of each tap from a device’s user is not hampered in any way.
In lieu of actual text, Apple actually recommends that developers use different icons to maximize as much screen space as possible. Buttons that are not used as frequently as others should be placed in the contextual menu, which will prevent any active screen space from getting cluttered.
Buttons
Buttons and icons that are circular in shape possess more points that are adjacent to a person’s finger at the same distance when they are actually touching the screen. Square buttons and icons, on the other hand, contain a variable path next to them, which leads to a limit to the number of items that you can actually fit around a touch point.
Rather than using text, place icons side by side, ensuring that not more than three of them are situated next to each other. You may think that this sounds obvious, but again, it’s extremely important to remember that the screens of the Apple Watch are small in size. This means that as a developer, you will need to ensure that the buttons you create are as large as possible in order for them to be easier to tap on.
Icons
Icons should always be designed as square images. The system itself will then automatically create the circular shapes for them.
Here are the icon sizes for the Apple Watch WatchKit app:
- Notification Center icon: 48x48px (38mm Apple Watch); 55x55px (42mm Apple Watch)
- Long-Look notification icon: 80x80px (38mm Apple Watch); 88x88px (42mm Apple Watch)
- Home Screen icon: 80x80px (38mm and 42mm Apple Watch)
- Short-Look icon: 172x172px (38mm Apple Watch); 196x196px (42mm Apple Watch)
- Apple Watch app icon for Apple iPhone: 58×58 (@2x) and 87×87 (@3x)
Colors
Apple Watch’s Human Interface Guide shows a contrast between background and text that is strong in distinction, while also, at the same time, avoiding bright colors. Application developers should consider making use of only a single primary color, which will be used to symbolize the overall branding of their application. This single color will also be used in labeling for titles and important information about the application.
It is very highly suggested by Apple that developers employ a black background for their applications. This will not only maximize the legibility of any text placed on it, but it will also allow for great visual blending as well.
Image sizes
Varios iOS application developers have gotten used to utilizing different screen sizes and resolutions in terms of images, especially when it comes to the past few versions of the Apple iPhone. The Apple Watch is no different whatsoever.
As a developer, if you find that the image you have created is not scaling very well in terms of the overall screen size, consider creating two separate images for both of the screen sizes. However, you will only need to provide your images as @2x when bundling them due to the fact that both screens will be retina display.
Tables
Tables are used to present rows of various data in one single column that a device’s user can scroll through vertically. When designing tables, ensure that they are kept smaller than 20 rows. Rows that are higher than that particular number will be rather difficult to scroll through.
If on the off chance you are able to design more than 20 rows, then the device’s user can be given the option to load more if they wish to do so. Depending on the overall number of rows that a table contains, they will be able to ignore any restrictions on height; however, it is highly recommended by Apple that you do not embed any tables inside any groups.
Typography
Apple Watch contains the San Francisco font, which is a new type of sans serif font. In addition, all of the fonts designed for the Apple Watch are designed in terms of only the best in legibility, as well as being based on the condensed letter spaces that will essentially take up the least amount of horizontal space as possible. There are also glyphs in the fonts containing larger apertures, which make it extremely easy to recognize the characters themselves.
Furthermore, as the font size increases, so too does it dramatically change in order to maintain its legibility. This is a process that is referred to as Dynamic Typing. Application developers will be able to obtain this service for absolutely free if they choose to employ the system font over customized font. Dynamic Typing essentially senses and adjusts the fonts, letter spacing, and line spacing. All the developer will need to do is specify whether the text should be used in the headline, body, or as a footnote.
If a developer supports dynamic fonts, they will also be supporting accessibility settings at the same time. However, if a developer decides to employ the use of customized font, then they will be solely responsible for managing all font sizes in accordance with accessibility changes.
It’s also important that, as a developer, you use only one single font throughout your entire application, as mixing fonts will run the risk of breaking UX best practices that Apple has always championed.
Animations
UI element interactions are almost always accompanied by various animations. Animations, if used intelligently, can greatly increase the overall understanding of a particular action and create a much more engaging experience, as well as influencing a device’s user to complete a task.
Most people ask themselves if animations are really necessary for an application. On one hand, they can risk causing delays, which is a bad thing no matter what kind of great enhancing qualities they may have. As a developer, you need to keep in mind that you are essentially creating something that is roughly the size of a postage stamp that also wirelessly streams data from the device that the application is installed on.
Notifications
Device users will receive notifications in one of two different ways: either short-look or long-look.
Short-Look Notifications
Short-look notifications let the device’s user know which specific applications are notifying them, as well as giving a headline regarding what the specific notification is. The notification on the Apple Watch is immediately dismissed if the device’s user either does not lower their wrist quickly or of they do not tap on the screen.
However, an Apple Watch user does not necessarily have to physically interact with the device in order to force a notification to disappear. In terms of design, the short-look notification is template-based and contains the following information: application name, application icon, and a title string. Title strings should be designed short, yet meaningful.
Long-Look Notifications
Long-look notifications provide much more detail regarding an application’s specific notification to a device’s user. They are also able to be fully customized however the developer sees fit.
The overall structure is similar to that of the short-look notification, but the following can also be included: application name, application icon, custom application content, up to four different buttons, and a button to dismiss the notification.
Ending thoughts
Perhaps the biggest and most important aspect to keep in mind in terms of constructing an application for the Apple Watch is that the goal is not to simply copy onto a much smaller screen an already-existing mobile experience. Rather, the overall goal is to find ways that are more innovative to extend the basic functionality of a mobile application.
Source: http://ift.tt/1PhUVdl
No comments:
Post a Comment