WordPress.org

Make WordPress Core

#21754 closed enhancement (fixed)

Replace QuickPress labels with gray prompt texts

Reported by: tar.gz Owned by: nacin
Milestone: 3.5 Priority: normal
Severity: normal Version: 3.4.1
Component: UI Keywords: has-patch commit
Focuses: Cc:

Description

The QuickPress publishing area, that is prominently visible on the main Dashboard, has very narrow label fields. They are actually just wide enough to hold the English label text ("Title", "Content", "Tags").

In some localized versions of WP, those labels are too short to hold the complete strings, so they either overlap or break into several lines. The attachments "quickpress-labels-de.png" and "quickpress-labels-fr.png" show how bad it looks in German and French (under MacOSX, in FF and Webkit).

Now every language could override the width with a custom CSS rule, but I think there is a much better solution: we could use a prompt text inside the text field, like we already do for the "Title" field on the normal post/page editor. This would have two benefits:

  • The whole string will fit in, no matter how long it is.
  • The editing area gets wider, which makes it more convenient to write a post.

In my first mockup (quickpress-improved-01.png), you can see this principle applied both for the "Title" and the "Tags" field. My feeling is that the main edit box is self-explanatory, since we do the same on the post/page editor. But this should certainly be discussed with some UX experts.

I made a second mockup (quickpress-improved-02.png) where I added the category dropdown, based on Jane's proposal in #21636. I think that this would make the QuickPress box much more useful!

Attachments (14)

quickpress-labels-fr.png (55.9 KB) - added by tar.gz 20 months ago.
QuickPress labels in French version of WP
quickpress-labels-de.png (63.0 KB) - added by tar.gz 20 months ago.
QuickPress labels in German version of WP
quickpress-improved-01.png (18.6 KB) - added by tar.gz 20 months ago.
first mockup
quickpress-improved-02.png (29.7 KB) - added by tar.gz 20 months ago.
second mockup, with category dropdown
dashboard-german-wp341.png (77.0 KB) - added by tar.gz 20 months ago.
To see it in context: the current interface in German (with a CSS override for the label, 5em -> 7em).
dashboard-german-improved-04.png (84.5 KB) - added by tar.gz 20 months ago.
And here the same German interface, with the new mockup.
21754.patch (4.1 KB) - added by ocean90 20 months ago.
lithuanian-css-which-can-be removed-21754.diff (615 bytes) - added by settle 20 months ago.
Lithuanian CSS which can be removed after this is fixed.
21754.2.patch (7.3 KB) - added by ocean90 20 months ago.
21754.2-refresh.patch (7.3 KB) - added by DrewAPicture 19 months ago.
refresh
21754.3.diff (7.2 KB) - added by lessbloat 19 months ago.
21754-draft-saved-comparison.png (47.5 KB) - added by tar.gz 19 months ago.
Some nitpicking regarding the margin alignments of the "Draft saved/Post published" dialog.
21754.4.diff (1.9 KB) - added by lessbloat 19 months ago.
21754.5.diff (2.4 KB) - added by lessbloat 19 months ago.

Download all attachments as: .zip

Change History (47)

tar.gz20 months ago

QuickPress labels in French version of WP

tar.gz20 months ago

QuickPress labels in German version of WP

tar.gz20 months ago

first mockup

tar.gz20 months ago

second mockup, with category dropdown

comment:2 SergeyBiryukov20 months ago

Closed #16515 as a duplicate. I was trying to alter the layout to allow longer words there, but didn't find an easy way to do that with the current UI.

This looks much more flexible.

comment:3 JustinSainton20 months ago

  • Keywords needs-patch added

+1, this looks great.

comment:5 tar.gz20 months ago

@Sergey : indeed, the reasoning behind this proposal is that it should work for any language without specific tuning.

An important thing to remember is that users are confronted with the dashboard each time they log into WP - even if they don't use the QuickPress widget, it's very important that everything looks clean and precise. Any imperfection here will have a negative impact for a large number of users.

tar.gz20 months ago

To see it in context: the current interface in German (with a CSS override for the label, 5em -> 7em).

tar.gz20 months ago

And here the same German interface, with the new mockup.

comment:7 lessbloat20 months ago

+1 for quickpress-improved-01.png.

The category select element in quickpress-improved-02.png scares me (I mean no offense)... :-)

comment:8 ocean9020 months ago

  • Milestone changed from Awaiting Review to 3.5

Should be a no-brainer. We could use the placeholder attr or use the same JavaScript from the edit screen.

Category dropdown should be handled in #21636.

comment:9 tar.gz20 months ago

Thanks for the great feedback :)

I also think that the category listing adds too much noise. I wouldn't want to be welcomed by such complexity each time I visit the dashboard.

There are two other details that deserve to be mentioned:

  • In the mockup, the title field has a larger font size, in order to indicate hierarchy (and it makes it more tempting to start typing).
  • Since we have sufficient space in the tags field, we can put there the indication that they must be separated by commas - a useful hint, since that field does not auto-complete the tags (yet?).

Regarding the implementation: I would use the placeholder attribute, and keep the existing JavaScript as a fallback. See http://caniuse.com/#feat=input-placeholder

ocean9020 months ago

comment:10 ocean9020 months ago

