Better icon for WYSIWYG toggle

NanoSector · June 12, 2012, 10:31:05 AM

The current icon is...vague. Many users who don't know anything about it are like "ZOMG Y U NO ABLE TO SWITCH", so yeah

Perhaps something like a textarea with some elements in it will work..?

MrPhil · June 12, 2012, 12:37:03 PM

I agree that the icon isn't very intuitive. However, I'm not sure what could replace it, given the rather tiny amount of real estate available. Any examples from other forums? Off the top of my head, would there be room for

Code Select


    [tag]W[/tag]
         ->
       script W

(change to WYSIWYG mode), and its inverse,

Code Select


      script W
         ->
    [tag]W[/tag]

(change to BBCode mode), where "->" is a diagonal arrow pointing SE, and "script W" is a literal fancy font script "W"? It would probably be good to have two separate icons so it's clear which mode it's in right now. If there's not enough space, some form of "to BBCode" and "to WYSIWYG"?

You could use [bbc] instead of [tag] (although that might confuse some users who would first think of Auntie Beeb). I would not use a "tag" graphic (looking like a merchandise price tag), as that seems to be in widespread use for "tagging" blog posts, etc., and would introduce confusion.

QuoteZOMG Y U NO ABLE TO SWITCH

If that's the literacy level of your members, I think you have bigger problems than trying to find the WYSIWYG toggle....

NanoSector · June 12, 2012, 01:14:31 PM

Quote from: MrPhil on June 12, 2012, 12:37:03 PM
I agree that the icon isn't very intuitive. However, I'm not sure what could replace it, given the rather tiny amount of real estate available. Any examples from other forums? Off the top of my head, would there be room for
Code Select Expand
[tag]W[/tag] -> script W
(change to WYSIWYG mode), and its inverse,
Code Select Expand
script W -> [tag]W[/tag]
(change to BBCode mode), where "->" is a diagonal arrow pointing SE, and "script W" is a literal fancy font script "W"? It would probably be good to have two separate icons so it's clear which mode it's in right now. If there's not enough space, some form of "to BBCode" and "to WYSIWYG"?

You could use [bbc] instead of [tag] (although that might confuse some users who would first think of Auntie Beeb). I would not use a "tag" graphic (looking like a merchandise price tag), as that seems to be in widespread use for "tagging" blog posts, etc., and would introduce confusion.

Yeah I agree, something like that will work out.

Quote
QuoteZOMG Y U NO ABLE TO SWITCH
If that's the literacy level of your members, I think you have bigger problems than trying to find the WYSIWYG toggle....

Lol, probably me having a weak spot for that type of sentences

emanuele · June 24, 2012, 04:26:06 AM

What about an icon with [bbc] (when in HTML mode) and <HTML> (when in BBC mode)?

NanoSector · June 24, 2012, 05:01:28 AM

Quote from: emanuele on June 24, 2012, 04:26:06 AM
What about an icon with [bbc] (when in HTML mode) and <HTML> (when in BBC mode)?

Sounds awesome to me

emanuele · June 24, 2012, 05:06:40 AM

* emanuele waits for an icon to appear...

NanoSector · June 24, 2012, 05:27:39 AM

Quote from: emanuele on June 24, 2012, 05:06:40 AM
* emanuele waits for an icon to appear...

* Yoshi2889 can't design icons....

* Yoshi2889 then rips open the bag of Fugue icons

EDIT: Heck, there's not even a nice HTML icon in there, let stand BBCode...

Marcus Forsberg · June 24, 2012, 05:42:12 AM

* Marcus Forsberg tried to create said icons

* Marcus Forsberg failed miserably

* Marcus Forsberg thinks the BBC icons are too small to actually fit "<html>" and still have it readable.

* Marcus Forsberg does think [bbc] fits though.

* Marcus Forsberg will however say that he doesn't fully agree with having bbc vs html since it's not *really* a HTML mode, not to the user. It's BBC vs visual, at no point does the user have to actually edit pure HTML. So it's misleading.

* Marcus Forsberg also checked out his copy of Fugue

* Marcus Forsberg suggests using a brain icon for BBC and an eye for WYSIWYG

* Marcus Forsberg has had bad ideas before

* Marcus Forsberg stops writing like this and leaves the topic

MrPhil · June 24, 2012, 09:52:33 AM

Quote from: Marcus Forsberg on June 24, 2012, 05:42:12 AM
Marcus Forsberg does think [bbc] fits though.

