App design: positional space
A good user interface makes it easy for the user to know where they are within the app.
An important consideration is the position of different major spaces relative to each other.
Ideally, users can draw your app's major spaces and their relative positions from memory.
Listen to this post on your podcast app under: Gregory Schmidt, or on YouTube
Major & Minor Spaces
I'm calling a major space a significant area of your application. It likely has the same dedicated purpose. An application typically only has a few major spaces.
A minor space is an area that overlaps into a major space, but for only a brief time. One does not fully leave the major space when accessing the minor space. Whereas, changes between major spaces require leaving the prior major space.
The use of gesture can help the user understand how spaces relate to each other.
This post reviews four common design patterns for the positioning of major spaces within an application
One space
Two space: side-by-side
Three space: top-bottom
Combination
One major space
The user never really leaves the major space of the application.
Typically, with this design pattern, a bottom tab navigation bar may be included. In this case the major space of the application is 'replaced' with other major spaces.
Although multiple major spaces are used, I call this still a one space design because these major spaces are physically replaced within the same positional area area.
If you consider this in three dimensions, you can see all these spaces are stacked on top of each area. Hence…once major space is occupied.
In general each three dimensional positional space should only be used for only one thing. The exception to this rule, is if one is able to change that function - and ensuring the user understand how they have manipulated that area, and the other options available. The bottom tab navigation bar provides this level of clarity to the user. By operating it they know what part of that single major space that are in.
Two major spaces: side-by-side
Most application today use a two-space: side by side design.
Consider almost every messaging platform: iMessage, WhatsApp, Facebook Messenger, Signal; or email applications such as Gmail.
The major space contains the list of recent messages or emails. The user moves from this major space towards a space found towards the right. In that second space, the contact from the message or email is shown.
To return, the user selects the back button that moves them from the space on the right (the detailed message thread), to the space on the left (the list of messages).
This is a top-notch design because the 'back' button physically moves you from a space on the right to a space on the left. And the forward button (aka, selecting an item in the message list) propels you forward. Everything is in sync, the gestures and the buttons.
As you can see in the three dimensional view, there are two different major spaces. However, and although the content will vary depending on which person is selected from the message list, the right major space always shows the same type of content - which is the message thread.
Two major spaces: top-bottom
Another example of a two space design is when these spaces are stacked with the second space representing a bottom sheet.
The classic example has been Google Maps, or Google Music. The second major space sits at the bottom of the application, and the user pulls this panel up fill the screen and fully active the second major space.
It is easy for the user to return to their first major space by sliding the panel down.
This design is becoming increasingly popular on mobile, and for good reason - I think it works really well.
What if the application is more complex? Consider a Three-Space application
Three major space: side-by-side
In the three space design, the user typically starts in the middle panel of a three space design. On either side of this major space is another space.
The user moves towards the left to that space, or to the right to the second space.
A classic example of this is Snapachat. The middle major space if or messaging, the left major space activates the camera, and the right major space is news.
Although one can move between these spaces by selecting the left bottom tab or right bottom tab icons (which unfortunately were not part of the original Snapchat design for years), the user is also able to push the screen from left to right in order to access these other major spaces.
Combination
Slack uses a combination of a two space design - where the right space is the message thread, and the left space selects the thread.
Within the left space there is also a three space: side-by-side design bieng where the user can move between selecting their workspace, channel, and direct messages.
Additional Minor Spaces
Most applications also use minor spaces. One access a minor space while remaining within the major space. The minor space is a temporary space, that typically is overlayed on top fo the major space. It may or may not occupy the entire screen.
The left hamburger navigation menu that slides in is a classic example of a minor space.
In additional apps often have partial or full page sheets that slide in from the bottom or top. These often contain setting, preferences, filters, or settings. These are also examples of minor spaces.
By sliding these panels over top of the existing page, the user mentally doesn't leave the major space they currently are in.
In Conclusion
Do not teleport your users to different parts of the application. They must take a road to get there. Clear navigation between major spaces is needed.
Users need to know what 3D major space they are in, and move into.
