<You are here>
Designing a framework for writing purposeful, inclusive page titles
After spending years as an editor and designer in the news industry, I made a jump and applied for a content design fellowship role at a health startup. Here’s what I have learned since finishing my first project at Color.
It was my second week at Color Health, and after reviewing a design brief explaining my first project, I thought I had a pretty good idea about what I would be doing.
“Make page title improvements and recommendations.” The assignment seemed easy enough. I had written and edited hundreds of headlines in my career and felt confident — maybe too confident — and prepared to tackle the challenge.
I completed onboarding and was all caught up with administrative details. The design brief window was open on my desktop and I opened a linked file that contained a very long list of 200+ strings of code.
At first glance, the list seemed pretty unremarkable. But then my editing senses kicked in and I saw the issue: There was little consistency between groups of page titles and if there was a pattern to them, it wasn’t identifiable. Some titles seemed like they had already been edited, others didn’t follow our content guidelines at all. There was also no easy way for me to see any of the pages referenced. Aside from general guidelines and things to keep in mind, it was up to me to develop a new way of organizing this information and presenting it.
I felt immediately overwhelmed. If I couldn’t make sense of the page titles, how could anyone using Color’s products or website?
“Anything you can do will be helpful.”
I had reviewed my brief multiple times but it still felt like there was something preventing me from getting started. I met with my fellowship director and mentor, Jessa, who reminded me that my project was something that was going to have to be a little messy — at least in the beginning — and that was OK.
She reminded me that any insight I could provide would be an improvement to our current system because there was no current system. Creating a framework for writing titles was the goal I had set, but the important thing, she said, was to document how I got there and make sure I had a way to relay that information to the rest of the team.
After meeting with Jessa, I took a deep dive and learned everything I could about page titles. I met with other team members who taught me about the localization process at Color and helped me understand how titles were currently written. I researched page title best practices throughout the last few decades and found which were still relevant today. Then, I looked at competitors in our space and saw what process they seemed to follow for their page titles. I also made it a goal to use the resources already highlighted by our accessibility team and take the needs of all of our users into account.
I compiled what I learned into a loose set of best practices and I was ready to try and apply those standards to some of our pages at Color. I thought once I started using the best practices on the list of titles I had, I could figure out which were most relevant and useful.
“If you can’t, then don’t. Break it down.”
The list of page titles I had been given was a mix of content already pending localization and titles that were hard-coded. Some of the page titles were tied to our customer-facing products and some were internal or for our partners. Deciding my next steps to improve on these titles was difficult, and every choice seemed to come with a different set of problems.
I felt stuck. This was going to take much more planning and consideration than just writing a headline for a news article.
I met with my mentor Trilce who helped me reframe my worries. If I knew I couldn’t address every single page title individually, then I shouldn’t. She advised me to start small and organize the list of page titles. I prioritized the ones I could easily work on. Once I worked on those, I could use what I learned as a starting point to work on the more complex ones.
My meeting with Trilce helped me remember that no task is too big to take on if you can break it down into smaller pieces. I conducted another audit with refreshed eyes and separated the page titles into 3 groups:
- Titles that needed work from our engineering team
- Titles that needed work from our localization team
- And titles that I could get started on improving right away
Pulling together a process
After using the best practices to improve a few of the page titles on my list, I started thinking about how I could use what I had learned so far to put together a streamlined process for writing or editing page titles. I broke down the list of best practices into two parts: Part one focused on a patient’s (or partner’s) experience and navigation, and part two focused on harder constraints such as word counts and characters. After that, I continued to make improvements, took notes, and grouped the guidelines on similar themes.
To help simplify the information of the groups I had created, I made sure each one could be defined in one line of text. If I was unable to name the theme and explain it in one line, I separated the theme further. I did this until I had a rough draft of 10 themes, or principles:
- Be descriptive: Give users the reason they are on the page, the title should make sense even out of context
- Be specific: Avoid generic titles like “Home” or “About,” avoid abbreviations or acronyms
- Synchronize content: Every page should have a page title matching its content
- Avoid repetition: Redundant information will take up space and time
- Be consistent: To avoid confusion, follow the same content guide across all areas of Color
- Character limits: Search engines will display 50–60 characters, but we want to be closer to <50 for translations
- Separate ideas: Avoid adding too much information to titles, use hyphens to break up phrases
- Stick to alphanumeric titles: Special characters translate poorly
- Capitalization standard: Don’t use capitalization for emphasis or style, use for proper nouns
- Sentence case: Capitalize the beginnings of phrases and strings, Don’t Use Title Case Like This
The 10 principles I wrote seemed too ambiguous still, and the information in them wasn’t as easy to follow as I had imagined. What if a product designer or UX writer who was writing page title content wasn’t confident in their ability to write one well? What if they were in a rush? It was important to me that the framework I created be easy to follow, scalable to new projects, and usable by any organization with minimal friction. I decided that, instead of sharing a list of principles, I would consolidate them into a 7-step process that could quickly be read and understood, as if I was writing a page title from scratch.
Using these 7 steps and the principles they covered, I mapped out a worksheet that used examples of page title improvements for every step. I also added explainer blurbs to expand on why the steps were used and the specifics on what was changed.
I now had a 7 step guide, a short (but growing!) list of title improvements, and a renewed sense of confidence that my work could make a difference. The final piece of the puzzle would be introducing my work to the team and making sure it was in a format accessible to anyone who might use it.
My goal at the beginning of this project was to make improvements to page titles. By the end of my first content design project and with the help of my mentors and coworkers, I had a list of improved page titles, guidelines and best practices, and a worksheet on how to write page titles. The following guide is a seven-step process to writing page titles that can help your organization make the most out of its header content. ■
Writing page titles for everyone
If you’ve ever looked for a specific tab to switch to in your browser, you’ve interacted with page titles. These are short headlines exist in code inside title tags. These page titles are also found in search engine results and are a major navigational tool to help users identify specific pages and the content those pages contain.
Because titles aren’t part of a page’s visual UI, they are commonly an afterthought in product design. These should ideally be written by someone on the UX team. Of course, this isn’t always the case. I’ve put together a list of guidelines for writing page titles that can be followed by anyone who needs to fill out a title tag. These guidelines can help create a product any user feels comfortable navigating. As the field of UX expands and evolves, so does our toolkit.
- Confirm the page has a title
Step one might be obvious, but many times title tags are skipped when the page title content is in an image or in a different head tag. Make sure the title tag isn’t an empty field. To find this, look for the tag <title>. The title tag will be located under the header section and <head> element.
<title>Schedule a COVID-19 appointment with Color, today</title>
2. Add the purpose of the page
Add any information about the content of the page to the page title. Remove any placeholder text. This step is essential and determines Web Content Accessibility Guidelines 2.0 compliance, an accessibility standard used by federal agencies and contractors.
<title>Choose a location and schedule a COVID-19 appointment with Color, today</title>
3. Think about the page’s localization
Simplify any jargon and avoid acronyms. Don’t assume a user is familiar with your product space. Hyphens are preferred over pipes and colons as a delimiter to break up ideas and labels. This is because hyphens are less likely to be pulled out of SERPs and hyphens are easier to localize.
<title>Choose a location to schedule a COVID-19 appointment with Color, today</title>
4. Think about user navigation
Include what sets this page apart from other similar pages. Imagine yourself in the common scenario of opening many tabs but then getting interrupted and coming back to the tabs much later. Would the user remember why they opened the page? Looking for patterns in the user flow can also be helpful.
<title>Schedule a COVID-19 test with Color at these locations, today</title>
5. Clean up redundancies
Check for any words that do not add new information. Look out for repeated words or phrases.
<title>Schedule a COVID-19 test with Color at these locations, today</title>
6. Clean up style and punctuation
Make sure to set and follow a consistent capitalization style and punctuation style. Remember that this can alter localization and change how accessibility features interpret the title. Users value clarity.
<title>Schedule a COVID-19 test with Color at these locations</title>
7. Check for length
Make sure the title is <50 characters long. A general rule to follow is shorter is better. Search engines will not show more than 60 characters, and some translations can increase the amount of text by as much as 300%.
<title>Schedule a COVID-19 test at these locations</title>
