1

Context
Current page layout stretches across the screen, as this was overlooked in the past due to a small team. I'm looking to fix content width and stretch first and last column of the grid system to improve readability.

The Problem
I've been looking online for information regarding the placement of the header regarding the content, but I haven't gotten anything clear out of it.

My experience says that the page header being on top of the content will require less energy from the user to identify where he's at, as well as reduce the effort for clicking on the back button. However, I haven't found many cases or studies supporting this (or supporting anything, there's little information out there).

Two screens displaying the layout above

4
  • 1
    what do you mean by header? Based on your screenshot it looks like the logo. Or do you have something else, like a navigation or info or whatever?
    – Devin
    Commented Jun 14, 2023 at 15:31
  • 1
    I think it's a mix of concepts, header in UX has a different meaning from header in layout design. For the screenshot, I assume the OP is referring to the titles.
    – Danielillo
    Commented Jun 14, 2023 at 17:25
  • 1
    @Danielillo in that case the question should be edited to headings, hence why I asked
    – Devin
    Commented Jun 14, 2023 at 18:07
  • Hi both, thanks for replying. It's actually a header within the page. In our design system we call it "Page Header". It includes Either a slot for custom usage, which adds tons of flexibility, or it's most wide usage which is a back button (if needed), the page title, and a couple of buttons on the right with a primary and secondary action contextual to the page.
    – Angel
    Commented Jun 15, 2023 at 18:09

4 Answers 4

0

As I can remember, using the title on the left, not aligned with the content, is better suited to breadcrumb title styles, but I've failed to find something using this style now. That being said, I see the title aligned with the content being widely used around (my) web references.

As examples, i found it on pages focused on content:

Like Medium Medium post image. It has the title, an image, and the body text center aligned

Open Doors Open Doors post of a UX Job. It has the title and content center aligned

And Built for Mars Built for Mars post. It has the title, image and the body text center aligned

I found this style almost on the entire Storybook's site too Storybook site. It has the title, image and body text center aligned

1
  • Hi Eduardo, thanks for the answer. Yes, I've seen this pattern used in lots of other places. I do however worry about having the navigation on the left side of the app, and moving the back button away from it.
    – Angel
    Commented Jun 15, 2023 at 18:17
0

If the design is responsive, there will be a moment when, depending on the width of the screen, the title will be attached to the left margin of the content (the right option from the screenshot) :

enter image description here

Starting from this premise, you can define a maximum width for the title when the screen exceeds this minimum width. In this way you do not have either of the two cases raised in the question but a middle one (not stuck to the main content, not stuck to the main navigation):

enter image description here

<head>
<style>
.container {width:100%; margin:0 auto;}
.maincontent, .title {width: 500px; margin:0 auto;}

@media (min-width:800px) {
.title {width: 700px;}
}
</style>
<head>

<body>
<div class="container">
<div class="title"><h2>Main title of this page</h2></div>
<div class="maincontent"><p>Blah... blah..</p></div>
</div>
</body>
1
  • Hi Danielillo, thanks for the response. That's actually an interesting approach, I did not think of it! I still have the question of what is the heuristically-strong approach. I'll take the approach into account anyway whilst iterating. Thanks!
    – Angel
    Commented Jun 15, 2023 at 18:11
0

You are right, the most relevant actions and information must be at the top. There's also data to back this up. There is eye tracking data on how human eyes scan pages (NN Group on F shaped pattern)

Here's a list of eye tracking patterns for anyone whom needs it: https://www.nngroup.com/articles/text-scanning-patterns-eyetracking/

4
  • But in this case he has a sidebar which I assume includes all actions, so they're at the left. The problem here (IMHO) is the huge spacing that is created by narrowing teh content section
    – Devin
    Commented Jun 14, 2023 at 15:33
  • @Devin the concept remains the same, important actions are top-left area. I was just handing OP the data to back that up. Commented Jun 14, 2023 at 18:04
  • Thanks for the response Kitanga. Whilst it's true that F shaped patterns are usually a safe bet, on the current use case we do have big descriptive headers that would probably show a cake-layer pattern much more prevalent.
    – Angel
    Commented Jun 15, 2023 at 18:16
  • @Angel yes, which is good, I thought for a sec there that you didn't like the layer-cake pattern. Anyways, I was just linking to the F-shape pattern page as a way to share data on where most people's eyes are fixated on a page. I'll link to more patterns if it helps anyone else in truth. Commented Jun 15, 2023 at 21:32
0

We faced a similar problem when cleaning up our app navigation and layout recently. In the end, we decided that aligning the header with the content was the best solution. It means each page has a consistent alignment, making it easier to scan and anchor things like secondary nav or actions.

Centred content

On scroll, we have the page title transition into the header where it is centre aligned.

Header on scroll

We have a minimum width layouts and full-screen, fluid layouts. In every case the content is consistently aligned.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.