WordPress.org

Make WordPress Core

Opened 3 years ago

Closed 3 years ago

Last modified 3 years ago

#19956 closed task (blessed) (fixed)

Upload Image button still too subtle in Editor

Reported by: parisvega Owned by: koopersmith
Milestone: 3.5 Priority: normal
Severity: normal Version:
Component: Media Keywords: ui-feedback ux-feedback needs-testing has-patch
Focuses: Cc:

Description

Why not make the upload image text/icon button look like an actual button. I commonly get asked by clients who are staring at the editor, "How do I upload images?". Let's make it obvious. Some simple button styling would do the trick. See more of my reasoning here:
http://www.parisvega.com/if-ya-wanna-click-it-ya-better-put-a-button-it/

Attachments (6)

19956.diff (889 bytes) - added by Otto42 3 years ago.
Add button class to the upload link
real-world-example-compare.png (89.3 KB) - added by tar.gz 3 years ago.
Worst-case scenario with line-breaking URL
ui-upload.jpg (46.9 KB) - added by downstairsdev 3 years ago.
media-button.diff (1.9 KB) - added by downstairsdev 3 years ago.
Make media link a button, and puts icon on the left
19956.2.diff (726 bytes) - added by lessbloat 3 years ago.
upload-url-line-wrap.png (34.9 KB) - added by tar.gz 3 years ago.
Line-wrap issue

Download all attachments as: .zip

Change History (42)

comment:1 @toscho3 years ago

  • Cc info@… added

@Otto423 years ago

Add button class to the upload link

comment:2 @Otto423 years ago

Attached a simple patch to add the button class to that link, making it into a button. May need more styling.

comment:3 @Otto423 years ago

  • Keywords has-patch added

comment:4 @azaozz3 years ago

The problem is that many plugins add other buttons there that are styled like the (old) upload buttons, i.e. link with 16x16px image. Perhaps the way to make these more noticeable is to style them more like the editor buttons (20x20px squares with border shadow, etc.).

comment:5 @tar.gz3 years ago

There are currently two major UI overhauls on the roadmap of 3.5:

  • #21390: the Upload/Insert media revamp driven by koopersmith.
  • #21598: a new set of buttons coming from the UI team.

I believe it would make sense to update the Upload/Insert button at this occasion.

Btw, koopersmith has styled this link as a button in the first pages of the wireframes at http://make.wordpress.org/ui/2012/07/30/media-wireframes/

Last edited 3 years ago by tar.gz (previous) (diff)

comment:6 @nacin3 years ago

  • Milestone changed from Awaiting Review to 3.5
  • Type changed from enhancement to task (blessed)

comment:7 follow-up: @helenyhou3 years ago

The question remains: what happens to other icons that appear in that location? For example, Grunion via Jetpack.

comment:8 in reply to: ↑ 7 @nacin3 years ago

Replying to helenyhou:

The question remains: what happens to other icons that appear in that location? For example, Grunion via Jetpack.

They can be placed next to our big button. We should be able to do this pretty gracefully thanks to the media_buttons hooks.

comment:9 @lessbloat3 years ago

The button itself looks great. But the layout poses a couple of design challenges:

http://f.cl.ly/items/3V2R3W0Q1h0u372T1K2U/upload-button.jpg

  • Overall, it's looking pretty cluttered.
  • Top of the button is higher than the top of the tabs on the right
  • Additional plugin buttons look out of place. We could force them all to show up with the class of button, but that looks kind of strange.
  • Using the button-small class looks too squished.
Version 1, edited 3 years ago by lessbloat (previous) (next) (diff)

comment:10 @lessbloat3 years ago

Here's a screen using button-small:

http://f.cl.ly/items/3Q350O2i3m3L3Y34471w/upload-button-small.jpg

and with new TinyMCE button styles:

http://f.cl.ly/items/0U3c37042g0c0S203I2r/upload-button-with-tinymce-changes.jpg

Last edited 3 years ago by lessbloat (previous) (diff)

@tar.gz3 years ago

Worst-case scenario with line-breaking URL

comment:11 @tar.gz3 years ago

Another example where the interface gets really crowded, as it happens when the URL string is long and the window width narrow.

http://core.trac.wordpress.org/raw-attachment/ticket/19956/real-world-example-compare.png

I think that the larger button works better in such a case. Anyway, I would say that the worst offenders in terms of visual bloat are the URL preview, and the TinyMCE buttons.

The Upload/Insert button doesn't make things worse IMO, quite the opposite: having one large item here offers a stable anchor for the eye, it makes the interface more readable.

Last edited 3 years ago by tar.gz (previous) (diff)

@downstairsdev3 years ago

comment:12 @downstairsdev3 years ago

I think it would be more consistent with the rest of the UI to have the icon on the left of the "Upload/Insert" text rather than the right.

@downstairsdev3 years ago

Make media link a button, and puts icon on the left

comment:13 follow-up: @downstairsdev3 years ago

Attached patch that makes Upload/Insert a button and puts the icon to the left side of the text. I also added a bit more white space so the button isn't as cramped.

comment:14 in reply to: ↑ 13 @mordauk3 years ago

Replying to downstairsdev:

Attached patch that makes Upload/Insert a button and puts the icon to the left side of the text. I also added a bit more white space so the button isn't as cramped.

Definitely looks/feels a lot better with the icon on the left.

comment:15 follow-up: @krogsgard3 years ago

