So why is it so important to get the hierarchy of page content right?
When you begin a website design or redesign, it’s not just about the outer elements on the page. If anything they’re not as crucial as the inner elements being the content structure. It is this information that influences the reader and carries them through the page on a journey.
It’s a journey – users are building a picture of you.
It’s at this point, that I like to not only consider the visual / branding, but also factor in the user journey and what that user should be getting from each page element. It is only when you consider these user needs and goals that you start to realise how important the content is, not only in how it is actually written, but how it is laid out. This is what I call the visual hierarchy.
I am always looking for priorities in the content, so ultimately you can follow a journey, build a story or momentum for the reader. They need to feel like they can travel through the content or skip and still make sense of it.
I am going to write out how I approach and deal with some of these issues, so hopefully this may help you to better approach Page Content Hierarchy.
What is content hierarchy?
Content hierarchy is the visual organisation of information on a web page or application (app). This may be the written word or other physical/visual elements.
The structuring of content involves, bringing headings and key elements to the fore so users gain a better understanding of a page and its purpose.
There are many ways to create hierarchy including, font sizing, spacing, alignment, font weight and colour, but bear in mind that colour is not such a useful tool if we are considering the broadest range of benefit being given to the maximum number of users.
Why is content hierarchy important
The world is flooded with an overload of crap content and as consumers we realise how important and valuable our time is, so we’re less likely to offer our time if we cannot hone in on what we believe is valuable before we spend time consuming.
When someone lands on your page or app, you have a few seconds to catch their attention. But it’s takes a lot more than having what they want.
Just having what they want will see around 30-40% of visitors leaving your site and note delving further.
This value needs to taken seriously if you’re looking to make the most of the traffic you receive on the site.
If you can capture the immediate, short term and long term attention of the reader then you’ve done your job properly and gained maximum value from your content as well as improving the chance that it will be shared and gain backlinks. This all goes towards your ROI calculations.
Sign up for a Consultation
A look at content hierarchy vs visual hierarchy
Content hierarchy and visual hierarchy differ in their approach: visual hierarchy relies on visual elements to establish order, while content hierarchy centers on the written content.
Interestingly, these two concepts can complement each other, with a visual hierarchy strategy contributing to the creation of content hierarchy.
A compelling illustration of this synergy can be found in a piece of content that effectively employs visual hierarchy to emphasize specific areas of the text, ensuring that they capture the reader’s attention first:
In this instance, the manner in which the text is sized, coloured, and positioned significantly influences the reader’s engagement with the content. It extends beyond merely prioritizing crucial information at the top and instead leverages all available visual elements to guide the reader through the text.
Another common scenario illustrating the collaboration of visual and content hierarchy is found in a page header. Copywriters use headers to succinctly describe the content within that section. Web designers often employ distinct features such as larger text, varying fonts, and distinct colors to create a header that stands out from the rest of the page. This header serves as a focal point, aiding both readers and search engines in scanning the page and grasping its essence.
Building content with analytics
Without analytics integrated into your current system or if it’s been active for only a short duration, drawing robust conclusions is challenging. In such cases, revisit this step at a later date.
Once analytics access is available, consider the following steps:
Set a relevant date range: Ensure a substantial spread of data by selecting an appropriate date range. Six months is often optimal, but factor in significant site changes, such as a redesign four months ago, rendering data before that less pertinent.
Identify popular pages or sections: Determine the most frequented pages and scrutinize their content to discern user preferences.
Utilize in-page behavior tools: Leverage tools like Google Analytics to delve into page clicks and gain insights into user actions. Analyze the homepage, identifying popular and less popular content, to formulate a strategic plan for the next steps.
The analysis aims to pinpoint popular areas of the site and users’ information-seeking behavior. Consequently, the strategy involves presenting sought-after content prominently on key pages. For instance, if the analytics reveal a substantial influx to your e-commerce page, consider featuring key content from that section prominently on the homepage.
Staying Focused on Success
An integral aspect of ensuring the success of rich content pages and, by extension, our websites overall, is establishing a clear strategy and direction for the site’s objectives. While this might seem apparent, it can be challenging, especially in larger projects.
In numerous kick-off meetings, I’ve encountered situations where discussions about project goals unveiled misalignments among participants who initially believed their perspectives were in harmony. Stakeholders naturally have diverse priorities and agendas, which is beneficial. However, bombarding users with every aspect simultaneously doesn’t yield significant achievements.
The formulation of goals requires careful consideration and structure. Setting a goal like “Let’s make the site awesome!” may express enthusiasm, but the term ‘awesome’ is subjective. Defining success becomes challenging. What constitutes minimum awesomeness?
Try this magic formula:
We want ___ (action) ___, because ___ (reason) ___, so that ___ (objective) ___.
This structure begins by outlining the desired action and explaining the motivation behind it. Clear reasoning is essential for team engagement. Most crucially, it concludes with specifying the measure of success—the objective.
An example might be:
We want to encourage more users to apply online rather than over the telephone because it only costs us 2p for an employee to process an online application, as opposed to 45p for telephone applications, so that we see a 50% increase in the number of online applications in the next six months.
This formula proves useful when addressing potential misalignments in the project team. By inquiring about the goal a new content aligns with, you maintain focus.
Avoid creating an excessive number of these statements; keep them overarching and prominently visible throughout the project. Examine the content blocks for rich content pages and ensure alignment with the project goals.
For instance, if building a homepage and prioritizing a large space for marketing messages contradicts the project goal, such as the example above, consider placing the top tasks for online services before marketing content.
Keeping the Human Element in Focus
It’s crucial to remember that content is created for people. People possess diverse technical abilities, goals, mindsets, and levels of patience, necessitating the consideration of various user scenarios and journeys.
While we can’t precisely discern the thoughts of our actual users, we can immerse ourselves in their perspective through fictional examples. A useful approach for crafting user scenarios involves dividing them into two paragraphs.
- The first delineates the person’s general profile— who they are, their location, and the challenges they face.
- The second outlines their purpose for visiting the site, how they discovered it, and their current mindset.
User scenarios serve as the initial litmus test for this strategy. It’s imperative to involve all stakeholders in crafting these scenarios, gather input, secure approval, and ensure their visibility throughout the project.
Gaining Consensus through Workshops
Securing buy-in from all project stakeholders is crucial, and conducting a workshop offers an excellent platform for each voice to be heard. It serves as an opportune moment to align everyone’s understanding and ensure collective awareness of the project’s objectives.
An effective icebreaker for initiating discussions and uncovering insightful perspectives involves having the entire project team collaboratively rank the priority of page content. Here’s what you’ll need for this exercise:
- Cue cards
- Post-its
- Clear marker pen
- A designated time and venue for all stakeholders to convene
- A facilitative approach for managing diverse opinions
- Biscuits (optional but appreciated)
Preparation involves selecting a key, rich content page for focused attention and following these practical steps:
- List down all content blocks for the chosen page, using descriptive names like ‘marketing messages’ instead of technical terms like ‘carousel.’
- Prepare an equal number of post-it notes, numbered from 1 to 10 (or corresponding to the number of content blocks).
- Lay out the cue cards on the table and position the numbered post-its vertically at the side.
- Load the current webpage for review and assign a post-it number to each card, reflecting its visual prominence on the page.
This scoring exercise gauges attention-grabbing ability, with larger, more prominent elements scoring higher than less noticeable ones. Document the results for future reference.
On the workshop day, commence with a presentation summarizing findings from analytics, project goals, and user scenarios. Facilitate a discussion to ensure alignment among stakeholders. Transition into the workshop by revisiting the scoring exercise, this time awarding points based on desired priority. Participants provide input on how they envision the page’s layout.
Workshopping promotes discussions focused on the written information rather than just design elements. Keep blank cards ready for potential new content, and encourage playing devil’s advocate to stimulate dialogue. Challenge stakeholders to justify high or low scores, referencing analytics, goals, and user scenarios.
The exercise shifts the conversation toward content functionality rather than aesthetics. For instance, if a project goal is to reduce emphasis on marketing messages and prioritize guiding users to online tasks, the marketing messages section would receive a lower score.
Conclude the workshop by revealing the scores from the initial preparation task. Discrepancies may emerge, offering insights that stakeholders were previously unaware of. This is particularly valuable if some participants believe the current site/page is effective and needs no changes.
The workshop’s outcome is a well-defined list of what should be on the page and in what order, considering analytics, business objectives, and the site’s target audience. Post-exercise, you’ll gain clear insights into structuring and designing pages around your content.
Summary
The techniques detailed in this article will guide you toward creating content that elevates the user experience. By leveraging analytics, you can identify the content users desire and align business objectives with project goals.
User scenarios shed light on how users prefer to consume content, and this insight is pivotal in shaping your content hierarchy during the web design phase. Incorporating these practices into your own process and workflow guarantees purposeful content, ensuring the success of your upcoming website redesign project.
