IDEA 2: Next-Gen 3D Touch Interface
Posted: April 5, 2011 Filed under: Interface Design, User Experience, UX Design Leave a comment »Problem:
The Graphical User Interface really hasn’t changed much since the 80s. Sure there are beautifully rendered graphics and subtle clever animations, but the metaphor is still relatively the same. All popular GUI’s are still some variation on overlapping windows. There’s strong evidence Apple and Microsoft are working on 3D interfaces. Even Google got into the game by acquiring Bumptop. So far most 3D interface concepts use a type of office desk metaphor. In an isometric view you can move around and organize the items on the desk. The metaphor makes sense but I started wondering if there was any other 3D metaphor that could be used.
Idea: Earth-Sky Metaphor
EARTH METAPHOR
Organization: I thought the sphere might make a more pleasing 3D space to start with. But icons floating inside a sphere wouldn’t provide enough organization. So I grounded the icons and separated them visually with concentric rings that form arched rows. I also take advantage of how perspective naturally prioritizes items in space. Icons closer to you are more important and icons further away are less visible a faded. The staggering of icons in different rows helps to keeps back row icons more visible.
Icons can be grouped into these arched rows. For instance in the mockup I have front row: internet apps, second row: office apps, third row: media apps.
Navigation:
There are two touchscreen gestures that act as the primary ways to navigate. Swiping left or right along an arched row rotates the icons in the arched row. Hidden icons are shown and smoothly snap into the set staggered position. Swiping down is equivalent to moving forward and swiping up is equivalent to moving backwards. So in the example above swiping down would hide the internet apps and the office apps would go to the front row. The main navigation bar at the very bottom would always be visible.
SKY METAPHOR
So above the horizon (aka the last visible arched row you see) you have a space that acts more like the GUI we have today. Windows, widgets, and icon shortcuts float in the “sky”. They present quick access to often used apps and allow for multi-tasking and a bit of personalization.

