INNOVATIVE SLIDING TAB NAVIGATION

The main navigation of the device featured a prominent 'tab' at the bottom of the screen, that could slide back and forth to select each major content section. As the tab slid across the screen, the content icons would slide in the opposite direction.

This unique innovation created the opportunity to present more nav items that the space would normally allow. Rather than being confined to the visual width of the screen, the navigation could be much more extensible. In addition, by positioning the main navigation control slider at the bottom of the screen, the user was ergonomically situated to navigate the device one-handed.

A Revolutionary 3D Interface Design

The HTC Touch Diamond™ featured a unique touch-based 3D user interface called TouchFLO 3D. This interface allowed users to interact directly with the content on their device, and view information in visually rich, animated presentations. The main content areas included; Home clock, People, Messages, Email, Internet, Photos, Music, Setting and Programs.

The creative approach to this interface was to allow the user to interact directly with content as they would in the real world — flipping through CDs at a record store, spinning through contacts in a roladex, or shuffling through pages of mail.

This tactile interaction was a key element of the design, and created a unique opportunity for rich animated feedback. For example, as the user drags up or down on their contacts, the interface visually responds by rotating the rolodex carousel of people. In Messages, as the user flicks up or down, the lines of text come apart and flutter away like the words in a conversation. This tactile experience was continued in Music, where the user could flip through album art as they would flip through a stack of CDs.

Rich Animated Visuals

Another key feature of the design was a delightful use of rich animated visuals. One of the most fun and innovative was the variety of different weather graphics and animations. For rainy conditions, the user would see the cloud graphics gather and rain start to fall. Then drops would 'stick' to the inside of their screen, and shortly be cleared by a 'virtual' windshield wiper. In sunny conditions, the clouds would part and the sun graphic would shine though. When the displayed weather condition temperature dropped below freezing, 'virtual frost' would gather at the corners of the screen.

The motion design centered around the idea of tactile interactions with 'real world' physical objects — flipping thru music CDs, shuffling thru pages of a letter, flipping thru a rolodex of contacts. The project also featured more 'fun' animations designed solely to provide 'moments of delight', such as rain drops spattering on the inside of the device screen.

PRODUCT LAUNCH VIDEO

This animation was create as part of the keynote presentation of the HTC Touch Diamond product launch. The motion design featured a mysterious introduction inspired by the faceted industrial design of the product, and was finally revealed in a blaze of paparazzi flashes. The 3D animation was design so that each of the product key user interface sections was highlighted in succession, before resolving to slow revolving loop.


TOUCHFLO 3D™ SUCCESS

The innovative and engaging user experience of TouchFLO 3D™ helped make the Touch Diamond™ one of the most successful products in HTC history — and paved the way for future innovative devices.



Initial concept sketches exploring 'signature experience' and iconic visual footprint. Early explorations on system hierarchy and spatial model.

Concept sketches exploring overall system hierarchy and global navigation.

Launch video storyboard thumbnail sketches