A compass for page layouts
How to tell a story with your interface and lead the user through the page.
When we were creating the design system for a companies digital transformation we wanted to make sure the designers, who were spread out over all kinds of different teams, had a good and consistent mental model when starting on the interfaces of a new product.
The first approach for that was to create different wireframes that teams could get from the library. Due to the company having a lot of different and expert-knowledge specific, B2B and B2C needs, we figured that we can’t foresee all the possibilities just yet.
We still wanted to give some rough guidance for consistency and worked out a framework for the teams to use. It gave some thoughts to consider to make sure the user is always well guided by the content. We called it Component Compass. In essence, it is a framework that helps to design consitent page layouts.
WHAT
A compass is there to give you directions, show you where to go and where north, east, south and west lie.
The Component Compass kinda does the same thing. It makes you concidre the use case of each element so you have a rational for where to position it. Because the elements then build on one another it leads to the page being seen rather as a story instead of in single pieces.
For that we split up a page into sections for “understanding and overview”, “product and functional”, “personal and emotional”, and “consuming and detail”. These come from and lead to a nice reading experience. Top to bottom, left to right.
WHY
This method might come in handy after you figured out what the single pages of your product will be about. I myself am a big fan of OOUX so for me it would start after I defined the objects of my product and the content that belongs to those objects (core content, metadata, and CTA’s) so I know roughly what I’m working with.
OOUX already gives a ranking for what the most and least important things of an object are. However, this doesn’t really reflect how the interface is laid out, what the elements look like, what is big or small, which things are screaming at you and what is left to discover.
Even if something is the most important information for this particular object on one page, you might not want it to be the first thing the user sees on another because context.
HOW
I’m gonna introduce the sections as you would read/experience them (note that they are combinable like top-left or top-right):
TOP: Understanding and Overview
This section gives you an understanding of where you are and an overview of what you’ll get here.
Here we want to introduce the story the user is about to experience, not only to show what the product has to offer but also to let the users decide if they are in the right place or not.
The question at hand is, “Which content elements can explain the thing that can be done here?” and “How loud does this element need to be compared to other elements?”.
Introduce, don’t explain. What we don’t want to confront the user with yet are details. For now it’s only about the decision to stay or leave.
LEFT: Product and Functional
A text is read and a picture scanned from the left to the right so the first things we will notice are on the left (there are cultural differences, here I reference what I’m designing for).
Place things here that help you guide the user in an intended and designed way. A possibility to nudge in the right direction from the business point of view.
RIGHT: Personal and Emotional
Now that the user knows where they are and what they are dealing with, we can place possible interactions. It is about the users own decisions.
On the left we were thinking of our need to sell but on the right we want to end on the personal note. We are asking questions like “What actions does a user want to take here? What different options would they need for interacting?”.
Not only will this tell a more coherent story and inform before we show possibilities to act upon on, but we also show our users that they are thought of. The last thing you’ll see stays easier in your memory than the first, so we can let users know that their needs are considered by showing them “last”.
The elements here don’t have to be for interactions, they can also just give further information to inform later decisions. This information should again be of high relevance for our users (like benefits for example) and showcast the product from a more personal benefit and emotional angle.
BOTTOM: Consuming and Detail
Now after we introduced the product, explained the selling points and translated it in the user's context it still might leave some question marks because, we did it in a way that is primarily focused on the first impression (top).
For example, to someone who is unsure and needs to know more before deciding or a fan who is just interested and likes to know as much as possible. So in the bottom direction, we are going more and more into detail.
Depending on how much there is to learn, you can either give more detail on everything at ones or on single aspects in sections (which would follow the sections of the Component Compass again and again).
Regardless which option works for your product, remember that everything you will show further down is building on the knowledge you gave the user before in the top direction.
This way you are serving two groups of user-types. The ones that just want to get the job done (maybe they already know the details) and the ones wanting to learn more before acting.
SOME LAST WORDS
When giving this to our teams I thought all of this is quite obvious and done out of common sense. In conversations it showed that a shared picture helps and it reminded us to be aware of layout decisions. Expectations exists and have reasons as well as this framework which you can consider a guideline.
