View profile

Spatial Interfaces

Spatial Interfaces
By moment • Issue #7 • View online
We stare at interfaces all day long—message apps, timelines, etc. Unfortunately interfaces are quite boring these days because most of the apps look exactly the same.
Web3 is a new moment in time, which allows us to make it less boring. The core of web3 is that it gives more control to the users (ownership); interfaces should reflect this thesis.
Let’s dive in.

We humans are spatial.
Let’s do a test; close your eyes, and touch your nose.
I’ll wait.
That was easy, right?
Let’s do another one: Think about where your coffee machine is located or where did you park your bike?
We humans think in multi-dimensional models (spatially) to understand the world around us. It helps us distract information.
If we look at today’s apps and websites, most of them are limited by a shape; the screen real estate of the device, in most cases, a rectangle. For example, the mobile phone 👇
The phone, a ractangle we stare at
The phone, a ractangle we stare at
Most apps don’t have just one page, but multiple, and together they form an application that tries to achieve something. As a designer, it’s important to think about how they relate to each other to make it easy for the person using the app to find the different features.
Let’s call this the space of the app;
create a space, for all screens to create a better context
create a space, for all screens to create a better context
To navigate between the different pages, we need a navigation.
how does this look like?
how does this look like?
If you look at the image, you will notice that something is wrong here. Our spatial brain can’t handle interfaces like this; the order of the different elements doesn’t make sense. Imagine you could swipe left and right - to navigate between the pages, you would get lost.
You would expect that the page with a square is on the left but isn’t; it’s in the middle.
It’s important to remember that the pages are visualized next to each other in the sketch above, but the person holding the phone only sees one page and the navigation.
How do we fix this mistake? Easy 👇
happy user!
happy user!
Where this is a simple example, you can take this concept way further—the transition between pages or how error messages appear matters in terms of understanding the whole space of the app. It helps you understand how pages relate to each other and where you can find certain features.
For example, on your phone, you can swipe (new) notifications back up to hide them. That is also the place where you can find the message back.
ios notifactions
ios notifactions
The user is still outside of the box.
With the previous examples, the person using the app is still not part of the app itself. In games, this is already different, and today on the web, we use the label; metaverse to describe a 3D environment with body and objects.
But there is a big misconception: that spatial interfaces don’t have to be 3D.
With spatial interfaces, people have more freedom to interact with the application itself because the relation between all elements is less static.
Bodies represent a person, and an object is everything else. The body in an interface is, e.g., the pointer (your mouse); all other elements you interact with within a space are objects. 
Figma
Figma
The simple Sketch reflects Figma (or other design tools like Sketch, Illustrator, etc.), where people can design user interfaces.
source: figma.com
source: figma.com
But because it’s a spatial interface, it’s not limited to that; you can create many things in tools like Figma.
Since you can also invite team members into the same space, now, you can collaborate and use Figma as a whiteboard to brainstorm.
Because people were doing exactly that, Figma built more tools around this idea:
Figma Jam
Figma Jam
Another example would be google docs. It might be a simple text editor, but it can also be used as a communication app.
You get the point right?
Social Spatial interfaces.
Besides we think spatially as human beings; we are also social species. Apps like Instagram or Facebook don’t create an environment where you can interact freely. All you can do is push on a couple of buttons, and that’s it.
Tools like Figma or Google Docs design better social environments. They give you more freedom to use the different tools at your own imagination.
The pandemic accelerated remote working and will, with concepts like this, redefine how applications will look in the future. It won’t be just a couple of rectangles be stacked upon each other.
Gather.town is an example of spatial software where you can move around more freely and interact in different ways. They even went a step further and used bodies and objects of the real world (skeuomorphic design).
not boring
not boring
That looks completely different, than for example slack, right?
boring
boring
We can create anything we want in the online world because we don’t have to pay attention to the same physics that limits us in the real world. If you would like to design a space portal to go from location A to B because it just sounds awesome, you can.
Where I do like the concept of Gather, I still don’t have to be in a traditional office.
We can use our imagination to make apps more fun.
Design something new.
Next week we will dive into some best practices to design spatial interfaces to create better, more fun-to-use applications. We will look at the real world and consider how architecture or urban planning can help us design spaces that align better with how we humans think and act.
Cheers,
Did you enjoy this issue?
moment
By moment

Designer writing about web3 and the collaboration economy while building products in these markets.

Tweet     Share
In order to unsubscribe, click here.
If you were forwarded this newsletter and you like it, you can subscribe here.
Powered by Revue