Developing a spatial interface

Smart Replicas – Developing a spatial interface

In developing SmartReplicas, the first set of design questions we need to address here at LikeFriends is about the way we organise and explore information in three dimensions. How do users interact with information? How do real world elements interact with the virtual ones? How do we balance the dramatic strength of linear narration with the playfulness of exploration?

There's a couple of design principles that we're currently investigating in order to make sense of this:

1. CONTINUITY OF INFORMATION

With the shift from desktop to mobile, interfaces had to shrink considerably. Less room on a 'page' ment lots more pages and highly fragmented information. Applying a system of hard cuts from one screen to another would leave users disoriented as to where they were, where they came from, and how to get back there. To address this problem of disjointed screens, the majority of mobile interfaces now use visual clues as to how information is related. The menu is 'underneath' the content. Series of screens are laid out next to each other, giving the user a spatial grasp of the information hierarchy.

Simulating what we're used to in the real world, digital information in these interfaces is continuous. Everything is 'always there'. A comforting idea that helps us navigate and understand hierarchies of information. Animation, often only considered as a means to add shine, is crucial in this. Little shifts, zooms, fades and transitions tell the user how things are related to each other.

With SmartReplicas, we're bringing out the stories and information embedded in the object. We aim to use this as a guiding visual principle. Nothing should ever appear out of thin air, everything should have a place that it came from and will go back to. Here's a test of AR fortresses popping up from physical map. (And a shark. That's what that is.)

SR Animation test from likefriends on Vimeo.

2. LOOKING AT THINGS FROM A DIFFERENT ANGLE

Since we use mobile devices' cameras to look at SmartReplicas, it makes sense to consider the device itself the main means of navigation. So what if looking at something from a different angle visually gives you a different angle contextually? Here's a simple test of what we're calling different 'stages', seen from different angles:

3. SOME THINGS ARE BETTER IN TWO DIMENSIONS

One things that we were sure we didn't want to do from the start is to build a 3D website. Websites are extremely good at what they do and adding a 3rd dimension will not add anything but will just hinder the interaction people are used to. With SmartReplicas we'll have a lot of elements to show that are 2D in nature paintings, photography, illustrations. Trying to look at those while they're hovering in 3D space is not an effective way of seeing these images. To address this we're looking at combining a 3D interface with a 2D layer on top. Applying the idea of continuity then means that things will have to move from 3D space to 2D space and back againg. Here's a little black cube making that jump:

4. OBJECT ORIENTED

Since we didn't want to build a 3D website, we decided we shouldn't have buttons in 3D – just content. Tapping a piece of content can trigger that object to 'do' something, ie. animate to another state or change shape. Here's the map again, showing the route from the orient back to Amsterdam. Tapping the boat triggers an animation with a voice over:

5. INTERACTION CUES – EXPLORE, TRIGGER, WATCH.

If we have an object based interface without buttons, how do users know what they can do with it? How does an object signal to the user what is has to offer? We'd like users to navigate the stage with their camera. Elements that move into focus should then give users a cue. Tapping the object triggers its action for the user to watch. The objects are the decor but also the actors on the stage, and the user can tell them to act out their parts of the story. Here's a test of how interaction cues could work. Looking at an object activates it. Resting on it for a bit longer triggers a textual cue as to what you can expect when you tap the object.