I hope this is the appropriate place to raise my question. Is it even necessary to have "Upload/Insert" there? Space could be saved with "Add Media", "Media", "Add", or just nothing but the image. I personally think "Add Media" would make more sense than the current text, given the main (left) nav label, and would help shrink this button a bit.

comment:16 @sabreuse3 years ago

+1 to both icon on the left and a change to "Add Media"

comment:17 in reply to: ↑ 15 @buffler3 years ago

Replying to krogsgard:

Space could be saved with "Add Media", "Media", "Add", or just nothing but the image...

Agreed. I think the wording "Add Media" makes really good sense here; saves space while supporting the goal of making it more obvious what the button does. Good point re: relating to the lefthand nav labels.

comment:18 follow-up: @DrewAPicture3 years ago

  • Cc xoodrew@… added
  • Keywords 2nd-opinion removed

Food for thought ...

Add Media: http://cl.ly/image/0Y0U0A3F2n0b

vs

Upload/Insert: http://cl.ly/image/3P2S430b3Z3S

I seem to recall it used to say Add Media a few versions ago, but I agree that it ties better with "Media Library", "Add Media" et al.

comment:19 in reply to: ↑ 18 ; follow-up: @krogsgard3 years ago

Replying to DrewAPicture:

Food for thought ...

Add Media: http://cl.ly/image/0Y0U0A3F2n0b

vs

Upload/Insert: http://cl.ly/image/3P2S430b3Z3S

I seem to recall it used to say Add Media a few versions ago, but I agree that it ties better with "Media Library", "Add Media" et al.

I thought more about this last night. Would it be too bold to use a plus ( + ) sign next to the icon instead of words? I personally think it could work. Otherwise, I still think "Add Media" is better than "Upload/Insert"

comment:20 in reply to: ↑ 19 @isaackeyet3 years ago

Replying to krogsgard:

Otherwise, I still think "Add Media" is better than "Upload/Insert"

The problem is that that label needs to apply to whatever icon is showing on the right hand side for third parties, can't guarantee "add" is going to make sense for all of them - and even if it did, it would be a lot of screen space.

I think it'd be better to keep it simple and only turn the icon into something that looks more like a button in this iteration, more can be done in 3.6.

comment:21 @husobj3 years ago

  • Cc ben@… added

comment:22 @JerrySarcastic3 years ago

  • Cc fittingsites@… added

comment:23 @lessbloat3 years ago

As an update, here's the existing style (with a few minor tweaks in firebug):

http://f.cl.ly/items/1u2A0G2a2t1o0M3l3y0p/upload-button.jpg

Are we happy with this design? Anything else we can do to improve it?

comment:24 @sabreuse3 years ago

I like this one - and I'd love to see something get committed while we're finishing up with buttons!

comment:25 follow-up: @toscho3 years ago

I like it. Maybe the icon could go a tiny bit down to align it with the U?

comment:26 in reply to: ↑ 25 @husobj3 years ago

Replying to toscho:

Maybe the icon could go a tiny bit down to align it with the U?

I thought that too, but I just tried moving it down 1px and then the musical notes felt too low.

I prefer as is.

@lessbloat3 years ago

comment:27 @lessbloat3 years ago

19956.2.diff is an attempt at a cross browser solution. Here's what it looks like in various browsers:

http://f.cl.ly/items/2D3t3r2Z2U3C0x2s1S29/upload-cross-browser.jpg

@tar.gz3 years ago

Line-wrap issue

comment:28 follow-up: @tar.gz3 years ago

With the current beta at [22252], I notice that when the permalink wraps, there's an overlap of buttons (the "Get Shortlink" is hidden). This also occurs with 19956.2.diff applied. Tested in OSX/Firefox 16.

http://core.trac.wordpress.org/raw-attachment/ticket/19956/upload-url-line-wrap.png

comment:29 in reply to: ↑ 28 ; follow-up: @helenyhou3 years ago

Replying to tar.gz:

With the current beta at [22252], I notice that when the permalink wraps, there's an overlap of buttons (the "Get Shortlink" is hidden).

I think this has actually always happened, it just wasn't as noticeable before, and definitely isn't related to the upload image link. Probably worth a new ticket. Related: #22184

comment:30 in reply to: ↑ 29 @tar.gz3 years ago

Replying to helenyhou:

I think this has actually always happened, it just wasn't as noticeable before, and definitely isn't related to the upload image link. Probably worth a new ticket. Related: #22184

This didn't happen with previous versions, see my earlier screen capture at comment:11. You can see that at that earlier stage, the wrapped permalink was pushing the button down.

comment:31 follow-up: @helenyhou3 years ago

Sometimes I'm wrong - don't have a 3.4.2 install handy at the moment (your screenshot was from trunk), so I definitely could be. Still, new ticket material, because it is not related to the upload image link at all.

comment:32 in reply to: ↑ 31 @tar.gz3 years ago

Replying to helenyhou:

Actually, you are totally correct, it always happened - I forgot that my picture above was just a mockup, not an actual screenshot.

The only reason it works better in 3.4.2 is that there's a lot of whitespace under the permalink, so the wrapping doesn't cover the media button. So I opened a new ticket, #22298.

comment:33 @nacin3 years ago

  • Component changed from UI to Media

comment:34 @koopersmith3 years ago

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

In 22485:

Media: Rename the "Beta Media" button to "Add Media". fixes #19956, see #21390.

comment:35 @koopersmith3 years ago

Translations. Oops.

comment:36 @nacin3 years ago

In 22486:

Translate. see #19956.

Note: See TracTickets for help on using tickets.