Page MenuHomePhabricator

"Insert media" dialog offers confusing insert/upload alternative buttons
Closed, ResolvedPublic

Description

In my experience observing users, they are unable to continue when the WikiEditor insert file/media dialog offers two alternative buttons to insert an image in a page, one named "Insert" and the other "Upload".

The "upload" button should not be shown unless we're sure the user needs to upload a new file, or it should be presented with additional context.

Details

Related Gerrit Patches:

Event Timeline

Nemo_bis created this task.May 21 2016, 5:43 PM
Restricted Application added a project: Multimedia. · View Herald TranscriptMay 21 2016, 5:43 PM
Restricted Application added subscribers: Zppix, Steinsplitter, Aklapper. · View Herald Transcript
matmarex added subscribers: Prtksxna, matmarex.

Not a Regression, as that button was never placed anywhere else. This dialog is part of WikiEditor.

The "upload" button should not be shown unless we're sure the user needs to upload a new file, or it should be presented with additional context.

I don't know how we could guess that the user needs to upload a file? Although I agree that the current button placement is not ideal. I think jQuery UI limits our options here somewhat.

Restricted Application added a subscriber: Matanya. · View Herald TranscriptMay 24 2016, 11:23 PM

Perhaps put the button below the field for the file name?
Something like this:

Enter name of existing file:
[_______________________]
Or upload a new file [Upload]

Perhaps put the button below the field for the file name?
Something like this:
Enter name of existing file:
[_______________________]
Or upload a new file [Upload]

This sounds like a good idea!

I was looking around jQuery UI documentation to see if there was something else that we could do. We could add a notice at the top of the form using the ui-state-highlight style that shows up with a yellow background. But that might be too intrusive.

Another option we have is to add another button to the toolbar. We could have one for Insert media and another for Upload Media.

Yes, the vicinity of the filename field is the logical place. (Which doesn't necessarily mean it would be intuitive to users!)

Another option we have is to add another button to the toolbar. We could have one for Insert media and another for Upload Media.

That would only shift the confusion to another stage.

Yes, the vicinity of the filename field is the logical place. (Which doesn't necessarily mean it would be intuitive to users!)

Another option we have is to add another button to the toolbar. We could have one for Insert media and another for Upload Media.

That would only shift the confusion to another stage.

Do you mean that the users would be confused between the insert and upload actions even when they're presented separately? I thought the confusion was stemming from the fact that we have an Upload button in the Insert form.

@Nemo_bis, I'd like to know more about exactly what you're observing.

Generally speaking, I'd expect people who click on the Upload button in the 2010 wikitext editor, and don't want to upload a file from their computer, to figure it out pretty quickly: "Ooops, that dialog says "select a file" and then tries to search my hard drive for images... Yeah, that's not what I want. <Cancel>".

So I'm guessing that the problem is people clicking "Insert" (before naming a file) and not getting what they want. So I can think of two ideas for addressing that confusion, and I wonder what you think of them:

  1. Make the 'Insert' button inactive/grayed-out until something's been typed in the Filename: field.
  2. Provide a 'Search for images on Commons' button, so they can find the filename that they want.

figure it out pretty quickly: "Ooops, that dialog says "select a file" and then tries to search my hard drive for images... Yeah, that's not what I want. <Cancel>".

I don't see why this would be the case. Many users try to insert an image, are instead presented with a suggestion to upload a file, and think they have to download the file (e.g. from Commons) and upload it again as they are instructed to do by the misleading dialog.

Change 319350 had a related patch set uploaded (by Bartosz Dziewoński):
Make Upload/Insert buttons in "Insert media" dialog less confusing

https://gerrit.wikimedia.org/r/319350

matmarex claimed this task.Nov 2 2016, 4:00 PM
matmarex triaged this task as Low priority.

The "Upload" button is now displayed on the left side of the dialog,
which make it clear it's a "secondary" action. "Insert" is on the
right, like all jQuery UI buttons, and the primary action.

Unfortunately jQuery UI doesn't give us a lot of styling options for
buttons or dialogs, even this is a bit of a hack.

Jdforrester-WMF closed this task as Resolved.Nov 2 2016, 7:29 PM

Change 319350 merged by jenkins-bot:
Make Upload/Insert buttons in "Insert media" dialog less confusing

https://gerrit.wikimedia.org/r/319350

Thanks. I'll spy some more users over their shoulders to check the effect. :)

happy5214 moved this task from Backlog to Closed on the WikiEditor board.Aug 4 2019, 11:39 AM