Here are some of my conceptual design of how a smart watch should present contents and data:
1. WATCH SCREEN
Watch screen is the most frequent pages users will see. After all smart watch is a watch in the first place. The design of my watch screen include a coloured version and a grey scale version. When user raise their wrist to see current time, the watch automatically displays the grey scale version as it is simple and it has the information people want exactly. By clicking the home button, you will see the coloured version with a background image as a representation of personality.
1. WATCH SCREEN
Watch screen is the most frequent pages users will see. After all smart watch is a watch in the first place. The design of my watch screen include a coloured version and a grey scale version. When user raise their wrist to see current time, the watch automatically displays the grey scale version as it is simple and it has the information people want exactly. By clicking the home button, you will see the coloured version with a background image as a representation of personality.
2. HOME PAGE
Home page is similar to a smartphone home page, but simplified. It has a list of function presented by words without icon. This is due to the limitation of screen size and screen resolution. Through words, people knows the function straightly without further interpretation, unlike the icons that people usually get confused on a smartphone.
Except the selected function, other displayed functions are transparent for differentiation. The relationship between background and words is the core of this UI. With appropriate fonts and transparency, it could achieve a harmony between different elements of this UI.
3. VOICE ASSISTANCE
Voice will inevitably be the major input for information. Thus, the voice assistance is the link between phone and watch. By using voice, watch can act as a intermediate between user's interaction and the action of information on phone, or at least get it by phone.
This is the enlarged version of a watch screen. Notice there is only one place that is actionable - the "voice" button on the left and the "respond" button on the right, all designed as a red round button. It fits the expectation of a typical button and reduce the distraction caused by rich contents. Notice that the content of the read-only information is all encapsulated in white "paper cards" to indicate that this area is similar to papers - it is not editable.
4. WORKOUT FUNCTION
As a personal trainer/coach, workout and activity tracking is definitely the crucial function of a smart watch. And it is one of the main reason why user purchase a smart watch instead of a normal watch. Here are some pages for a standard workout app in a smart watch and how they are intuitively shown in the watch.
DASHBOARD Dashboard is a summary for all workout a user have done in a single day and the specific information for each activities. Information presented in the card are swimming track for a user. The heart rate, UV strength, timing, activity level (presented in an axis) and total distance provide viable data for user to interpret his own performance and diagnose it for future improvement. Notice the colour variation of each data which indicates its properties, such as red indicates blood and cardio system (beats per minute in this case). PROGRESS WHEEL Progress wheel will present when you are doing workout activities. It tracks and visualize your own pace, the activity you are currently doing and your historical record of the similar activities. This is assumed that the device has various sensors including GPS, accelerometer or pedometer. This UI will certainly provide you with data that you can improve your efficiency and method while planning your next workout. Each person has a wheel and it serve as a representation in the fitness social network. The use of circle is to indicate the completeness of the workout as circle represent completeness. By using off-white background and black wheel, the sunlight readability will be improved. | USER HEALTH ID Health ID is a general health summary of a individual. The personal information and its health condition is listed and recorded by smart watch. It serves as a medical record book for doctor's reference and as a emergency contact book. It will surely help doctors to diagnose the condition faster and reduce potential confusion. In the future, i will add more information in the health ID page, and aimed to create a complete and comprehensive personal profile. WARNING CARD Warning card is present when BPM (Beat per rate) of the user exceeds the normal rate of his/her respective limits. This is to remind user to stop workout for a while or give up this workout as the risk of exceeding the BPM is high and will potentially cause Sudden Cardiac Death. The measurement of BPM assumes the device has the heart rate monitoring sensor on board. |
PROGRESS CARD
Progress card is the cards which shows your specific progress and related datas when you are doing workouts. It shows you the critical data like time of your workout, the no. of steps you have finished, the UV light strength and the heart rate. These data subtly suggest the feasibility of this workout in various approach. This card will present when user tap on the fraction of specific workout on the progress wheel.
Progress card is the cards which shows your specific progress and related datas when you are doing workouts. It shows you the critical data like time of your workout, the no. of steps you have finished, the UV light strength and the heart rate. These data subtly suggest the feasibility of this workout in various approach. This card will present when user tap on the fraction of specific workout on the progress wheel.
5. HEALTH
The health function will serve as a personal nurse who constantly provide you suggestions on your general health in various viewpoint. This function is relying on the data measured by sensors on the watch device itself.
The health function will serve as a personal nurse who constantly provide you suggestions on your general health in various viewpoint. This function is relying on the data measured by sensors on the watch device itself.
ACTIVE CALORIES CARD This card is an indication of your daily Caloric intake and consumption. This is crucially important for people who want to keep fit or lose weight. Thus it meet the requirement of our target audience. This system allows users to set up their own daily caloric goal therefore help them to keep on a healthier diet. AIR QUALITY CARD Air quality is certainly the popular health indicator as it impacts greatly on the health condition of our respiratory system. Therefore, the smartwatch push the information of air quality from online sources and give you the specific data like the PM2.5, PM10 and O3 values. This will give you a general idea of the air quality. | WEIGHT CARD Weight card is the card that tell you your weight trend and your own weight goal. It visualize the weight change, therefore tells you the trend of your workout plan. And you will have a better clue of add the workout frequency or reduce it. SUGGESTION CARD The suggestion card is to give people workout suggestions based on the air quality. instead of merely give you the plain data, smartwatch has to know the meaning of the data and offer suggestions. The system here divide the workout into various categorisations and then judge the feasibility of each workout based on the data it can measure. |
6. OTHER FUNCTION
As the smartwatch is the link between smartphone and user, it will integrate some of the function that provide a convenient way to reach the action. Instead of picking up the phone and do the action, smartphone has the capability of presenting these actions on the watch surface so that your smartphone can stay in your pocket. This include notification and remote control.
As the smartwatch is the link between smartphone and user, it will integrate some of the function that provide a convenient way to reach the action. Instead of picking up the phone and do the action, smartphone has the capability of presenting these actions on the watch surface so that your smartphone can stay in your pocket. This include notification and remote control.
MUSIC REMOTE
The smartwatch gives you the information of the music you are playing on your smartphone. This remote control is crucially useful when you are doing a workout or if you are carrying something, you are not free to take smartphone out of your pocket. It can also control the music by tap on the play button or flip the album page to left or right to change the music. Also, the color of the actionable button and the font change its ambient color when the album color changed, which is aimed to reach a harmony between content and UI.
The smartwatch gives you the information of the music you are playing on your smartphone. This remote control is crucially useful when you are doing a workout or if you are carrying something, you are not free to take smartphone out of your pocket. It can also control the music by tap on the play button or flip the album page to left or right to change the music. Also, the color of the actionable button and the font change its ambient color when the album color changed, which is aimed to reach a harmony between content and UI.
LYRICS PAGE When you tap on the album, the system will bring you to the lyrics page, when you tap on the lyrics again, it will returns to the music mainpage. | MUSIC DASHBOARD Music dashboard is acting like a playlist but also alternatively provide a control centre for music including stream music, mute and shuffle functions. On the top of the main card, it has a subtle bar to adjust the playing time of this music. |
MESSAGING WITH VOICE AND PREDICTION
On the watch, it is not user-friendly to insert a keyboard into such a small screen. Therefore, the voice input will be the main input from user and it will translate into words. To ensure accuracy and smoothness, the language prediction plays it part in the messaging service. The starting sentence that from user's history was collected and present as the picture in the middle. And this combination of input is so far the most realistic and feasible solution. Notice the time in the left picture is underlined which is to provide a path to set alarm or calendar reminder.On the background, the photo of the sender will be displayed. And this is so far one of the best messaging solution.
On the watch, it is not user-friendly to insert a keyboard into such a small screen. Therefore, the voice input will be the main input from user and it will translate into words. To ensure accuracy and smoothness, the language prediction plays it part in the messaging service. The starting sentence that from user's history was collected and present as the picture in the middle. And this combination of input is so far the most realistic and feasible solution. Notice the time in the left picture is underlined which is to provide a path to set alarm or calendar reminder.On the background, the photo of the sender will be displayed. And this is so far one of the best messaging solution.
REMOTE PHONE CALL
The phone call service of a smartwatch serves as a shortcut of the smartphone function. By connecting to phone, the watch can actively receive and dial calls if you want to. The input of the numbers is one of the biggest problem to make this service feasible. But so far, the big watch manufacturer mostly transfer the UI from smartphone to smartwatch, causing the key to be extremely small and inefficient. The input here simulate the actual phones back to the 20th century. You just need to tap and hold the numbers, the number selected will become red in colour. after that, you hold and move on to the next number until it turns red too. It is accurate by using this method and it won't cost you too much time to dial a call. When someone call you on your smartphone, your smartwatch automatically display the page at the middle and you will choose to pick up the call or to reject it. In addition, you can send a message to the caller after you reject the call.
The phone call service of a smartwatch serves as a shortcut of the smartphone function. By connecting to phone, the watch can actively receive and dial calls if you want to. The input of the numbers is one of the biggest problem to make this service feasible. But so far, the big watch manufacturer mostly transfer the UI from smartphone to smartwatch, causing the key to be extremely small and inefficient. The input here simulate the actual phones back to the 20th century. You just need to tap and hold the numbers, the number selected will become red in colour. after that, you hold and move on to the next number until it turns red too. It is accurate by using this method and it won't cost you too much time to dial a call. When someone call you on your smartphone, your smartwatch automatically display the page at the middle and you will choose to pick up the call or to reject it. In addition, you can send a message to the caller after you reject the call.
THIRD-PARTY APP As a smartwatch, the development of the ecosystem is crucial as it cultivate more potential for this device. Here is an example app - twitter. All the third-party app follow the design language of this UI, which will have two major interface: the page and the card. Page is for general function and card is to display notification or information. The round-shaped icon will take you to the main page of the app from the notification card. It is recommended to have only one actionable button on one page. | SEARCH Similar to the messaging app, the search app also use voice as the main user input, aided with prediction. It can search the device files and documents. In addition, the search app can search for internet sources if the internet of smartphone is available. | REMOTE CAMERA Remote camera is to control the camera on your smartphone. It is not advisable to put a camera on the watch itself as it is not useful and it is a duplicated function. By controlling on the watch, the camera can take picture and transfer picture into the smartwatch. The smartwatch can add visual effect or lenses to the pictures or it can browse the latest picture taken. |
Come and explore the next part of the watch UI: http://lutio.weebly.com/blog/my-conceptual-design-of-smart-watch-interface-part-ii