Page MenuHomePhabricator

Placeholder text is too large in some languages and becomes illegible
Closed, ResolvedPublic


User Story:: As a user, I want to be able to read the whole placeholder text so I can benefit from the help that it provides.

Context of use: I assume the user would like to have help using the fields properly because that would make their search more successful.

Current Problems: Currently, in some languages (like German) the placeholder is cut off before the relevant piece of information. This is not good, because the help text doesn't reach the user.


Possible Solution: One way to improve the situation for the user is to come up with a way to always be able to see the full text no matter the length or shorten the English text in a way that hopefully all translations will be short enough to fit.

What we're thinking as a quickfix, but doesn't work on mobile is to place the placeholder text in a tooltip as well.
Much better would be to make the placeholders adaptive in the widget according to the best practices of placeholders which is to move the text out of the field once the user starts typing like so:

(click to view gif in motion)

Or just plain have the placeholders above the fields:

Event Timeline

Restricted Application added projects: archived--TCB-Team, Design. · View Herald TranscriptNov 14 2017, 4:42 PM
Restricted Application added a subscriber: Aklapper. · View Herald Transcript
Charlie_WMDE moved this task from Incoming to workbord on the WMDE-Design board.
Jan_Dittrich moved this task from workbord to Doing on the WMDE-Design board.Nov 22 2017, 12:39 PM
Charlie_WMDE triaged this task as Low priority.Jan 8 2018, 4:21 PM
Charlie_WMDE raised the priority of this task from Low to High.Jan 8 2018, 4:48 PM
Lea_WMDE moved this task from Backlog to Text stuff on the Advanced-Search board.Feb 15 2018, 3:53 PM
Charlie_WMDE renamed this task from Placeholder text is too large in some languages and thus becomes unhelpful to Placeholder text is too large in some languages and becomes illegible.Feb 28 2018, 3:43 PM
Charlie_WMDE edited projects, added OOUI; removed WMDE-UX-Workboard.
Charlie_WMDE updated the task description. (Show Details)
Charlie_WMDE added a subscriber: Mooeypoo.

@Mooeypoo Hi Moriel, we're running into trouble with the placeholders in our advanced search extension. Could you give me some feedback on the ticket and let me know if this is something you've been thinking about changing? Thanks!

Why aren't we using the [i] icon to have that help message? Is there a different message there? The long help message in the input seems to not quite be the purpose of the placeholder?

@Charlie_WMDE @Mooeypoo From our current user-interface patterns, the information icon is meant for such extensive additional information.
Placeholder is meant to kept short by standard's definition. So the way out here, is to improve (shorten) the default placeholder English text and add the rest to the information icon popup.
We're aware about some possible shortcomings of the “i” icon, still it makes sense to stay with the default pattern as we can address this more easily on a general UI library level.

There's another UX issue, the right aligning of labels and putting inputs on one line are both patterns, researched and well-known to make orientation for users worse and increases users time to accomplish their form task. Hope to find time to file a task for it.

Hi @Mooeypoo and @Volker_E

The [i] icons all have information about the fields. This is indeed an info that could go there but we found that users only click the [i] after trying a few things and failing. We would like to avoid this by providing the correct way to conduct a search from the start.

You can also have a look at it yourself on for example if you activate the advanced search beta feature.

Even better would be to have the field act in a way that it wouldn't need an instruction to be usable but so far we're struggling with a good solution. If you have any recommendations for that, I'd be happy to hear them.

Keep the placeholder text short: This is good advice but doesn't really address the problem we have with the placeholder. It should probably function regardless of the length, since a short text can also be forgotten.

Lea_WMDE closed this task as Resolved.Jul 20 2018, 1:24 PM

We changed the placeholder text to a much shorter "cat loves goat"