Let’s Develop Wearable Tech #1: Comprehensive Guide for a Google Glass Developer

“To many users, these (wearable technology) new devices are often categorized as fun novelties and interesting gadgets, but others see them for what they really are: a game-changing influence with the potential to utterly disrupt the modern business world”

(Source: Forbes)

Even without knowing, wearable technology has penetrated into the DNA of our urban lifestyle. And this can be proved by the simple fact the there is hardly any soul left on this planet who has never owned or heard about a Smart Device like a Smartphone, Smart watch, Smartglass, etc. Tech giants like Apple, Samsung, Sony, Microsoft and many more are spending a legion of time, money and resources in making Wearable Technology a next big thing for all of us. And that day is not far when we will be surrounded by some of the most sophisticated and elegant pieces of tech gadgets, giving us access to every bit of information on just one touch.

Click Labs is proud to introduce our new series “Let’s Develop Wearable Tech” for all those Businesses, Tech Entrepreneurs, Developers and Designers who aim to revolutionize and challenge the traditional with their path-breaking wearable tech ideas and projects.

We will start off this series with our favorite wearable tech gadget of the year- GOOGLE GLASS. This beauty has won many hearts, and we are more than excited to do an extensive blog post for you.

But first, let’s get some insight on what is a Smartglass and how it works.

Introduction to a ‘Smartglass’

Smartglass, also known as a Digital Eye Glass, is a wearable computing device with an Optical Head Mounted Display (OHMD), which allows a user to view projected digital images through augmented reality. This wonderful gadget is worn
like a regular spectacle. It has sleek and compact computer processor and battery attached to it. The main idea behind a Smartglass is to give instant access and presentation of selected information to users without engaging ones hands in any form.

Needless to say, the tech world has gone ballistic with the introduction of Smartglasses in our smart lives. According to the Deloitte’s report ‘Technology, Media and Telecommunication Prediction 2014’, the demand for Smartglasses in 2014; which is restricted to early adopters, affluent people and tech professionals; will rise up to tens of millions by 2016 and 100 million by 2020. Besides, companies will also be able to save up to billions of dollars by 2017, all thanks to the features like displaying instructions at the line of sight, real-time remote consultation, etc. Similarly, US-based IHS Inc. made positive predictions about the Smartglass market, expecting the shipments to accelerate from 50,000 units in 2012 to 6.6 million units in 2016. Mike Elgan of Computer Week declared 2014 as the ‘Year of Smartglasses’. Today, many brands like Epson, Samsung, Sony, Toshiba, etc. are making the news for coming up with their very own OHMD glasses.

And, undoubtedly, the credit for this Smartglass revolution goes to the one-and-only Google Glass. As rightly said by Mashable’s Pete Pachel in his recent article, Google Glass has become ‘the public face of Smartglasses’.

Things You Need to know about ‘Google Glass’

Back in June 2012, when Google Glass was ceremoniously introduced during the Google I/O Conference, the whole world was bowled over by the gadget. The main proposition behind its development was to stand straight and look up, rather than to hunch and stare at a smartphone screen. It can also be treated as a second screen of one’s phone, delivering notifications and updates right in front of the eyes.

 Anatomy of Google Glass

Hardware

Google Glass is a wearable technology device. It is a feather-weight titanium frame with an adjustable nose pad and cubic rectangular glass. The right arm of the Glass holds Battery and Processor, which includes a camera, speaker, touchpad, microphone and prism. Check out this comprehensive Infographics ‘How Google Glass Works’ by M. Missfeldt’ which elaborately explains the Google Glass components and their functions.

Other Tech Specs

The tiny screen of Google Glass; which is 0.375 inch wide, 0.375 inch tall and 0.75 inch deep; is a high resolution with 25-inch high-definition from 8 feet away. It displays everything you want to see on the glass like texts, notifications, web, glass apps etc. Its 5 MP camera can take fair quality pictures and shoot 720p video. Afterwards, you can also share the media conveniently. With features like Wi-Fi – 802.11 b/g 2.4GHz, Bluetooth, 12 GB usable memory, and much more…this piece of technology is simply amazing.

