How to make Attractive User Interface using Timeline for Google Glass

Google’s services from past era have been known for their simplicity and elegant interface, and so is the Glass. With the glass you can experience one of the advanced user interaction with any requirement that you want to fulfill and the fact which makes it so usable and touchy is the interface behind it. Today’s tutorial will let you to stumble upon few of the aspects of Timeline for giving your app’s user interface a new life.

time line cards

Formatting your Timeline cards for better experience

Timeline cards are primary and front end basis for user’s interaction with Glass. Apart from carrying content they are also responsible for providing flawless interaction by making the content clutter free and readable. Mirror API as we discussed earlier forms the main platform for making the timeline cards and it provides three ways to do this: Text, using Google’s HTML template and using your own HTML template.

At the end of document we have given links to the important text, timeline and html fields for developers section which will give you more technical know-how.

How to use text as your calligraphy for timeline cards

Text written on timeline cards provides more elegance for the user on the Glass. For applying text you just need to provide API for the content you are interested in displaying along with some images if you wish to add them. Glass is able to mention text cards by publishing text on the timeline items

 glass text

Using Glass HTML template

Loads of text displayed on screen can make you go nuts! This is same with Glass hence Google provides you a way to use HTML templates giving you option to more elaborate your content and to give total control over formatting. Google has recommended using their ready-made HTML templates for better building out HTML cards; hence you can follow this Mirror API playground link which will introduce you to whole new set of templates. Mirror API also provides html field which can be published over timeline items using HTML.

html template

Using custom HTML templates

Custom HTML templates include making your own HTML template to gain full control over how and what you design for Glass’s timeline. Though Google recommends using their own made HTML templates for better practice, if you feel confident enough to stand on your own, you can take help of different styles found here – this is a CSS file which is generally found in all timeline cards associated with Glass.

custom template

Follow our next tutorial on creating eye-catching Menu items to amplify user interaction with timelines

source: UI guidelines