I think most users would have no idea what "bbc" means. They might even think it has something to do with the British Broadcasting Corporation! I would suggest "[tags]" or something like that.

Quote
Marcus Forsberg will however say that he doesn't fully agree with having bbc vs html since it's not *really* a HTML mode, not to the user. It's BBC vs visual, at no point does the user have to actually edit pure HTML. So it's misleading.

Visual is the key here. What about a picture of an eye? I suggested a fancy script "W" to symbolize visual mode, but with a [tag] and arrow to make it clear this wasn't a font button. If you're going to use an eye or other "visual" metaphor (quill pen, fountain pen, even a pencil), be careful to call the mode "visual" instead of "WYSIWYG", or users will have a hard time making the connection.

None of this is going to do any good until SMF's WYSIWYG/Visual mode gets cleaned up. Going to and from visual mode should be perfectly reversible, with no change of tags or extraneous tags added. Then you can eliminate "Preview" and just have "Visual" double up as both a Preview mode and a means of WYSIWYG editing. Of course this means that quotes and code sections need to appear in their finished (visual) mode while being typed in in visual mode, and not as tags.

Arantor · June 24, 2012, 09:59:51 AM

QuoteOf course this means that quotes and code sections need to appear in their finished (visual) mode while being typed in in visual mode, and not as tags.

Which is a complete mess architecturally to fix, which is why it doesn't do that, and indeed doesn't attempt to convert most code that isn't 'simple'.

Behind the scenes, so much processing is done for these tags, it's unreal, to the point where truly switching between the two is not really possible (and is the case in other systems, e.g. TinyMCE's implementation in WordPress)

MrPhil · June 24, 2012, 11:11:52 AM

Quote from: Arantor on June 24, 2012, 09:59:51 AM
Which is a complete mess architecturally to fix, which is why it doesn't do that, and indeed doesn't attempt to convert most code that isn't 'simple'.

I'm not disputing that it's a major architectural challenge (in SMF's current WYSIWYG mode) to do such a thing as seamless quotes, code, and other "non-simple" tags. A true WYSIWYG/Visual mode should not show any tags, but only the finished product as readers will see it (thus able to double as a Preview mode).

Quote
Behind the scenes, so much processing is done for these tags, it's unreal, to the point where truly switching between the two is not really possible (and is the case in other systems, e.g. TinyMCE's implementation in WordPress)

To hold information on quotes and code (e.g., the language used), perhaps special HTML comments could be hidden in the WYSIWYG mode (e.g., the code header divs etc.code block content). Something like that. They would be removed when going to tag mode for [tag] edit and/or posting itself. Since HTML comments and tags seem to show within a <textarea> tag, it may involve changing to a <div contenteditable="true"> for the text entry area.

Add: contentEditable=true seems to be HTML5, so this would have to wait until HTML5 is prereq'd for the overall product (probably not before SMF 3).

Arantor · June 24, 2012, 11:15:57 AM

Quotetrue WYSIWYG/Visual mode should not show any tags, but only the finished product as readers will see it (thus able to double as a Preview mode).

That sounds wonderful, except that even WordPress which uses WYSIWYG by default has a mode for examining the code and has codes that cannot be expressed in WYSIWYG. Even XenForo does this, I'd hasten to add.

Bottom line is that there is no system out there currently that can cleanly do this, and to a point, nor should it attempt to do everything, because there are more things to go wrong than the benefits you'd get out of it.

MrPhil · June 24, 2012, 11:55:03 AM