Features of Google Glass

Here is a quick list of the amazing features of Google Glass:

• Built-in microphone for Voice Activated Commands like “Okay Glass”
• Hands-free functioning of the device
• Take photos and record videos of special moments
• Built-in GPS for Maps and navigation
• Travelling aid like language translation, currency conversion, etc.
• Frequently updated real-time information from predictive software of Google Now
• WiFi or Mobile Connectivity
• Compatible with iOS
• Live video streaming

Google Glassware

 Google Glasswares are the services and apps which are designed and developed especially for Google Glass, and are launched on MyGlass.

 Now that you are done familiarizing yourself with the Glass, it is now time to learn almost everything about designing, developing and distributing a Glass App.

Quick Guide to Google Glass App Development

 Tips for Designing a Google Glass App

UI Elements

Before starting with the design patterns and principles of designing a Glassware, allow me to throw some light on the important User Interface (UI) Elements of a Glass App.

• Timeline: it is the main UI exposed to Google Glass Users, with features like managing cards (both live and static), system wide voice command, processing user inputs, etc.
• Cards: they are 640 x 360 pixel screens that horizontally line together to form a timeline. They contain content like activity history, notifications, texts, etc. They are of two forms:Live Card: this card displays real-time information that is pertinent to a Glass user at that current moment. It has access to low-level sensor data like the accelerometer and GPS, can be frequently updated with custom graphics and other information. Since a live card runs inside the timeline, a user can keep it running while interacting with other cards, hence allowing him/her to multitask.
  • Static Card: in contrary to a Live Card, this card is built with HTML, text, images and videos, and contains simple information. It is designed for quick notification and is not frequently updated. Do note that a Static Card can be shared with the ‘share menu’ component.

• Timeline Sections
  • Home: vested in the center of the timeline, this card is the Glass Clock which appears when the Glass wakes up with “Okay Glass” voice command. It provides access to entireGlass system as well as voice and touch command to start other segments of Glassware.
  • Past: this is the history section of Glass which resides in the right of Home section and displays static cards.
  • Present and Future: located at the left of the Home card, this section contains both live and static cards.
  • Settings: this card allows the users to configure Glass settings like Wifi networks and volume

• Immersions: they run outside the timeline, allowing a Glassware Developer to create his/her own UI and process and built an app which is not confined to the limitations of the timeline.

• Menu: it allows users to perform associated actions like sharing, dismissing, replying, etc.

Principles of Designing a Google Glass App

Google has listed down five Principles that highlight the key points every Google Glass Developer should comprehend while working on the glass app. They are as follows:

• Design for Glass: since Google Glass is distinct from other smart devices, a Glassware Developer should focus on designing an app which is exclusively for the Glass users, and displays the information which is simple, relevant, current and concise.

• Don’t get in the way: Developer must make sure that the Glassware is not distracting the User from the real life experience and is is conveniently position above the line of sight which could be accessed whenever the user needs to.

• Keep it relevant: building a Glassware which provides right information at the right time and venue can add 5 stars to any user’s experience.

• Avoid the unexpected: as a Glass user is in close proximity with the device, sending unnecessary information and notifications at the wrong time or way too frequently can cause the danger of irritating the user
• Build for People: Glass Developers are encouraged to use ‘fire-and-forget’ usage model for the glass app, and employ imagery, colloquial voice interactions, and natural gestures for an ultimate user experience.

Patterns of Designing a Google Glass App

User Experience (UX) Patterns are extremely important in making sure that a User enjoys consistent experience with the Glass. In order to build a usage pattern, a Develop would require UI elements like Live Cards, Static Cards and Immersions along with Touch and Voice Invocation Models like OK Glass Touch/ Voice Menu and Contextual voice/ Touch menu on a timeline card.

