Ugly file picker...

Ugly file picker...

by Colin Fraser -
Number of replies: 14
Picture of Documentation writers Picture of Testers

I know this is very late, and probably not worth too much time being spent on it... BUT.. The image file picker is just plain ugly. It is not really really ugly, just plain ugly.

The attached image shows what is, and what I think looks a lot better.

The top part is the default, but the lower part shows what it could look like with a minimum of change. It is just a minimum change, but it makes the whole thing look different.

I am not going to ask anyone to do anything except inform me of just where all the files are that are used to build the file picker and make it work. My php skills are pretty poor but I think even I could make this work, and even if it is only ever me that uses it, I would like to give it a try...

Cheers..

and I am off on a photo expedition for a week, Cheers...

Average of ratings: Useful (2)
In reply to Colin Fraser

Re: Ugly file picker...

by Iñaki Arenaza -
Picture of Core developers Picture of Documentation writers Picture of Particularly helpful Moodlers Picture of Peer reviewers Picture of Plugin developers
As far as I can see (I'm no javascript expert), the files are part of TinyMCE plugins added by moodle developers.

Most of it is in lib/editor/tinymce/3.3.9.2/plugins/moodlemedia/moodlemedia.htm , but I think there's also some of it in lib/editor/tinymce/tiny_mce/3.3.9.2/utils/form_utils.js

Saludos.
Iñaki.
In reply to Colin Fraser

Re: Ugly file picker...

by Mark Johnson -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Peer reviewers Picture of Plugin developers

Colin,

I recently raised a bug about this issue - I don't think the current button looks "buttony" enough. You might want to add your thoughts to the tracker: MDL-25082

In reply to Mark Johnson

Re: Ugly file picker...

by Joseph Rézeau -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers Picture of Testers Picture of Translators

Mark "I don't think the current button looks "buttony" enough."

Exactly, it took me some time to realize that I had to click on that "label" to go to the file picker. This is not correct ergonomy at all.

Joseph

In reply to Joseph Rézeau

Re: Ugly file picker...

by Mark Johnson -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Peer reviewers Picture of Plugin developers

I've just posted a possible solution to the tracker. Colin, I see your point about having the button down the bottom, but I feel it's more consistent with other UIs where you're selecting a file to keep the button with the field that displays the URL.  Please post comments to the tracker, if you have them.

In reply to Mark Johnson

Re: Ugly file picker...

by Mauno Korpelainen -

The original logic of placing a "Browse" button to the right side of Image URL in core TinyMCE image plugin is very near to your suggestion, Mark.

Browse

And one reason why placing an "Update" button to the botton between Insert and Cancel is a little problematic is that there are 3 tabs:

- you can choose and preview images in the Genaral tab
- you can choose some properties for the chosen image in Appearance tab
- you can choose some advanced properties and even choose images with an old-tinymce-style-file-browser-button (!!!) for onmouseover and onmouseout events in Advanced tab

In reply to Mauno Korpelainen

Re: Ugly file picker...

by Mark Johnson -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Peer reviewers Picture of Plugin developers

I'd noticed that my solution was much like TinyMCE's native interface in terms of layout.  My impression from the original discussions was that it wasn't considered obvious enough what the button did (otherwise I assume they wouldn't have changed it to the current situation). Personally, I didn't find it particularly obvious that it was a button at all when I first used TinyMCE.

Perhaps my suggested fix could be improved by replacing the old-style buttons with the Find/Upload button to the Advanced tab too?

In reply to Mark Johnson

Re: Ugly file picker...

by Colin Fraser -
Picture of Documentation writers Picture of Testers

Using different buttons on different tabs is, to me, sloppy coding standards. The3 button standard should appear irrespective of whatever tab is visible and it is used wherever a file handling dialogue appears. If a tab does not require a button, then that button is made hidden or inactive, which brings me to my biggest problem, I know what to do, just not how to do it. In my job, I have no need nor time to do anything more than tinker at the extreme edges of code, change a setting here, or there, increase the number of topics available, that sort of thing. What I am asking is that a bit more thought as to how that can be done. BTW, the file picker for linking or uploading non-image files is just as much an issue. The browse and select button there is a little clearer but still, (in the parlance of the gamer) it sucks. Break all file handing dialogues down to the barest common interface, then just add what you want for each different use.  By using the same essential dialogue, you reduce the overall size of the scripts required and make more efficient use of the available code base. (There is nothing new in any of this, but I am asking people to consider it more in Moodle 2.0.x)

In reply to Colin Fraser

Re: Ugly file picker...

by Colin Fraser -
Picture of Documentation writers Picture of Testers

Going over the code, (and the little I understand of it), It looks like the form has been created properly , it really does boil down to if the buttons can easily be rearranged. Even with my limited knowledge of PHP it looks like it can, but I do it and I wreck itclown. It does not work after I get through with it.. but I replace the page with the original and it works again. So obviously, I have no chance of doing this, but an experienced PHP programmer could probably do this in minutes.

In reply to Mark Johnson

Re: Ugly file picker...

by Mauno Korpelainen -

Mark,

in my opinion your suggestion is pretty good - others may have different opinions depending on their previous user experience of using HTMLArea, TinyMCE, FCKEditor etc - "visual aspects" are often just a matter of taste smile

