The dialog buttons should be standard (location, size), i.e. in the same order as in everywhere in Moodle between the so-called OK and the Cancel button.

For the advanced panels you can make the current and old colour rectangles smaller to make room for the K in CMYK.

Linear integer/float values should have sliders whenever possible to not force the user to use the keyboard since this is a mouse-oriented app.

When the user varies value and saturation in the simple/HSV view in the 2d control on the left, do not change the darkness/saturation of the 1d-control on the right (see how gimp does it). the user can see the feedback/change in the "active" color so it is not necessary to change it, and at extreme values of "value" or "saturation" the thing becomes entirely white or black which can be confusing.

Caveat emptor, though: it has not been usability tested so you have guarantees for nothing at all. Actually, it would be pretty darn easy to usability test this, since the use cases all blend together. The tasks could probably each just tell the user to draw different kind of a picture, and you would instantly see if they use the entire app fluently with minimal learning or not.

The fact that the active tool that has settings disappears from view when you access its settings seems risky, but with the space restrictions we have it may be the best solution.

This is not a commentaru of the icons, themselves, except I do think the clear icon still needs to be something else than 'new' and Balsamiq's idea of an "image" icon seems to be closer to the default people have gotten used to in word processor etc. (a mountain view) so if that was used it would be more probable that people would not think it is some strange butterfly functionality but the image adding command they know from other programs.

Also, a bit of a regrouping of the drawing tools to have the related tools together. The upper left rectangle is supposed to be the select tool. The two rectangles next to each other are supposed to be the line tool and the bezier tool. I see the pen/brush as the first tool to try when playing around (this is very subjective though) so moved it to the first spot.

No change to the color selection buttons, just was too much trouble to make balsamiq have them look like they are supposed to.

It is kinda risky for me to suggest changes like this but then, there is no verification for your design either in terms of user testing so there seems to be no additional risk in changing the UI to communicate its the functionality of its controls more clearly.

If you really want an 'about' box even in Moodle (does any other component such as tinymce do this), do change the icon. If it is a question mark people expect to have context sensitive help.

You can play with the demos online at:

http://www.robodesign.ro/paintweb/trunk/demos/

I just tried your demo for the first time and I have some UI feedback as a very new user that may be helpful:

1) I had trouble finding the edit button in TinyMCE (the PW icon).

• PW doesn't mean anything to new users, and wouldn't work for other languages.
• I was expecting an edit icon like the one we use in Moodle (hand holding a pen).
• I right clicked on the Image and hoped it might be under "Insert/Edit Image" in that menu. It wasn't.

2) Once I did find it I was a bit disoriented the way the interface switched on me. I thought for a second I was on a new page.

• Some hint that we are still in Tiny MCE would be good
• The bigger buttons are a bit confusing (in the TinyMCE context).

3) I had trouble finding out how to save the edited image.

• I found the "floppy disk" icon eventually. Is this icon relevant these days?
• Something "Save and return to the text editor" would be good.
• Perhaps Save and Cancel buttons would be a good thing to emulate here.

Thanks for your feedback. It's really appreciated.

1.

• Hmm, good point. We can change the icon, no worries.
• Can't do much about the "insert/edit image" context menu. That's added by TinyMCE and I cannot change their "insert/edit image" dialog without any API. The only ugly way would be to patch their files - but I'd like us to keep things separate, so users can upgrade their tinymce installation without fear of breakage. It would be better if the menu item would be renamed to "edit image attributes" because that's what it really does.

2.

• We could do something like "Editing image from TinyMCE" to let the user know he didn't loose the article.
• Not sure what to do about the icons. I find the TinyMCE icons far too small, even ugly (the default ones).
• Regarding the interface switch, a change might come. As I see, TinyMCE is used sometimes with small textareas, in which PaintWeb's user interface cannot fit. This means, I might change the PaintWeb initialization to show up on top of the whole page.

3. I completely agree. This kind of work is already planned.

• The floppy disk icon is typically used in many of today's applications for the "file save" operation. Sure, it's outdated, but it matters the concept. Once we have the "Save" and "Cancel" buttons, we can remove the "Save" icon from the main toolbar, if desired.

• I have already planned to add "save" (to save the changes and return to tinymce) and "cancel" (to cancel any image changes and return to tinymce).

Thanks again.

I would like feedback on my integration work for Moodle 2. Please check my latest forum discussion:

http://moodle.org/mod/forum/discuss.php?d=130337

Thank you!

I have addressed the "PW" icon issue. I changed the icon. Please let me know if that's fine.

I have also addressed the issue regarding confusion when switching from TinyMCE to PaintWeb. Now there's a yellow "info bar" telling users they switched from TinyMCE to PaintWeb to edit the selected image. The info bar also addresses the issue you reported about "finding the way out from PaintWeb": the bar holds two buttons now, one "Save" and another "Cancel".

Please let me know if these changes satisfy your requests for improvements.

Thank you very much!

one of the "most tiny things": if you change the size of paintweb icon from 15x15px to 20x20px (leave some empty space around your original icon) icon looks much better in toolbar of tinymce. All icons that are smaller than 20x20px get scaled to 20x20px in advanced theme of tinymce.

As I never reported this anywhere else but in chat (I think?): if I could make just one wish, it would be this . There are ready-made implementations so in case you get tired of me whining during an idle afternoon this might be just the thing .

Please make controls manipulable by mouse. As drawing apps are used primarily by mouse and keyboard usage of most tools is at best an alternative for those who have no choice, switching to the keyboard to select numerical values really slows the user experience down.

SpinnerButton
Spinner component that accepts integer input from the user and provides buttons to increase/decrease the value. You can set the initial value, increment, and low and high values. (http://publib.boulder.ibm.com/infocenter/ablxhelp/v8r4m0/index.jsp?topic=/com.ibm.db2.abx.ref.doc/reference65.html )

http://developer.yahoo.com/yui/3/examples/widget/widget-extend.html
http://www.switchonthecode.com/tutorials/javascript-controls-the-spin-control

You are indeed correct. I have already planned to make the inputs of type=number usable with the mouse - this is noted in the TODO list I have in the Google Code wiki.

There's tons of stuff I could do when I am bored, hehe. I hope to get to do all these things as soon as possible.

The presentation can be downloaded from:
http://www.robodesign.ro/paintweb/lvle2009/presentation_en.pdf

Or, if you prefer, you can watch it online:
http://www.scribd.com/doc/19266942/The-development-and-integration-of-the-PaintWeb-paint-tool-in-Moodle

In these slides I describe the work I did on my Google Summer of Code project.

Any feedback is welcome. Thanks!