We all know that voice activated command is the most promising feature of Google Glass. Besides, Google has an elaborate checklist to ensure that Glassware Developers are able to meet the company’s criterias and standards. Voice Invocation Model involves certain guidelines which must be religiously followed for seamless UX. They are as follows:

• Focus on the action, not the agent: concentrate on basing voice commands on what a Glass User wants to do, and not on the actions of a Glassware. It will result in smoother user interaction.
• Decrease time from intent to action: ensure that the actions to be executed by a voice command are carried out as quickly as possible
• Is colloquial and easy to say: since natural sounds and accents are highly distinct and disparate, keep voice commands to at least two words and make sure that they are different enough.
• Is general enough to apply to multiple Glassware: use voice commands that work for multiple Glasswares in order to avoid clutter and confusion for users.

Some examples of Patterns are:

• Periodic Notification: Like in any other smart device, notifications of an app are used to deliver information like news updates, reminders, etc. Notification Pattern in Google Glass is created by inserting static cards in the timeline without an invocation model. Glassware Notifications use Mirror API web services or Android services on Glass to push notifications to the timeline.
•  Ongoing Tasks: this pattern includes live cards that are long running. These task are often left and then visited back by the Users on frequent intervals. For instance a Stopwatch.
•  Immersions: in this pattern, immersions take over the timeline, and  are displayed in form of Android Activities.

Styles of Google Glass App

Now that you know everything about a Glassware UI elements and design principles and patterns, it is time to mug up the Style Guidelines for

•  Metrics and Grids: a timeline card can be divided into different regions (see the image) which can be used to display and design the card area in right proportion and dimension.
  • Full-bleed image (640×360 px) is complete Card screen which does not require 40 px padding.
  • Main Content (560×240 px) includes text which is Roboto Light (32 pixels of minimum size) and Roboto Thin (for 64 pixels and more text), and is bounded by padding.
  • Footer (560×40 px), which shows supplementary information, includes Roboto Regular text of 24 pixels and white colour.
  • Left image or column (240×360 px) requires padding and text modifications.
  • Padding (40×40 px) allows users to see content on the card clearly

• Layout Templates: Some of the examples of CardBuilder.Layouts; which defines the visual layout for timeline cards; for Google Glass Developers are as follows:
  • Text and Text_Fixed: where CardBuilder.Layouts TEXT shows the entire card filled with text (dynamic size, depending on amount of content) and image mosaic (optional and up to 8 images); CardBuilder.Layouts TEXT_FIXED has similar attributes, but the text size is fixed to 30 pixels.
  • Columns and Columns_Fixed: this is a two columns layout, with image (mosaic or icon) on the left and text on the right. CardBuilder.Layouts COLUMNS text size is dynamic and CardBuilder.Layouts COLUMNS_FIXED has the fixed text size of 40 pixels.
  • Caption: this layout has an image mosaic in the background and a Caption text at the bottom of the card, with an option of adding an avatar or icon with the text.
  • Title: used for contacts and share targets, this layout is similar to the caption layout. The only difference is that the Title is center aligned, and it does not support footnote and timestamp.
  • Author: in this layout, the focus is on the author. It contains a background image mosaic, author’s avatar, heading and subheading. This frame is generally used to show a conversation or a message.
  • Menu: this layout is similar to the Glass Menu Card, with center-aligned text and icon, and an optional footnote. This screen layout is used for confirmation of the activity.
  • Embed_Inside: if you have a custom UI layout, then you can use CardBuilder.Layouts EMBER_INSIDE to imbed your design into the standardized card layout template, and place your screen elements like text, images, icons, etc. at the precise position.
  • Alert: this layout is used for important information, error or alert message; with a large icon (center-aligned), primary message and footnote.

• Color: Google Glass generally uses white as text color. But Developers can also take help of the following colors (table below) to display different information:

• Typography: System-wise, Glass is using Roboto family (Light, Regular and Thin). However, Glassware Developers can use their own text for immersions and live cards.

