You're probably aware of the new Create account and Login forms using the mw-ui "Agora" styles for a compact vertically-stacked form. They will soon be the default across all wikis. Meanwhile the Echo, Getting Started, and Guided Tour extensions are using the Agora button styles.
Many other forms use the HTMLForm framework, which defaults to a tabular layout. I added an option to display in 'vform' mode to this in https://gerrit.wikimedia.org/r/#/c/65346/ , and on machine toro, I made this the default. So:
* http://toro.wmflabs.org/wiki/Special:PasswordReset * http://toro.wmflabs.org/wiki/Special:Redirect * http://toro.wmflabs.org/wiki/Special:EditWatchlist etc. You can append ?useNew=table to compare with the old appearance. Even user preferences changes but that's not ready for a compact vertical form (and may never be), so again you can go back to the old appearance with http://toro.wmflabs.org/wiki/Special:Preferences?useNew=table .
There's design work to do to improve the look: the ruled wrapper legend around some forms, the error feedback after submission, etc.; I have a list in https://www.mediawiki.org/wiki/Agora/Engineering#HTMLForm_issues . But your feedback is welcome. It's not "my" design or Munaf's, it's WMF's. Thanks to Munaf's use of Compass and Sass, it's even kinda fun to work on.
Regards, -- =S Page software engineer on E3
Thanks that you exist! I love how you do gradual improvements of design! The barbarian way of "Switching the users to our brand new theme" is so much worse. ----- Yury Katkov, WikiVote
On Wed, May 29, 2013 at 1:13 PM, S Page spage@wikimedia.org wrote:
You're probably aware of the new Create account and Login forms using the mw-ui "Agora" styles for a compact vertically-stacked form. They will soon be the default across all wikis. Meanwhile the Echo, Getting Started, and Guided Tour extensions are using the Agora button styles.
Many other forms use the HTMLForm framework, which defaults to a tabular layout. I added an option to display in 'vform' mode to this in https://gerrit.wikimedia.org/r/#/c/65346/ , and on machine toro, I made this the default. So:
- http://toro.wmflabs.org/wiki/Special:PasswordReset
- http://toro.wmflabs.org/wiki/Special:Redirect
- http://toro.wmflabs.org/wiki/Special:EditWatchlist
etc. You can append ?useNew=table to compare with the old appearance. Even user preferences changes but that's not ready for a compact vertical form (and may never be), so again you can go back to the old appearance with http://toro.wmflabs.org/wiki/Special:Preferences?useNew=table .
There's design work to do to improve the look: the ruled wrapper legend around some forms, the error feedback after submission, etc.; I have a list in https://www.mediawiki.org/wiki/Agora/Engineering#HTMLForm_issues . But your feedback is welcome. It's not "my" design or Munaf's, it's WMF's. Thanks to Munaf's use of Compass and Sass, it's even kinda fun to work on.
Regards,
=S Page software engineer on E3
Design mailing list Design@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/design
Instead of worrying about 50 shades of grey for label and placeholder text, Jared asked "Why have both placeholders and labels"? So the latest demo on toro removes the label on input text fields and moves its text into the placeholder.
e.g. http://toro.wmflabs.org/wiki/Special:Redirect vs. the original http://toro.wmflabs.org/wiki/Special:Redirect?useNew=table http://localhost/wiki/index.php?title=Special:PagesWithProp , etc.
To repeat, this is just adding a 'vform' layout to HTMLForm and as a test making it the default on toro. When and as we convert individual forms we can improve them, but this is what you get "for free".
Please feed back, thanks.
On Wed, May 29, 2013 at 2:13 AM, S Page spage@wikimedia.org wrote:
You're probably aware of the new Create account and Login forms using the mw-ui "Agora" styles for a compact vertically-stacked form. They will soon be the default across all wikis. Meanwhile the Echo, Getting Started, and Guided Tour extensions are using the Agora button styles.
Many other forms use the HTMLForm framework, which defaults to a tabular layout. I added an option to display in 'vform' mode to this in https://gerrit.wikimedia.org/r/#/c/65346/ , and on machine toro, I made this the default. So:
- http://toro.wmflabs.org/wiki/Special:PasswordReset
- http://toro.wmflabs.org/wiki/Special:Redirect
- http://toro.wmflabs.org/wiki/Special:EditWatchlist
etc. You can append ?useNew=table to compare with the old appearance. Even user preferences changes but that's not ready for a compact vertical form (and may never be), so again you can go back to the old appearance with http://toro.wmflabs.org/wiki/Special:Preferences?useNew=table .
There's design work to do to improve the look: the ruled wrapper legend around some forms, the error feedback after submission, etc.; I have a list in https://www.mediawiki.org/wiki/Agora/Engineering#HTMLForm_issues . But your feedback is welcome. It's not "my" design or Munaf's, it's WMF's. Thanks to Munaf's use of Compass and Sass, it's even kinda fun to work on.
Regards,
=S Page software engineer on E3
Instead of worrying about 50 shades of grey for label and placeholder text, Jared asked "Why have both placeholders and labels"?
IMHO:
* A label identifies what a field is for, even after text is placed inside of it. * A placeholder gives an example of field content.
These are somewhat opposed. A further way of looking at it is to imagine a long form fully filled out -- how do you verify, as a user, if you've filled it out correctly if the labels are no longer visible (because you've filled in the field).
On mobile, for short well known forms: e.g. password forms; there might be an argument. But I would certainly rather not see this as the default.
~Matt Walker Wikimedia Foundation Fundraising Technology Team
On 2013-05-31 5:37 PM, Matthew Walker wrote:
Instead of worrying about 50 shades of grey for label and placeholder text, Jared asked "Why have both placeholders and labels"?IMHO:
- A label identifies what a field is for, even after text is placed
inside of it.
- A placeholder gives an example of field content.
These are somewhat opposed. A further way of looking at it is to imagine a long form fully filled out -- how do you verify, as a user, if you've filled it out correctly if the labels are no longer visible (because you've filled in the field).
On mobile, for short well known forms: e.g. password forms; there might be an argument. But I would certainly rather not see this as the default.
~Matt Walker Wikimedia Foundation Fundraising Technology Team
Labels are also readable by screen readers. Something I'm not so sure about on placeholders.
~Daniel Friesen (Dantman, Nadir-Seen-Fire) [http://danielfriesen.name/]
Pretty positive we can have labels in the code for accessibility purposes without to actually displaying them on screen, will research.
* * * * *Jared Zimmerman * \ Director of User Experience \ Wikimedia Foundation M : +1 415 609 4043 | : @JaredZimmermanhttps://twitter.com/JaredZimmerman
On Sat, Jun 1, 2013 at 1:09 AM, Daniel Friesen daniel@nadir-seen-fire.comwrote:
On 2013-05-31 5:37 PM, Matthew Walker wrote:
Instead of worrying about 50 shades of grey for label and placeholder
text, Jared asked "Why have both placeholders and labels"?
IMHO:
- A label identifies what a field is for, even after text is placed
inside of it.
- A placeholder gives an example of field content.
These are somewhat opposed. A further way of looking at it is to imagine a long form fully filled out -- how do you verify, as a user, if you've filled it out correctly if the labels are no longer visible (because you've filled in the field).
On mobile, for short well known forms: e.g. password forms; there might be an argument. But I would certainly rather not see this as the default.
~Matt Walker Wikimedia Foundation Fundraising Technology Team
Labels are also readable by screen readers. Something I'm not so sure about on placeholders.
~Daniel Friesen (Dantman, Nadir-Seen-Fire) [http://danielfriesen.name/]
Design mailing list Design@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/design