Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Copy: Inconsistent capitalization of labels in tooltips and dropdown menus #16764

Closed
gziolo opened this issue Jul 26, 2019 · 20 comments · Fixed by #17336
Closed

Copy: Inconsistent capitalization of labels in tooltips and dropdown menus #16764

gziolo opened this issue Jul 26, 2019 · 20 comments · Fixed by #17336
Assignees
Labels
General Interface Parts of the UI which don't fall neatly under other labels. Good First Issue An issue that's suitable for someone looking to contribute for the first time [Status] In Progress Tracking issues with work in progress [Type] Copy Issues or PRs that need copy editing assistance

Comments

@gziolo
Copy link
Member

gziolo commented Jul 26, 2019

Related: #12366.

Some examples of tooltips existing as of today in different places of the block editor:

Screen Shot 2019-07-26 at 10 05 36
Screen Shot 2019-07-26 at 10 05 40
Screen Shot 2019-07-26 at 10 05 47
Screen Shot 2019-07-26 at 10 05 52
Screen Shot 2019-07-26 at 10 06 04
Screen Shot 2019-07-26 at 10 06 08
Screen Shot 2019-07-26 at 10 06 12
Screen Shot 2019-07-26 at 10 06 17
Screen Shot 2019-07-26 at 10 06 25

Some examples of dropdown menus:

Screen Shot 2019-07-26 at 10 11 04
Screen Shot 2019-07-26 at 10 11 09
Screen Shot 2019-07-26 at 10 11 13
Screen Shot 2019-07-26 at 10 11 46

When working on #16557 I also noticed this interesting case where the same controls can be displayed in the dropdown or inline:

Screen Shot 2019-07-26 at 10 13 25
Screen Shot 2019-07-26 at 10 13 32

In both cases, they use the same labels. My proposal is to use the same capitalization in tooltips as we do for labels in dropdown menus to make everything easier.

@gziolo gziolo added [Type] Copy Issues or PRs that need copy editing assistance General Interface Parts of the UI which don't fall neatly under other labels. labels Jul 26, 2019
@gziolo
Copy link
Member Author

gziolo commented Jul 26, 2019

@mapk and @karmatosed - do we have guidelines around it?

@karmatosed
Copy link
Member

Core usese:

image

That feels like the best pattern to stick to and be consistent.

@gziolo gziolo added Good First Issue An issue that's suitable for someone looking to contribute for the first time Needs Accessibility Feedback Need input from accessibility labels Jul 29, 2019
@sarahmonster
Copy link
Member

From our copy guidelines:

Feature names and dashboard sections typically use title case (think “Site Stats” or “Recently Published”), whereas feature labels typically use sentence case (like “Show buttons on” or “Comment Likes are,” where “Likes” is capitalized because it’s the feature name, but the overall label is using sentence case).

It sounds like we may need to give more examples here to make it super clear for future usage as well.

The above rather reads as though tooltips and the like would be classified as "feature labels" (and thus should use sentence case), but the majority of these seem to be using title case.

The guidelines for core say that the following should use title case:

Labels
Button labels
Actions

Again, this may be a bit vague and warrants further clarification (is a tooltip a label?) once we've decided on a pattern here. More explicit guidelines may be required to ensure a more consistent experience.

Seems like most tooltips in wp-admin use sentence case:

2019-07-29 22 45 26

@afercia
Copy link
Contributor

afercia commented Jul 30, 2019

Previously: #4832 / #4325

@gziolo
Copy link
Member Author

gziolo commented Jul 30, 2019

In the example, @sarahmonster shared, there is this exact issue which triggered my willingness to unify everything. You see Add Contact Form (title-case) as the label of the button in the top section but in the toolbar, there is Add contact form (sentence-case) in the tooltip. In addition, we are planning to introduce a setting which allows displaying tooltips as labels for icon-only buttons. It would be much easier to have one way to handle all those 3 use cases with one version of text rather than provide 2 or 3 versions depending on the context. This would also further simplify the process of translation. Otherwise, we will have to add logic which displays a proper version of the text.

@afercia
Copy link
Contributor

afercia commented Jul 30, 2019

Some past (Dec. 2014) conversation on Slack about title-casing: https://wordpress.slack.com/archives/core/p1418759343002024

Personally, I'm not sure I understand all this extensive usage of title-casing. I do realize it's more a traditional thing in English typography. However, title-casing it's not used in many other countries.