I hear that there are businesses which refuse to switch away from WordPerfect (I think that's the one) because, unlike other word processors (including MS Word), it permits the internal markup tags to be examined and fiddled with for the utmost in control. I don't see why that can't ultimately be done for SMF. If you can hide HTML comments within the code, you can hide tag metadata used for reconstructing the original complex tags in tag (and post) mode. Of course, if you delete all the text within a quote tag, and all that's left is 0 or more whitespaces, the quote tag should probably be squeezed out when going to tag mode. Otherwise, leave it be during Visual editing so that the user can replace the contents with new text (I'll leave it to the ethicists as to whether that's still a "quote"...).

Come to think of it, if a browser simply ignores tag attributes it doesn't recognize, maybe you could add the metadata as an smf="type=code lang=PHP" attribute right in a standard tag, rather than as a comment.

Arantor · June 24, 2012, 11:59:36 AM

-sigh- I don't think I can explain why this just isn't going to work, but let me know if you ever see it happen anywhere in any system, since none of them currently do it, and there are actually moves back to bbc or similar code - WP recently introduced short-codes, which are very similar to bbc...

emanuele · June 24, 2012, 12:07:45 PM

MrPhill, what you are proposing is a kind of rewrite of parse_bbc in javascript.

I can't say I didn't dream about do something like this (Arantor, that would be just bbc => html in order to create an "on-the-fly" (onkeyup for example) preview instead of having to send it to php every time, so no need to come back from html to bbc), but that's something it would take a moment to write (at least for me, maybe someone else with more experience on javascript would be able to do it in less time).

Arantor · June 24, 2012, 12:17:45 PM

Here's the thing, it's not just the parser, you also need to rewrite the preparser as well, with all the warts attached to doing that.

And that's also before you get into things like the html exclusion for non-admins or indeed any bbcode with any database component (there aren't any in SMF itself, but it's certainly something I have to consider for Aeva Media)...

Like so many things, this is not something I am discussing theoretically

MrPhil · June 24, 2012, 12:19:45 PM

Quote from: emanuele on June 24, 2012, 12:07:45 PM
MrPhill, what you are proposing is a kind of rewrite of parse_bbc in javascript.

It could be done in JS, to avoid a round trip back to the server when switching in and out of Visual mode. If you're going to do that, consider sending just the tagged text to the browser and let it do the work of formatting tags into HTML not only for Visual editing but also for post display. Are there any cases where the necessary information for doing this formatting is not going to be available when the tagged text is thrown over the wall to the browser? I.e., requiring a database lookup, or getting other general data (not normally in the post itself)?

Relieving the server PHP parser of the burden of BBCode->HTML processing could certainly ease the load on the server and help many forum operators who are struggling with server load limits to breathe easier. Do you think it would be noticeably slower than the current server-side processing? It's worth thinking about, if done in such a way as to integrate it with Visual editing mode and Preview.

emanuele · June 24, 2012, 12:20:53 PM

Oh I know there would be *a lot* of things to do before... that's why i didn't even touch it yet, otherwise at least a branch would already exist.

Arantor · June 24, 2012, 12:24:30 PM

QuoteAre there any cases where the necessary information for doing this formatting is not going to be available when the tagged text is thrown over the wall to the browser? I.e., requiring a database lookup, or getting other general data (not normally in the post itself)?

Well, a list of enabled tags (not just the ones that have buttons for them!) and whether the user is an admin would be required to be sent to the JS side.

That's just in the base SMF package. There are a ton of mods that do something else which require a lookup of some description

Marcus Forsberg · June 27, 2012, 05:18:05 AM

Quote from: MrPhil on June 24, 2012, 09:52:33 AM
I think most users would have no idea what "bbc" means. They might even think it has something to do with the British Broadcasting Corporation! I would suggest "[tags]" or something like that.

Indeed, I only meant it fits on the button without being impossible to read. <html> does not and and still makes no sense. And I agree BBC is confusing, it sure had me stumped when I first started using forums years ago.

I do think an eye would be the way to go for WYSIWYG. Calling it "visual" makes sense since that's what it should be but since it isn't I wouldn't go with it. Besides, I think WYSIWYG is common enough for most people to understand it. If not, I for one would die to poke a button in the eye - literally, almost! - and I'm sure I'm not alone so those who don't know what WYSIWYG is will learn by simply trying it out.

Part of me does think that a brain would be cool to symbolise the BBC editor since it actually takes some thinking, especially before you've learned to use the tags. But part of me knows it's not a good idea since it will obviously be confusing ("Will this button blow my brain out and attach it to the post??? AWESOME!!!!").

Fugue has an icon called edit-code.png (<> basically) which could work along for tags along with the eye for WYSIWYG, but I can see it being confused as the code-tag, too.

application-terminal.png for BBC vs application-wave.png or application-image.png or application-blog.png for WYSIWYG is another idea.

Could go the simple way with document-text.png (or document-tag.png) vs document-text-image.png

tag-hash.png works for BBC, since... Well, it's a tag, with a # on it. Or just tags.png

slide.png might look cool for WYSIWYG. Still, an eye might be the best way to go in general.

projection-screen-presentation.png? Might be confused with the img-tag, though. Not likely, to me, however.

Took the liberty to attach all the suggestions above, too.

Edit: image-saturation-up.png is another WYSIWYG alternative. Not that clear, maybe, but if you think about it it makes some amount of sense.

News:

Better icon for WYSIWYG toggle

MrPhil

MrPhil

MrPhil

MrPhil

MrPhil