Page MenuHomePhabricator

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

Description

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.

Screenshot:

Screenshot_20180228_162729.png (387×708 px, 22 KB)

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)

input.gif (201×320 px, 84 KB)

Or just plain have the placeholders above the fields:

label-hint-outside.png (89×230 px, 8 KB)

Event Timeline

Restricted Application added a subscriber: Aklapper. · View Herald Transcript
Charlie_WMDE raised the priority of this task from Low to High.Jan 8 2018, 4:48 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.

Screenshot_20180301_155811.png (491×784 px, 55 KB)

You can also have a look at it yourself on mediawiki.org 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.

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