Nokia Windows Phone 7 UI Concept – Live Cubes

| April 19, 2011 | 112 Replies

Hello folks,

I am Peter, a Nokia fan and mobile phone enthusiastic from Finland.

I’m also the guy who made that ‘What if Nokia’s version of WP7 had themes?’ concept published here at My Nokia Blog a while back (something I actually plan to revisit soon, this time with Metro UI in mind). I’ve since had a few other ideas regarding Nokia’s implementation of WP7, this time focusing more on functionality, and I would like again to share them here.

During MIX2011, Microsoft introduced a new option to have multiple Live Tiles for same application. This enables an access of additional functions and content for applications straight from the home screen. One such example would be the familiar “new email message” shortcut. Touching it will take you to the email application, straight to the new message part, ready to write. I’ve had an idea for a few months now for a somewhat similar UI concept for WP7 which actually started out very much like the one MS is now introducing. I ended up ditching most of that idea though, because I disliked the idea of sacrificing a tile worth of home screen estate for each extra function I would like to have.

I eventually figured out a way to implement this without extra Live Tiles – I call them Live Cubes.


Next evolution of Live Tiles – Live Cubes

(Click for full size image)

Live Cubes

Live Cube looks and functions exactly like a Live Tile, but in reality is a cube which can be interacted by rotating it in its equatorial axis. Since a cube has 4 equatorial sides, a Live Cube would then have 4 square faces that can be accessed by swiping the Live Cube left or right. These additional three faces would then have optional application-specific extra content or functions. The sweeping gestures of up and down would still be dedicated to scrolling through the homescreen and would not be used in Live Cubes.

Using the application shortcuts from the cube is fast and there is no break in the user experience (loading animation through black), like in the original way, which requires starting the email application, finding the new email button and tapping that button. Having this option doesn’t make that much difference on paper, but on every day usage it would quickly become the preferred choice.

Live Cubes will reset themselves back to their original position showing the front face if the user does not interact with the cube for a certain time period or if the user taps on the negative space. Applist is accessible as it is now, by starting the sweep gesture from the negative space in the right part of the homescreen.

Best part about this in my opinion is that while modifying the user experience, it still complies the original design guidelines of Metro UI. Original appearance would be intact, since a cube face looks exactly like a Live Tile. Only thing extra would be a more direct interaction with the content and adding more dimension and depth to the UI, something that the Metro UI aspires for anyway.


Some examples of Live Cubes

Live Cube video example

Live Cubes



Secondary Tiles

For this concept, I also would also introduce something called a Secondary Tile, which is used to display additional content from the Master Cube. This content can be anything from the application, like new emails, RSS feeds, music control, who’s online for IM, etc. Secondary Tile will point to its Master Cube with a small arrow and can be opened/closed from the back side of a Live Cube.

Secondary Tiles would be sized either 1×2 (double width) or 2×2 (double height, double width) and there is also option in some tiles to expand 1×2 Secondary Tile to 2×2 if desired.

Please don’t concentrate on the appearance of the Secondary Tiles in these pictures too much, those are just examples and not fully thought out.


Secondary Tile examples

Secondary Tiles


Live Cube extra features

Some Live Cubes can also be interacted by a long press of a selected cube, which then will turn all the cubes on the homescreen except the one pressed. Those other cubes will then show content from the Live Cube that was pressed. User can exit this mode by tapping on the negative space on the right, which will reset the cubes and turn them back to their original positions.


Long press explained with IE Live Cube

Extra features sample video

Live Cube extra features

Other examples

This implementation will naturally replace the previous function of long press in the homescreen, the rearrangement of the Live Tiles. That would have to be reassigned someplace else, for example under settings. Rearrangement of the home screen tiles is something that you don’t do every day, so the replacement is justified.

That’s all this time, thank you for your attention!


Tags: , , , ,

Category: Concept, Nokia, Windows Phone

About the Author ()

Hi, I'm Peter. Nokia, Windows Phone and UI/UX design enthusiast.