In Europe, it's very rarely used. Just have a quick look at the most important online newspapers from France, Germany, Spain, Italy, etc. and even UK: no title-casing there. Can anyone provide an example of a big news site that uses title-casing? I doubt it's used on US big news sites as well.

A few quick questions 🙂

  • Why WordPress uses title-casing so extensively?
  • Is there any good reason to do that?
  • Does it improves readability in any way?
  • Is there any data to support it's better?

I can only tell that one of the items in the Italian polyglots guidelines is to avoid title-casing at all costs.

That said, inconsistencies in the admin are everywhere so this is not just a Gutenberg issue. Example:

"Remove From Bulk Edit"
"Restore from Trash"

Any reason why from is title-cased in the first sentence and it's not in the second sentence?

Also, there are cases of slightly excessive usage of title-casing. For example, things like

"Log Out Everywhere Else" (formerly "Log Out of All Other Sessions")

look a bit excessive to me.

Overall, I'd tend to think the intent to reduce inconsistency is very valuable but maybe the best option would be to drastically simplify and just use normal sentence-casing.

@gziolo
Copy link
Member Author

gziolo commented Jul 30, 2019

Overall, I'd tend to think the intent to reduce inconsistency is very valuable but maybe the best option would be to drastically simplify and just use normal sentence-casing.

I'm fine with that as well. Whatever makes more sense and makes life simpler for developers, translators, and more importantly users.

In Europe, it's very rarely used. Just have a quick look at the most important online newspapers from France, Germany, Spain, Italy, etc. and even UK: no title-casing there. Can anyone provide an example of a big news site that uses title-casing? I doubt it's used on US big news sites as well.

The same applies to Polish. Some examples from Facebook:

Screen Shot 2019-07-30 at 21 24 03
Screen Shot 2019-07-30 at 21 23 41
Screen Shot 2019-07-30 at 21 24 19
Screen Shot 2019-07-30 at 21 24 27

By the way, GitHub uses sentence case for buttons when using English :)

@mapk
Copy link
Contributor

mapk commented Aug 5, 2019

Based on @sarahmonster's digging, other comments in this thread, and my own personal feelings 😉, I'm much more inclined to use Sentence-case for the tooltips. I'm sure we can add documentation to support this decision, but this can be justified by saying tooltips are not "Labels, Button Labels, or Actions" so we should be good to go.

@karmatosed
Copy link
Member

Can we loop back to core a patch to also change that? I know it's a big ask but unifying here would be a nice addition.

@enriquesanchez
Copy link
Contributor

Regarding the accessibility of sentence case vs. title case, there does not seem to be any consensus or formal studies that prioritize one over the other.

I was able to dig this Microsoft study that briefly touches on the topic of alternating case, which is not exactly what's being discussed here, as it refers to a single word.

It does however offer some insights that I think can be expanded to our situation:

The fourth piece of evidence supporting the word shape model is that it is difficult to read text in alternating case. AlTeRnAtInG case is where the letters of a word change from uppercase to lowercase multiple times within a word. The word shape model predicts that this is difficult because it gives a pattern of ascending, descending, and neutral characters that is different than exists in a word in its natural all lowercase form. Alternating case has been shown to be more difficult than either lowercase or uppercase text in a variety of studies. Smith (1969) showed that it slowed the reading speed of a passage of text, Mason (1978) showed that the time to name a word was slowed, Pollatsek, Well, & Schindler (1975) showed that same-difference matching was hindered, and Meyer & Gutschera (1975) showed that category decision times were decreased.

I vote for consistency but also maintainability. I think title case will lead to more errors and inconsistency in the future, since it's not an international practice.

Also, have y'all seen that we use title case for our GitHub labels? 😝

@enriquesanchez enriquesanchez removed the Needs Accessibility Feedback Need input from accessibility label Aug 8, 2019
@afercia
Copy link
Contributor

afercia commented Aug 8, 2019

I vote for consistency but also maintainability. I think title case will lead to more errors and inconsistency in the future, since it's not an international practice.

+1 to this 🙂

Also, have y'all seen that we use title case for our GitHub labels?

🙈

@sarahmonster
Copy link
Member

