Spatial interfaces: How to use the physical properties of real objects in the design

I think spatially, and you too. Can you scratch your left ear without looking. And pull out a booger from his nose, not taking out the brain. Do you remember where you left the keys. Can you type without looking at the keyboard.

You know which pocket your phone now. The direction “up” is where. Do you know where is the bathroom. Of course, Yes.

In order to understand the complex world around us, in our imagination, we present a multidimensional model objects. In addition, we can use this way of thinking even in order to handle abstract concepts. I believe that the best software is the continuation of the activity of the human brain. It should allow us to think in a natural way, to adjust our thinking, and not Vice versa.

Interpretation of information should be the work solely of the computer and not ours. We create digital slaves. Therefore, a good spatial interface must justify our expectations, similar to the models existing in the physical world. He created for man and supports our mind, which thinks in categories of space and time.

These interfaces take into account where the items. Using them is as easy as walking through a well-planned building. One space transitions to another without any surprises. To develop a spatial interface, you need to think both within and outside.

You have to remember about the physical properties of objects in your interface. Where the object appeared. Where he goes. How it will behave when kinetic effects. Do adopt some physical properties of other.

Where you are relative to everything else. To these questions are difficult to answer with words. And, even if its obvious, but I still think that it is more efficient to solve the visual issues with images.

Schematic thinking. When you are developing the space, it is very useful to imagine it as a physical model, which can be manipulated, which you can walk. Instead of posting next to each other separate layouts in one dimension, try to think on a higher level spatial. The following is an analysis of the contextual paradigm increase, which became key when creating Keezy Drummer.

A simple map describing the relationship between the spaces in interfaces in Keezy Drummer. It does not show boundaries of the screen. The arrows represent the temporal dimension. You can visualize the relationship between measurements as a summation of measurements of the lower level.

Each new dimension creates a much more complex model for visualization. As you can see, the idea of four measurements in two-dimensional form is complicated quite quickly. “W” in the figure represents the time. The transition interface showing contextual increase in Keezy Drummer.

Movement involves space. Movement increases the physical characteristics of the space on the screen and off it. Objects limited to reasonable physical laws that help create a clear model. Weve all seen this classic model to delete rows from the list.

Swipe slide the cell and it will appear the button. Tap on the icon — and the whole cell will disappear. And what happens if you change the way the cell leaves the screen.

If we soften or ease the movement of the cell, vanishing from the screen, we can assume, where it should stay. In our case, the cell will stop not far outside of the screen. This can be done if we assume that there is a certain area of temporary storage, from which remote cells can be returned to the list. For example, we could let the user swipe to open the right side of the screen a graphical window that would be deleted items list.

Instructions on Material Design from Google seems to suggest that you should only increase the rate of objects leaving the screen. I will allow myself to disagree. If the speed of the object increases, where it should in the end prove to be. Out of our reach. We ship this item in the vacuum of space.

If the cell list is free to rotate and is moved in the x and y stops its movement out of the system. Maybe theres gravity. Maybe she falls into a lot of these remote cells.

The Z-axis movement means depth. Scorekeeper is pretty conceptual, but it copes with the focus. It separates the modes, and not provides the user with a bloated set of options through which he will have to break. The complexity is hidden behind the secondary and the tertiary subinterfaces.

Each subinterface is as simple as a parent. Tinder is known that activated in their interface paradigm of cards. The user is provided with an infinite deck of cards, which now uses the depth along z axis. Discard a card from the deck to the right, if you are interested in the girl, and left, if not.

In addition, if you click the “heart” or “x”, the map will automatically otbrosit on the appropriate side of the screen, thereby strengthening the function space. And this physical, kinetic model, which is very similar to the one described above. Secondary screens are usually placed on the horizontal part of that is reflected in the navigation.

The downward cascade to the content. A great example of motion that is used to display the implied space. Im not sure this was intentional, but the interface is correspondence with those who you like, is on the right side, with the same where you cast a card with their favorite people.

Model Tumblr very simple. There are several spaces connected by a tab bar (tab bar). It is easy to visualize if you imagine the interface from the point of view of the camera. The constant toolbar follow us, if attached to the camera through which we look. And although you cant see the detailed motion along the x-axis as the change of spaces (as in Tinder), refers to the sense of space on both sides of columns.

The top view reveals the interface in which it is difficult to get lost. Some high columns are scrollable and some spatial overhead elements. This mechanism the tab panel can be found everywhere, including in services such as Instagram, Twitter, Foursquare, and so on. Available the most common options.

Either select a publication type, or to close the menu. The image appears over content, as if there is a layer that exists on the z axis. Close the image and return to the window from which it was opened. If you decide to perform some action with the image, continue to move along the y-axis, and the icons would imply a continuum. Its like a conveyor belt on the production line.

Tumblr iOS (left) and my proposed changes to simplify the interface from the point of view of space (right). A classic effect of the “light box”, but not only he. Click on the photo and it will come to the fore.

News on the background recede and are obscured. Swipe the photo back, and it will return to its original position and the original form Builder will again be in focus. It is stable. If you disassemble these costly Frankenstein, there is much to learn.

This is one of the most complicated in spatial terms, but rather popular among the users of the software. Describe how Spotify uses space in its interface, is to describe the bundle of wires. Challenge. Will you be able to effectively sketch of the ball on paper.

I never even got close to having to allocate this interface, and generally confused. Although confusing, as generally a team of talented engineers and designers could create such a monstrous building, if you look at values Spotify AT software development, are unlikely to wonder. A holistic approach to software development is simply tossed out the window for the sake of unwarranted memes that are in circulation within the company.

Friend of mine at Apple sent me a shot of the Apple user experience planning Music room. It is fair to say that other companies in the music industry do the same. Interfaces Apple Music and Rdio are equally unbearable. The space here is given very little attention or even paid very.

This app is touted for the use of springy physical properties and extravagant animation, but everything is fine at first glance. The command Paper has created some cool technology and even opened the source code of the application. Its fun to run a couple of times, and thats it. Paper is a childrens interactive game for iPad, which was subsequently slightly modified and squeezed into a tiny iPhone.

Well, thats Push Pop Press, which Facebook shoved in. Scrolling can last more than one day. Spring for spring, spring for spring. Cards that unfold as new Newspapers.

The most intricate menu of “hamburger” in the world. Everything here is simulated and moves for the sake of style. But this is completely optional heavy kinetic work. Very tiring to go through the amount of physical space that is described in the interface, Im not talking about what we need to keep in mind the model of the interface to remember where you are.

This is a good example that the program went too far. And its so obvious that I will present without further comment.

How you can avoid a tangle of wires. We need to move away to look outside, literally. As I said earlier, very much helps in this case, schematic thinking. Simple directions on a map results in a less chaotic journey through space.

A few tips. Here refers to the horizontal space, but it requires both interfaces move to a great distance. Here refers to the horizontal space, the pink page is not moving across the screen. We create a sense of movement, but not forcing the observers eye move across the screen.

This model is often used in native iOS view, Master-Detail. Earlier drafts of Keezy Drummer. I hope what I wrote here will serve as an impetus to make you start thinking spatial. Play video games and explore their interfaces. Go outside.

Observe the physical properties of reality and their own expectations from it. All this is inherent in the DNA of those developments that inspire me and the work that I want to create.


Leave a Reply