Multilevel Page Title - Page and Instance order and hierarchy

Question

I've got the following task. I have to redesign the title part of the pages. Silly but as simple as hard to get the ballance with the stakeholders.

We have Page title and section titles. We need some convention for this page-title: section-title

Some thinks the section title to be gray, to be bold. Some say another.

My approach is the (title-hierarchy):

size:12 - Page title - BR

size:32 - Section title

My reason for this, is that i think the user can see still the page title, but the more important part is the section title.

Some feeds in my side: the title would take a lot of space, could cause a lot of scroll. I think the scrolling is not a big issue in case of we enlarging the title with additional 20-30px, and btw the white space is needed to separate.

I checked a lot of pages, checking best practices, typography. Seems to me there is no convention for this(that is correct as it depends on the environment and the neighboured elements, design, brand), just a later AB test what is working better.

If you have any idea let me know please.

Answer 1

Instead of trying to convey hierarchy in the title, I would instead use breadcrumbs.

They've become the standard of showing hierarchy. There's a particularly great article from Jakob Nielsen regarding the benefits of breadcrumbs:

• Breadcrumbs show people their current location relative to higher-level concepts, helping them understand where they are in relation to the rest of the site.
• Breadcrumbs afford one-click access to higher site levels and thus rescue users who parachute into very specific but inappropriate destinations through search or deep links.
• Breadcrumbs never cause problems in user testing: people might overlook this small design element, but they never misinterpret breadcrumb trails or have trouble operating them.
• Breadcrumbs take up very little space on the page.

UX Booth site does breadcrumbs really well, but you'll find examples of breadcrumbs on almost every major website.

---

If you really need to display it to the right of the title, I worked on a project in the past which used a forward-slash to denote hierarchy. We also had to make the section title less vivid to enforce the hierarchy.

This was used instead of breadcrumbs purely for stylistic reasons, but it seemed to work well from a UX perspective.

---

The Zara website used a similar method to what you're after. The hierarchy runs from left-to-right, which is what the user will expect.

But it would've been better if they channeled their inner Information Architect and used breadcrumbs:

Or even just made the section titles less prominent: