The best UIs in Moodle? (Moodle User Interface Guidelines)

The best UIs in Moodle? (Moodle User Interface Guidelines)

by Olli Savolainen -
Number of replies: 21
A skeleton for Moodle User Interface Guidelines is now online.

If there is an UI in Moodle that you think deserves the status of a Moodle Guideline and being used in Moodle more widely, speak now! (Or...? smile)

All that is there already is open for your thoughts and criticism: the form and the content. In particular, I would like to hear if the structure of a guideline (most apparent in the template) seems to suit your needs.

This effort needs as many eyes on it as possible, as it's success depends entirely on you, Moodlers.

Thanks!
Average of ratings: -
In reply to Olli Savolainen

Re: The best UIs in Moodle? (Moodle User Interface Guidelines)

by Tim Hunt -
Picture of Core developers Picture of Documentation writers Picture of Particularly helpful Moodlers Picture of Peer reviewers Picture of Plugin developers
Looks like a good start to me, but I would like to hear what others think.


One specific comment:

On Development:Big_Select_List. Context could be somthing like

The user had to choose a particular Student, or course. Remember that the largest Moodle sites have hundreds of thousands of users, tens of thousands of courses, and some moodle coures contain over a thousand students. On the other hand, an complete list of all optitions becomes awkward to work with before it reaches 100 entries, even if it is sorted alphabetically.
Average of ratings: -
In reply to Tim Hunt

Re: The best UIs in Moodle? (Moodle User Interface Guidelines)

by Olli Savolainen -
Thanks, Tim.

The thing is, it is not supposed to be the context for the user, but the context in which to use the guideline. I was wondering about that earlier, too... is it too abstract to have a context for using a guideline, it seems it will always be sth like "you are designing an UI for Moodle". It makes more sense with progressive disclosure, but not that much - maybe I will remove the entire context section. What I love about the pattern format is how the forces section works.

I was wondering if that control could be used with other really big lists also, it seems generalizable - that is why its name isn't Big User List. I will have to think of something to make the difference between a guideline and an example of using it in Moodle clearer.
Average of ratings: -
In reply to Tim Hunt

Re: The best UIs in Moodle? (Moodle User Interface Guidelines)

by Mike Worth -
If this is decided as the 'proper' way to do things, could it be an element type for formslib forms?

Also is there a reason why the search can't use javascript, if it's available, to search while typing; obviously retaining the option of reloading to show results?

Mike
Average of ratings: -
In reply to Mike Worth

Re: The best UIs in Moodle? (Moodle User Interface Guidelines)

by Olli Savolainen -
I agree that when designs are standardized it is great to get a burden off the developers and include them in libraries.

Actually it seems that the search already works with javascript in 2.0 at least.

I am wondering how detailed it makes sense to model the interaction in the guidelines. Of course something defined as standard in Moodle has to be the same everywhere. On the other hand, does describing every detail verbally really help, or just clutter the guidelines up? Could the existing UIs, to which the guidelines just point, act as the reference implementations that give the details?
Average of ratings: -
In reply to Tim Hunt

Re: The best UIs in Moodle? (Moodle User Interface Guidelines)

by Hubert Chathi -
Another data point for the "Big Select List": the bulk user actions page has a similar but different interface. The positions of the "selected" and "available" users are swapped, the "filter" (rather than search) box is at the very top, and the add/remove buttons are below the lists, rather than between the lists.
Average of ratings: -
In reply to Hubert Chathi

Re: The best UIs in Moodle? (Moodle User Interface Guidelines)

by Tim Hunt -
Picture of Core developers Picture of Documentation writers Picture of Particularly helpful Moodlers Picture of Peer reviewers Picture of Plugin developers
Yes. I did not know about the bulk actions UI when I was making changes to the roles UI in Moodle 2.0.

Bulk actions UI is great functionality, but could really do with some love form someone who cares more about UI - if anyone fancies a project.
Average of ratings: -
In reply to Tim Hunt

Re: The best UIs in Moodle? (Moodle User Interface Guidelines)

by Nadav Kavalerchik -
Picture of Core developers Picture of Plugin developers Picture of Testers Picture of Translators
Tim,
please have a look at ("Assign Roles" UI): http://tracker.moodle.org/browse/MDL-17780
(i think Olli is already familiar with this)

and the same UI approach in "Participants list"
http://tracker.moodle.org/browse/MDL-19285

if there is another place in Moodle that this approach should apply to please let me know and i will fix it smile
Average of ratings: -
In reply to Olli Savolainen

Re: The best UIs in Moodle? (Moodle User Interface Guidelines)

by Anthony Borrow -
Picture of Core developers Picture of Plugin developers Picture of Testers
I've added some examples of where we are not making effective use of the checkbox to Development:Checkbox. For example, most of the activity modules use dropdown yes and no and occasional questions rather than the checkbox. Peace - Anthony
Average of ratings:Useful (1)
In reply to Anthony Borrow

