which alignment works the best and what is the proper way of doing it?
-
6The red line is just your emphasis on the alignment axis, not actual part of the design, correct?– BergiCommented Nov 8, 2023 at 18:21
Add a comment
|
4 Answers
In the first layout it is clearer that the content is subject to the recommended analysts heading, because it is fully encapsulated by the heading.
This is less obvious in the second layout because the content is larger than the heading, this created ambiguity in your minimalist white chrome.
if the page only had a single header then the second layout makes better use of the screen and looks correctly aligned, the horizontal bounds now lines up with the header icon and the close button:
The problem with both of the layouts you have presented is that it mixes different hierarchal concepts, There are two heading arranged vertically, top down, then the user goes to the bottom of the next section to affect the content in the middle. This makes the layout ambiguous in both images. So even if we pick one image over the other, neither will feel correct.
In a page on it's own, with a carousel next to, above or below a content area, then you can always make it obvious that the carousel is the master selection and the content area the detail:
But once multiple headers exist above any of those images, only 2 alignments make sense to me in a LTR language:
Another way to look at the problem therefore is that there is too much information from different domains on this page.
Either you are showing progress, or you are showing a list of recommended Analysts, when you try to combine the information with a different and unrelated domain we always end up looking for some sort of design compromise.
Perhaps making the carousel the content solves the problem in a different way:
Alignment of grey container in the first image means that content of grey container is associated with recommended analysts and provides information related to recommended analysts. Second image example would mean that grey container is a separate group and information inside container could provide different information, not related to recommended analysts. I've made these conclusions based on UI/UX Gestalt principles (principle of similarity).
The issue seems not to be with the alignment of the grey box, but rather with the row featuring analysts. Omitting it, the first practice emerges as the preferred choice since the content is associated with that title and should be contained within it. This aligns with a design principle known as grouping pattern, and more specifically, encapsulation.
Encapsulation is a visual design strategy where essential information on a webpage is highlighted by encasing it in a box or an element with a contrasting color, thus drawing the user's attention to that information.
The row with analysts would also fit into this encapsulation category. However, its integration is muddled due to the carousel. Personally, I would opt to make this row static, accepting that it may span multiple rows. But as with all things in UX, the final decision should be guided by user testing results.
-
3Possibly also put the carousel above the grey card, or even inside the grey card as the title, as it's essentially a tab layout– BergiCommented Nov 8, 2023 at 18:25
The top layout.
Indentation/enclosure/part-of is an inexpensive, standard way to order relationships; it is in use everywhere. Where indentation is not obvious, it can consume many further clocks to identify the relationships between units.
