WordPress.org

Make WordPress Core

Opened 2 years ago

Closed 18 months ago

Last modified 18 months 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 2 years ago.
Add button class to the upload link
real-world-example-compare.png (89.3 KB) - added by tar.gz 19 months ago.
Worst-case scenario with line-breaking URL
ui-upload.jpg (46.9 KB) - added by downstairsdev 19 months ago.
media-button.diff (1.9 KB) - added by downstairsdev 19 months ago.
Make media link a button, and puts icon on the left
19956.2.diff (726 bytes) - added by lessbloat 18 months ago.
upload-url-line-wrap.png (34.9 KB) - added by tar.gz 18 months ago.
Line-wrap issue

Download all attachments as: .zip

Change History (42)

comment:1 toscho2 years ago

  • Cc info@… added

Otto422 years ago

Add button class to the upload link

comment:2 Otto422 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 Otto422 years ago

  • Keywords has-patch added

comment:4 azaozz2 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.gz19 months 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 19 months ago by tar.gz (previous) (diff)

comment:6 nacin19 months ago

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

comment:7 follow-up: helenyhou19 months 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 nacin19 months 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 lessbloat19 months ago

The button itself looks good. 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.
Last edited 19 months ago by lessbloat (previous) (diff)

comment:10 lessbloat19 months ago

Here's a screen using button-small:

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

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

tar.gz19 months ago

Worst-case scenario with line-breaking URL

comment:11 tar.gz19 months 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 19 months ago by tar.gz (previous) (diff)

downstairsdev19 months ago

comment:12 downstairsdev19 months 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.

downstairsdev19 months ago

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

comment:13 follow-up: downstairsdev19 months 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 mordauk19 months 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: krogsgard19 months 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 sabreuse19 months ago

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

comment:17 in reply to: ↑ 15 buffler19 months 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: DrewAPicture19 months 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: krogsgard19 months 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 isaackeyet19 months 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 husobj19 months ago

  • Cc ben@… added

comment:22 JerrySarcastic18 months ago

  • Cc fittingsites@… added

comment:23 lessbloat18 months 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 sabreuse18 months 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: toscho18 months 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 husobj18 months 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.

lessbloat18 months ago

comment:27 lessbloat18 months 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.gz18 months ago

Line-wrap issue

comment:28 follow-up: tar.gz18 months 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: helenyhou18 months 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.gz18 months 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: helenyhou18 months 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.gz18 months 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 nacin18 months ago

  • Component changed from UI to Media

comment:34 koopersmith18 months 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 koopersmith18 months ago

Translations. Oops.

comment:36 nacin18 months ago

In 22486:

Translate. see #19956.

Note: See TracTickets for help on using tickets.