WordPress uses a lot of title case. I'd love to see us start to shift toward more sentence case where possible:

  • It's easier to pick out proper nouns (or any nouns, in the case of German).
  • It's more internationally universal, reflecting WordPress' varied global user base. (See also: German.)
  • Fewer inconsistencies and variation. Everyone knows how to apply sentence case, but title case isn't as clear. (Do you capitalise articles and prepositions? What about conjunctions?)
  • Easier to read when strings get long because it mirrors how we read body copy. (I didn't find any research to back this, but If You Write A Sentence Something Like This It Sort of Forces You To Stop At Every Word And Feels Rather Stilted.)
  • It's friendlier. Title case feels very formal, and WordPress may want to be more casual in voice & tone.
  • Clearer application ("Does this require title or sentence case?" questions are simpler to answer when the correct response is always "sentence case").

Some more reading on the topic:

@karmatosed
Copy link
Member

@enriquesanchez we use title case for labels because it was used in other interactions. It's a loop where it was first in core then propagated throughout :)

@mapk
Copy link
Contributor

mapk commented Aug 23, 2019

Can we unpropagate it? Like what if we start using Sentence case in Gutenberg and at least submit a Trac issue for Core? A little reverse-propagation never hurt anyone, right? 😉

@gziolo
Copy link
Member Author

gziolo commented Aug 24, 2019

Can we unpropagate it? Like what if we start using Sentence case in Gutenberg and at least submit a Trac issue for Core? A little reverse-propagation never hurt anyone, right? 😉

I’d love to see it happen. It was my intention that we bet on one approach and apply it everywhere. I must admit that seeing GitHub using sentence case for buttons every time I comment here convinced me to follow this approach. 😃

@github-actions github-actions bot added the [Status] In Progress Tracking issues with work in progress label Sep 4, 2019
senadir pushed a commit that referenced this issue Sep 13, 2019
* Using sentence case for tooltips. Fixes #16764 in part.

* update snapshots

* second try to match tests
@gziolo
Copy link
Member Author

gziolo commented Sep 13, 2019

#17336 fixes it only partially.

@gziolo gziolo reopened this Sep 13, 2019
@mapk
Copy link
Contributor

mapk commented Sep 14, 2019

While #17336 fixes the tooltips, we now need another PR to cover the popover component and change those options to Sentence Case too.

Examples:

61936851-d6c51300-af8d-11e9-9e80-4955cb5a4c1d

61936966-17bd2780-af8e-11e9-9905-bf58e1e845a7

karmatosed pushed a commit that referenced this issue Nov 26, 2019
karmatosed pushed a commit that referenced this issue Nov 26, 2019
So far we have only done this in the tooltips and in menus. If sentance case of right approach we should consider taking this across all areas.

Included in this:

- Side panel
- Block library
- Settings

There may be areas missed, but gives a starting view to see if everyone agrees to go forward with this across everything. If we do, then we need a patch for core.

Expands on #16764
@karmatosed
Copy link
Member

@mapk as we now have a PR in #18758, could this be closed?

karmatosed pushed a commit that referenced this issue Dec 16, 2019
* Expanding on sentance case to everywhere else

So far we have only done this in the tooltips and in menus. If sentance case of right approach we should consider taking this across all areas.

Included in this:

- Side panel
- Block library
- Settings

There may be areas missed, but gives a starting view to see if everyone agrees to go forward with this across everything. If we do, then we need a patch for core.

Expands on #16764

* Catch a few missed

* Update tag

* Test catches

Fixes test issues.

* Catches the test fails for sentance case.

* Test fix

* Update index.js

* Catch some more test fails

* Test fixes

* Override WP labels for post and page types

… to conform to sentence-style capitalisation across the editor UI.

(This is a quick commit to show the idea. Do expand on it and polish.)

From Slack: "If we used this it would have to be properly marked [e.g.
@todo] and commented so that before the next core release we could
revisit these labels as a whole."

* gutenberg_override_posttype_labels: small fixes
@mapk
Copy link
Contributor

mapk commented Dec 16, 2019

Yep! PR is merged, let's close this!

@mapk mapk closed this as completed Dec 16, 2019
@gziolo
Copy link
Member Author

gziolo commented Dec 17, 2019

Awesome work @karmatosed and @mapk. Thank you for wrangling it. It should make everything more consistent :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
General Interface Parts of the UI which don't fall neatly under other labels. Good First Issue An issue that's suitable for someone looking to contribute for the first time [Status] In Progress Tracking issues with work in progress [Type] Copy Issues or PRs that need copy editing assistance
Projects
None yet
Development

Successfully merging a pull request may close this issue.

6 participants