21754.patch is a first pass. It uses the placeholder attribute.

comment:11 settle20 months ago

  • Cc kaipgis@… added

comment:12 settle20 months ago

If you will make it this way, you can also remove some locale-specific CSS in wp-admin/css/wp-admin.css
I see I won't need lithuanian css for QuickPress and I am sure you can remove some similar russian code too.

Last edited 20 months ago by settle (previous) (diff)

settle20 months ago

Lithuanian CSS which can be removed after this is fixed.

comment:13 JustinSainton20 months ago

Nit-picky, but for parity's sake, on Line 526 of 21754.patch, there's a semi-colon missing after the esc_attr_e() call.

ocean9020 months ago

comment:14 ocean9020 months ago

  • Keywords has-patch added; needs-patch removed

I think we should go with the JavaScript version here, since placeholder is only supported in IE > 9 and we are still supporting IE 7 and up. . More or less the same way as on the edit screen. 21754.2.patch does address this.


Some related tickets to QuickPress and JavaScript: #19662, #13516.

comment:15 DrewAPicture20 months ago

  • Cc xoodrew@… added

comment:16 JerrySarcastic20 months ago

  • Cc fittingsites@… added

comment:17 nacin19 months ago

  • Keywords needs-refresh added

DrewAPicture19 months ago

refresh

comment:18 DrewAPicture19 months ago

  • Keywords needs-refresh removed

comment:19 tar.gz19 months ago

If I apply the 21754.2-refresh.patch on the current 3.5-alpha-21690, the labels are removed, but the placeholder text (for title and tags field) isn't showing up. Tested in FF and Chrome (OSX).

Also, the left margin still needs to be removed in the CSS.

comment:20 tar.gz19 months ago

Oh, sorry for the bugspam. I just found out about define('SCRIPT_DEBUG', true);
Now it's working perfectly!

comment:21 follow-up: nacin19 months ago

Not sure I understand the need for the keydown event. Seems to work fine without it.

comment:22 in reply to: ↑ 21 ocean9019 months ago

Replying to nacin:

Not sure I understand the need for the keydown event. Seems to work fine without it.

Not sure too, but it's a copy of wptitlehint from post.js.

lessbloat19 months ago

comment:23 lessbloat19 months ago

In 21754.3.diff: Removed keydown event, and tested in Mac FF & Chrome as well as in Win IE8. Functionality looks good to me.

Version 0, edited 19 months ago by lessbloat (next)

comment:24 helenyhou19 months ago

  • Keywords commit added

21754.3.diff looks good and works well for me.

Last edited 19 months ago by helenyhou (previous) (diff)

comment:25 nacin19 months ago

  • Owner set to nacin
  • Resolution set to fixed
  • Status changed from new to closed

In [21894]:

Replace QuickPress labels with gray prompt texts. Stylish, but also done for localization purposes (string lengths). props ocean90. fixes #21754.

tar.gz19 months ago

Some nitpicking regarding the margin alignments of the "Draft saved/Post published" dialog.

comment:26 tar.gz19 months ago

I think the new QuickPress box is looking terrific!

Not sure how fanatic we should be regarding pixel-precise margin alignment, but here are some observations about how the "Post published/Draft saved" dialog could become even more handsome.

http://core.trac.wordpress.org/raw-attachment/ticket/21754/21754-draft-saved-comparison.png

On the left the current state, in the middle an improved version where the margins of the yellow top box and the Save Draft / Publish buttons are precisely aligned. Also the little Press This advert might look better if it was aligned left, and used the same padding as the boxes.

I guess the new buttons styles should be finalized, before doing those adjustments.

comment:27 SergeyBiryukov19 months ago

  • Keywords commit removed
  • Resolution fixed deleted
  • Status changed from closed to reopened

comment:28 nacin19 months ago

  • Keywords needs-patch added; has-patch removed

#dashboard-widgets form .input-text-wrap input is set to width: 99%. This means the inputs are closer to the left edge than the right edge. The Publish button is set to have a right margin of 5px, but on a narrower screen, the 1% is noticeably less than 5px.

I'm fine with a patch that aligns everything right up. Note that if the "You can also try" text is indented on the left, it should have the same margin on the right.

lessbloat19 months ago

comment:29 lessbloat19 months ago

21754.4.diff attempts to fix alignment issues in #comment:26. Tested in Mac FF, Mac Chrome, Win IE8, Win FF.

Last edited 19 months ago by lessbloat (previous) (diff)

comment:30 nacin19 months ago

  • Keywords has-patch commit added; needs-patch removed

21754.4.diff looks good. I imagine 99% was chosen to avoid breakage on older IE browsers. Confirming it looks fine in IE7 would probably be the only step left.

lessbloat19 months ago

comment:31 lessbloat19 months ago

21754.5.diff takes pity on IE7 users - here's what they'll see:

http://f.cl.ly/items/0l3H1a1H2O0j2i1F0Y1j/ie7-custom-width.jpg

comment:32 helenyhou18 months ago

Tested. Good to go.

comment:33 nacin18 months ago

  • Resolution set to fixed
  • Status changed from reopened to closed

In [22146]:

Align QuickPress fields. props lessbloat. fixes #21754.

Note: See TracTickets for help on using tickets.