Page MenuHomePhabricator

Usability of single underline edit input interface pattern
Open, Needs TriagePublic

Description

Single underline edit interface (together with auto-saving feature)


Event Timeline

Volker_E created this task.Mar 13 2018, 7:15 AM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptMar 13 2018, 7:15 AM

One thing to ensure in such treatment were the mental connection between label and input, something that is already an issue in the Wikidata screenshots.

A possible treatment to evaluate would be

normal state
focus state

It features current input + label combinations in comparison (not meant to be mixed in UIs).

Issues addressed
✓ label is always visible, so accessible connection, lowering user task memory workload
– ✓ Save all fuzz with float label shortcomings with above

Another example with similar treatment in all three inputs


Surfacing some other issues to resolve on before moving further:

  • Missing clarity of input label, placeholder and value, especially after inputs are value-filled.

✓ Improve label+input connection representation while making form more light-weight from the beginning

Is this of any continued interest for you @PDrouin-WMF?

Possibly! I plan on usability testing the current editing interface for statements on Commons this month, and depending on the results of that test, I may use this styling in some iterative designs.

I have a question. What does "only allows even number of characters" mean? Is that example text or is it an actual requirement of the input line (that an odd number of characters cannot be saved)?

@PDrouin-WMF That's to show off a demo library ability and is of no value in real production to my knowledge. Try it out for yourself – uneven char input results in invalid input feedback.