Re: The best UIs in Moodle? (Moodle User Interface Guidelines)

by Nicolas Connault -
You make a good point here. We should question these types of UI issues in Moodle because they are often a result of ... ahem.. laziness? The very handly little function for printing a yes/no menu in weblib doesn't have an equivalent in checkbox form, so developers have been using that everywhere. That's what I think anyway ;)
Average of ratings: -
In reply to Nicolas Connault

Re: The best UIs in Moodle? (Moodle User Interface Guidelines)

by Frank Ralf -
What about changing this formslib function so it creates two radio buttons with yes/no instead of that dropdown menu?

See "Alternatives to yes/no dropdown menus?" for further aspects.

Cheers
Frank
Average of ratings: -
In reply to Frank Ralf

Re: The best UIs in Moodle? (Moodle User Interface Guidelines)

by Tim Hunt -
Picture of Core developers Picture of Documentation writers Picture of Particularly helpful Moodlers Picture of Peer reviewers Picture of Plugin developers
Are we, perhaps, engaging in a discussion about what colour the bike shed should be, when there are more important usability problems throughout Moodle.

So, it takes two mouse clicks to change the choice from yes, to no. On the other hand, it is clear to all users what the current setting is and how to change it, and this is, at least, consistent throughout Moodle at the moment.
Average of ratings: -
In reply to Tim Hunt

Re: The best UIs in Moodle? (Moodle User Interface Guidelines)

by Matt Gibson -
Perhaps, but small things can often make a big difference to people and it would be far easier and quicker to have a single checkbox for yes/no. If the label has its onclick function set to toggle the checkbox value too, then there's only one click needed, a bigger area to aim for and no extra space taken up.

Seems like an easy win.
Average of ratings:Useful (1)
In reply to Matt Gibson

Re: The best UIs in Moodle? (Moodle User Interface Guidelines)

by Tim Hunt -
Picture of Core developers Picture of Documentation writers Picture of Particularly helpful Moodlers Picture of Peer reviewers Picture of Plugin developers
The only problem is that consistently all fields in a Moodle form have the label on the left, and the form field on the right, and for a checkbox it is conventionally the other way round.

If there was a solution to that, then I agree it should be a checkbox.
Average of ratings: -
In reply to Tim Hunt

Re: The best UIs in Moodle? (Moodle User Interface Guidelines)

by Frank Ralf -
IMO some of formslib's templates in the MoodleQuickForm_Renderer() might need some reworking anyhow because there are some problems with all those added default elements. And even now add_checkbox provides for an optional label to the right. See User:Frank_Ralf/Moodle_forms2 for a detailed analysis (work in progress).

hth
Frank
Average of ratings: -
In reply to Tim Hunt

Re: The best UIs in Moodle? (Moodle User Interface Guidelines)

by Olli Savolainen -
In forms checkboxes should have a scannable short label on the left, so that items are easy to find, and the label of the checkbox on its right side should describe the exact meaning, such as the following in wordpress:

Membership [ ] Anyone can register

http://demo.opensourcecms.com/wordpress/wp-admin/options-general.php
user:admin
pass:demo123

Then we still need to design how the default should be expressed.
Average of ratings: -
In reply to Olli Savolainen

Re: The best UIs in Moodle? (Moodle User Interface Guidelines)

by Tim Hunt -
Picture of Core developers Picture of Documentation writers Picture of Particularly helpful Moodlers Picture of Peer reviewers Picture of Plugin developers
Ah, that makes sense! I finally get it.
Average of ratings: -
In reply to Tim Hunt

Re: The best UIs in Moodle? (Moodle User Interface Guidelines)

by Olli Savolainen -
Great. I'll add this to the guideline.

A technical question originating from Jeff. I remember last summer that I changed a checkbox element so that it was inside the label element for it, and this way you would not need the "for" attribute for the label element since the two would be associated by the label being parent to the checkbox. I can not remember to solve which problem I did this. Should this be the recommended way of doing it - is there better browser support for either way, or something?
Average of ratings: -
In reply to Olli Savolainen

Re: The best UIs in Moodle? (Moodle User Interface Guidelines)

by Tim Hunt -
Picture of Core developers Picture of Documentation writers Picture of Particularly helpful Moodlers Picture of Peer reviewers Picture of Plugin developers
I have a feeling that input inside label does not work in some browsers, probably IE. Worth checking.
Average of ratings: -
In reply to Tim Hunt

Re: The best UIs in Moodle? (Moodle User Interface Guidelines)

by Olli Savolainen -
(Sidethought: In wordpress, if many of the options on the right side are related, they are grouped under one caption, captions being the titles on the left. This is done with fieldset and the caption is a legend element. But in Moodle, fieldsets are used for grouping bigger wholes. We can not get to the simplicity of wordpress anytime soon, so here we probably need a different approach.

Still, I think Moodle can benefit from having the short captions for checkboxes on the left, to provide scannability. The other option would be to have nothing on the left since the label belongs on the right.)
Average of ratings: -