Foundation.mozilla.org: Design restricted copy length experience

[kristinashu]

Based on: [IA refresh] Homepage design #4648 and these homepage comps.

Consider the best UX approach for handling long titles. For the scope of this experience, let's focus on the homepage for now.

Todo

• [x] Research best practices
• [x] Outline, mock-up, and propose 3 options to the design & dev team
• [x] Decide on an approach

[taisdesouzalessa]

@kristinashu does this ticket cover restricting characters of the fields in the entire homepage? I ask that because there is a design review on my plate around character limit for the quote area of the page

[kristinashu]

No, this ticket is more around "auto generated" copy like for cards rather than straightforward (directly editable) copy.

[beccaklam]

@kristinashu Is this just for titles or for body copy as well?

[beccaklam]

Starting benchmarking: https://redpen.io/p/kq00720d3ca56fd2b0

[beccaklam]

Character count benchmarking: https://docs.google.com/document/d/1IKN4xNH5DU1DX2MLcS3CAfXufb7EbbjNkJsLuhP2d8o/edit?usp=sharing

[kristinashu]

@kristinashu Is this just for titles or for body copy as well?

Do you think body copy would benefit from a restricted copy length?

[beccaklam]

Three suggested lengths:

• Short (60 char limit)
• Medium (80 char limit)
• Long (100 char limit)

[beccaklam]

@kristinashu Is this just for titles or for body copy as well?

Do you think body copy would benefit from a restricted copy length?

Actually there's only one instance where we have body copy on the homepage it looks like? It's the feature card in the 'News you can use' section and the body copy is only displayed on desktop. What we have there looks good which is 156 characters?

[beccaklam]

@kristinashu @natalieworth @taisdesouzalessa @sabrinang
Here are the redpen mockups of the title length explorations: https://redpen.io/p/fhf15adfe8d37eb89a
I'm leaning towards the medium length but what do y'all think?

[taisdesouzalessa]

@beccaklam I am with you, medium seems okay, considering the localization. It would be nice to encourage short titles in the CMS so the max is the limit and not the goal of a title. Shorter titles are so much easier to scan.

[beccaklam]

@taisdesouzalessa Oh good point about localization! Should we go with short actually then? So then localized (at least, latin based) languages would be around medium length?

[taisdesouzalessa]

I think the question is if we can have different character counting depending on the language.
I see 2 options, but it would be good to ask an Engineer for their expertise:
• Maybe to simplify we have just English (short version) and others (medium version)
• Or maybe a one-size-fits-all (medium version) with a helper text in the CMS saying shorter titles are recommended

We wanted to make the homepage to not feel overwhelming for novices and encourage them to explore. So shorter headlines in English seems a good way to go, in my opinion. I am not sure we should enforce that by imposing limits or just nudge people to do it...

[kristinashu]

What happens if the title is too long? These titles are pulled from a blog post so would staff get see an error if they try to post a blog with too long of a title (even if it doesn't get featured on the homepage)? Or would we truncate the title on the homepage card? That is kinda more what I had in mind for best practices and options.

It might also be useful to get a sense of how long our our blog titles are in general right now.

[beccaklam]

@taisdesouzalessa @kristinashu

I took at a look at 11 of the current blog titles we have on the foundation site and the average character count is 53, well below the recommended 60 character limit (short). I think because of that we can go with Tais' suggestion of a one size fit all limit of 80 characters (medium) for all languages. We should place the limit on blog titles as well. As far as bench marking/best practices go I haven't seen any editorial sites truncate their titles so I suggest we avoid this as well. @kristinashu Should I loop in Pomax into this convo?

[kristinashu]

Sounds good! Yup you could loop in Pomax and maybe Théo as well for feedback.

[cadecairos]

cc/ @mmmavis

[beccaklam]

@TheoChevalier Can we also get your thoughts if 80 char is a good character limit for most locales? Our thinking is that for English we would have help text asking users to limit their titles to 60 char (which most staff are already doing naturally).

[beccaklam]

@Pomax Can we also get your thoughts here? ☝️

[beccaklam]

Once we get consensus from Theo and Pomax this ticket should be good to close!

[Pomax]

80 characters sound fine to me, especially if that won't conflict with any of the preexisting blog titles.

[beccaklam]

@Pomax @mmmavis Great! So just to confirm we will set a character limit of 80 for blog titles, if a user goes over it will trigger an error when a user tries to save the change. We will also implement some help text that prompts English language authors to keep their blog titles to 60 characters (most staff have already been doing this though). cc: @kristinashu what are the next steps for this? Do I need to open an implementation ticket?

[kristinashu]

Yes! Please open and implementation ticket and close this one.

[beccaklam]

Opened an implementation ticket for this work: #4984. Closing this now!