For new users the only usability problem is where to find the tool they are looking for (and how to use it), for old HTMLArea users one usability problem is that they are looking for old HTMLArea buttons...

Attached that Advanced tab from TinyMCE - in moodle we use always repository plugin for finding/uploding/selecting/browing - it's just a matter of translation which term to use for browsing files for image fields:

Advanced

If we check the other popular open source editor - CKEditor - there are 4 tabs and only "OK" and "Cancel" are in the same place at the bottom (in all plugins usually even in different editors).

CKEditor

In HTMLArea Image URL and Browse button are rather far far away from each other - some people might call this usability issue for new HTMLArea users smile

HTMLARea

In reply to Mauno Korpelainen

Re: Ugly file picker...

by Mauno Korpelainen -

One more tiny note for the first images - in TinyMCE we see "Insert" button when we add new images and we see "Update" button when we edit existing selected image. In HTMLArea and CKEditor we see just "OK" button.

In reply to Mauno Korpelainen

Re: Ugly file picker...

by Colin Fraser -
Picture of Documentation writers Picture of Testers

It does not matter how it is achieved, as long as it is consistent across all file handling dialogues, Mauno. You using the smaller browse button is OK, it is consistent with the file picker - and that is what is required. All I am suggesting is that a standard for an "intuitive" interface was set long ago in the first GUIs, and Moodle developers should always bear that in mind. What has been done is not bad, just thoughtless and, in my view, without consideration to taste.smile Having said that, though, I have been there and made the same mistakes, and found they can be easily corrected in later versions - if someone wants to make that correction.

 

In reply to Colin Fraser

Re: Ugly file picker...

by Mark Johnson -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Peer reviewers Picture of Plugin developers

It seems then that we're pretty much agreed that all the fields should use the same sort of button.  I'd still argue that if we're going to mess with it we should make it more "buttony" than the standard TinyMCE one, but I'd be just as happy to leave it with the regular one as long as it's consistent (as I'm using the 1.9 port of TinyMCE, this is what my users are used to anyway).

Colin, just FYI, changing the TinyMCE dialogue is actually just a case of HTML tinkering rather than PHP wizardry, although changing the file manager itself (which seems to be what you'd ultimately suggest) would require significantly more work.  I can see you point in wanting to achieve this, but find it hard to imagine a solution that's as simple as you'd like but as flexible as needed.

In reply to Mauno Korpelainen

Re: Ugly file picker...

by Mark Johnson -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Peer reviewers Picture of Plugin developers

I'd tend to suggest that TinyMCE is correct in this regard - putting what a button does on the button rather than "OK" everywhere is less ambiguous.  To have "OK" on every button that does a positive action is, to me, just consistency for consistency's sake rather than an actual usability benefit.

In reply to Mark Johnson

Re: Ugly file picker...

by Colin Fraser -
Picture of Documentation writers Picture of Testers

Mark, I absolutely agree that deliberately named buttons are clear and unambiguous. I agree also that usability is much more important than maintaining an impracticable (or worse) consistency. Look at Windows, proves this point abundantly at times. (And yes, I am somewhat overwhelmed by the complexity of the code and not deeply looking at it.. been away from any coding for over 10 years and never learned php, but I am persisting.)

Consider this, we have a black box in a file picker. The file picker is used for two different purposes, one is to select images and offer the user the opportunity to either upload and store or upload and use the image. The second purpose is to provide a course's writer the opportunity to create links to local or external files. When we look at these purposes they are actually very much identical, it is really only the end use that varies. (To complicate this we have two file pickers, one is a simple html form and the other is - I donno - complicated.) Do I care how the file picker does this?   No, I don't. It can be darkest voodoo magic or just a little old lady running at lightspeed to make the connections with unbreakable fishing line then dragging the files back. It is a black box. Who cares what goes on inside - not me!

Look at each of these things, they both have the same basic features, a title bar, a set of tabs, and two buttons at the bottom, Insert/Update and Cancel. The tabs are different and they have different elements on them - but I am not interested in the tabs, they are specific items. They are both almost identical on their first tab - the one you get when you open the form. The image picker uses a "button" that looks like a title or a bit of text. The link picker uses a smaller browse button off to the right end of the uppermost textinput box. Neither are really obvious, but the small browse button is more "intuitive" because it looks like a button.

What Mauno proposes, adding that same button in the same position the image picker is sensible and would probably not require too much work - delete one bit and include another on the same tab. May even be better than adding a third button below. Beginners are not going to want to get too involved in much past the first tab initially, the additional functionality is for later exploration. And that is where the whole thing comes unstuck for me. Without that same approach, across those two forms, it can confuse the beginner. And that is the person to whom all visual elements should be aimed. Who cares about the expert? They know what they are doing, it is the tryro that needs be catered for - and I think that may have been forgotten with some aspects of Moodle 2.0 - but that is another agument altogether. Anyway, if the beginner can look at something and work out what it is they are looking at, then that is an element that achieves a state of "intuitiveness".

Sorry about the length, but I hope I am making it clear now. Just the text "button" on the image file picker,  ugly, and inconsistent with the browse button on the link file picker. So replace the text button with a browse button located in the same place as it is on the link file picker, so they both use the same process to go look for a file. Or, replace the little browse button with an ugly text button in the same place that says, "Select/Create a link" or similar.