• Writing: the guidelines for writing content for Glass are:
  • Keep it brief: make sure that the text is kept concise and to-the-point
  • Keep it simple: use easy-to-understand jargon by keeping the words short, and using active verbs and common nouns
  • Be friendly: communicate casually with the user as by using second person (you)
  • Put the most important information first: make certain that the first two words throws maximum light on what you are trying to communicate with the user
  • Avoid repetition: use the important text of words just once.

(Source: Design for Glass)

Tips for Developing a Google Glass App

Let’s commence this section by throwing light on the four important APIs that form the very foundation of Glassware development, and can be used together or separately.

• Android Software Development Kit (Android SDK): Android SDK can be employed to build apps for Google Glass. Hence, developers are given access to large number of Android APIs like layouts, views, GPS, sensors, activities and services, etc. They can also utilize existing Android development tools to create an amazing app for Glass users.

• Glass Development Kit (GDK): GDK is used to develop Glass apps that run directly on Google’s Smartglass. It acts as an add-on to Android Software Development Kit (SDK), as it throws in extra features like real-time user interaction, access to Glass, and offline functionality. It is availed for adding voice commands, gesture detection and cards to the Glassware. Besides, this API also provides low level hardware features to the developers.

• Mirror API: it is a Representational State Transfer (REST) API which allows a Google Glass Developer to create web-based services that communicate with the Glass, and eliminate the need to run codes by providing this functionality over a cloud-based API. Mirror API offers the following features- platform independence, built-in functionality, and common infrastructure.

• Hybrid Glassware: This model is used to leverage the web properties of Mirror API, that can invoke GDK through a menu item; and, hence, launch a brimful experiences on the Glass.

After understanding the technology stack of Google Glass, it is time for Building Patterns, since they form the very crux of developing a high-end Glassware. Glasswares are developed by using Android development tools along with GDK APIs for adding glass-specific features like live cards, voice commands and gesture detectors. However, even though a developer is using same resources that are being used for developing an Android app, he/she must know that Glass apps are different and must be treated discretely.

AndroidManifest.xml file for Glassware has listed the vital components which an Android Developer must present. They are listed below:

• Glassware icon and name (required for MyGlass)
• All services and activities associated with the Glassware (required to know how to start the app’s components)
• Voice command and an intent filter (required to start the live card)
• Version Code of Glassware (must be updated regularly)

(Source: Develop Glassware)

Tips for Distributing and Launching a Google Glass App 

This final stage of Google Glass App development is as important as the above two stages. Since Google is very particular about the quality and functioning of each and every Glasswares, it has launched number of checklists and requirements for Developers to complete before submitting their Glassware and launching it on MyGlass. 

But first and foremost, they should make sure of the following things:

• Make sure that the Developer has first fully understood the design patterns and principles before starting with the development part;
• Do not force Glass users to pin a timeline card with menu item to keep the periodic notifications on;
• Make sure that you are using standard card layout and template wherever possible;
• If your Glassware takes voice commands from Users and responds in real-time or with low-latency, then use GDK instead of Mirror API;
• Ensure that the content is concise, relevant and gives away important information. You can also use images instead of text;
• In case of media, note that video (streamed) aspect ratio and resolution is 16:9 and 640 × 360 pixels respectively with H.264 format;
• When grouping cards together (example: email and message threads, related articles, etc.), you can use Bundles for similar cards, and design a cover card to separate it from others. For items that do not fit in the same card and leads to continuation (example: single email, news story, article, etc.), then you can use Pagination;
• See to it that you follow the given menu design layout and template to maintain consistency.

Click here to view the Glassware Checklist which is supposed to be reviewed before submitting the app. After submitting the app, Google thoroughly assesses the Glassware from a User’s point-of-view and provide their feedbacks before launching it on Google Glass.

(Source: Distribute on MyGlass)

Click Labs is working on developing seamless technology solutions for Google Glass. Our dexterous team of Designers and Android Developers have decoded the success mantra of building a superb Glassware for any industry. If you have an idea, we have a solution. Get in Touch today, turn your concept into a highly downloaded and celebrated Glass App.