David Scotson

There's a very good definition of "intuitive" here: http://www.uie.com/articles/design_intuitive/

key excerpt (but read the whole thing, it's very good if you like this kind of thing):

The Two Conditions of Intuitive

In our research, we've discovered that there are two conditions where users will tell you an interface seems 'intuitive' to them. It only takes meeting one of the two conditions to get the user to tell you the design is intuitive. When neither condition is met, the same user will likely complain that the interface feels 'unintuitive'.

Condition #1:

Both the current knowledge point and the target knowledge point are identical. When the user walks up to the design, they know everything they need to operate it and complete their objective.

Condition #2:

The current knowledge point and the target knowledge point are separate, but the user is completely unaware the design is helping them bridge the gap. The user is being trained, but in a way that seems natural."

It's a word I avoid myself, because people often use it to mean "better/easier" (e.g. Apple's software is "more intuitive" than Windows) and ignore the context, (e.g. Apple software is not more intuitive to someone using nothing but Windows for the last 10 years), but I find the framework given in my link is great for getting to the bottom of what's actually wrong when people complain about something being "unintuitive".

To answer one of my own questions, you can change a couple of things about TinyMCE in the settings page:

/admin/settings.php?section=editorsettingstinymce

One is the spellchecking engine and languages, the other is the fonts.

Do you think anyone would be interested in updating the Moodle defaults to something a bit more 21st century?

For example, Bootstrap's default fonts (which I think are one of their weaker areas, but still...) are, in Moodle settings format:

 

Sans-Serif="Helvetica Neue", Helvetica, Arial, sans-serif;

Serif=Georgia, "Times New Roman", Times, serif;

Monospaced=Monaco, Menlo, Consolas, "Courier New", monospace;

 

It looks like this gets included by TinyMCE so you have to make sure your rules overrule this (or edit it) if you want your styles to come through:

from lib/editor/tinymce/tiny_mce/3.5.1.1/themes/advanced/skins/o2k7/content.css

Though on my first go at editing it (removing everything not specifically marked .mceWhatever) I couldn't get the changes to register, which reminds me of when I was trying to get editor.css to work in the first place. Anyone know how to force this file to refresh?

A quick Google gave me this:

"Note: updating the actual content.css will have no effect. You need to create a copy and reference it in tinyMCE.init()" Anyone know where to do this for Moodle? I'm guessing that's where you can make all sort of other changes to TinyMCE.

 

body, td, pre {color:#000; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10px; margin:8px;}

body {background:#FFF;}

body.mceForceColors {background:#FFF; color:#000;}

h1 {font-size: 2em}

h2 {font-size: 1.5em}

h3 {font-size: 1.17em}

h4 {font-size: 1em}

h5 {font-size: .83em}

h6 {font-size: .75em}

.mceItemTable, .mceItemTable td, .mceItemTable th, .mceItemTable caption, .mceItemVisualAid {border: 1px dashed #BBB;}

a.mceItemAnchor {display:inline-block; width:11px !important; height:11px  !important; background:url(../default/img/items.gif) no-repeat 0 0;}

span.mceItemNbsp {background: #DDD}

td.mceSelected, th.mceSelected {background-color:#3399ff !important}

img {border:0;}

table, img, hr, .mceItemAnchor {cursor:default}

table td, table th {cursor:text}

ins {border-bottom:1px solid green; text-decoration: none; color:green}

del {color:red; text-decoration:line-through}

cite {border-bottom:1px dashed blue}

acronym {border-bottom:1px dotted #CCC; cursor:help}

abbr {border-bottom:1px dashed #CCC; cursor:help}



/* IE */

* html body {

scrollbar-3dlight-color:#F0F0EE;

scrollbar-arrow-color:#676662;

scrollbar-base-color:#F0F0EE;

scrollbar-darkshadow-color:#DDD;

scrollbar-face-color:#E0E0DD;

scrollbar-highlight-color:#F0F0EE;

scrollbar-shadow-color:#F0F0EE;

scrollbar-track-color:#F5F5F5;

}



img:-moz-broken {-moz-force-broken-image-icon:1; width:24px; height:24px}

font[face=mceinline] {font-family:inherit !important}

*[contentEditable]:focus {outline:0}



.mceItemMedia {border:1px dotted #cc0000; background-position:center; background-repeat:no-repeat; background-color:#ffffcc}

.mceItemShockWave {background-image:url(../../img/shockwave.gif)}

.mceItemFlash {background-image:url(../../img/flash.gif)}

.mceItemQuickTime {background-image:url(../../img/quicktime.gif)}

.mceItemWindowsMedia {background-image:url(../../img/windowsmedia.gif)}

.mceItemRealMedia {background-image:url(../../img/realmedia.gif)}

.mceItemVideo {background-image:url(../../img/video.gif)}

.mceItemAudio {background-image:url(../../img/video.gif)}

.mceItemIframe {background-image:url(../../img/iframe.gif)}

.mcePageBreak {display:block;border:0;width:100%;height:12px;border-top:1px dotted #ccc;margin-top:15px;background:#fff url(../../img/pagebreak.gif) no-repeat center top;}

.mceHideBrInPre pre br {display: none}

 

After taking a second look it appears to be picked up now, but is being partly overwritten by a file called content.css (which among other things makes some of the text 10 pixels high). Where is that coming from? Part of TinyMCE itself?

On a similar subject can you edit anything else about TinyMCE without hacking core Moodle? The insert and cancel buttons being on the wrong sides keeps catching me out. I'd love to replace the font list with something more semantic too.

I generated an editor.css file for my bootstrap theme, but could never get it to be picked up by the editor. Is there some trick to it?

I know you have to specify it in the theme config, anything eles you need to do?